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

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

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)
    //绑定在全局

  

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

个人博客 :很多好用的 npm 包 , 可以看看  https://gilea.cn/ 

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

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

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

相关文章
|
人工智能 缓存 JavaScript
读《高性能 JavaScript》笔记 -”JS进阶必读“(第二章)
读《高性能 JavaScript》笔记 -”JS进阶必读“(第二章)
56 0
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
45 0
|
JavaScript 前端开发 API
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
190 0
|
JSON JavaScript 数据格式
jQuery综合代码--(方便复习)
jQuery综合代码--(方便复习)
42 0
|
JavaScript
jQuery入门第四章(JQ 事件绑定 )
jQuery入门第四章(JQ 事件绑定 )
120 0
jQuery入门第四章(JQ 事件绑定 )
|
存储 人工智能 JavaScript
【JavaScript】巩固JS开发中十个常用功能/案例(1-10)
【JavaScript】巩固JS开发中十个常用功能/案例(1-10)
【JavaScript】巩固JS开发中十个常用功能/案例(1-10)
|
机器学习/深度学习 人工智能 前端开发
【JavaScript】巩固JS开发中十个常用功能/案例(11-20)
【JavaScript】巩固JS开发中十个常用功能/案例(11-20)
【JavaScript】巩固JS开发中十个常用功能/案例(11-20)
|
JavaScript 程序员
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
硬核解析,巧用案例学习jQuery框架三种事件绑定方式
205 0
|
Web App开发 前端开发 JavaScript
自己平常开发常用的jq方法
小技巧/代码片段,可以帮你快速开发.
1134 0
|
JavaScript 前端开发 Java
CodeMirror 代码渲染神器的极简入门实例
效果: image.png HTML: 保存 运行 JS 代码示例: // 渲染代码: var editor = CodeMirror.
2649 0