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

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 165 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ldq678/p/9666914.html

文章标签：

#javascript #ViewUI

本文解析了jQuery的基本架构，重点介绍了$符号的实现原理。通过分析jQuery的工厂模式、构造函数和插件机制，展示了如何利用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');

转载于:https://www.cnblogs.com/ldq678/p/9666914.html