zepto源码研究 - zepto.js (zepto.init)
简要：当我们用$()时，便会直接调用zepto.init 生成zepto对象，那zepto.init是如何根据不同类型的参数来生产指定对象呢？
zepto.init = function(selector, context) { var dom // If nothing given, return an empty Zepto collection //未传参，undefined进行boolean转换，返回空Zepto对象 // 如果$()未传入参数则走下面这句，如果传入一个参数则为selector，context为null，如果传入两个参数则都不为null if (!selector) return zepto.Z() // Optimize for string selectors //selector是字符串，即css表达式 /*else if (typeof selector == 'string') { //去前后空格 selector = selector.trim() // If it's a html fragment, create nodes from it // Note: In both Chrome 21 and Firefox 15, DOM error 12 // is thrown if the fragment doesn't begin with < // 如果是<开头 >结尾 基本的HTML代码时 if (selector[0] == '<' && fragmentRE.test(selector)) //调用片段生成dom dom = zepto.fragment(selector, RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there //如果传递了上下文，在上下文中查找元素 else if (context !== undefined) return $(context).find(selector) // If it's a CSS selector, use it to select nodes. //通过css表达式查找元素 else dom = zepto.qsa(document, selector) }*/ // If a function is given, call it when the DOM is ready //如果selector是函数，则在DOM ready的时候执行它 else if (isFunction(selector)) return $(document).ready(selector) // If a Zepto collection is given, just return it //如果selector是一个Zepto对象，返回它自己 else if (zepto.isZ(selector)) return selector else { // normalize array if an array of nodes is given //如果selector是数组，过滤null,undefined if (isArray(selector)) dom = compact(selector) // Wrap DOM nodes. //如果selector是对象,TODO://转换为数组？ 它应是DOM; 注意DOM节点的typeof值也是object，所以在里面还要再进行一次判断 else if (isObject(selector)) dom = [selector], selector = null // If it's a html fragment, create nodes from it //如果selector是复杂的HTML代码，调用片段换成DOM节点 else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there //如果存在上下文context，仍在上下文中查找selector else if (context !== undefined) return $(context).find(selector) // And last but no least, if it's a CSS selector, use it to select nodes. // 如果没有给定上下文，在document中查找selector else dom = zepto.qsa(document, selector) } // create a new Zepto collection from the nodes found //将查询结果转换成Zepto对象 return zepto.Z(dom, selector) }
1：这里首先判断如果没有传入参数，则返回新建的zepto对象
2：如果传入的是函数，$(function(){}) ,则执行$(document).ready(),即在文档加载完后执行自定义函数
3：如果selector本身就是一个zepto对象，则直接返回它自己
4：如果selector不是一个zepto对象，则根据不同类型的selector生产节点对象并赋值于dom
5：如果selector是数组，则将数组里的无效值去掉后赋值给dom
6：如果selector是对象
7：如果selector是html片段
8：如果selector是css选择字符串且context有值
9：如果selector是css选择字符串且context无值
10：调用zepto.Z，生产zepto对象
这里先看一下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 = function(dom, selector) { return new Z(dom, selector) }
首先这里Z里面传入的dom参数要求是数组，如果dom为null或undefined则this.length = 0;this.selector = selector,并返回this；这里可以认为是this继承了dom
zepto.fragment: 将HTML转化为DOM
/** * 内部函数 HTML 转换成 DOM * 原理是 创建父元素，innerHTML转换 * @param html html片段 * @param name 容器标签名 * @param propertie 附加的属性对象 * @returns {*} */ zepto.fragment = function(html, name, properties) { var dom, nodes, container // A special case optimization for a single tag // 如果是单个元素，创建dom // TODO // RegExp 是javascript中的一个内置对象。为正则表达式。 // RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串，以此类推，RegExp.$2，RegExp.$3，..RegExp.$99总共可以有99个匹配 if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1)) if (!dom) { //修正自闭合标签 如<div />，转换成<div></div> if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>") //给name取元素名 if (name === undefined) name = fragmentRE.test(html) && RegExp.$1 //设置容器名，如果不是tr,tbody,thead,tfoot,td,th，则容器名为div //为什么设置容器，是严格按照HTML语法，虽然tr td th浏览器会会自动添加tbody if (!(name in containers)) name = '*'; container = containers[name] //创建容器 container.innerHTML = '' + html //生成DOMW //取容器的子节点，TODO:子节点集会返回 $.each返回第一个参数 dom = $.each(slice.call(container.childNodes), function(){ container.removeChild(this) //把创建的子节点逐个删除 }) } //如果properties是对象，遍历它，将它设置成DOM的属性 if (isPlainObject(properties)) { //转换成Zepto Obj,方便调用Zepto的方法 nodes = $(dom) //遍历对象，设置属性 $.each(properties, function(key, value) { // 优先获取属性修正对象，通过修正对象读写值 // methodAttributes包含'val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'， // TODO: 奇怪的属性 if (methodAttributes.indexOf(key) > -1) nodes[key](value) else nodes.attr(key, value) }) } //返回dom数组 如[div,div] return dom }
这里涉及到几个正则表达式：
1:singleTagRE 匹配单个元素
var singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/; var name = (singleTagRE.test("<p></p>")&&RegExp.$1); //这里可以正常匹配<p>,<p/>,<p></p> console.log(name);
结果：p
2: tagExpanderRE
var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig; var html = "<div/>".replace(tagExpanderRE, "<$1></$2>"); console.log(html); VM412:4 <div></div> undefined var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig; var html = "<input/>".replace(tagExpanderRE, "<$1></$2>"); console.log(html); VM413:4 <input/>
3: fragmentRE：这里取出元素名 name 是为了判断是否为表格元素，为以后的container的选取做准备
var fragmentRE = /^\s*<(\w+|!)[^>]*>/; var name = fragmentRE.test("<div></div>") && RegExp.$1; console.log(name); VM443:4 div undefined var fragmentRE = /^\s*<(\w+|!)[^>]*>/; var name = fragmentRE.test("<input/>") && RegExp.$1; console.log(name); VM444:4 input undefined var fragmentRE = /^\s*<(\w+|!)[^>]*>/; var name = fragmentRE.test("<div><input/></div>") && RegExp.$1; console.log(name); VM445:4 div undefined var fragmentRE = /^\s*<(\w+|!)[^>]*>/; var name = fragmentRE.test("<div><input/>") && RegExp.$1; console.log(name); VM446:4 div undefined var fragmentRE = /^\s*<(\w+|!)[^>]*>/; var name = fragmentRE.test("<div></div><input/>") && RegExp.$1; console.log(name); VM447:4 div
