jquery框架封装及解析原理+自己搭建jquery框架+注释

<script>
    //利用自执行函数封装jq代码，避免暴露太多的全局变量
    (function (window) {
        //为了以后能方便借用数组的各种方法，提前存到变量中，全局都是用这一个数组，节约空间
        var arr = [];
        var push = arr.push;
        var splice = arr.splice;
        var slice = arr.slice;
        //模拟jQuery中的Sizzle引擎，利用选择器获取元素
        function Sizzle(seletcor) {
            return document.querySelectorAll(seletcor);
        }
        //定义jq的核心方法
        function jQuery(selector) {
            //创建jq函数原型中的F的实例，因为后面将 init函数(初始化函数)的原型指向了 jq的原型（核心操作），所以所有F的实例都可以
            //访问jq中的方法
            return new jQuery.fn.init(selector);
        }
        //使用原型替换，给jq定义原型，并且把jq原型的索引复制给jQuery.fn，即  jQuery.prototype == jQuery.fn
        jQuery.fn = jQuery.prototype = {
            constructor: jQuery,
            //定义初始化函数
            init: function (selector) {
                //为了把获取到的dom元素，并把获取到的dom元素包装成一个数组，并保存在this中
                //借用数组的splice方法，清空this最终存储的属性
                splice.call(this,0,this.length);
                //借用数组的push，把获取到的dom元素包装成一个数组，并保存在this中
                push.apply(this,Sizzle(selector));
                //为了可以使用链式编程，返回调用该方法的对象。
                //解析：一、如果是方法调用模式，this指向调用该方法的对象，return this从而实现链式编程
                //     二、如果是构造函数调用，默认返回this，return this和不返回没什么区别。
                return this;
            },
            //模仿jq中的css方法，设置dom的样式
            css: function (styleName, styleValue) {
                for (var i = 0; i < this.length; i++) {
                    var ele = this[i];
                    ele.style[styleName] = styleValue;
                }

                //为了实现链式编程
                return this;
            }
        };
        //jq中的extend方法是jq的非常核心的一个方法，在 jQuery和jQuery.prototype中都有这个方法的索引
        //entend方法使用示例：
        /*
        * 往jquery的原型中添加方法时，利用extend的特性。
        *
        * jQuery.extend({
        *   each:function(){},
        *   type:function(){},
        *   isString:function(){}
        * });
        *
        * jQuery中的工具方法一般加到jQuery中
        * jQuery中操作dom的方法一把加到jQuery.prototype中
        *
        * */

        /*
        * jq中比较核心的extend方法解析：
        *
        *
        * jQuery.extend();传入一个对象的话，就吧这个对象的属性加到jQuery上
        * jQuery.extend();传入多个对象的话，就把第2,3,4等等个对象，依次追加到第一个对象上
        *
        * jQuery.fn.extend():传入一个对象的话，就吧这个对象的属性加到jQuery.fn上
        * jQuery.fn.extend():传入多个对象的话，就把第2,3,4等等个对象，依次追加到第一个对象上
        *
        * */
        jQuery.fn.extend = jQuery.extend = function () {
            var target, sources;
            var arg0 = arguments[0];
            if (arg0.length == 0) return this;

            if (arguments.length == 1) {
                target = this;
                sources = [arg0];
            } else {
                target = arg0;
                sources = slice.call(arguments, 1);
            }
            for (var i = 0; i < sources.length; i++) {
                var source = sources[i];
                for (var key in source) {
                    target[key] = source[key];
                }
            }
            return target;
        }
        //核心操作 核心操作 核心操作  让init的原型指向 jquery的原型，这样，任何init的实例，都可以访问
        // jq原型中的所有方法
        jQuery.fn.init.prototype = jQuery.fn;
        //暴露两个全局变量，可以访问 jq中的方法
        window.jQuery = window.$ = jQuery;
    })(window);

</script>

jquery框架封装及解析原理+自己搭建jquery框架+注释相关推荐

IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
android在搭建框架时要注意,Android开发搭建应用框架步骤和注意的问题
每个人对应用框架的理解不相同,但是最终达到的效果应该是一样: 降低项目的复杂性易扩展.易修改.可重用性强.可维护性强职责单一,功能清晰在android开发项目中,我们首先要考虑的是这个项目或者说 ...
Jquery miniUI 开发教程（2）搭建Jquery miniUI 开发环境
Jquery miniUI 下载地址:http://www.miniui.com/download Note:请根据不同的服务端后台,选择下载不同后台版本的MiniUI. 下载后,解压缩后,如图所示: ...
Mac本如何运营php框架,1、Mac系统下搭建thinkPHP框架环境
No such file or directory 错误位置 FILE: /Library/WebServer/Documents/porsche/ThinkPHP/Lib/Core/Db.class ...
php框架中数据库模型层原理,简单模拟ThinkPHP框架模型层对数据库的链式操作-Go语言中文社区...
在接口被实例化以后的每个方法中return 类本身就可以达到链式操作. 改善了写多行代码执行一次操作的缺点. 下面请看我的代码,若有疑问,请留言给我. class Instance{ public s ...
iOS 走近商城 APP(三 WKWebView 商品规格选择框架封装)
原文链接:http://www.jianshu.com/p/293ee1bfe104 商城 -- 由 3033 分享开篇忽然发现最近也只有值班才能写东西了,中间更新了两篇其他的断了下商城相关的文章 ...
jQuery 中 data 方法的实现原理
jQuery 中 data 方法的实现原理前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQue ...
[源码解析] 深度学习分布式训练框架 horovod (11) --- on spark --- GLOO 方案
[源码解析] 深度学习分布式训练框架 horovod (11) - on spark - GLOO 方案文章目录 [源码解析] 深度学习分布式训练框架 horovod (11) --- on spa ...
[源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark
[源码解析] 深度学习分布式训练框架 horovod (10) - run on spark 文章目录 [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark ...

jquery框架封装及解析原理+自己搭建jquery框架+注释

jquery框架封装及解析原理+自己搭建jquery框架+注释相关推荐

最新文章

热门文章