浅析jQuery基本结构($实现原理)

Posted jayit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅析jQuery基本结构($实现原理)相关的知识,希望对你有一定的参考价值。

jQuery是一个非常好的库,学习它的实现原理是一个很好的提高代码编写能力的途径,这里来简单解析下jQuery的基本架构,主要来说下$符号的实现原理。直接看代码吧。

技术图片
<script>
  (function(w){
        //工厂
        function jQuery(selector, context){
            return new jQuery.fn.init(selector, context);
        }
        //给原型提供一个简写方式
        jQuery.fn = jQuery.prototype = {

        };
        //init才是jQuery中真正的构造函数
        var init = jQuery.fn.init = function(selector, context){

        };
        //把构造函数的原型,替换为jQuery工厂的原型
        //这么做的目的是为了实现jQuery的插件机制,让外界可以通过jQuery方便的进行扩展
        init.prototype = jQuery.fn;
        w.jQuery = w.$ = jQuery;
    }(window));
</script>
技术图片

  1.jQuery借助了沙箱模式,其实整个jQuery包中的代码就是一个自执行函数,并且把window对象作为参数传递了过去。

  2.jQuery函数只是一个工厂,真正的构造函数时jQuery.fn.init( )

  3.把init的原型对象替换为jQuery.fn,其实也就是替换为了jQuery这个函数自己的原型对象,也就是jQuery.prototype,这么做的目的是为了实现插件机制,让外界可以通过jQuery方便的进行扩展。

  比如,我们要做一个对话框插件,就可以这么做:  

jQuery.fn.jqAlert = function(msg){
    alert(msg);
}

  这样一个简单的jq插件就做好了,用的时候只需要调用:  

$().jqAlert(‘aaa‘);

 

以上是关于浅析jQuery基本结构($实现原理)的主要内容,如果未能解决你的问题,请参考以下文章

深入浅出jQuery源码浅析--整体架构

mysql线程池的实现原理浅析

浅析SkipList跳跃表原理及代码实现

浅析SkipList跳跃表原理及代码实现转

浅析jQuery库的核心架构和常用API的简单实现

JavaScript浅析ajax的使用