12 2020 档案
摘要：使用vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。 父子组件之间的通信 1）props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: // 父组件 <template
阅读全文
摘要：Angular 作为一款优秀的前端框架，自诞生之日起，就致力于面向前端开发者提供一整套全功能解决方案。与其他流行框架所追求的理念不同，Angular并非作为一款可以并入 Web 应用程序的轻量级框架而生，而是设计为：包含了一个完整的工作流，用于从项目创建开始，持续地维护并更新你的应用程序。 2019
阅读全文
摘要：本篇 react native 库列表不是从网上随便找的， 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有，但经过大量研究并在我的程序中尝试后，我选择了这些库。 15. React Native Animatable 这个库非常适合快速地向 react Native 应用程序添加简单
阅读全文
摘要：Create react App（以下简称 CRA）是创建 react 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。 但是对于一些熟悉 webpack 的开发者来说，他们可能想
阅读全文
摘要：之前使用react.forwardRef始终无法应用于react高阶组件中，最近终于捣鼓出来了，于是记录下来。关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。 一、React.forwardRef使用示例 下面就是应用到React组件的错误示例： c
阅读全文
摘要：从今天开始，你可以在任何 react Native 应用程序中使用尽可能少或尽可能多的 Expo SDK。 我们已经花了很多时间构建和维护这些包含原生应用特性的跨平台 API，我们很高兴最终实现了向整个 react Native 生态共享这些 API，并将它们作为一个整体继续优化。 Expo 未来的
阅读全文
摘要：在开发小程序的时候，我们总是期望用以往的技术规范和语法特点来书写当前的小程序，所以才会有各色的小程序框架，例如 mpvue、taro 等这些编译型框架。当然这些框架本身对于新开发的项目是有所帮助。而对于老项目，我们又想要利用 vue 的语法特性进行维护，又该如何呢？在此我研究了一下youzan的 v
阅读全文
摘要：Flutter默认是单线程任务处理的，如果不开启新的线程，任务默认在主线程中处理。 事件队列 和iOS应用很像，在Dart的线程中也存在事件循环和消息队列的概念，但在Dart中线程叫做isolate。应用程序启动后，开始执行main函数并运行main isolate。 每个isolate包含一个事件
阅读全文
摘要：Code Splitting是webpack的一个重要特性，他允许你将代码打包生成多个bundle。对多页应用来说，它是必须的，因为必须要配置多个入口生成多个bundle；对于单页应用来说，如果只打包成一个bundle可能体积很大，导致无法利用浏览器并行下载的能力，且白屏时间长，也会导致下载很多可能
阅读全文
摘要：Node.js本质上是一个JavaScript的运行环境。 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。 V
阅读全文
摘要：一、什么是 npm 脚本？ npm 允许在package.json文件里面，使用scripts字段定义脚本命令。 { // ... "scripts": { "build": "node build.js" } } 上面代码是package.json文件的一个片段，里面的scripts字段是一个对象
阅读全文
摘要：react hook发布也已经有几个月了，相信有部分人已经开始使用了，还有些人在犹豫要不要用，可能更多人安于现状，没有要用的打算，甚至还有很多公司的react版本是15或以下的，迫于升级的难度没有使用。以我个人的观点，要不要使用react hook呢？ 建议用的的人 项目react版本已经是reac
阅读全文
摘要：前言 reactjs中事件处理，与DOM元素处理类似，但也有一些不同的语法。 react 事件名称使用驼峰命名，而不是全小写命名。使用jsX，可以将函数作为事件处理程序传递，而不是字符串。 es6的class语法规定，类的方法内部，如果含有this，它默认指向类的实例。但是，单独使用该方法，可能报错
阅读全文
摘要：react 是 JavaScript 社区的新成员，尽管 jsX （在 JavaScript 中使用 html 语法）存在一定的争议，但是对于虚拟 DOM 人们有不一样的看法。 对于不熟悉的人来说，虚拟 DOM 可以描述为某个时刻真实DOM的简单表示。其思想是：每次 UI 状态发生更改时，重新创建一
阅读全文
摘要：react 是现在最流行的 JavaScript 库之一。使用 react 可以非常轻松地创建 Web 用户交互界面。 它的成功有很多因素，但也许其中一个因素是清晰有效的编程方法。 在 React 的世界中，UI 是由一个一个组件所组成的。组件可以组合在一起以创建其他组件， 应用本身就是一个包含了所
阅读全文
摘要：在平时开发中我们经常会用到webpack这个时下最流行的前端打包工具。它打包开发代码，输出能在各种浏览器运行的代码，提升了开发至发布过程的效率。 我们知道一份webpack配置文件主要包含入口（entry）、输出文件（output）、模式、加载器（Loader）、插件（Plugin）等几个部分。但如
阅读全文
摘要：Node 起源 Node是由Ryan Dahl创造出来的，Ryan Dahl是一名资深的C/C++程序员，在创造出Node之前，他的主要工作都是围绕高性能web服务器来展开的，他找到了设计高性能web服务器的几个要点：事件驱动、非阻塞I/O，基于对已有的几种语言的对比和考量，Ryan Dahl选择了
阅读全文
摘要：写作背景 接触小程序有一段时间了，总得来说小程序开发门槛比较低，但其中基本的运行机制和原理还是要懂的。“比如我在面试的时候问到一个关于小程序的问题，问小程序有window对象吗？他说有吧”，但其实是没有的。感觉他并没有了解小程序底层的一些东西，归根结底来说应该只能算会使用这个工具，但并不明白其中的道
阅读全文
摘要：我非常喜欢使用 Node.js，但是当涉及到计算密集型的场景时 Node.js 就不能够很好地胜任了。而在这样的情况下 C++ 是一个很好的选择，非常幸运 Node.js 官方提供了C/C++ Addons 的机制让我们能够使用 V8 API 把 Node.js 和 C++ 结合起来。 虽然在 No
阅读全文
摘要：angular的国际化方案，采用ngx-translate来实现。 安装模块： npm install @ngx-translate/core --save 在根模块中导入： // other module import {TranslateModule} from '@ngx-translate/
阅读全文
摘要：MVC 那时计算机世界天地混沌，浑然一体，然后出现了一个创世者，将现实世界抽象出模型形成model，将人机交互从应用逻辑中分离形成view，然后就有了空气、水、鸡啊、蛋什么的。——《前端MVC变形记》 MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式
阅读全文
摘要：一.setImmediate 目前只有IE10+和Nodejs支持该API。 立即触发回调函数，使其进入宏任务队列（macro task queue) 语法： // 只有一个参数 setImmediate(callback) 比setTimout(fn, 0)的执行顺序要快，性能也更高。因为setT
阅读全文
摘要：绑定确实是个有趣的话题。 现在我的绑定器有了不少的功能 1. 附着在Object对象上，一切以对象为中心 2. 与页面元素进行双向绑定 3. 与任意对象绑定，主要是应用在绑定到页面元素的一些属性上，比如style，当然也可以绑定到任意用户自定义的对象上 4. 可以绑定到方法，让对象具有AddEven
阅读全文
摘要：对象遍历 为了便于对象遍历的测试，我在下面定义了一个测试对象 obj。 测试对象 // 为 Object 设置三个自定义属性（可枚举） Object.prototype.userProp = 'userProp'; Object.prototype.getUserProp = function()
阅读全文
摘要：需求 这是从一个项目中提取的需求。 大致的思路是： 通过获取后端的一系列人员的点位信息，在前端模拟人员的一段时间内的行动过程。 我们的开发人员首先想到的思路是，把获取的点位列表信息，每两个取取来，组成一条直线路径。然后基于每一条直线路径，创建一个动画Animate对象。（Animate是我们内部的一
阅读全文
摘要：前言 Event Loop是计算机系统的一种运行机制，是个很重要的概念。而JavaScript用这种机制来解决单线程运行带来的问题。理解很熟悉将会有利于我们更容易理解vue的异步事件。 JavaScript是单线程的 1、什么是单线程？ 单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必
阅读全文
摘要：Promise.resolve等价于下面的写法 有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。 Promise.resolve('foo') // 等价于 new Promise(resolve => resolve('foo')) Promise.
阅读全文
摘要：Math.random()函数返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1) 生成n-m，包含n但不包含m的整数： 第一步算出 m-n的值，假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步parseInt(Math.random()*w
阅读全文
摘要：方法一： 遍历当前数组，并创建一个暂存容器，每次遍历时，出现一个随机索引，使用随机索引，获取数组中一个随机的值，取出到暂存容器，然后根据当前循环次数的索引，获取数组中的值，放入原来取出的地方，最后把暂存容器的值，赋值给当前循环次数的索引的值，实现随机排序；（即三个容器间的交互） var arr =
阅读全文
摘要：允许包装在mixin中定义的css块。 分离的规则集是一组css属性、嵌套规则集、媒体声明或者是存储在变量中的任何其他内容，我们可以将它包含在规则集中或其他结构中，并且所有属性都将复制到那里；我们还可以将它用作mixin参数，并将它作为其他任何变量传递。 // 声明分离的规则 @rule_set:
阅读全文
摘要：迭代器是ES2015中新增的规范，与之相关的for...of也是ES2015新增的。 本文来深入研究一下迭代器是什么，以及迭代器能够干什么？ 或许你对for ... of的执行还不了解，比如什么情况下可以使用for ... of去遍历对象，什么情况下会报错等等，这篇文章应该能帮到你。 迭代器协议 f
阅读全文
摘要：测试的类型 测试是用来检查你代码的代码。测试会使你对自己的程序更有信心。它们还能够防止你在修复一个 bug 时生成另一个 bug。你可以测试程序的方方面面，从单个函数及其返回值到在浏览器中运行的复杂程序。由于这是本课程的第一篇文章，因此我会简要对比一些流行的测试类型。 单元测试 单元测试覆盖了代码块
阅读全文
摘要：首先我们要进行js进度条的布局 js进度条布局如下： </script> <style type="text/css" id='css'> #progress { position: fixed; background: #000; top: 0; left: 0; width: 100%; hei
阅读全文
摘要：1、前言 在平时工作开发中，大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码，很多情况下都是以他人成果为基础的，或者新增修改需求，自己写的代码也会被其他开发人员调用，所以写好一份高质量可维护的代码就显得十分重要。 2、什么是可维护代码 可维护代码需要遵循以下几个特点。 1.
阅读全文
摘要：什么是尾调用？ 尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。 function f(x){ return g(x); } 上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下三种情况，都不属于尾调用。 //
阅读全文
摘要：js判断对象是否为空对象 判断一个对象是否为空对象，本文给出三种判断方法： 1、最常见的思路，for...in...遍历属性，为真则为“非空数组”；否则为“空数组” function judgeObj(Obj){ for(var attr in Obj){ return alert('非空对象')
阅读全文
摘要：1、断开原因 WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。 ws.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClea
阅读全文
摘要：引言 闭包就是指 能够访问另一个函数作用域的变量的函数 ,闭包就是一个函数,能够访问其他函数的作用域中的变量,js有一个全局对象,在浏览器下是window,node下是global,所有的函数都在这个对象下,也能访问这个对象下的变量,这也就是说, js中的所有函数都是闭包 闭包的定义 函数与对其状态
阅读全文
摘要：什么是事件 我想你很可能听说过事件驱动, 但是事件驱动到底是什么？为什么说浏览器是事件驱动的呢？为什么 Nodejs 也是事件驱动的 ？ 两者是一回事么？ 实际上不管是浏览器还是 Nodejs 都是事件驱动的，都有自己的事件模型。在这里，我们只讲解浏览器端的事件模型，如果对 Nodejs 事件模型感
阅读全文
摘要：sort() 方法是最强大的数组方法之一。 数组排序 sort() 方法以字母顺序对数组进行排序： 实例 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // 对 fruits 中的元素进行排序 反转数组 rev
阅读全文
摘要：前言 之前有简单看过 vue patch 部分的源码，了解了是基于 Snabbdom 库实现的。最近想详细了解下 vue 处理 vnode patch 的整个过程，想知道它在 Snabbdom 之上做了哪些事情？所以带着这个问题，写了这篇文章来记录。 Snabbdom 做了哪些事？ A virtua
阅读全文
摘要：引言 当我们谈起 nodejs 时，由于 JavaScript 只能在单线程上运行， 导致 一个 Node 进程只能运行在一个CPU上， 无法发挥现代 CPU 多核的特性。 这对于一个 服务端语言来说， 是比较掣肘其发展的。 好在 Node 在 v0.10 后， 可以使用 Cluster 模块搭建
阅读全文
摘要：前提条件 本文适用于所有使用 vue 的开发人， 包括初学者。在阅读本文之前，你应该具备一些前提条件： Node.js 10.x或更高版本。在终端或命令提示符下运行 node -v 来验证你的版本 npm 6.7 或以上版本 代码编辑器；我强烈推荐 Visual Studio Code 把最新版本的
阅读全文
摘要：在开发项目时，我们或许需要一份精致的开发文档，那么使用docsify是不错的选择，docsify是一个文档生成工具，它直接加载 Markdown 文件并动态渲染，同时还可以生成封面页。所以我们只需要写完 Markdown 文档，就可以看到文档页面了。 特性 无需构建无需编译，写完markdown文档
阅读全文
摘要：微服务架构的目标是帮助工程团队更快、更安全、更高质量地交付产品。拆分服务允许团队快速迭代的同时，保证了对系统剩余部分的最小影响。 在Medium，我们的技术堆栈始于2012年的单体Node.js应用程序。我们已经构建了几个卫星服务，但我们还没有制定一个系统地采用微服务架构的策略。 随着系统变得越来越
阅读全文
摘要：本文对比的是 UIWebView、WKWebView、flutter_webview_plugin（在 iOS 中使用的是 WKWebView）的加载速度，内存使用情况。 测试手机：iPhoneX 系统：iOS12.0 加载速度对比 测试网页打开的速度，只需要获取 WebView 在开始加载网页和网
阅读全文
摘要：前言 前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. 需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...
阅读全文
摘要：小程序开发血泪史 小程序发展初期 框架不稳定 更新频繁 bug 众多 随着微信小程序的发展，微信小程序以基本不存在上述的问题，而其它新兴的小程序厂商则还在此阶段，对于小程序开发者来说，如果要接入微信小程序之外的平台，以上的问题是技术方案评估环境必须要衡量的问题。 小程序发展中期 开发体验提升 组件式
阅读全文
摘要：Route 所谓路由管理，就是管理页面之间如何跳转，也被称为导航管理。这和原生开发类似，无论是Android还是iOS，导航管理都是通过维护一个路由栈来实现的，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作。在Flutter开发中，实现页面跳转需要同时使用Rout
阅读全文
摘要：了解 html 的读者一定听说过 DOM 树这个概念，它由页面中每一个控件组成，这些控件所形成的一种天然的嵌套关系使其可以表示为 “树” 结构，我们也可以将这个概念应用在 Flutter 中，例如默认的计数器应用的结构如下图： 我们也可以看到上图中每个控件所形成的树结构中隐含了一些关系，例如在上图中
阅读全文
摘要：flutter如何建立的视图树(WidgetTree)，元素树(ElementTree)及渲染树(RenderingTree)，又是如何更新视图绘制视图? 这个问题太大，刚开始一切又都是陌生的，理解起来千头万绪，所以先搞清这些树的根结点的身份是非常必要的。毫无疑问，这些根节点的建立紧密的与初始化过程
阅读全文
摘要：简单讲一下这个egg-validate egg-validate是基于parameter的。 安装 npm install --save egg-validate 启用 // config/plugin.js exports.validate = { enable: true, package: '
阅读全文
摘要：以下摘取的函数，在 shared 目录下公用的工具方法。文件在 util.js 中，githu地址。提取了一些常用通用的函数进行剖析，主要包含以下内容： 创建一个被冻结的空对象 判断是否是 undefined 或 null 判断是否不是 undefined 和 null 判断是否是原始类型 判断是否
阅读全文
摘要：介绍 在 react 内部，react 会使用几项巧妙的小技术，来优化计算更新 UI 时，所需要的最少的更新 DOM 的操作。在大多数情况下，即使你没有针对性能进行专项优化，React 依然很快，但是仍有一些方法可以加速 React 应用程序。本文将介绍一些可用于改进 React 代码的有效技巧。
阅读全文
摘要：前言 最近在学 react，看到 react-redux 这里，刚开始觉得一脸懵逼，后面通过查阅相关资料和一些对源码的解释，总算有点头绪，今天在这里总结下。 类似于 vue，React 中组件之间的状态管理 第三方包为：react-redux。react-redux 其实是 Redux的官方Reac
阅读全文
摘要：本文介绍了编写 vue.js 组件前需要知道的 10 件事，其中包括：组件可以全局或局部加载；延迟加载 / 异步组件；必需的 Props；使用 $emit 触发自定义事件；多 Props 绑定和覆盖等等。 1. 组件可以全局或局部加载 vue.js 提供了两种加载组件的方法：一种是 Vue 实例中的
阅读全文
摘要：这篇会深化View拖拽实例，利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。 通过构思，我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示，用GestureDetector监听手势滑动，动态移动顶层的Widget，当
阅读全文
摘要：在react开发中，经常会遇到组件重复渲染的问题，父组件一个state的变化，就会导致以该组件的所有子组件都重写render，尽管绝大多数子组件的props没有变化 render什么时候会触发 首先，先上一张react生命周期图： 这张图将react的生命周期分为了三个阶段：生成期、存在期、销毁期，
阅读全文
摘要：背景 前段时间准备前端招聘事项，复习前端react相关知识；复习react16新的生命周期：弃用了componentWillMount、componentWillReceivePorps，componentWillUpdate三个生命周期， 新增了getDerivedStateFromProps、g
阅读全文
摘要：到 react 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。 编写 class Thing extends react.Component，将函数体复制到render()方法中，修复缩进，最后添加需要的状态。 今天，可以使用 Hook 获得相同的功
阅读全文
摘要：本文环境比较复杂，首先两层nginx转发，并且访问路径也不是根路径。加上对nginx一知半解，各路搜索一看，全程懵逼。最终没有一个能用的。最后还是靠同事帮助，文档大法结束加班。本文知识点：location优先级，nginx资源文件寻找方式，rewrite 重定向问题。 location 优先级 =
阅读全文
摘要：准备工作 首先搭建vue项目，lint选择ESLint + Prettier，配置方式选择In dedicated config files。具体搭建过程这里就不赘述了，如果不熟悉的同学可以点击这里。 配置Eslint 项目搭建完成后，根目录下会自动生成一个.eslintrc.js文件，我们直接来看
阅读全文
摘要：一.安装 安装webpack4最新版本 npm install --save-dev webpack@4 安装新增依赖 webpack-cli 这个在webpack3中，webpack本身和它的CLI是在同一个包中，webpack4中将两个分开管理。 npm install --save-dev w
阅读全文
摘要：Dart语言与其他语言究竟有什么不同呢？在已有的编程语言经验的基础上，我们该如何快速上手呢？本篇文章从编程语言中最重要的组成部分，也就是基础语法与类型变量出发，一起来学习Dart吧 一、Dart语言之初体验 Dart可以在编译器（Android Studio）、命令行（前提是安装了Dart SDK）
阅读全文
摘要：前言 随着项目越来越大，业务需要越来越多，我们项目的目录层级也是非常的多。如果还是通过import分别引入文件，那是非常的不科学的。 比如vue项目vuex文件非常多： import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); im
阅读全文
摘要：随着vue应用程序的大小增加，vuex Store中的actions和mutations也会增加。本文，我们将介绍如何将其减少到易于管理的东西。 Vuex是什么 Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。 我们怎么
阅读全文
摘要：组件的状态是一种保存、处理和使用给定组件内部信息的方法，并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object)，并且改变它是使组件重新进行渲染的几种方法之一。 这是react背后最基本的思路之一,但是它(状态)有一些
阅读全文
摘要：vue双向绑定原理分析 当我们学习angular或者vue的时候，其双向绑定为我们开发带来了诸多便捷，今天我们就来分析一下vue双向绑定的原理。 1.vue双向绑定原理 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的se
阅读全文
摘要：1、递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题： 组件如何才能递归调用？ 递归组件点击事件如何传递？ 2、树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-con
阅读全文
摘要：前段时间，vue 官方释出了 Composition API RFC 的文档，我也在收到消息的第一时间上手尝鲜。 虽然 vue 3.0 尚未发布，但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建
阅读全文
摘要：我们身处科技高速发展的时代；互联网日新月异，移动应用程序开发产业也在大踏步前进。多年来，移动应用的市场需求呈爆发式增长；众多企业都在开发自己的移动应用程序，或者用于促销自己的产品，或者用来向客户提供更好的服务。 众所周知，主导全球市场的两大移动平台分别是 iOS 和 Android。当一家企业决定开
阅读全文
摘要：Virtual DOM 是一种编程理念 Virtual DOM 是一种编程理念。UI 信息被特定语言描述并保存到内存中，再通过特定的库，例如 reactDOM 与真实的 DOM 同步信息。这一过程成为 协调 (Reconciliation)。 与之对应的数据结构 Virtual DOM 反映到实际的
阅读全文
摘要：与我使用的其他框架相比，我最喜欢 react 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL（ jsX 编译为合理的 JavaScript），组件 API 只是通过添加 React Hooks 变得更简单，并且该框架为解决的核心 UI 问题提供非常少的抽象概念。 因此，学习 J
阅读全文
摘要：最近观察项目 CI 跑的情况如何时，会偶尔发现一两个镜像虽然构建成功但是容器跑不起来的情况。究其原因，是因为一个 exit code 的问题 throw new Error 与 Promise.reject 区别 以下是两段代码，第一个是抛出一个异常，第二个是 Promise.reject，两段代码
阅读全文
摘要：在微服务架构的世界中，我们通过一系列服务构建应用。集合中的每项服务都符合以下标准： 松散耦合 可维护和可测试 可以独立部署 微服务架构中的每个服务都解决了应用中的业务问题，或至少支持一个。一个团队对应用中的一个或多个服务负责。 微服务架构可以解锁许多好处。 它们通常更容易构建和维护 服务是围绕业务问
阅读全文
摘要：众所周知，官方提供了好几个办法来让我们在开发 Flutter app 的过程中可以使用查看 fps等性能数据，如 devtools ，具体见文档 Debugging Flutter apps 、 Flutter performance profiling等。 但是这些工具统计到的数据充其量只能算开发
阅读全文
摘要：随着前端项目复杂程度越来越高，依赖也越来越多，为了提高项目中代码的可复用性，前端开始提出模块化开发的思路，前端模块化会有以下几个痛点： 命名冲突文件依赖代码复用 模块化，会将相关的代码封装成一个package包的文件，当需要的时候，直接拿来用即可(import引入)。至于相关文件的直接依赖如何处理，
阅读全文
摘要：我的许多同事最近通过各种方式问同一类问题： “如果我们开始用 hook 后，那还有必要用 Redux 吗？”“react hook 不是让 Redux 过时了吗？那只用 Hooks 就可以做 Redux 所有能做的事了吧？” 随便搜一下 Google，你就会发现人们也在互联网上问同样的问题。简单来说
阅读全文
摘要：简介 本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点，可以让我们写出更优美的、可读性更强的JavaScript E6风格的代码。 1、块级作用域 1.1、let取代var ES6 提出了两个新的声明变量的命令: let 和 const。其中，let可以完全取代var，因为两者语
阅读全文
摘要：在本教程中，您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。 渲染3D对象时，无论使用某种3D软件还是使用WebGL进行实时显示，始终都必须为其分配材料以使其可见并具有所需的外观。 可以使用Three.js之类的库中的现成程序来模仿许多类型的材料，但是在本教程中，我将向您展示如何使用
阅读全文
摘要：本文内容 Map的基本使用 Map支持的数据类型 Map的迭代 Map与其他对象的转化 在Map出现之前，要实现类似需求，只能使用Object，但是Object还是存在一些问题的。 如果使用Object作为key存储在{}中，key最终是当做[object Object]来使用的 Object的ke
阅读全文
摘要：网页使用到的色彩标示方法中，从古早时期大家都在用的16进位码（#000000）、RGB色值标示、HSL色彩标示，其中网页设计师最常使用的16进位色码标示法，而16进位码又是如何计算色彩的呢？有没有办法直接脑袋就把色彩算出来？HSL色彩该如何运用与记忆？有没有什么秘诀或小技巧？一连串的问题就跟着继续看
阅读全文
摘要：响应式布局的概念 响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 但需要注意的是，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑，譬如表单的响应式设计、图片的响应式设计。
阅读全文
摘要：先看看Demo: CODEPEN 示例页面 讲到选项卡（Tabs）功能时，大多会想到用JavaScript去做，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery实现的（其实网络上有很多用jQuery开发的Tab）；但其实不用jQuery或JavaScript技术，就能实现高
阅读全文
摘要：我在做面试官的时候，曾经问过很多朋友这个问题： Cookie 和 Session 有什么区别呢？大部分的面试者应该都可以说上一两句，比如：什么是 Cookie？什么是 Session？两者的区别等。 但如果再往深入探讨的话，就慢慢有一些朋友不太了解了，谈起原理时就很少有朋友全部回答准确。今天和大家一
阅读全文
摘要：css3 中有很多表示元素序号的选择器，有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-las
阅读全文
摘要：作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯定都用过许多Canvas的框架，我们发现事件在这些框架中已经使用的十分成熟了，而且并没有出现特别严重的问题。那么我们可以肯
阅读全文
摘要：我在工作中使用css Grid已经有几个月了，我非常喜欢它在页面布局时给我的灵活性。这么长时间以来，我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在，我真的无法想象没有Grid的css！ 最近我还注意到的一件事就是CSS自定义属性。CSS自定义属性的工作方
阅读全文
摘要：一、css变量非全局 最近做项目，发现css变量一个有意思的特性，那就是变量作用域非全局。 举个例子，如下html和CSS： <div> <div>测试a</div> <div>测试b</div> <div>测试c</div> </div> .box { --color: red; color: v
阅读全文
摘要：一、Scroll Snap是前端必备技能 css Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何js代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯css实现。 而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使
阅读全文
摘要：ES2017+，你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具，可以脑海中永远划掉。100行代码，你将透视构建工具的本质。 100行代码，你将拥有一个现代化、规范、测试驱动、高延展性的前端构建工具。 在阅读前，
阅读全文
摘要：1：基本概念 在一定时间内平滑的过渡，也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发；不能主动触发，只能被动触发。 常用的基本属性有：Transition-duration（过渡时间）、Transition-property （过渡
阅读全文
摘要：前言 在多人协作项目中，如果代码风格统一、代码提交信息的说明准确，那么在后期协作以及Bug处理时会更加方便。Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。一般来说，commit message 应该清晰明了，说明本次提交的目的。 Commit messag
阅读全文
摘要：一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。 浏览器支持：Caniuse 示例 若根元素 font-size 为 12px html { font-size: 12px; } h1 { font-size:
阅读全文
摘要：很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况： 1.内容较少时，这个footer固定在在页面的底部。如下所示：2.内容较长时，footer跟在内容后面滑动，大
阅读全文
摘要：产品希望看到投放出去的活动页，用户对其页面内的什么信息比较感兴趣，对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间 第一次听到这个需求，我的大脑开始疯狂运转，然后想到了plan 1, plan 2, plan3...中间还有很多失败想法我已经忘记了，这里方案三是我最终采用的方法。 方案一：根
阅读全文
摘要：前言 一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存，减少对服务器的请求。 1.cookie数据存放在本地硬盘中，只要在过期时间之前，都是有效的，即使重启浏览器。但是会在每次HTTP请求中添加到请求头中，如果数据过多，会造成性能问题。 2.s
阅读全文
摘要：随着前端技术的急速发展，随着互联网行业的日益发展，html5作为一种比较新型的开发技术早已经被很多大的企业所应用，通过html5语言可以开发适用于任何设备上的酷炫网站页面，所以HTML5的发展趋势可想而知。话说HTML5退出了也好长一段时间了，现在还拿出来炒冷饭O(∩_∩)O哈哈~ HTML5与se
阅读全文
摘要：起因 团队中如果不同的项目，不同的人员可能在接口设计上有许多不统一的地方。导致了开发效率低下的问题。由于我在工作中遇到了，所以整理下来，说一说自己的一些看法。 怎样进行接口规范化 因为每个人对自己使用语言有不同的理解、HTTP协议熟悉程度不同、思维逻辑、开发经验不一样。对接口规范有想法的人应该提出自
阅读全文
摘要：css代码优化作用与意义 1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度2、便于维护。简化和标准化css代码让css代码减少，便于日后维护3、让自己写的css代码更加专业。 css优化方法 1、缩写css代码。2、排列css代码。3、同属性提取共用css选择器
阅读全文
摘要：初识cookie http是无状态的请求响应。每次的请求响应之后，连接会立即断开或延时断开（保持一定的连接有效期）。断开后，下一次请求再重新建立。在http连接时，通过cookie进行会话跟踪，第一次响应时设置的Cookie在随后的每次请求中都会发送出去。 Cookie还可以包括登陆认证后的身份信息
阅读全文
摘要：一、什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态，其实指的是实例之间的共享数据，Vuex是管理应用中不同Vue实例之间数据共享的工具。 下图是Vuex官方提供的对于状
阅读全文
摘要：1.前端角度 a.将图片发给后端 ajax 1.前端获取图片信息 文件域2.将文件信息 存到formdata3.调用后端写的api接口发送数据 b.接受返回的数据 前端页面显示图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
阅读全文
摘要：1.应该在何时创建BScroll对象 1）created : 中请求数据，ajax是异步的，这个时候可能mounted已经执行完了，也就是dom挂载完了，但数据还没请求回来，无法获取到内部元素（数据渲染出来的dom）高度. 无法渲染内部元素，无法滚动2）updated:数据发生改变时执行；数据改变，
阅读全文
摘要：Nuxt 是一个基于 vue 生态的更高层的框架，为开发服务端渲染的 vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器,推荐尝试。目前Nuxt.js官方文档目前已经覆盖了大部分常用需求 , 这篇文章主要讲nuxt工程中一些需要注意的知识点，以及一些比较常用的功能介绍。
阅读全文
摘要：前言 我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！ 分析 众所周知，vue-cli
阅读全文
摘要：这个属性用来监视某个数据的变化，并触发相应的回调函数执行 1.基本用法 (1)添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数执行(2)回调函数有2个参数：newVal：数据发生改变后的值oldVal：数据发生改变前
阅读全文
摘要：1. webpack Bundle Analyzer 有没有想过你的应用程序的哪些部分占用了大部分空间？那么，你可以找到webpack Bundle Analyzer。该软件包将帮助您识别占用空间最多的输出文件。 它将创建一个实时服务器，并为您提供捆绑包内容的交互式树形图可视化。通过这个工具包，您可
阅读全文
摘要：概述 Vue 2.x 及以前的高阶组件的组织形式或多或少都会面临一些问题，特别是在需要处理重复逻辑的项目中，一旦开发者组织项目结构组织得不好，组件代码极有可能被人诟病为“胶水代码”。而在 Vue 2.x 及之前的版本，解决此类问题的办法大致是下面的方案： mixin 函数式组件 slots 笔者维护
阅读全文
摘要：State 对象 在现代浏览器中，state 对象是作为 CommandRequest 的一部分传入的。对 state 对象的任何修改都将转换为相应的 operation，然后应用到 store 上。 import { createCommandFactory } from '@dojo/frame
阅读全文
摘要：前言 很多 App 都有城市选择的功能，今天带大家编写一个城市选择组件。下面是这个组件的效果图。 功能分析 从上图中可以看出，我们将所有城市按照字母区分块，右边是字母索引。通过点击右边的字母可以跳转到相对应的块，同样的，在移动左边的列表的时候，右边也会跟随移动来显示不同的高亮。 这个组件中，我们通过
阅读全文
摘要：不使用Node.js, npm, webpack 等, 在静态页中使用vue.js. 包括路由, 单文件组件. 1. 创建index.html index.html做为项目的首页, 主要用来定义页面框架, 加载必需的css和script.这里使用element-ui的导航菜单组件搭建了一个页面框架.
阅读全文
摘要：MVC MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View，比如在controller中写document.getElementById("box").innerhtml = data[”t
阅读全文
摘要：路由独立守卫，顾名思义就是这个路由自己的守卫任务，就如同咱们LOL，我们守卫的就是独立一条路，保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的：你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。 const router =
阅读全文
摘要：为什么提出这个复杂的问题？ 在我们的应用程序中有一个顶栏，其中包含各种按钮、一个搜索栏和其他一些控件。 它显示的内容根据你所在的页面略有差异，因此我们需要一种按页配置它的方法。 为此，我们希望每个页面都能配置顶栏。 看起来很简单，但这里有一个问题：这个顶栏（我们称之为 ActionBar）实际上是主
阅读全文
摘要：拦截器 Http拦截器就是拦截发出的请求，对其进行统一添加额外处理，然后放行；对响应进行拦截并作出业务上的判断，决定是否给与返回。先看一组常见的业务请求： this.http.post('http://127.0.0.1:8080/api/getList', { header: { token: '
阅读全文
摘要：NProgress是一款在网页顶部添加细长进度条的工具，非常轻巧，使用起来也非常便捷，灵感来源于Google, YouTube。 1、安装 $ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); N
阅读全文
摘要：前言 vue通信手段有很多种，props/emit、vuex、event bus、provide/inject 等。还有一种通信方式，那就是 $attrs 和 $listeners，之前早就听说这两个api，趁着有空来补补。这种方式挺优雅，使用起来也不赖。下面例子都会通过父、子、孙子，三者的关系来说
阅读全文
摘要：从前的代码书写方式 在 html 文件里使用 script 标签引入各个 JavaScript 文件。 <!-- index.html --> <html> <body> <script src="./header.js"></script> <script src="./content.js"><
阅读全文
摘要：vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同) mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjus
阅读全文
摘要：vuePress vuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。 由 VuePress 生成的每个页面，都具有相应的预渲染静态 html，它们能提供出色的加载性能，并且对 s
阅读全文
摘要：背景： 想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。 原理： 图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张
阅读全文
摘要：从 Node.js v10.0.0 开始，异步迭代器就出现中了，最近它们在社区中的吸引力越来越大。在本文中，我们将讨论异步迭代器的作用，还将解决它们可能用于什么目的的问题。 什么是异步迭代器 那么什么是异步迭代器？它们实际上是以前可用的迭代器的异步版本。当我们不知道迭代的值和最终状态时，可以使用异步
阅读全文
摘要：TypeScript 2.1 引入了映射类型，这是对类型系统的一个强大的补充。本质上，映射类型允许w咱们通过映射属性类型从现有类型创建新类型。根据咱们指定的规则转换现有类型的每个属性。转换后的属性组成新的类型。 使用映射类型，可以捕获类型系统中类似 Object.freeze() 等方法的效果。冻结
阅读全文
摘要：Array.from()会把类似数组的对象转换成真实数组，对象需满足两个条件： 具有length属性，length的值即为数组的长度 对象key要是数字，并会作为数组的下标 let obj = { '0': 'first', '1': 'second', '2': 'third', length:
阅读全文
摘要：1.事件截获原理 利用事件的捕获阶段，添加事件。 再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。 2.具体拦截 这里使用id作为一个判断根据，真实场景中肯定不是这样的。 这里的特征是需要根据一定的规则去寻找的。(这里只是为了演示原理) <!DO
阅读全文
摘要：曾几何时，ES6/ES2015 对 JavaScript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器（对象、数组、字符串、集合、映射）前面的三个连续点。这些小点使我们能够编写更加优雅和简洁的代码。在本文中我将会解释这三个点的工作原理，并展示最常见的例子。 三个
阅读全文
摘要：写在前面 距 typescript 3.7 正式发布已经有一段时间了，这段时间正在对手上的项目进行 typescript 的迁移工作，所以会特别留意每一次的 release。 对于 3.7 中包含的新特性，其实相比较之前几次 release 来说，算是一个比较小的发布版本，但是其中包含的几个特性对代
阅读全文
摘要：Set基本用法 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 const s = new Set(); \[2, 3, 5, 4, 5, 2, 2\].forEach(x => s.add(x));
阅读全文
摘要：先看代码 这个代码平淡无奇，就是从一个数组中找到一个数，O(n)的算法，找不到就返回 null。 下面是正常的 old-school 的方式。不用多说。 //正常的版本 function find (x, y) { for ( let i = 0; i < x.length; i++ ) { if
阅读全文
摘要：写这篇文章的起因是在写单元测试时，做形如下测试时 new Promise((resolve, reject) => reject(1)).then().catch(err => { console.log(err) }) async function jestTest () { await Prom
阅读全文
摘要：fold（reduce） 说说reduce吧, 很喜欢这个函数，节省了不少代码量，而且有一些声明式的雏形了，一些常见的工具函数，flatten，deepCopy，mergeDeep等用reduce实现的很优雅简洁。reduce也称为fold，本质上就是一个折叠数组的过程，把数组中的多个值经过运算变成
阅读全文
摘要：1 引言 取数是前端业务的重要部分，也经历过几次演化： fetch 的兼容性已经足够好，足以替换包括 $.post 在内的各种取数封装。 原生用得久了，发现拓展性更好、支持 ssr 的同构取数方案也挺好，比如 isomorphic-fetch、axios。 对于数据驱动场景还是不够，数据流逐渐将取数
阅读全文
摘要：短轮询（Polling） 短轮询的实现思路就是浏览器端每隔几秒钟向服务器端发送 HTTP 请求，服务端在收到请求后，不论是否有数据更新，都直接进行响应。在服务端响应完成，就会关闭这个 TCP 连接，代码实现也最简单，就是利用 XHR， 通过 setInterval 定时向后端发送请求，以获取最新的数
阅读全文
摘要：使用标记的联合类型构建付款方式 假设咱们为系统用户可以选择的以下支付方式建模 Cash (现金) PayPal 与给定的电子邮件地址 Credit card 带有给定卡号和安全码 对于这些支付方法，咱们可以创建一个 TypeScript 接口 interface Cash { kind: "cash
阅读全文
摘要：方案一：js 实现 js 无敌大法好。兼容极佳，但是体验上就比较感人了。这里不过多介绍。 方案二：Fixed 实现 fixed 是基于浏览器的定位，在组件中显的不是很适用。而且在 iOS 也有兼容性问题。 方案三：Sticky 实现 sticky 是新加的 position 的值，可以用于实现粘性定
阅读全文
摘要：在开发中，变量名，函数名一般要做到清晰明了，尽量做到看名字就能让人知道你的意图，所以变量和函数命名是挺重要，今天来看看如果较优雅的方式给变量和函数命名。 变量 使用有意义和可发音的变量名 // 不好的写法 const yyyymmdstr = moment().format("YYYY/MM/DD"
阅读全文
摘要：1. 多个 .catch var p = new Promise((resolve, reject) => { reject(Error('The Fails!')) }) p.catch(error => console.log(error.message)) p.catch(error => c
阅读全文
摘要：细心点的朋友可能会注意到，有些网站使用document.write动态加载js的时候需要把</script>拆分开来写？如下面的例子所示： <script type='text/JavaScript'> if (typeof window['jQuery'] == 'undefined') docu
阅读全文
摘要：本文主要涉及三个关键词： 同源策略（Same-origin policy，简称 SOP） 跨站请求伪造（Cross-site request forgery，简称 CSRF） 跨域资源共享（Cross-Origin Resource Sharing，简称 CORS） 同源策略 SOP 同源 先解释何
阅读全文
摘要：图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。 因此，虽然网络图像需要清晰明快，但它们尺寸可以缩小压缩的，使用加载时间保持在可接受的水平。 在我的网站上，我注意到我的主页的页面大小 超过了 1.1MB，图片占了约88%，我还注意到
阅读全文
摘要：什么是AOP？ AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后， 再通过“动态织入”的方式掺入业务逻辑模块中。 AOP能给我们带来什么好处？ AOP的好处首先是可以保持业务逻辑模块的
阅读全文
摘要：在前端面试中面试官基本都会问到什么是匿名函数、什么是闭包函数。 本文就先来说一下什么是匿名函数。 匿名函数顾名思义就是没有名字的函数，通常我们所写的函数都是这样的： function do(){ // 执行代码 }; // 调用 do(); 这种写法是定义了一个名为do的函数，并通过函数名称进行调用
阅读全文
摘要：一、示例场景 1.1、设置抽奖活动的奖项名称 奖项名称：["一等奖", "二等奖", "三等奖", "未中奖"]。假设抽奖活动设置了这四个奖项，当然开发者可以扩展更多。 var prizes = ["一等奖","二等奖","三等奖","未中奖"]; //奖项名称数组 1.2、设置各奖项权重 奖项权重
阅读全文
摘要：主要是用Object.defineProperty实现类似vue的数据绑定。 第一步： const data = { name: "tom", age: 14 } Object.defineProperty(data, "name", { get(){ return "name被读取了" }, se
阅读全文
摘要：1.json与jsonp的引入在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。备注：跨域也可以通过服务器端代理来解决;理解：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。2.JSON：是一种基于文本的数据交换方式，或者叫做
阅读全文
摘要：nodejs内置模块指的是除默认提供的语法之外，提供的美容，无需下载，直接引入，引入只写名称即可。 nodejs内置模块： 1、path模块 ： 用于处理文件路径。 path.normalize(路径解析，得到规范路径)； path.join(路径合并)； path.resolve（获取绝对路径）；
阅读全文
摘要：除了if ... else之外，JavaScript还有一个称为switch语句的功能。 switch是一种条件语句，它将针对多种可能的情况评估表达式，并根据匹配的情况执行一个或多个代码块。 switch语句与包含许多其他if块的条件语句密切相关，并且它们通常可以互换使用。 在本教程中，我们将学习如
阅读全文
摘要：在实际工程开发中，会有前后端分离的需求。使用node.js反向代理的目的：实现前后端分离，前端减少路径请求的所需的路由文件。 一. 反向代理的应用场景 1. 静态资源与动态资源分离 e.g. 图片服务器 2. AJAX跨域访问 3. 搭建统一服务网关接口 二. 使用node.js实现反向代理 1.
阅读全文
摘要：AJAX(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。Ajax 它是与服务器交换数据的技术，在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)，它在不重载全部页面的情况下，实现了对部分网页的更新。这样就可使网页从服务器请求少量的信息，而不是整个页
阅读全文
摘要：有时需要判断一个字符是不是汉字，比如在用户输入含有中英文的内容时，需要判断是否超过规定长度就要用到。用JavaScript判断通常有两种方法。 方法一、 用正则表达式判断： <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"
阅读全文
摘要：JavaScript读取xml的方法：使用DOMParser对象解析XML文本并返回一个XML Document对象。然后调用parseFromString()方法读取。 JavaScript读取xml文件： function loadXML(xmlFile){ var xmlDoc=null; /
阅读全文
摘要：JavaScript中可以通过将图片display属性设置为none实现图片隐藏。display属性设置元素如何显示，其语法为Object.style.display=value。 JavaScript中实现通过点击显示隐藏图片代码： 把图片的display设为none，触发点击事件时，displa
阅读全文
摘要：TypeScript 2.4 为标识符实现了拼写纠正机制。即使咱们稍微拼错了一个变量、属性或函数名，TypeScript 在很多情况下都可以提示正确的拼写。 TypeScript 2.7 支持 ECMAScript 的数字分隔符提案。 这个特性允许用户在数字之间使用下划线（_）来对数字分组（就像使用
阅读全文
摘要：一、闭包模块的第一种写法： // HH: 闭包类的第一种写法 var PeopleClass = function () { var age = 18 var name = 'HAVENT' // 闭包返回公开对象 return { getAge: function () { return age
阅读全文
摘要：引言 随着对前端的了解越来越深入，了解到了很多种浏览器的存储方案，如 Cookie、LocalStorage等，哪这些存储方案有何异同，分别的适用场景又是什么呢。 Cookie Cookie的来源 Cookie 被创造出来的本意并不是本地储存，而是为了辨别用户身份。众所周知，Http 协议是无状态的
阅读全文
摘要：TypeScript 2.1 增加了对 对象扩展运算和 rest 属性提案的支持，该提案在 ES2018 中标准化。可以以类型安全的方式使用 rest 和 spread 属性。 对象 rest 属性 假设已经定义了一个具有三个属性的简单字面量对象 const marius = { name: "Ma
阅读全文
摘要：功能描述： 1.鼠标经过 左右侧箭头显示，鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件，并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 4.给箭头绑定单击事件，并且使图片可以无缝轮播 5.实现自动轮播（动画函数） 具体实现代码： 1.鼠
阅读全文
摘要：JavaScript选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。 1、document.q
阅读全文
摘要：事件流：当你在页面触发一个点击事件后，页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件，因为元素是在容器中的。事件发生的顺序就是事件流，不同的浏览器对事件流的处理不同。 冒泡事件流： 当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点 。 捕获事件流
阅读全文
摘要：所有编程语言都必须遵守特定的规则才能运行。 确定编程语言的正确结构的这组规则称为语法。 许多编程语言主要由具有语法变化的类似概念组成。 在本教程中，我们将介绍JavaScript语法和代码结构的许多规则和约定。 功能性和可读性 在开始使用JavaScript时，功能性和可读性是关注语法的两个重要原因
阅读全文
摘要：JavaScript有三部分组成。分别为核心（ECMAScript） 、文档对象模型(DOM)、浏览器对象模型(BOM)。这三部分分别描述了该语言的语法和基本对象、处理网页内容的方法和接口、与浏览器进行交互的方法和接口。 一.ECMAScript(核心) 注意: 1、ECMAScript与Web浏览
阅读全文
