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

zepto的原型  $.fn  属性:

constructor              //构造行数
forEach: emptyArray.forEach,    //都是原生数组的函数reduce: emptyArray.reduce,push: emptyArray.push,sort: emptyArray.sort,splice: emptyArray.splice,indexOf: emptyArray.indexOf,

 

concat                  //合并数组,这里还包含了合并节点集合
add                    //添加节点集合
is                    //匹配是否包含该选择器
      find: function(selector){
                var result, $this = this
                if (!selector) result = $()
                else if (typeof selector == ‘object‘)
                    result = $(selector).filter(function(){
                        var node = this
                        return emptyArray.some.call($this, function(parent){
                            return $.contains(parent, node)
                        })
                    })
                else if (this.length == 1) result = $(zepto.qsa(this[0], selector))
                else result = this.map(function(){ return zepto.qsa(this, selector) })
                return result
            },

  

emptyArray.some()     http://www.cnblogs.com/jiebba/p/6514067.html   可以看看js几种遍历不同
pluck              根据属性来返回节点集合
   // 设置宽高
        ;[‘width‘, ‘height‘].forEach(function(dimension){
            var dimensionProperty =
                dimension.replace(/./, function(m){ return m[0].toUpperCase() })

            $.fn[dimension] = function(value){
                var offset, el = this[0]
                if (value === undefined) return isWindow(el) ? el[‘inner‘ + dimensionProperty] :
                    isDocument(el) ? el.documentElement[‘scroll‘ + dimensionProperty] :
                        (offset = this.offset()) && offset[dimension]
                else return this.each(function(idx){
                    el = $(this)
                    el.css(dimension, funcArg(this, value, idx, el[dimension]()))
                })
            }
        })

  



 //添加函数`after`, `prepend`, `before`, `append`,
 adjacencyOperators.forEach(function(operator, operatorIndex) {
            var inside = operatorIndex % 2 //=> prepend, append

            $.fn[operator] = function(){
                // arguments can be nodes, arrays of nodes, Zepto objects and HTML strings
                var argType, nodes = $.map(arguments, function(arg) {
                        var arr = []

  

 zepto.Z.prototype = Z.prototype = $.fn

  

绑定到原型上面

    window.Zepto = Zepto
    window.$ === undefined && (window.$ = Zepto)
    //绑定在全局

  

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

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

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

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

时间: 2024-10-23 00:52:58

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

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

复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attachEvent(type,fn)   //ie obj.detachEvent(type) 2.js的event对象 type : 事件类型 srcElement/target :  事件源 button : 如果是鼠标按下,则 1左键 2右键 4中间滚轮 多个键则相加按下的所有值. firfox 0

zepto源码分析系列

如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Zepto源码分析-event模块 Zepto源码分析-ajax模块 Zepto源码分析-form模块 Zepto源码分析-deferred模块 Zepto源码分析-动画(fx fx_method)模块 内容一定要200字一定要200字内容一定要200字一定要200字内容一定要200字一定要200字内容

Zepto源码分析之二~三个API

由于时间关系:本次只对这三个API($.camelCase.$.contains.$.each)方法进行分析 第一个方法变量转驼峰:$.camelCase('hello-world-welcome'); 源码: var camelize; /** * 字符串替换 * 使用replace第二个参数带回调 */ camelize = function(str) { return str.replace(/-+(.)?/g, function(match, chr) { return chr ? ch

zepto源码学习-05 ajax

学习zeptoajax之前需要先脑补下,强烈推荐此文http://www.cnblogs.com/heyuquan/archive/2013/05/13/js-jquery-ajax.html 还有Aaron 的jquery源码分析系列,讲jquery的ajax的部分,当然其他也可以看,很值得学习. zepto ajax部分的设计相对简单,毕竟zepto就是轻量级的库,没有jqeury那样复杂,jquery ajax是依赖于Deferred模块的,整个代码一千多行.而zepto只有几百行,整体设

zepto源码分析-代码结构【转载】

本来想学习一下jQuery的源码,但由于jQuery的源码有10000多行,设计相当复杂,所以决定从zepto开始,分析一个成熟的框架的代码结构及执行步骤. 网上也有很多zepto的源码分析,有的给源码添加注释,有的谈与jQuery的不同,但是都没有系统的讲解zepto框架的代码结构及初始化Zepto对象的过程. 准备 默认你已经对面向对象有一定的了解,本文是边实践边写的,虽有些乱,但好处是为大家提供了分析的思路. 英文文档. 中文文档 注意在文中$变量表示一个函数对象,而$()表示执行函数,他

Spring AMQP 源码分析 05 - 异常处理

### 准备 ## 目标 了解 Spring AMQP Message Listener 如何处理异常 ## 前置知识 <Spring AMQP 源码分析 04 - MessageListener> ## 相关资源 Offical doc:<http://docs.spring.io/spring-amqp/docs/1.7.3.RELEASE/reference/html/_reference.html#exception-handling> Sample code:<ht

Zepto源码分析-event模块

源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var _zid = 1, undefined, slice = Array.prototype.slice, isFunction = $.isFunction, isString = function(obj){ return typeof obj

zepto源码分析------事件篇

说说zepto.js的源码.今天先分析事件,我比较懒,前面的基础函数就不分析了.直接按模块写就可以了. 在分析之前先简单的说一下zepto的大致结构 var Zepto = (function{})() // 事件模块 (function($){})(zepto) //ajax模块 (function($){})(zepto) // form事件 (function($){})(zepto) 大致结构就是这样了;其实里面的函数也挺简单的,我们都知道zepto这个框架是专为移动端开发,可谓是短小精

Zepto源码分析-deferred模块

源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. // // Some code (c) 2005, 2013 jQuery Foundation, Inc. and other contributors ;(function($){ var slice = Array.prototype.slice function Deferr