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

简介: zepto.fragment = function(html, name, properties) { var dom, nodes, container // 如果是简单的标签 $1 = div / p       // 创建节点 if (singleTagRE.

 

        zepto.fragment = function(html, name, properties) {
            var dom, nodes, container
            // 如果是简单的标签<div></div> <p/>   $1 = div / p
       // 创建节点 if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1)) // 不存在,即不是简单的标签 if (!dom) { if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>") if (name === undefined) name = fragmentRE.test(html) && RegExp.$1 if (!(name in containers)) name = '*' container = containers[name] container.innerHTML = '' + html dom = $.each(slice.call(container.childNodes), function(){ container.removeChild(this) }) } if (isPlainObject(properties)) { nodes = $(dom) $.each(properties, function(key, value) { if (methodAttributes.indexOf(key) > -1) nodes[key](value) else nodes.attr(key, value) }) } return dom }

  

我们从入口开始吧         $  函数就是执行了 zepto的init()函数

 $ = function(selector, context){
            return zepto.init(selector, context)
        }

  

        zepto.init = function(selector, context) {
            var dom
           // 返回一个空的 Z实例
            if (!selector) return zepto.Z()
            // 字符串
            else if (typeof selector == 'string') {
                selector = selector.trim()
                // 如果是标签字符串,创建节点框架,返回一个节点数组  
                if (selector[0] == '<' && fragmentRE.test(selector))
                    dom = zepto.fragment(selector, RegExp.$1, context), selector = null
                // 如果存在context 在上下文中查找 selector
                else if (context !== undefined) return $(context).find(selector)
                // 不存在 上下文context 在document上选择
                else dom = zepto.qsa(document, selector)
            }
            // 如果是fn 直接调用ready函数
            else if (isFunction(selector)) return $(document).ready(selector)
            // 如果是Z实例 ,直接返回实例selector
            else if (zepto.isZ(selector)) return selector
            else {
                // 给定的节点数组
                if (isArray(selector)) dom = compact(selector)
                // 单个节点,转为数组
                else if (isObject(selector))
                    dom = [selector], selector = null
                // If it's a html fragment, create nodes from it
                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
                else if (context !== undefined) return $(context).find(selector)
                // And last but no least, if it's a CSS selector, use it to select nodes.
                else dom = zepto.qsa(document, selector)
            }
            // 实例化节点集合
            return zepto.Z(dom, selector)
        }

  

selector  几种形式:

没有             返回一个dom类数组list

string         如果是选择器,直接返回dom的list对象

function       直接执行$(document).ready()函数

如果是Z实例    直接返回selector

array        对象数组,直接返回dom的list对象

object      返回单个dom对象

 

 zepto.Z = function(dom, selector) {
            return new Z(dom, selector)
        }

  

每次使用 $ 符都会创建一个 节点集合实例

 

      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 || ''
        }

  

创建节点集合类 dom为节点数组

 

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

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

http://www.cnblogs.com/jiebba    我的博客,来看吧!

如果有错误,请留言修改下 哦!

相关文章
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
7月前
|
存储 前端开发 中间件
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
|
JavaScript 前端开发 API
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
187 0
|
JavaScript 前端开发
📕 重学JavaScript:如何实现一个`new`?
如何实现一个new的效果呢?
129 0
|
JavaScript 前端开发
Vue内部原理(三)| 小册免费学
JavaScript中Array.prototype上有很多常用的方法,MDN上也给出了介绍,虽然方法众多,但是可以改变数组内容的只有7个(fill和copyWithin处于试验阶段,所以源码中没有适配),分别是:pop、push、shift、unshift、splice、sort、reverse。
78 0
|
JavaScript API
# Vue内部原理(四)| 小册免费学
与依赖收集相关的模块是:Dep实例负责维护属性的依赖列表,Watcher就是Dep实例维护的观察者队列中的观察者
92 0
|
JavaScript 前端开发
Vue内部原理(二)| 小册免费学
上一讲主要介绍了数据劫持相关的概念,现在起我们正式进入到Vue的数据绑定原理,开始感受Vue源码的精妙
89 0
|
JavaScript
js基础笔记学习156-闭包简介2
js基础笔记学习156-闭包简介2
77 0
js基础笔记学习156-闭包简介2
|
XML JavaScript 前端开发
Vue 完整版与非完整版的区别和使用方法
在使用Vue的时候,分为两个版本 一个是完整版(vue.js), 另一个是非完整版也叫运行时版本(vue.runtime.js)。
188 0
Vue 完整版与非完整版的区别和使用方法
下一篇
DataWorks