- 博客(57)
- 收藏
- 关注
RSS订阅原创 JS-为什么说 async/await是generator的语法糖？
关于async的介绍，在阮一峰的ES6入门教程中说到：async 函数是什么？一句话，它就是 Generator 函数的语法糖。可是，为什么这么说呢？首先，比如说有一个异步操作，使用 async/await 语法来以同步模拟异步操作。使用 async/await 实现一个 sleep 的功能function sleep(time) { return new Promise((re...
2019-04-14 19:13:46
4056
1
原创 JS-Generator 执行器的实现
Generator 是一个异步操作的容器。它的自动执行需要一种机制，当异步操作有了结果，自动交回执行权。两种方法可以实现执行器：回调函数。将异步操作包装成 Thunk 函数，在回调函数里面交回执行权；Promise 对象。将异步操作包装成 Promise 对象，用 then 方法中交回执行权Thunk 函数实现 generator 执行器在js中实现异步的方式为回调函数，比如读取文件...
2019-04-14 18:59:41
2113
原创 JS-原型，原型链，基于原型和class方式的继承，一篇文章就够了！
原型每个函数（构造函数）都有一个 prototype 属性，指向该函数（构造函数）的原型对象。实例没有 prototype 属性，但是有 __proto__ 属性。函数同时有 prototype 和 __proto__ 属性。function Person(name) { this.name = name;}let person = new Person('xiaoming');...
2019-04-12 15:44:58
1058
原创 JS- async和defer对script脚本加载的影响
直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。这是因为 UI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起。defer如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续 DOM 的渲染；如果有多个设置了 defer 的script标签存在，则会按照顺序执行所...
2019-04-11 11:01:07
941
原创 JS-前端使用Blob和File读取文件
目录Blob及其属性和方法FileFileReader及其属性和方法URL及其属性和方法历史上，JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript 5 引入了 Blob 对象...
2019-04-07 15:10:16
25320
2
原创 Node-内置模块：zlib 压缩
目录概述压缩和解压示例1、概述做过 web 性能优化的同学，对性能优化大杀器 gzip 应该不陌生。浏览器向服务器发起资源请求，比如下载一个 js 文件，服务器先对资源进行压缩，再返回给浏览器，以此节省流量，加快访问速度。浏览器通过 HTTP 请求头部里加上 Accept-Encoding ，告诉服务器，“你可以用gzip，或者defalte算法压缩资源”。在 no...
2018-08-07 22:41:56
2129
原创 Node-内置模块：http
目录概述http 服务端http 客户端1、概述我们知道传统的 HTTP 服务器是由 Aphche 、 Nginx 、 IIS 之类的软件来搭建的，但是 Nodejs 并不需要， Nodejs 提供了 http 模块，自身就可以用来构建服务器。http 模块内部封装了高效的 http 服务器 和 http 客户端。 http 模块提供两种使用方式：作为服务端使用时...
2018-07-30 21:38:23
537
原创 Node-内置模块：缓冲器 Buffer
目录概述创建 Buffer 实例判断数据是否为 buffer判断两个 buffer 是否相等写入 buffer: buf.write()读取 buffer: buf.toString()拷贝 buffer: buf.copy()合并 buffer: buf.cancat()切割 buffer: buf.slice()将 buffer 转为 JSON 对象: buf.toJS...
2018-07-25 18:53:46
339
原创 Node-内置模块：集群 cluster
目录概述cluster 的属性和方法cluster 的事件worker 的属性和方法worker 的事件cluster 的实现原理1、概述Node.js 默认单进程运行，对于多核 CPU 的计算机来说，这样做效率很低，因为只有一个核在运行，其他核都在闲置，面对单进程单线程对多核使用不足的问题，前人的经验是启动多进程。理想的状态下每个进程各自利用一个 CPU ，以此实现...
2018-07-12 16:38:26
1111
原创 Node-内置模块：子进程 child_process
目录概述创建子进程的方法子进程的事件1、概述我们都知道 Node.js 是以单线程的模式运行的，但它使用的是事件驱动来处理并发，这样有助于我们在多核 cpu 的系统上创建多个子进程，从而提高性能。每个子进程总是带有三个流对象：child.stdin, child.stdout 和 child.stderr。他们可能会共享父进程的 stdio 流，或者也可以是独立的被导流...
2018-07-11 18:38:46
2665
1
原创 Node-内置模块：全局变量 global
概述模块内部的变量setImmediate 和 clearImmediatesetTimeout 和 clearTimeoutsetInterval 和 clearIntervalconsoleprocess1、概述在浏览器 JavaScript 中，通常 window 是全局对象， 而 Node.js 中的全局对象是 global，所有全局变量（除了 global 本...
2018-07-10 21:43:39
711
原创 Node-内置模块：进程 process
目录概述属性方法事件1、概述process 是 node 的全局模块，作用比较直观。可以通过它来获得 node 进程相关的信息，比如运行 node 程序时的命令行参数。或者设置进程相关信息，比如设置环境变量。2、属性2.1 process.argvprocess.argv 返回一个数组，由启动 Node.js 进程时的命令行参数所组成，第一个元素总是启...
2018-07-10 18:03:40
460
原创 JS - 这一次彻底搞懂 "x == y" 的判断逻辑
javascript 是弱类型语言，在进行 == 运算的时候 ，如果等号两边的数值类型不同的时候，会进行类型转换。1. 类型转换的逻辑算法关于如何进行类型转换，ECMA 的标准里面有说明，如下所示：归纳起来，是按照以下的顺序来执行判断逻辑的：首先判断 x 和 y 的数据类型，如果数据类型相同，则判断值是否相同，如果相同则为 true , 否则为 false。其中需要注意的...
2018-07-01 16:58:42
1026
原创 Node-内置模块：模块系统 module
目录模块的定义模块包装器模块内部作用域module 对象模块导入策略module.exports 和 exports 的区别1、模块的定义在 Node.js 模块系统中，每个文件都被视为独立的模块。通过 module.exports 或者 exports 来导出所需要导出的变量、对象或者函数。通过 require() 来导入所需要的模块。2、模块包装器...
2018-06-28 23:39:43
762
原创 Node-内置模块：路径 path
目录获取路径/文件名/拓展名路径组合路径解析获取相对路径判断是否为绝对路径1、获取路径/文件名/拓展名获取路径：path.dirname(filepath)获取文件名：path.basename(filepath)获取扩展名：path.extname(filepath)1.1 获取路径 path.dirname()const path = req...
2018-06-28 12:03:29
773
原创 Node-内置模块：文件流 stream
目录概述createReadStreamcreateWriteStreampipe1、概述stream 是 Node.js 提供的又一个仅在服务区端可用的模块，目的是支持“流”这种数据结构。什么是流？流是一种抽象的数据结构。想象水流，当在水管中流动时，就可以从某个地方（例如自来水厂）源源不断地到达另一个地方（比如你家的洗手池）。我们也可以把数据看成是数据流，比如你敲键...
2018-06-27 16:09:30
709
原创 Node-内置模块：文件系统操作 fs
目录概述异步读取文件同步读取文件写文件stat文件是否存在打开和关闭文件删除文件文件重命名监听文件修改追加文件内容文件内容截取创建目录读取目录删除目录1、概述Node.js 内置的 fs 模块就是文件系统模块，负责读写文件，提供了异步和同步的方法。2、异步读取文件2.1 异步读取文本文件const fs = require('...
2018-06-27 16:05:41
586
原创 JS-学习ES6之- Decorator 修饰器
目录概述类的修饰方法的修饰1、概述用于给对象在运行期间动态的增加某个功能，职责等。相较通过继承的方式来扩充对象的功能，装饰器显得更加灵活，首先，我们可以动态给对象选定某个装饰器，而不用 hardcore 继承对象来实现某个功能点。其次：继承的方式可能会导致子类繁多，仅仅为了增加某一个单一的功能点，显得有些多余了。所以，装饰器的作用： - 是继承关系的一种替代 - 动...
2018-06-16 22:00:47
7321
原创 JS-学习ES6之- class 的继承
目录简介Object.getPropertyOf()super 关键字1、简介class 可以通过 extends 关键字实现继承。在子类继承父类的时候，在 constructor 中必须首先调用 super() 方法，然后才能使用 this 。// 父类class Point { constructor (x){ this.x = x; }...
2018-06-13 16:15:57
255
原创 JS-学习ES6之- class 的基本用法
目录简介constructor 方法类的实例对象私有方法和私有属性class 的静态方法class 的静态属性和实例属性new.target 属性1、简介JavaScript 语言中，生成实例对象的传统方法是通过构造函数。 ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class关键字，可以定义类。// ES5...
2018-06-12 17:15:25
259
原创 JS-学习ES6之- async & await
目录概述基本用法1. 概述async 函数是什么？一句话，它就是 Generator 函数的语法糖。2. 基本用法2.1 返回 promise 对象async 函数返回的是一个 promise 对象.async function test (){ return 'hello async';}let result = test();cons...
2018-06-09 22:08:57
1598
原创 JS-学习ES6之- Promise 对象
目录Promise 的含义基本用法错误进阶应用Promise 的实现原理1. Promise 的含义Promise 是异步编程的一种解决方案，避免了传统的回调函数的层层嵌套，也就是常说的“回调地狱”。Promise 一旦新建就会立即执行，无法中途取消。2. 基本用法ES6 规定，Promise 对象是一个构造函数，用来生成 Promise 实例。...
2018-06-07 18:32:47
588
原创 JS-学习ES6之- 数组的扩展
目录扩展运算符Array.from() 和 Array.of()find() 和 findIndex()entries(), keys() 和 values()。返回值均为数组，keys() 是对键名的遍历，values() 是对键值的遍历，entries() 是对键值对的遍历1. 扩展运算符扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一...
2018-06-04 17:36:05
1011
原创 JS-学习ES6之- 函数的扩展
目录函数的默认值rest 参数name 属性箭头函数双冒号运算符1. 函数的默认值1.1 给函数参数设置默认值的意思是：当没有传参的时候 ，参数取设定的默认值ES5的写法function log (x,y) { if (y === 'undefined'){ y = 'World'; } console.log(x, y);}l...
2018-06-04 16:08:40
1245
原创 JS-学习ES6之- 字符串的扩展
目录includes(), startsWith(), endsWith()repeat()模板字符串1. includes(), startsWith(), endsWith()includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原...
2018-06-04 11:24:11
184
原创 JS-学习ES6之- 变量的解构赋值
目录数组的解构赋值对象的解构赋值字符串的解构赋值函数参数的解构赋值用途1. 数组的解构赋值let a = 1;let b = 2;let c = 3;// 等价于let [a, b, c] = [1, 2, 3];一些例子let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz ...
2018-06-04 11:07:16
525
原创 JS-学习ES6之- let & const 关键字
1. 基本用法let 为块级作用域，经典用法为 for 循环如果以下代码使用 var，则最后输出的是10var a = [];for (var i =1; i < 10; i++) { a[i] = function(){ console.log(i); };}a[6](); // 10如果使用 let，声明的变量仅在块级作用域内有...
2018-06-04 10:34:00
169
原创 JS-学习ES6之- Set & Map 的数据结构
目录SetMap1. SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。1.1 基本用法Set 本身是一个构造函数，用来生成 Set 数据结构。Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。cosnt set = new Set([1, 2, 3, 4, 4]...
2018-06-03 23:08:21
140
原创 JS-学习ES6之-Symbol数据类型
目录概述Symbol可以传参数Symbol 作为属性名的用法Symbol.for()1.为什么要有SymbolES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲...
2018-06-02 22:17:16
449
原创 JS-学习ES6之-对象的扩展
目录属性的简洁表示法Object新增的方法1. 属性的简洁表示法如果属性和属性名相同，则可以写成一个，另外，函数作为属性的时候，可以省略 function 关键字，如下所示。let birth = '2000/01/01';const Person = { name: '张三', // 等同于 birth: birth birth, // 等同于 h...
2018-06-02 17:44:43
180
原创 CSS-移动端页面布局的适配方案总结
占坑，待续。。。使用Flexible实现手淘H5页面的终端适配 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html再聊移动端页面的适配 https://www.w3cplus.com/css/vw-for-layout.html如何在Vue项目中使用vw实现移动端适配 https://www.w3cp...
2018-05-22 14:52:26
2700
原创 vue-axios的简单封装
前言vue中ajax请求官方推荐是axios，之前集成的vue-source早被放弃了。axios的用法与jquery-ajax，vue-source的用法均有所不同。为了使用起来更方便，需要对axios简单进行封装。封装的关键点1、get 和 post 请求时，传参的方式不同在get请求中，是使用params: {}；在post请求中，使用data: {}，至于为啥是这样...
2018-03-11 23:17:45
9043
原创 node-使用promise, generator, async/await 读取文件的方法
在node中，读取文件的模块是 fs，分为同步读取和异步读取。const fs = require('fs');// 同步读取文件let buf = fs.readFileSync('a.text');// 异步读取文件fs.readFile('a.text', (err, data) => { if (err) { console.log('读取文件失败');
2018-02-26 11:51:12
2219
原创 JS-设计模式之观察者模式
最近在学习vue的双响数据绑定时，发现使用到观察者模式，但是我对于这种设计模式一知半解，所以特意总结下来。基本定义观察者设计模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。观察者：（Watcher）将自己注册到被观察对象（Dep）中，被观察对象将观察者存放在一个容器（Container）里。被观察者：被观察对象发生了某种变化，从容器中得到
2017-11-08 11:41:18
462
原创 vue-vuex中使用commit提交mutation来修改state的原因解析
在vuex中，关于修改state的方式，需要commit提交mutation。官方文档中有这么一句话： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。为了搞清楚其原因，查阅了很多资料，发现其它人在做vuex的源码解析的时候，并没有将这点说的很明白。所以只好自己去查看vuex的源码，并且自己做demo进行验证。但是试验后，发现直接修改state时，store中的st
2017-10-26 23:10:43
31477
7
原创 JS-requireJS中使用UEditor的经验总结
目前，正在开发的一个项目中，需要用到富文本编辑器，经过一番搜索后，发现用的比较多的是百度前端部门开源的UEditor这个插件，所以就选择了UEditor。在查阅了官方文档之后，发现引入插件的方法是直接引入的，并没有介绍如何使用require的方式进行引入。 官方文档中demo的例子，如下图所示： 所以只好结合网上的资料，自己去摸索了，大概的步骤如下：1 下载资源包由于我们的后端语言是java，所
2017-10-11 17:08:37
4034
原创 JS-学习ES6之-ES6模块化的注意点
一直以来javascript的模块化要么使用commonJS，要么使用AMD，在ES6中开始支持模块化了，关键字主要有import（导入）和export（导出）。最近一段时间一直在思考ES6中的模块化与我们正常使用的AMD（如requireJS），以及commomJS（如nodeJS）有何不同。在搜索了相关的资料后，发现ES6模块化中有些地方很值得注意。ES6模块是静态加载ES6 模块的设计思想，是
2017-06-09 16:18:39
860
原创 Tool-webpack学习笔记-入门
webpack介绍webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。webpack和Grunt以及Gulp相比有什么特性Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack
2017-06-06 10:29:54
349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人