使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE)
模块就是实现特定功能的一组方法。
只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。
function m1(){
//...
}function m2(){
//...
}
上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。
这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。
二、对象写法
为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。
var module1 = www.76seo.comnew Object({
_count : 0,
m1 : function (){
//...
},m2 : function (){
//...
}});
上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。
module1.m1();
但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。
module1._count = 5;
三、立即执行函数写法
使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE),可以达到不暴露私有成员的目的。
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};var m2 = function(){
//...
};bbs.76seo.comreturn {
m1 : m1,
m2 : m2
};})();
使用上面的写法,外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined
module1就是Javascript模块的基本写法。下面,再对这种写法进行加工。
四、放大模式
如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。
var module1 = (function (mod){
mod.m3 = function () {
//...
};return mod;
})(module1);
上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。
五、宽放大模式(Loose augmentation)
在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。
六、输入全局变量
独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
var module1 = (function ($, YAHOO) {
//...
})(jQuery, YAHOO);
上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。这方面更多的讨论,参见Ben Cherry的著名文章《JavaScript Module Pattern: In-Depth》。
这个系列的第二部分,将讨论如何在浏览器环境组织不同的模块、管理模块之间的依赖性。
使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE)的更多相关文章
- js 立即调用函数 IIFE(Immediately Invoked Function Expression) 【转】
原文链接:https://www.cnblogs.com/ming-os9/p/8891300.html JS中 (function(){...})()立即执行函数 1 (function(){. ...
- javascript ----> Immediately-Invoked Function Expression (IIFE)(翻译)
http://benalman.com/news/2010/11/immediately-invoked-function-expression/ 如果你没有注意到,我对术语有一点点坚持. 所以,在听 ...
- JS---------IIFE(Imdiately Invoked Function Expression 立即执行的函数表达式)
+function($){}(jQuery); 今天看到js代码里面有这个格式的代码,不知道啥意思,就去查了一下,我也是js小白.首先前面的+号,这个不是固定非要写+号,只要写一级运算符都可以.目的是 ...
- IIFE-js中(function(){…})()立即执行函数写法理解
介绍IIFE IIFE的性能 使用IIFE的好处 IIFE最佳实践 jQuery优化 在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的 ...
- JS中 (function(){...})()立即执行函数
(function(){...})() (function(){...}()) 这是两种js立即执行函数的常见写法. 基本概念: 函数声明:function fname(){...}; 使用funct ...
- [转]Javascript中的自执行函数表达式
[转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...
- jacascript 立即执行函数(IIFE)与闭包
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 一直没搞清楚立即执行函数和闭包之间的关系,总结一下: 闭包有很多种理解:访问不到内部作用域,函数就是这样, ...
- 立即执行函数与Function
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 与new Function()区别? new Function() 还是有区别的,fn = ne ...
- 立即执行函数(IIFE)的理解与运用
作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从 ...
随机推荐
- SQL Server 2005中的CTE递归查询得到一棵树
感觉这个CTE递归查询蛮好用的,先举个例子: use City; go create table Tree ( ID int identity(1,1) primary key not null, N ...
- View通用
1.计算view尺寸 ViewTreeObserver vto = view.getViewTreeObserver(); vto.addOnPreDrawListener(new ViewTreeO ...
- 使用javascript打开一个新页而不被浏览器屏蔽
使用javascript打开一个新页面可以有几种方式,但各有利弊,以下做下分析 1.window.open(url) 这是新手最常用的方法,好处是简单易用,坏处,很简单,会被很多浏览器拦截而导致功能失 ...
- Java集合运用技巧
需要唯一吗? 需要:Set 需要制定顺序吗? 需要:TreeSet 不需要:HashSet 但是想要一个和存储一致的顺序(有序):LinkedHashSet 不需要:List 需要频繁增删吗? 需要: ...
- Android — — —动态添加碎片
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...
- Fragment之间的通信(四)
自定义两个fragment的布局和java类. 在mainactivity中引用布局文件 在其中的一个fragment中的控件上添加监听,获取到另一个fragment中控件的内容,展示出来完成frag ...
- C语言程序设计第7堂作业
一.本次课主要内容: 本次以计算圆柱体体积为例,通过定义体积计算功能的函数和主函数调用的例子,引出函数定义的一般形式:函数首部加函数体,且在函数结尾处通过return 语句返回结果.本节要重 ...
- 如何在tomcat中如何部署java EE项目
如何在tomcat中如何部署java EE项目 1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法,也是初学者最常用的方法.2.在tomcat安 ...
- Eclipse快捷键 10个最有用的快捷键
Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. 1. ...
- PHP学习心得(1)——实用脚本
<?php 来表示 PHP 标识符的起始,然后放入 PHP 语句并通过加上一个终止标识符 ?> 来退出 PHP 模式 调用函数phpinfo(),将会看到很多自己系统的信息,以及预定义变量 ...