zoukankan      html  css  js  c++  java
  • jQuery源码分析之整体框架

    之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总结的整体框架,具体说明都注释在每一句后面。

    (function(){
         首先利用匿名函数将代码包裹在里面,防止与其他代码冲突和污染了全局环境。
    
        (21,94):定义了一些变量和函数,jQuery = function(selector,context){return 
     new jQuery.fn.init(selector,context)},我们一般调用jQ的方法都是通过对象来调用的,所以jQuery这个函数返回的是一个jQuery对象。
    
        (96,283):在jQuery对象的原型上添加属性和方法,所以jQuery其实也是一个面向对象的编程。
    
        (285,347):extend:JQ的继承方法,方便后面插件的拓展。
    
        (349,817):jQuery.extend():拓展一些工具方法,什么是工具方法,jQuery方法一般有两种,一种是$().css()这样的实例化方法,另一种就是$.trim()这种静态工具方法。
    
        (877,2856):Sizzle:复杂选择器的实现。
    
        (2880,3042):Callbacks:回调对象:函数的统一管理
         例如:function fn1(){ alert(1); }
                   function fn2(){ alert(2); }
                   var cb = $.Callbacks();
                   cb.add(fn1);
                   cb.add(fn2);
                   cb.fire();//1,2
    
        (3043,3183):Deferred:延迟对象:对异步的统一管理
          例如: var def = $.Deferred;
                     setTimeout(function(){
                          alert(1);
                          def.resolve();
                     },1000);
                     def.done(function(){//先把函数存在def对象中,只有当对象触发resolve()方法才会执行。
                         alert(2);
                     }//这样函数就能按照顺序执行,其实用的是回调的原理。
            
        (3184,3295):support:功能检测。
    
        (3308,3652):data():数据缓存。
    
        (3653,3797):queue():队列管理(入队)
                           :dequeue():(出队) 主要用于类似运动效果等animate。
    
        (3803,4299):attr()、prop()、val()、addClass()等对元素属性的操作。
    
        (4300,5128):on()、trigger()等对事件操作的相关方法。
    
        (5140,6057):DOM操作:添加、删除、获取、包装等。
    
        (6058,6620):css():样式的操作。
    
        (6621,7854):提交的数据和ajax()操作。
    
        (7855,8584):animate():运动的操作。
    
        (8585,8792) :offset():位置与尺寸的方法。
    
        (8804,8821):JQ支持模块化的模式,包括AMD与commondJS。
    
        (8826)window.jQuery = window.$ = jQuery。封装完之后,就要对外提供接口,才能使用,将jQuery对象挂载在window对象上,对外提供的接口是jQuery和$。
    })()
    

    上面就是jQuery源码的整体框架,后面就会对每一个部分进行分析和学习总结,相信通过阅读jQuery源码,将会提高自己对JS的理解和编码能力

  • 相关阅读:
    页面跳转
    vue项目流程
    前端框架发展史
    webpack构建react项目和发布流程
    React工作原理
    React项目中的registerServiceWorker作用?
    学习react总结
    浏览器的渲染:过程与原理
    浮动相关
    块级元素与内嵌元素
  • 原文地址:https://www.cnblogs.com/mcray/p/6850189.html
Copyright © 2011-2022 走看看