(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. Android 性能优化（14）网络优化（ 10）Determining and Monitoring the Connectivity Status

    Determining and Monitoring the Connectivity Status This lesson teaches you to Determine if you Have ...

  2. ASP.NET MVC应用程序中支持用户使用腾讯QQ和微信以及新浪微博的第三方登录

    什么是第三方授权登录,就是一些大家都会有的帐号如QQ.微信.淘宝.微博等账户.通过那些巨头公司提供的api直接实现登录. 当然,我们是不可能得到你的用户名和密码的.不了解的人,可能会存在这个疑虑.我们 ...

  3. C#时间相关方法

    当前电脑的时间: DateTime.Now//当前时间 DateTime.Now.Date//当前日期的 0:00:00 DateTime.Now.ToLongDateString();//显示日期 ...

  4. php函数的声明与使用

    function 函数名(){ 函数体 } 一个函数是由3部分组成:声明(function 关键字).函数名(用来找到函数体的).函数体(封装的代码) 2.函数的优越性 代码重用性强.维护方便.提高开 ...

  5. P1400 塔

    题目描述 有N(2<=N<=600000)块砖,要搭一个N层的塔,要求:如果砖A在砖B上面,那么A不能比B的长度+D要长.问有几种方法,输出 答案 mod 1000000009的值. 输入 ...

  6. UI/UE/ID/UED/UCD的区别（转）

    对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概念代表着什么含义,今天给大家做一个简单地介绍. 简述: UI (User Interface):用户界面 UE或UX (Us ...

  7. 语义分割：使用关系图辅助图像分割-Capsule Network、IceNet

    文章:欲取代CNN的Capsule Network究竟是什么来头?它能为AI界带来革命性转折么? 文章:用于分类.检测和分割的移动网络 MobileNetV2 网络 文章:后RCNN时代的物体检测及分 ...

  8. IOS 11,UIWebView内容随状态栏高度下移，导致状态栏不透明

    解决方案: 方法1:在html中设置 <meta name="viewport" content="viewport-fit=cover,maximum-scale ...

  9. CAD得到0层上的所有实体（com接口VB语言）

    主要用到函数说明: IMxDrawSelectionSet::Select 构造选择集.详细说明如下: 参数 说明 [in] MCAD_McSelect Mode 构造选择集方式 [in] VARIA ...

  10. 梦想CAD控件安卓参数绘图

    在CAD绘图中,参数化绘图可以帮助我们极大缩短设计时间,用户可以按照设计意图控制绘图对象,这样即使对象发生了变化,具体的关系和测量数据仍将保持不变,能够对几何图形和标注进行控制,可以帮助用户应对耗时的 ...