zepto源码研究 - zepto.js - 6(模板方法)
width height 模板方法 读写width/height
['width', 'height'].forEach(function(dimension){ //将width,hegiht转成Width,Height，用于document获取 var dimensionProperty = dimension.replace(/./, function(m){ return m[0].toUpperCase() }) $.fn[dimension] = function(value){ var offset, el = this[0] //读时，是window 用innerWidth,innerHeight获取 if (value === undefined) return isWindow(el) ? el['inner' + dimensionProperty] : //是document，用scrollWidth,scrollHeight获取 isDocument(el) ? el.documentElement['scroll' + dimensionProperty] : (offset = this.offset()) && offset[dimension] //TODO:否则用 offsetWidth offsetHeight //写 else return this.each(function(idx){ el = $(this) //设值，支持value为函数 el.css(dimension, funcArg(this, value, idx, el[dimension]())) }) } })
/./ 是匹配除换行(\n)以外所有的字符，不加/g，只会匹配一个字符，这里匹配的是h或w
var name = "height".replace(/./,function(m){ console.log(m); return m[0].toUpperCase()});
console.log(name);
h
Height
<div id="high" style="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;padding: 10px;background-color: blue;" id="test">
<div style="height:100%;"></div>
</div>
$("#high").height()
65
$("#high")[0].offsetHeight
65
$("#high").height()即offsetHeight包含content，padding，border在内，style=“height：41px” 指的是content为41px；因为默认样式为：box-sizing:content-box,如果指定box-sizing:border-box;则sthle=“height：41px",指的是offsetHeight为41px;
offsetHeight:指的是元素视口高度。
scrollHeight:指的是元素内部的实际高度，因此document求高度要用到它。
innerHeight: 只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
document.documentElement.clientHeight：与window.innerHeight的效果一样
outerHeight: 只读属性，声明了窗口的高度，包含工具栏。
详细信息请点击：http://www.cnblogs.com/yuteng/articles/1894578.html
注意： 这里的height()可以接受函数作为参数
Generate the "after","prepend","before","append","insertAfter","insertBefore","appendTo", and "prependTo" methods adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ],
adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ],
adjacencyOperators.forEach(function(operator, operatorIndex) { var inside = operatorIndex % 2 //=> prepend, append 有余数 注意forEach遍历出的索引从0开始 $.fn[operator] = function(){ // arguments can be nodes, arrays of nodes, Zepto objects and HTML strings //nodes HTML字符串生成的DOM集 var argType, nodes = $.map(arguments, function(arg) { argType = type(arg) //传参非 object、array、null，就直接调用zepto.fragment生成DOM return argType == "object" || argType == "array" || arg == null ? arg : zepto.fragment(arg) }), //如果$长度>1,需要克隆里面的元素 parent, copyByClone = this.length > 1 if (nodes.length < 1) return this //为0，不需要操作，直接返回 //遍历源$,执行插入 _指代此参数无效或不用 return this.each(function(_, target){ parent = inside ? target : target.parentNode //prepend, append取父元素 // convert all methods to a "before" operation //用insertBefore模拟实现 target = operatorIndex == 0 ? target.nextSibling : //after，target等于下一个兄弟元素，然后将DOM通过insertBefore插入到target前 operatorIndex == 1 ? target.firstChild : //prepend target为parent的第一个元素，然后将DOM通过insertBefore插入到target前 operatorIndex == 2 ? target : // before 直接将将DOM通过insertBefore插入到target前 null // append 直接调用$(target).append //父元素是否在document中 var parentInDocument = $.contains(document.documentElement, parent) //遍历待插入的元素 nodes.forEach(function(node){ //克隆 if (copyByClone) node = node.cloneNode(true) //定位元素不存在，，没法执行插入操作，直接删除，返回 else if (!parent) return $(node).remove() //插入节点后，如果被插入的节点是SCRIPT，则执行里面的内容并将window设为上下文 //插入元素 parent.insertBefore(node, target) //如果父元素在document里，修正script标签。原因是script标签通过innerHTML加入DOM不执行。需要在全局环境下执行它 if (parentInDocument) traverseNode(node, function(el){ if (el.nodeName != null && el.nodeName.toUpperCase() === 'SCRIPT' && (!el.type || el.type === 'text/javascript') && !el.src) window['eval'].call(window, el.innerHTML) }) }) }) } // after => insertAfter // prepend => prependTo // before => insertBefore // append => appendTo /** * 插入方法转换 * @param html * @returns {*} */ $.fn[inside ? operator+'To' : 'insert'+(operatorIndex ? 'Before' : 'After')] = function(html){ $(html)[operator](this) return
this } })
因为 ’after‘，’prepend‘，’before‘，’append‘ 都可用insertBefore来实现，所以这四个函数的内容格式是一样的，这里就可以用工厂模式来循环生产这四个函数。
这里大致流程如下：
// 可传递多个参数包括字符串和对象
$.fn[operator] = function () {
// arguments.map 针对arguments里面的数组进行处理，将里面的字符串项转化为对象
// this.forEach 循环对每一个调用者target做对应操作
// 因最后要做parent.insertBefore操作，所以这里要根据operator 确认与target有关的parent
// 因用insertBefore来模拟实现，这里要选择对应的参照节点并统一赋值给target
// 执行 parent.insertBefore(node, target);
// 如果node为script，则还必须将里面的脚本内容用window.eval()来执行
}
这里有几个小技巧说一下：
1：inside = operatorIndex % 2 ，parent = inside？target：target.parentNode如果对一个数组中的特定项进行不同的操作，可以对索引取余数，因为在js里面0代表false，正数代表true
2：target.nextSibling 表示取节点的下一个兄弟节点，这里经过测试，如果target在页面上为最后一个节点，则target.nextSibling 依然会返回一个虚拟节点,如下例子
$("#high")[0].nextSibling
结果：
#text
baseURI: "file:///home/zhutao/Documents/lib/zepto/test/defer.html"
childNodes: NodeList[0]
data: "↵"
firstChild: null
lastChild: null
length: 1
nextElementSibling: null
nextSibling: null
nodeName: "#text"
nodeType: 3
nodeValue: "↵"
ownerDocument: document
parentElement: div#first.test
parentNode: div#first.test
previousElementSibling: div#high
previousSibling: div#high
textContent: "↵"
wholeText: "↵"
__proto__: CharacterData
3：node.cloneNode(deep),deep为true，则将子节点也clone进去，否则不会clone子节点，这跟clone对象是一个道理，例子如下：
$("#clone")[0].cloneNode(true);
<div id="clone" data-test="测试" style="height:50px;width: 50px;border:1px solid red;overflow: hidden">
<div data-index="1111">clone测试</div>
</div>
$("#clone")[0].cloneNode();
<div id="clone" data-test="测试" style="height:50px;width: 50px;border:1px solid red;overflow: hidden"></div>
4:window.eval() 与 eval()的区别：window.eval() = window.eval.call(window,script); eval() = window.eval.call(this,script); ,eval()常在闭包函数使用 这里的this指的是闭包的环境变量。如下例子 ：
var x = 5; function fn(){ var x = 'jack'; window.eval('x=10;'); } fn(); console.log(x); // -->5 10 undefined var x = 5; function fn(){ var x = 'jack'; eval('x=10;'); } fn(); console.log(x); // -->5 5 undefined
（例子来自：http://www.cnblogs.com/snandy/archive/2011/03/16/1986055.html）
