(function(global, factory) {

  // 查看这里是不是定义成模块，如果定义模块就返回 一个模块

  if (typeof define === 'function' && define.amd)

    define(function() { return factory(global) })

  else

    factory(global)   //直接执行闭包外传过来的函数  funcutin(window)

}

　　

  var undefined, key, $, classList, emptyArray = [], concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArray.slice,

            document = window.document,

            elementDisplay = {}, classCache = {},

            cssNumber = { 'column-count': 1, 'columns': 1, 'font-weight': 1, 'line-height': 1,'opacity': 1, 'z-index': 1, 'zoom': 1 },

            fragmentRE = /^\s*<(\w+|!)[^>]*>/,

            singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,

            tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,

            rootNodeRE = /^(?:body|html)$/i,

            capitalRE = /([A-Z])/g,

            // special attributes that should be get/set via method calls

            methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'],

            adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ],

            table = document.createElement('table'),

            tableRow = document.createElement('tr'),

            containers = {

                'tr': document.createElement('tbody'),

                'tbody': table, 'thead': table, 'tfoot': table,

                'td': tableRow, 'th': tableRow,

                '*': document.createElement('div')

            },

            readyRE = /complete|loaded|interactive/,

            simpleSelectorRE = /^[\w-]*$/,

            class2type = {},

            toString = class2type.toString,

            zepto = {},

            camelize, uniq,

            tempParent = document.createElement('div'),

            propMap = {

                'tabindex': 'tabIndex',

                'readonly': 'readOnly',

                'for': 'htmlFor',

                'class': 'className',

                'maxlength': 'maxLength',

                'cellspacing': 'cellSpacing',

                'cellpadding': 'cellPadding',

                'rowspan': 'rowSpan',

                'colspan': 'colSpan',

                'usemap': 'useMap',

                'frameborder': 'frameBorder',

                'contenteditable': 'contentEditable'

            },

            isArray = Array.isArray ||

                function(object){ return object instanceof Array }

        zepto.matches = function(element, selector) {

            if (!selector || !element || element.nodeType !== 1) return false

            var matchesSelector = element.matches || element.webkitMatchesSelector ||

                element.mozMatchesSelector || element.oMatchesSelector ||

                element.matchesSelector

            if (matchesSelector) return matchesSelector.call(element, selector)

            // fall back to performing a selector:

            var match, parent = element.parentNode, temp = !parent

            if (temp) (parent = tempParent).appendChild(element)

            match = ~zepto.qsa(parent, selector).indexOf(element)

            temp && tempParent.removeChild(element)

            return match

        }

　　

1.  fragmentRE = /^\s*<(\w+|!)[^>]*>/；

这里复习下正则表达式

\s { 匹配任何空白符，包括空格、制表符、换页符等 }   -->   [\f\n\r\t\v]

\f { 换页符 }  -->  [\x0c\cl]

\n{ 换行符 }  -->  [\x0a\cj]

\r { 回车符 }  -->  [\x0d\cM]

\t { 制表符 }  -->  [\x09\cl]

\v { 制表符 } -->  [\x0b\cK]

*  { 匹配前面的子表达式 \s 零次或者多次 }

() { 标志一个子表达式开始和结束的位置，子表达式可获取供以后使用 }

\w{ 匹配下划线和字母数字字符 } --> [A-Za-z0-9_]

+ { 匹配前面的子表达式 \w 一次或者多次 }

a|b { 匹配或者为 a或者为b }

^ { 正则表达式最前表示 匹配开始的位置，[^>] 这里表示非的意思 }

整个连起来就是配置 没有结束标签的的 html标签  <!doctype html/>  <a href='' />  

2.singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/

? { 匹配前面子表达式零次或者一次  \/ }

?: { 非获取匹配，不提供给以后用 }

\ { 将下一个标记为特殊字符，或者为转义，引用等， 这里指向的是(\w+)这个子表达式 }

匹配html标签 <html></html>  <br/>

3.tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,

?! {正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串}

配置特殊属性

	zepto.matches = function(element, selector) {

    //判断是否存在选择器   元素  nodeType 1:Element  2:attr   3:text内容   9:document

    if (!selector || !element || element.nodeType !== 1) return false

    var matchesSelector = element.matches || element.webkitMatchesSelector ||

                          element.mozMatchesSelector || element.oMatchesSelector ||

                          element.matchesSelector

    if (matchesSelector) return matchesSelector.call(element, selector)

    // fall back to performing a selector:

    var match, parent = element.parentNode, temp = !parent

    if (temp) (parent = tempParent).appendChild(element)

    match = ~zepto.qsa(parent, selector).indexOf(element)

    temp && tempParent.removeChild(element)

    return match

  }

　　

matchesSelector  接收一个selector的CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false

zepto.qsa   接受一个selector的选中css选择器获取匹配元素

element下是否可以匹配到selector

 function type(obj) {

    return obj == null ? String(obj) :

      class2type[toString.call(obj)] || "object"

  }

　　

{}.toString.call(obj)     { 如果是函数则返回 “object function”, 数组则返回 "object array” }

返回obj 的类型

个人博客 ：精华所在   https://gilea.cn/

代码仅供参考，具体功能可以自己扩展。

http://www.cnblogs.com/jiebba/p/6529854.html

http://www.cnblogs.com/jiebba    我的博客，来看吧！

如果有错误，请留言修改下 哦！

非常适合新手的jq/zepto源码分析01的更多相关文章

  1. 非常适合新手的jq/zepto源码分析07---ajax的封装

    复习下ajax吧! 1.创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest(); xmlhttp=new ActiveXObject("Microso ...

  2. 非常适合新手的jq/zepto源码分析08---ajax的封装

    1.现在看看对JSONP的封装 $.ajaxJSONP = function(options, deferred){ if (!('type' in options)) return $.ajax(o ...

  3. 非常适合新手的jq/zepto源码分析06 -- 事件模型

    复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attac ...

  4. 非常适合新手的jq/zepto源码分析05

    zepto的原型  $.fn  属性: constructor //构造行数 forEach: emptyArray.forEach, //都是原生数组的函数reduce: emptyArray.re ...

  5. 非常适合新手的jq/zepto源码分析03

    zepto.fragment = function(html, name, properties) { var dom, nodes, container // 如果是简单的标签<div> ...

  6. 非常适合新手的jq/zepto源码分析04

    $.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean ...

  7. 非常适合新手的jq/zepto源码分析02

    function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPr ...

  8. zepto源码分析系列

    如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...

  9. 一个普通的 Zepto 源码分析（二） - ajax 模块

    一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...

随机推荐

  1. jmeter生成时间的函数

    在一个接口测试中,需要提交的请求中要带时间,在看完jmeter帮忙文档,正好总结一下 1.需求 在一个http请求中请求数据要带有时间,如下: 2.实现 突然想到jmeter自带的函数助手好像是可以实 ...

  2. 391 Perfect Rectangle 完美矩形

    有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域.每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 [1,1,2,2]. ( ...

  3. 292 Nim Game Nim游戏

    您和您的朋友,两个人一起玩 Nim游戏:桌子上有一堆石头,每次你们轮流拿掉 1 到 3 块石头. 拿掉最后一块石头的人就是胜利者.由您来开局.你们两个都是聪明人,相信都有最佳的游戏策略. 请编写一个函 ...

  4. Spark学习笔记1：Application，Driver，Job，Task，Stage理解

    看了spark的原始论文和相关资料,对spark中的一些经常用到的术语做了一些梳理,记录下. 1,Application application(应用)其实就是用spark-submit提交的程序.比 ...

  5. [转]ASP.NET MVC Domain Routing

    本文转自:http://blog.maartenballiauw.be/post/2009/05/20/ASPNET-MVC-Domain-Routing.aspx ASP.NET MVC Domai ...

  6. HDU_1879_继续畅通工程

    继续畅通工程 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  7. swift extension 的最终目的是结合

    与数据结合:对数据进行操作: 与行为结合:使用原有行为生成更便捷的行为: 与协议结合:实现协议: 与类型结合:对类型数据进行操作,添加新的行为: 与关联类型.泛型结合:对类型做出限定.

  8. JavaScipt30(第四个案例)（主要知识点：数组原型链上的一些方法）

    承接上文,下面是第四个案例 附上项目链接: https://github.com/wesbos/JavaScript30 const inventors = [ { first: 'Albert', ...

  9. form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  10. vue的自定义指令控制菜单权限

    用户登录后,选择子节点,节点中含有多个菜单,可以根据后台返回的权限数据进行权限控制 在vue上挂载自定义指令方法,根据后台返回权限移除相应节点 import Cookies from "js ...