jquery中$的实现方式

发表于 | 更新于 | 分类于 | 评论数：

实现方式(网上找的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<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
2
3
4
(function(w){
    // dosomthing
    w.jQuery = w.$ = jQuery;
  })(window)

目的：通过全局对象window可以调用对象jQuery或者$

然后我们声明一个对象jQuery

1
2
3
4
(function(w){
  function jQuery(selector, context){}
  w.jQuery = w.$ = jQuery;
})(window)

效果:
效果

大功告成！但是jQuery显然是更深一层次的做法。示例方式是将原型转换为简化方法fn。然后在jQuery原型上添加一个init方法。

工厂模式

什么是工厂模式？怎么在javascript使用？

工厂模式是用来创建对象的一种最常见的设计模式。我们不暴露创建对象的具体逻辑，而是将逻辑封装到一个函数中，如示例中的jQuery函数，那么这个函数就可以被视为一个工厂。

工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。

工厂模式

toggle 切换显示/隐藏

mdn类似的例子