非常适合新手的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    我的博客,来看吧!

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

相关文章
|
4月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
181 0
|
12月前
|
人工智能 缓存 JavaScript
读《高性能 JavaScript》笔记 -”JS进阶必读“(第二章)
读《高性能 JavaScript》笔记 -”JS进阶必读“(第二章)
46 0
|
4月前
|
XML 存储 JavaScript
【前端】对前端小白极为友好的JS DOM入门文章
【前端】对前端小白极为友好的JS DOM入门文章
100 1
|
4月前
|
存储 移动开发 前端开发
前端知识笔记(二十五)———JS中的异步编程与Promise
前端知识笔记(二十五)———JS中的异步编程与Promise
31 0
|
9月前
|
XML JavaScript 前端开发
JavaScript-05 DOM编程 全网最最 详细最全面最易懂的
JavaScript-05 DOM编程 全网最最 详细最全面最易懂的
|
11月前
|
JavaScript 前端开发 API
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
155 0
|
移动开发 前端开发 JavaScript
原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理
本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能,无任何第三方依赖,兼容PC与H5,实现了触屏双指缩放等,干货满满。
原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理
|
JSON JavaScript 前端开发
JQuery JavaScript常用API整理(前端入门必学)
JQuery JavaScript常用API整理(前端入门必学)
|
JavaScript 程序员
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
193 0
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
|
设计模式 Web App开发 JSON
动力节点jQuery学习教程,jQuery入门看这一篇就够了
jQuery 是一个“写得更少,但做得更多”的轻量级 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
140 0