对于开发人员来说,很多时候我们都会涉及到JavaScript的使用,而在使用过程中,最令人沮丧的就是变量没有相应的使用范围。

在开发中,对于任何变量、数组、函数、对象等,只要不在函数的内部,都会被默认为是全局的,意味着页面上的其他脚本都可以访问它,并可进行重写覆盖。

对于不必要放在函数内部的变量,我们要如何保证不被其他代码访问并重写覆盖呢?这时就需要将变量放在一个匿名函数的内部,定义完后立即调用,例如,在JavaScript中按如下方式编写,将会产生三个全局变量和两个全局函数:

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

上面这段代码中,还需注意变量名重复的问题,如果这个页面其他脚本上也有一个叫status的变量,为了区分,我们可以将它封装在一个 myApplication 里:

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

}();

但是,这样一来,在函数外面就没有什么功能了。如果这是你需要的,那就可以了。你还可以省去函数的名称:

(function(){

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

})();

如果你想在函数外面也能使用里面的东西,那就要做些修改。为了能访问 createMember() 或 getMemberDetails(),你需要把它们变成 myApplication的属性,从而把它们暴露于外部的世界:

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

return{

createMember:function(){

// [...]

},

getMemberDetails:function(){

// [...]

}

}

}();

// myApplication.createMember() and

// myApplication.getMemberDetails() now works.

这被称作 module 模式或 singleton。但这样一来需要改变句式来使函数和变量能被外界访问甚至还需要加上myApplication 这个前缀。者貌似把简单东西复杂化了,很多开发人员并不喜欢这样做,而是更愿意简单的把需要能被外界访问的元素的指针导出来。这样做后,反倒简化了外界调用的写法:

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

return{

create:createMember,

get:getMemberDetails

}

}();

//myApplication.get() and myApplication.create() now work.

以上就是JavaScript开发中,匿名函数和模块化的使用,算是脚本变量使用的一种小技巧,希望能对你在脚本的代码的开发中有所帮助。

JavaScript的匿名函数和模块化的使用方法的更多相关文章

  1. JavaScript封装一个函数效果类似内置方法concat()

    JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...

  2. javascript 匿名函数和模块化

    任何变量,函数,数组,对象,只要不在函数内部,都被认为是全局的,这就是说,这个页面上的其它脚本也可以访问它,而且可以覆盖重写它. 解决办法是,把你的变量放在一个匿名函数内部,定义完之后立即调用它.封装 ...

  3. javascript立即执行函数与模块化

    概念:立即执行函数顾名思义就是函数定义好之后立即执行.函数表达式方式:函数表达式后面加括号()即可立即执行函数. var xmlhttpUtil = function () { function ge ...

  4. Javascript之匿名函数

    分析: 1.所谓匿名函数,从字面意思理解,就是没有名字的函数,js 用()来代替(注意,是英文状态下的括号) 2.定义形式: function (){ //to add codes that you ...

  5. javascript 利用匿名函数对象给你异步回调方法传参数

    先来创建一个匿名函数对象: /*** * 匿名函数 */ var callChangeBtn=new function(bugBtn){ this.chage=function(json){ bugB ...

  6. Javascript的匿名函数与自执行

    1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种: ...

  7. Javascript的匿名函数

    一.什么是匿名函数?在Javascript定义一个函数一般有如下三种方式:函数关键字(function)语句:function fnMethodName(x){alert(x);}函数字面量(Func ...

  8. JavaScript 作用域 匿名函数 模仿块级作用域(私有作用域)

    作用域 对于有块级作用域的语言来说,for语句中定义并初始化的变量i在循环外是无法访问的. 而javascript没有块级作用域,for语句中定义的变量i在循环结束后,依旧会存在于循环外部的执行环境( ...

  9. javascript . 04 匿名函数、递归、回调函数、对象、基于对象的javascript、状态和行为、New、This、构造函数/自定义对象、属性绑定、进制转换

    匿名函数:   没有名字的函数,函数整体加小括号不报错, 函数调用 : a:直接调用 (function (){函数体}) ( ) ; b:事件绑定 document.onlick = functio ...

随机推荐

  1. c#生成缩略图

    publicstaticvoidGenThumbnail(Image imageFrom,stringpathImageTo,intwidth,intheight)         {         ...

  2. iOS使用AVFoundation实现二维码扫描

    原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...

  3. dedeCMS安装,前端样式不显示

    因为dedeCMS样式引用用的是绝对路径:dede默认安装在网站的根目录. 所以,解决方法有三种: 1.修改代码路径,很不推荐,那么多页面可操作性低: 2.直接安装在站点根目录www目录,也行,但是容 ...

  4. [POJ 2063] Investment (动态规划)

    题目链接:http://poj.org/problem?id=2063 题意:银行每年提供d种债券,每种债券需要付出p[i]块钱,然后一年的收入是v[i],到期后我们把本金+收入取出来作为下一年度本金 ...

  5. [C# 基础知识系列]C#中易混淆的知识点

    一.引言 今天在论坛中看到一位朋友提出这样的一个问题,问题大致(问题的链接为:http://social.msdn.microsoft.com/Forums/zh-CN/52e6c11f-ad28-4 ...

  6. archlinux log 文件查看

    # pacman -S gnome-system-log gnome-logsextra/gnome-logs 3.12.1-1 (gnome-extra) A log viewer for the ...

  7. OC基础(27)

    单例设计模式 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !import ...

  8. HDU 4390 Number Sequence 容斥原理

    Number Sequence Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  9. android 开发进阶自定义控件 类似 TextView

    开发自定义控件的步骤: 1. 继承View: 2.重写构造函数并构造方法中获得我们自定义的属性. 3. 重写onDraw, 4.重写onMeasure 等函数 一.自定义View的属性,首先在res/ ...

  10. FPGA中的时序分析(四)

    常用约束语句说明 关于Fmax      上述是实现Fmax的计算公式,clock skew delay的计算如下图, 就是两个时钟的差值.到头来,影响Fmax的值的大小就是组合逻辑,而Fmax是针对 ...