jQuery 立即执行

Posted 2020-08-02 Miqinda

;(function($){// 可以去掉开头的 ; （分号），国外的开发人员编写的插件时的一种习惯 
     $.fn.pluginName = function() {     
           // Our plugin implementation code goes here.     
     };
})(jQuery);    //传入一个jQuery的参数(其是就是匿名函数的参数$的值为jQuery)，是因为该方法是对jQuery库的扩展，那么在该方法体内就可以调用jQuery库中的函数；若不传入，则无法调用jQuery库 

 

jQuery的立即调用函数表达式的写法有三种：
//写法1：

(function(window, factory) {
　　factory(window)
}(this, function() {
　　return function() {
　　//jQuery的调用
　　}
}))

//写法2：

var factory = function(){
    return function(){
    //执行方法
    }
}
var jQuery = factory();

 

//写法3：

(function(window, undefined) {
    var jQuery = function() {}
    // ...
    window.jQuery = window.$ = jQuery;
})(window);

 从上面的代码可看出，自动初始化这个函数，让其只构建一次。详细说一下这种写法的优势：

1、window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后，在闭包内部使用它的时候，可以把它当成一个局部变量，显然原先在window scope下查找的时候要快一些。
2、undefined也是同样的道理，其实这个undefined并不是javascript数据类型的undefined，而是一个普普通通的变量名。只是因为没给它传递值，它的值就是undefined，undefined并不是JavaScript的保留字。

var undefined = ‘爱思资源网‘
;(function(window) {
  alert(undefined);//IE8 ‘爱思资源网‘
})(window)

 

---

 

---

 

 

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。
典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展

 

1.1 添加一个新的全局函数 添加一个全局函数，我们只需如下定义：

jQuery.foo = function() { 
    alert(‘This is a test. This is only a test.‘); 
}; 

1.2 增加多个全局函数 添加多个全局函数，可采用如下定义：

jQuery.foo = function() { 
    alert(‘This is a test. This is only a test.‘); 
}; 
jQuery.bar = function(param) { 
    alert(‘This function takes a parameter, which is "‘ + param + ‘".‘); 
}; 

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar‘); 

1.3 使用jQuery.extend(object);

jQuery.extend({ 
    foo: function() { 
        alert(‘This is a test. This is only a test.‘); 
    }, 
    bar: function(param) { 
        alert(‘This function takes a parameter, which is "‘ + param +‘".‘); 
    } 
}); 

1.4 使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = { 
    foo:function() { 
        alert(‘This is a test. This is only a test.‘); 
    }, 
    bar:function(param) { 
        alert(‘This function takes a parameter, which is "‘ + param + ‘".‘); 
    } 
}; 

采用命名空间的函数仍然是全局函数，调用时采用的方法： 

$.myPlugin.foo(); 
$.myPlugin.bar(‘baz‘); 

通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。