大涛子客栈

安装 https 证书的一些过程

浅拷贝技巧：数组 concat slice ，对象 Object.assign() 等； 深拷贝技巧： JSON.parse(JSON.stringify(arr1)) 。

性能优化中对于频繁触发事件，常用的两种解决方式：debounce 和 throttle。

主要有：isArray reduce flat forEach some every filter map 等 Array 方法。

主要有：new、Object.create()、Object.setPrototypeOf()、instanceof、class、type API、原型链继承等。

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

对浏览器的缓存机制来做个简要的总结：首先通过 Cache-Control 验证强缓存是否可用；如果强缓存可用，直接使用；否则进入协商缓存，即发送 HTTP 请求，服务器通过请求头中的 If-Modified-Since 或者 If-None-Match 这些条件请求字段检查资源是否更新。若资源更新，返回资源和 200 状态码 ；否则，返回 304 ，告诉浏览器直接从缓存获取资源

📦 5 个有趣的 Node.js 库,带你走进 彩色 Node.js 世界 🎉 🎉 🎉

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。 — MDN

JSONP 请求本质上是利用了 “Ajax 请求会受到同源策略限制，而 script 标签请求不会” 这一点来绕过同源策略。

Koa 和 Express 的设计风格非常类似，底层也都是共用的同一套 HTTP 基础库，但是有几个显著的区别，除了上面提到的默认异步解决方案之外，主要的特点还有下面几个。

Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中； Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式； LocalStorage 是 Web Storage API 的一种类型，能在浏览器端存储键值对数据； SessionStorage 只存储当前会话页(tab 页)的数据，一旦用户关闭当前页或者浏览器，数据就自动被清除掉了。

如何将“this”的上下文保留在另一个函数中？我们可能会需要使用 Function.prototype.bind() 。资料地址：

译者序：本文是 React 核心开发者、有 React API 终结者之称的 Sebastian Markbåge 撰写，阐述了他设计 React 的初衷。阅读此文，你能站在更高的高度思考 React 的过去、现在和未来。 原文地址：

Gulp 自动化构建的一些过程，以及其他插件的结合使用等

原文：

原型对象 Array.prototype 每一个函数，都有一个 prototype 属性 ，不管是你自定义的，还是函数内置的。 1 2 3 var fn = function ( ) {}; console .log(fn.prototype); // {constructor: ƒ} console .log(fn.prototype.constructor === fn); // true 这里的 fn.prototype 打印出一个对象，对象里的 constructor 属性又指回了该函数本身 fn。 即 每一个原型对象都有一个 consctructor 属性指向关联的构造函数 ，比如： 1 Array .prototype.constructor === Array ; //true 我们接着看： 1 console .log( Array .prototype); // [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …] 这里，除了 constructor 属性，还有其他内置的属性，即我们经常使用的操作数组的方法。 __proto__ (隐式原型) 所有通过函数 new （构造函数）出来的实例对象，都有一个 __proto__ 属性，指向该对象的 prototype ，比如： 1 2 var arr = new Array (); arr.__proto__ === Array .prototype; // true 原型链：由相互关联的原型( __proto__ )组成的链状结构就是原型链。 举个关于继承 extends 的例子： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function Animal ( ) { this .eat = function ( ) { console .log( "Animal eat" ); }; } function Dog ( ) { this .bark = function ( ) { console .log( "Dog bark" ); }; } // 绑定原型，实现继承 Dog.prototype = new Animal(); var dog = new Dog(); dog.eat(); // Animal eat dog.bark(); // Dog bark 上面看明白了，那么 ES6 的继承我们也就可以明白原理了，即 class Dog extends Animal 相当于 Dog.prototype = new Animal() 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 class Animal { constructor (name) { this .name = name; } eat() { console .log( "Animal eat!" + this .name); } } class Dog extends Animal { constructor (name) { super (name); this .name = name; } bark() { console .log( "Dog bark!" + this .name); } } const dog = new Dog( "哈士奇" ); dog.eat(); dog.bark(); 接下来，我们就清楚为什么能这样： 当我们要使用一个对象（数组）的某个功能时，如果该对象本身具有这个功能，直接调用，没有的话，那就去自身的 __proto__ 属性中去找 1 2 3 4 5 6 7 8 9 10 var obj = { myfn: function ( ) { console .log( "myfn" ); } }; obj.myfn(); // 'myfn' obj.hasOwnProperty( "myfn" ); //true obj.toString(); // "[object Object]" obj.hasOwnProperty( "toString" ); // false obj.__proto__.hasOwnProperty( "toString" ); // true hasOwnProperty() 就可以得出这个属性是否是属于该对象本身的属性: myfn 是我们自定义的， obj.hasOwnProperty('myfn') 为 true toString() 我们不是自定义的，却可以使用，查一下是否属于自定义属性， obj.hasOwnProperty('toString') ，答案为 false 既然不属于自定义属性，那就去自身的 __proto__ 去找，然后去原型对象上查一下， obj.__proto__.hasOwnProperty('toString') ，哦，原来在这儿 在源码中，我们经常看到 Array.prototype.concat ，其实就是我们使用的 [].concat ， [] ，因为 [].__proto__ === Array.prototype __proto__ 是可修改的 比如，我们新增一个 addClass() 方法： 1 2 3 4 5 6 var arr = [ 1 , 2 , 3 ]; arr.__proto__.addClass = function ( ) { console .log( 123 ); }; arr.push( 4 ); arr.addClass(); // 123 但是，这里要注意，如下重写之后，就没有了诸如 push、concat 等方法： 1 2 3 4 5 6 arr.__proto__ = { addClass: function ( ) { console .log( 123 ); } }; arr.push( 3 ); //Uncaught TypeError: arr.push is not a function Object.prototype 的原型 万物皆对象，到最后依旧是对象，最后这个东东是个啥，我们来看一下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 构造函数 Person function Person ( ) {} // 实例对象 myfn，它的 隐式原型 指向了其构造函数的 原型对象 var myfn = new Person(); myfn.__proto__ === Person.prototype; //true // 那构造函数 Person 的 隐式原型又指向了谁呢 Person.prototype.__proto__ === Object .prototype; //true // Function呐 Function .prototype.__proto__ === Object .prototype; //true // 这个呢 var fn = function ( ) {}; fn.prototype.__proto__ === Object .prototype; //true Object .prototype.__proto__ === null ; //true typeof null ; //"object" 总结： 所有的函数都有一个 prototype 属性，该属性指向了一个对象，该对象就是调用该构造函数而创建出来的实例（如 myfn）的原型（如 myfn.__proto__ ）,即： myfn.__proto__ === Person.prototype 所有的对象（除 null）都具有一个 __proto__ 属性，该属性指向该对象的原型，比如： myfn.__proto__ === Person.prototype 原型也是一个对象，根据上条，那原型的原型，就是 Object.prototype 最后的 null 对象，可以当做是 什么都没有 盗一张图，我们就更加清楚了（蓝色这条表示的是原型链） 参考资料： Zepto 对象设计 主体设计 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 var Zepto = ( function ( ) { var $, zepto = {}; // ...省略N行代码... zepto.Z = function ( dom, selector ) { dom = dom || []; dom.__proto__ = $.fn; // 关键位置 dom.selector = selector || "" ; return dom; }; zepto.init = function ( selector, context ) { var dom; // 针对参数情况，分别对dom赋值 // 最终调用 zepto.Z 返回的数据 return zepto.Z(dom, selector); }; $ = function ( selector, context ) { return zepto.init(selector, context); }; // 里面有若干个工具函数 $.fn = { forEach: emptyArray.forEach, // ...省略N行代码... concat: function ( ) {} // ...省略N行代码... }; // ...省略N行代码... return $; })(); window .Zepto = Zepto; window .$ === undefined && ( window .$ = Zepto); 自定义模拟 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 ( function ( window ) { var $, zepto = {}; function Z ( dom, selector ) { var i, len = dom.length ? dom.length : 0 ; for ( var i = 0 ; i < dom.length; i++) { this [i] = dom[i]; } this .length = len; this .selector = selector || "" ; } zepto.Z = function ( dom, selector ) { return new Z(dom, selector); }; zepto.init = function ( selector ) { var slice = Array .prototype.slice; var dom = slice.call( document .querySelectorAll(selector)); return zepto.Z(dom, selector); }; $ = function ( selector ) { return zepto.init(selector); }; $.fn = { css: function ( key, value ) { console .log( "css" ); }, html: function ( value ) { console .log( "html" ); } }; Z.prototype = $.fn; window .$ = $; })( window ); 流程： $() -> zepto.init() -> zepto.Z() -> new Z() -> Z.prototype = $.fn; 最新版（v1.2.0）模拟 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 // 自执行匿名函数(IIFE，立即调用函数表达式) ( function ( global, factory ) { // amd 规范 if ( typeof define === "function" && define.amd) { define( function ( ) { return factory(global); }); } else { factory(global); } })( this , function ( window ) { var Zepto = ( function ( ) { var $; var zepto = {}; // 大Z构造函数 function Z ( dom, selector ) { var i, len = dom ? dom.length : 0 ; for (i = 0 ; i < len; i++) this [i] = dom[i]; this .length = len; this .selector = selector || "" ; } // zepto.Z() 返回大Z构造函数的实例，方便实例对象的 __proto 就会指向 Z.prototype zepto.Z = function ( dom, selector ) { return new Z(dom, selector); }; // 解析 DOM，并调用 zepto.Z() zepto.init = function ( selector, context ) { // 自定义模拟方法，源码并非这样简单 var slice = Array .prototype.slice; var dom = slice.call( document .querySelectorAll(selector)); // create a new Zepto collection from the nodes found return zepto.Z(dom, selector); }; // 第一步初始化 $ = function ( selector, context ) { return zepto.init(selector, context); }; // 方法属性 $.fn = { constructor : zepto.Z, // 手动绑定 constructor 属性 length: 0, push: "push method", css: function() { console .log( "css" ); return this ; // 返回 this，可以链式调用 }, html: function ( ) { console .log( "html" ) return this ; } }; $.fn.on = function ( event, data, callback ) { console .log( "on method" ); }; $.fn.off = function ( event, data, callback ) { console .log( "off method" ); }; $.fn.bind = function ( event, data, callback ) { return this .on(event, data, callback); }; $.fn.unbind = function ( event, callback ) { return this .off(event, callback); }; // 最终的方法属性等都指向了 $.fn，这里就是原型的关键使用 zepto.Z.prototype = Z.prototype = $.fn; $.zepto = zepto; return $; })(); window .Zepto = Zepto; window .$ === undefined && ( window .$ = Zepto); }); amd 规范： 1 2 3 4 5 6 7 8 9 ( function ( global, factory ) { if ( typeof define === "function" && define.amd) { define( function ( ) { return factory(global); }); } else { factory(global); } })( this , function ( window ) {}) 学习资料 - 视频

关于 http 请求的几种方式

学习 的文章总结，其实就是照抄，哈哈哈哈…顺便几一句文章里的话：所有这些点，都必须脚踏实地在具体应用场景下去分析、去选择，要让场景说话。