jQuery中(function($){})(jQuery)详解

简单的说

(function($){
 //code
})(jQuery)

声明了一个匿名函数，也就是将jQuery对象作为参数传给函数

给大家举个例子

// 全局
var str = "全局字符串...";
(function () { // 第1层
  (function () { // 第2层
    (function () { // 第3层
      (function () { // 第4层 层数越多，访问全局越慢
        console.time('全局');
        for (var i=0; i<1e6; i++) {
          str += Math.random().toString().substr(2, 2);
        }
        console.timeEnd('全局');
      })();
    })();
  })();
})();

// 局部
(function () { // 第1层
  (function () { // 第2层
    (function () { // 第3层
      (function () { // 第4层
        var str = "内部字符串...";
        var random = Math.random;
        console.time('内部');
        for (var i=0; i<1e6; i++) {
          str += random().toString().substr(2, 2);
        }
        console.timeEnd('内部');
      })();
    })()
  })();
})();

运行代码 就可以看到效果了，比较慢，骚等片刻。
我刚刚测试发现一些内存小的电脑容易直接导致浏览器崩溃、
chrome武装到牙齿了，连字符串都缓存，看不出多大效果、

和速度应该没关系，我是这么认为的。

(function($){
// code
})(jQuery)

jQuery插件众多，你无法确定自己使用的变量或者方法名不于其他插件重名，所以需要将所有插件代码封装到一个匿名函数当中；

由于插件使用了jQuery所以需要导入jQuery到匿名函数中，同时使用$变量引用（因为大家已经习惯了使用$)。当然你在全局下也可以使用$，但是无法完成第一个条件；
封装的代码必须执行，所以要执行匿名函数同时传入jQuery参数。

总结

其实是为了保护$符号，不管外界是否引入了另外有干扰$的库，都不会干扰匿名函数中$就是jQuery的事实，因为他是作为参数被传进去的。

赞 (0)

相关推荐

  • (function($){...})(jQuery)的意思

    这里实际上是匿名函数 function(arg){...} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即: (function(arg){...})(param) 这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数 而(function($){...})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery var fn = functio

  • jQuery中extend函数详解

    在jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样.来看一下 官方API对extend 的解释: 代码如下: 复制代码 代码如下: jQuery.extend(): Merge the contents of two or more objects together into the first

  • jQuery 中DOM 操作详解

    jQuery 中DOM 操作详解

    jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

  • jQuery中$.each使用详解

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) { this; //这里的this指向每次遍历中Object的当前属性值 p1; p2; //访问附加参数 }, ['参数1', '参数2']); 2.遍历数组(有附件参数) $.each(Array, function(p1, p2){ this; //这里的this指向每次遍历中Array的当

  • AJAX在JQuery中的应用详解

    AJAX在JQuery中的应用详解

    AJAX在jQuery中的应用 1. $.ajax()方法 $.ajax()方法是一个功能十分强悍的一个底层方法,基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法. 1.1 $.ajax()中的参数及使用方法 $.ajax()调用的语法格式为: $.ajax([options]) 其中,可选参数[options]作为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器响应回调的数据,常用的参数具体格式如下: 1.2 $.

  • jQuery中的事件详解

    目录 一.概述: 二.绑定事件处理器 1..on(): 2..one(): 3..off(): 4..trigger(): 5..triggerHandler(): 6.jQuery.proxy(): 三.浏览器事件 1..resize(): 2..scroll(): 四.文档加载 1 .ready(handler) 2.$.holdReady(): 3.$.ready: 五.表单事件 1..blur(): 2..change( [eventData ], handler ) 3.其他表单事件

  • jQuery中$(function() {});问题详解

    $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,当然如果你把script标签放到页面最后面那么就没问题了,此时和ready效果一样. $(document).ready(function(){})可以简写成$(function(){}); 点击段落后,此段落隐藏: <html> <head

  • 关于JavaScript和jQuery的类型判断详解

    对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});

  • jQuery siblings()用法实例详解

    jQuery siblings()用法实例详解

    siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. jQuery 的遍历方法siblings() $("给定元素").siblings(".selected") 其作用是筛选给定的同胞同类元素(不包括给定元素本身) 例子:网页选项栏 当点击任意一个选项卡是,其他2个选项卡就会改变样式,其内容也会隐藏. 下面是html代码. <body> <ul id="menu"> <li class=

  • jQuery Validate验证框架详解(推荐)

    jQuery Validate验证框架详解(推荐)

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src=&qu

  • jQuery stop()用法实例详解

    近期查看前辈的代码,发现在使用animate()的时候前面需要加上stop(),来防止移进移出的闪动问题,但却不知道stop()里面参数的真正意思,今天查了下stop()中参数的意义和具体使用方法,分享给大家. stop(true)等价于stop(true,false): 停止被选元素的所有加入队列的动画. stop(true,true):停止被选元素的所有加入队列的动画,但允许完成当前动画. stop()等价于stop(false,false):停止被选元素当前的动画,但允许完成以后队列的所有

随机推荐