一、事件代理
事件绑定后，检测顺序就会从被绑定的DOM下滑到触发的元素，再冒泡到绑定的DOM上，也就是说，如果你监听了一个DOM节点，那就等于你监听了其所有的后代节点。
代理的意思就是之间厅父节点的时间触发，以来代理对其后代节点的监听，而你需要做的只是通过currentTarget 属性得到触发元素并作出回应。
使用事件代理意味着你可以节省大量重复的事件监听，以减少浏览器资源消耗。还有一个好处就是让HTL独立起来，比如之后还有要加子元素的需求，也不需要再为其单独加时间监听了
常用的属性与方法：
- type(string):事件的名称
- target(node):事件要触发的目标节点
- currentTartget:指向整下处理事件的元素（this event.currentTarget）
- bubbles(boolean):表明该事件是否是在冒泡阶段触发的
- preventDefault(function):静止一切默认的行为,event.preventDefault 方法来禁用默认行为。
- stopPropagation(function):很多时候，我们触发某个元素，会顺带触发出它父级身上的事件，这有时候是我们不想要的，大多数我们想要的还是事件相互独立。所以我们可以选择阻止事件冒泡，使用event.stopPropagation().
- stopImmediatePropagation(function): 与 stopPropagation 类似，就是阻止触发其他监听函数。但是与 stopPropagation 不同的是，它更加 “强力”，阻止除了目标之外的事件触发，甚至阻止针对同一个目标节点的相同事件
- cancelable(boolean):这个属性表明该事件是否可以通过调用
- eventPhase(number):这个属性的数字表示当前时间触发在什么阶段 0：none 1：捕获 2:目标 3:冒泡
- isTrusted (boolean): 表明该事件是浏览器触发（用户真实操作触发），还是 JavaScript 代码触发的。
二、常用事件
- load 资源加载完成时触发。这个资源可以是图片、CSS 文件、JS 文件、视频、document 和 window 等等。
- DOMContentLoaded DOM构建完毕的时候触发, jQuery的ready方法包裹的就是这个事件。
- beforeunload
当浏览者在页面上的输入框输入一些内容时，未保存、误操作关掉网页可能会导致输入信息丢失。当浏览者输入信息但未保存时关掉网页，我们就可以开始监听这个事件,这时候试图关闭网页的时候，会弹窗阻止操作，点击确认之后才会关闭。当然，如果没有必要，就不要监听，不要以为使用它可以为你留住浏览者。 - resize 当节点尺寸发生变化时，触发这个事件。通常用在 window
上，这样可以监听浏览器窗口的变化。通常用在复杂布局和响应式上。出于对性能的考虑，你可以使用函数 throttle 或者 debounce
技巧来进行优化，throttle 方法大体思路就是在某一段时间内无论多次调用，只执行一次函数，到达时间就执行；debounce
方法大体思路就是在某一段时间内等待是否还会重复调用，如果不会再调用，就执行函数，如果还有重复调用，则不执行继续等待。 - error 当我们加载资源失败或者加载成功但是只加载一部分而无法使用时，就会触发 error
事件，我们可以通过监听该事件来提示一个友好的报错或者进行其他处理。比如 JS
资源加载失败，则提示尝试刷新；图片资源加载失败，在图片下面提示图片加载失败等。该事件不会冒泡。因为子节点加载失败，并不意味着父节点加载失败，所以你的处理函数必须精确绑定到目标节点。
三、闭包
javascript语言的特殊之处，就在于函数内部可以直接访问全局变量。另一方面，在函数外部自然无法读取函数内的局部变量。但是通过闭包，可以再函数外面访问到内部的变量 比如：
function num(){
var a = 1
function addNum(){
console.log(a) //1
}
}函数addNum被包裹在函数num内部，这时num内部的所有局部变量，对addNum都是可见的。这就是Javascript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
闭包允许将函数与其所操作的某些数据（环境）关连起来。这显然类似于面向对象编程。在面对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。因而，一般说来，可以使用只有一个方法的对象的地方，都可以使用闭包。
我们在举个栗子：
function num(){
var a = 100
function addNum(){
console.log(a++)
}
return addNum
}
var result = num()
result() //100
result() //101原因：num() 是 addNum() 的父函数，而addNum() 被赋给了一个全局变量，这导致addNum始终存在内存中，而addNum的存在依赖于num,因此num也始终在内存中，一个牵着一个，不会在调用结束后，被垃圾回收机制回收
用闭包模拟私有方法（模块模式）
JavaScript 并不提供原生的支持，但是可以使用闭包模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分。
下面的示例展现了如何使用闭包来定义公共函数，且其可以访问私有函数和变量。这个方式也称为 模块模式（module pattern）：
var Counter = (function() {
var privateCounter = 0
function changeBy(val){
privateCounter += val
}
return {
increment:function(){
changeBy(1)
}
decrement:function(){
changeBy(-1)
}
value:function(){
return privateCounter
}
}
})
console.log(Counter.value()) //0
Counter.increment()
Counter.increment()
console.log(Counter.value()) //2
Counter.decrement()
console.log(Counter.value()) //1在循环总创建闭包
function showHelp(help){
document.getElementById('help').innerHTML = help
}
function makeHelpCallback(help){
return function(){
showHelp(help)
}
}
function setupHelp(){
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
]
for(var i = 0; i < helpText.length; i++){
var item = helpText[i]
document.getElementById(item.id).onfocus = makeHelpCallback(item.help)
}
}
使用闭包的注意点
- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
- 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
四、原型继承
在javascript中，每个函数都有一个原型属性prototype指向函数自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入到Object对象的原型(null)，这样就形成了原型链
- prototype: 在函数身上，指向原型对象
- proto: 在对象身上（包括函数创建的对象, 函数本身和原型对象），指向自身的原型
- constructor: 在原型对象上，指向构造函数, 在多级继承的时候，指明构造函数方便在对象上扩展原型属性
- Object.protp为null: 原型的顶端
原型使用方式
一、通过Calculator 对象的prototype属性复制对象字面量来设定Calculator对象的原型
var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};
Calculator.prototype = {
add: function (x, y) {
return x + y;
},
subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));二、分别设置原型对象:
var Calculator = function(decimalDigits, tax) {
this.decimalDigits = decimalDigits
this.tax = tax
}
Calculator.prototype.add = function (x, y) {
return x + y;
}
Calculator.prototype.subtract = function (x, y) {
return x - y;
}三、赋值原型prototype的时候使用function立即执行的表达式来赋值，即如下格式:Calculator.prototype = function () { } ();, 可以封装私有的function，通过return的形式暴露出简单的使用名称，以达到public/private的效果。
Calculator.prototype = function () {
add = function (x, y) {
return x + y;
},
subtract = function (x, y) {
return x - y;
}
return {
add: add,
subtract: subtract
}
} ();五、JS的模块化
1.CommonJS
CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中。
require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。
//out.js
exports.test = function(){
....
}
//in.js
var math = require('test')
exports.add = function(n) {
return math.test(val,n)
}node.js 就是遵从common.js规范的
为什么说common.js不适合前端呢？是因为common.js是同步加载，而代码需要从一个服务器端分发到多个客户端执行，加载需要通过网络，这就不可避免的产生延迟，从而同步加载会大大降低网站的性能。所以，AMD应运而生。
2.AMD
AMD就只有一个接口：define(id?,dependencies?,factory);
它要在声明模块的时候制定所有的依赖(dep)，并且还要当做形参传到factory中，像这样：
define(['dep1','dep2'], function(dep1,dep2){...})
define(function(){
var exports = {}
exports.method = function(){...}
return exports;
})RequireJS就是实现了AMD规范了的
3.CMD
大名远扬的玉伯写了seajs，就是遵循他提出的CMD规范，与AMD蛮相近的，不过用起来感觉更加方便些，最重要的是中文版，应有尽有：cmd官网
define(function(require,exports,module){...})CMD与AMD的不同之处：
- 定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
- 遵循的规范不同。RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
- 推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。Sea.js 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。
- 对开发调试的支持有差异。Sea.js 非常关注代码的开发调试，有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。
- 插件机制不同。RequireJS 采取的是在源码中预留接口的形式，插件类型比较单一。Sea.js 采取的是通用事件机制，插件类型更丰富。
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
