自执行匿名函数和模块模式
通常的函数定义及调用:
/*
这种定义方式经过了3个步骤
1.定义(匿名)函数
2.把函数赋值给一个变量
3.执行函数
这样做显得冗长和不灵活,并且有一个更不好的地方在于:每次都要起一个函数名(变量名)
*/
var myFunc = function(){
console.log('do something');
}
myFunc();
相当于:
/*
自执行的匿名函数(IIFE)
这种写法可以减少冗余,减少名字不匹配的机率
*/
(function(){
console.log('do something...')
})()
自执行的匿名函数的好处除了简短、灵活外,还有3个非常重要的好处
- 不会向全局名字空间添加任何变量,即我不会影响别人
- 内部定义的变量会覆盖全局同名变量,即别人也不会影响到我
- 当某些函数只需要使用1次时,可以使用IIFE
例如:
var global_var = "global_var";
(function(){
var global_var = "IIFE local var"; // 我只使用自己定义的变量,别人不会影响到我
var local_var = "local var";
})()
console.log(local_var); // 在别的地方别人也不会访问到我定义的变量,我不会影响别人
模块模式(modele pattern)
我们可以把应用封装到IIFE中,使应用免受第三方库(和我们自己)的影响,这是很不错的。但是应用往往很庞大,不能定义在一个文件中, 如果有办法将文件分成一个个的模块,每个模块都有他们自己的私有变量,这当然是很好的。好吧,模块模式入场!
// 定义一个A模块
var ModuleA = (function(){
var name = "李彦峰";// 模块A内的变量
var age = 25;
var foo = function(){
return this.name + ' ' + this.age;
}
return {
name:name,
age:age,
foo:foo
}
})();
// 如果使用A模块呢?
console.log( ModuleA.name );// 李彦峰
console.log( ModuleA.age ); // 26
console.log( Module.foo() ); // 李彦峰 26
可以看到,本来要往全局添加3个成员,即_name_、__age__、__foo__,现在只需添加1个即可,在较复杂系统中,减少全局变量很重要
相关文章
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用
随机推荐
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用