jQuery 立即执行

;(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‘); 

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

时间: 2024-10-12 20:44:11

jQuery 立即执行的相关文章

[Js/Jquery]立即执行匿名函数

摘要 有时使用js写了一个匿名方法,需要立即执行.因为没有方法名称,无法在其它地方调用. 匿名函数 匿名函数,可以认为是没有方法名称的函数. js中如果想执行匿名函数,结构如下: (function () { //逻辑代码 })() 使用()将匿名函数括起来,后面再加一对小括号(包含参数列表). 例如: alert((function (x, y) { return x + y; })(2, 3)); 命名函数自调用 (function myfunc() { alert("23333"

解决在IE浏览器中JQuery.resize()执行多次的方法(转)

最近在做前台效果的时候用到了JQuery提供的resize()事件.resize 这个事件是监听浏览器窗口的放大与缩小,也就是说浏览器窗口大小的变化. 我在W3CSCHOOL上面查阅的时候,提供了一个例子.W3C源码 <</SPAN>html> <</SPAN>head> <</SPAN>script type="text/javascript" src="/jquery/jquery.js">

Jquery 事件执行两次

js(jquery)的on绑定点击事件执行两次的解决办法-不是事件绑定而是事件冒泡 阻止冒泡的方法并不止 return false 这一种,还有event.stopPropagation(),这两种方法是有区别的,简单来说:event.stopPropagation()会阻止事件往上冒泡,但是并不阻止事件本身:return false 则是既阻止了事件往上冒泡又阻止了事件本身. 修改前 $(".project_select").change(function () { var chec

jquery定时执行

$(function(){ //监听鼠标点击事件 $('.hread_cha').click(function(){ }); //定时执行,5秒后执行show() window.setTimeout(function(){ $('.hread_img').slideUp(1000); },3000); }); 使用window(当前窗口)调用时间函数来完成定时执行操作使用window(当前窗口)使用set(设置)Time(时间)out(退出).调用hread_img函数来执行jquery的sli

jquery 自执行笔记

一般都是(funbction a(){})(),这个(funbction(){}) 这个是表达式,当代码执行到这一步的时候,由于返回值是个函数,所以遇到() 就会执行: 而 function a(){}(),则会报错: 因为js 是会预编译 匿名函数 的,当执行的时候 发现这边就是 个() ,就会报错! (funbction a(x,y){})(x,y),这个可以添加入参,代码中可以使用

jquery回车执行某个事件

这里用到的是在查询框中输入数据后直接回车直接查询. //回车执行查询事件(执行class='btn-query'的单击事件) $(document).keydown(function (event) { if (event.keyCode == "13") { //回车执行的事件 $(".btn-query").click(); return; } }); 这样写后就基本可以实现回车查询了,但在一些情况下存在问题,就是我们的数据是写在一个form中的,并且该form

jQuery.Ajax()执行WCF Service的方法

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. www.qidian.com/Bo

不同浏览器(chrome,firefox,IE)在JQuery与原生JS之执行性能比较

本次测试所用浏览器为chrome(36.0.1985.125m),firefox(31.0),IE(8.0) 1. 比较JQuery在不同浏览器对于js的执行性能 计算插入20000条div节点所需时间 for(var i=0;i<20000;i++){ var divTag = document.createElement('div'); $("#chn").append(divTag); } Result: 时间单位ms chrome 584 614 593 574 596

jquery中ready函数,$(function(){})与自执行函数的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.12.1.js"></script> <script type=&q