`
wenrunchang123
  • 浏览: 250986 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery 中 (function( window, undefined ) {})(window)写法详解(转)

 
阅读更多

  最常见的闭包 (Closure) 范式大家都很熟悉了:

123 (function() {// ...})();

很简单,大家都在用。但是,我们需要了解更多。
首先,闭包是一个匿名函数 (Anonymous function), 即是 (function() {}) 这部分。之所以要给 function 添加括弧是为了让它形成一个表达式 (expression), 有了表达式,并且确定它的类型是个函数 (Function 实例), 就可以直接调用它。所以,后面的一对括弧是可以工作的,它的意义是:我要调用 (call) 这个函数。

既然是函数调用,那就可以像一般的函数那样,在调用时传入参数。这就是本次讨论的话题。

传入 window 参数

 

123 (function(win) {// ...})(window);

这样做最直观的好处是书写便利:少写几个字。你可以在闭包内任何地方使用 win, 它都会指向 window 对象。另外,它有利于压缩减少最终代码的体积,经过压缩后 (如 Google Closure Complier), 所有的 win 都会被替换成形如 a 这样的简单变量。win 用得越多,减少的字节数也越多。

不过,便利的同时也会带来陷阱。在 IE 上,window 总是指向当前窗口对象,这个没有问题,但是在某些场景下,使用闭包内的 win 变量会导致拒绝访问错误 (Access denied). 重现方式大致是这样的:当页面引用其他域名的脚本,并且该脚本调用了闭包内的 window.document, 而且这个闭包代码是来自另一个域名的脚本。在这种情况下,使用 win 会保持对 window 最早的引用,通过另一个域的脚本访问 win 会导致 IE 认为脚本产生了跨越冲突,从而拒绝了对 win.document 的访问。解决办法是不使用形参 win, 而是直接使用 window. 需要说明的是,给闭包传入 document 也会导致 IE 出现同样的问题。

传入 undefined

其实把 undefined 作为形参就,实参就可以不用传了,因为 JavaScript 中访问未传入的参数就会得到 undefined. 因此,你可以这样写:

123 (function(undefined) {// ...})();

和上面的讨论一样,你可以在闭包内任何地方使用 undefined, 可以少写几个字(如果把 undefined 换成更短的名字),也可以在减少压缩后体积。

另一个的优势是,你可以认为它是个变量,把它当变量来使用,它的值恒等于 (===) 真正的 undefined. 当外部代码意外地定义了 undefined 的时候——不常见,但确实可能会发生——你可以正常地使用真正的 undefined, 而不会被外部的 undefined 意外影响. 这是由 JavaScript 作用域规则决定的。
无论是否使用这个 undefined 参数,都应该避免使用 undefined 的字符串常量,如:

123 if(typeofmyVar === 'undefined') {// bad part...}

因为如果你把字符串写错了,机器不会告诉你,而且会产生一个难以检查出来的bug. 幸运的是,对于 JavaScript 来说,JsLint 可以帮你做这个校验。当 myVar 已定义的时候(通过形参或 var 声明),上面的代码改成这样会更易于调试:

123 if(myVar === undefined) {// good part...}

结论

从上面两个例子来看,我们建议不要传入 window, 但是可以安全地使用第二种方式 (写 undefined 形参);我们还要尽量避免使用字符串常量。
最后,最重要的是,这只是两个特定对象和类型的讨论,举一反三,你会更了解 JavaScript

分享到:
评论

相关推荐

    jquery_newwindow

    《jQuery新窗口应用详解》 在网页开发中,弹出窗口是一种常见的交互方式,它可以用于显示消息、警告、确认对话框以及打开新的页面。在jQuery库中,处理弹出窗口的功能强大且灵活,使得开发者能够轻松实现各种效果。...

    JQuery DIV 实现window.confirm美化确认提示框

    在标题中提到的"JQuery DIV 实现window.confirm美化确认提示框",实际上是指使用`jQuery`和`HTML`的`DIV`元素来创建一个可自定义样式的确认提示框,以替代原生的`window.confirm()`。`DIV`是HTML中的一个块级元素,...

    弹出层的例子(含jquery.DOMWindow脚本)

    这里我们关注的是一个包含`jquery.DOMWindow`脚本的弹出层例子。`jQuery`是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。`DOMWindow`则是基于jQuery的一个插件,用于创建可定制的弹出...

    jquery重写window alert 信息提示

    在`jquery-latest.js`和`jquery-latest.pack.js`中,包含了最新的jQuery库,这两个文件都是压缩版,`pack.js`是进一步压缩过的,以减少页面加载时间。 为了重写`alert`,我们可以创建一个自定义的函数,例如`custom...

    Jquery_弹window窗体_esayui界面

    本教程将聚焦于如何使用jQuery来创建弹出式窗口(Window),结合EasyUI框架来构建用户友好的界面。EasyUI是基于jQuery的一个轻量级的前端框架,提供了丰富的组件和美观的样式,使得开发者可以快速搭建功能齐全的网页...

    jQuery开发技术详解

    第1章 Web开发的发展与趋势 第2章 JavaScript基础 第3章 文档对象模型(DOM) 第4章 工欲善其事,必先利其器——开发工具 第5章 jQuery快速上手 第6章 使用选择器获得要...《jQuery开发技术详解》光盘 源文件+ppt.rar

    Jquery $when done then的用法详解

    对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when…done…fail…then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱 $.ajax({ url...

    jquery的总体架构分析及实现示例详解

    jQuery整体框架甚是复杂,也不易读懂,这几日...16 (function( window, undefined ) {  // 构造 jQuery 对象  22 var jQuery = (function() {  25 var jQuery = function( selector, context ) {  27 return n

    jquery.DOMWindow弹出层与TAB切换实例汇总.rar

    jquery.DOMWindow弹出层与TAB切换实例汇总,jquery.DOMWindow.js是浮动弹出框的核心部件,本插件的弹出框有多种形式,比如它可以弹出不带边框的、带有淡入淡出特效的、各种颜色的背景浮动框、弹出后背景会变暗的浮动...

    jQuery(document).ready(function($) { });的几种表示方法

    `jQuery(document).ready()`函数是jQuery中的一个重要概念,它确保了在执行任何JavaScript代码之前,DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...

    jQueryUI MetroUI WindowUI 主题

    《jQueryUI MetroUI WindowUI 主题详解》 在Web开发领域,jQuery UI 是一个非常流行的JavaScript库,它为HTML提供了丰富的交互式用户界面组件。jQuery UI 的魅力在于其可定制性和丰富的主题系统,使得开发者可以...

    jQuery扩展插件和拓展函数的写法-代码

    在这个模板中,`$.fn`是jQuery原型对象,所以我们添加的方法可以被所有jQuery对象调用。`$.extend`用于合并默认参数和用户传入的参数。`each`函数遍历并作用于匹配到的每个元素。 现在,我们来看看如何编写jQuery...

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

    在jQuery的代码中,我们经常看到一种特殊的语法结构 `(function($){})(jQuery)`,这被称为立即执行函数表达式(IIFE,Immediately Invoked Function Expression)。这个结构在jQuery插件开发中尤为常见,因为它提供...

    jquery window

    **jQuery Window 知识点详解** 标题中的"jQuery Window"是指使用jQuery库创建的一个窗口(Window)组件,这种组件在Web应用中常用于模拟桌面应用的弹出窗口效果,提供丰富的交互性和自定义功能。jQuery作为一个轻量...

    jQuery中;function($,undefined) 前面的分号的用处

    ;(function($){$.extend($.fn… ...3、因为undefined是window的属性,声明为局部变量之后,在函数中如果再有变量与undefined作比较的话,程序就可以不用搜索undefined到window,可以提高程序性能。

    详解jQuery中的事件

    而在jQuery中,我们可以使用`$(document).ready()`或简写形式`$(function(){...})`。`$(document).ready()`在DOM结构加载完成后即可执行,无需等待所有资源加载,这样可以提前执行与DOM结构相关的操作。相比之下,`$...

    JQUERY-window弹出框-组件v1.0

    在这个“JQUERY-window弹出框-组件v1.0”中,我们聚焦于一个特定的功能:创建可配置的弹出窗口,具备关闭和最大化等常见操作。 首先,jQuery插件是扩展jQuery功能的代码模块,它们通常包含一系列方法和函数,用于...

    JQuery开发技术详解源码

    jQuery是目前在Web开发领域最流行的JavaScript库之一。本书通过理论与实践相结合的方式,由浅入深、循序渐进地介绍jQuery库的使用。同时又辅以大量真实开发案例,可以让用户很轻松地就能使用jQuery来增强网页的互动...

    jquery.DOMWindow弹出层插件及实例汇总

    摘要:脚本资源,jQuery,DOMWindow,弹出层,浮动层 jquery.DOMWindow弹出层插件及实例汇总,jquery.DOMWindow.js是浮动弹出框的核心部件,本插件的弹出框有多种形式,比如它可以弹出不带边框的、带有淡入淡出特效的、...

Global site tag (gtag.js) - Google Analytics