1.实例解释模块模式

简明扼要的说,经典的模块模式指的定义一个立即执行的匿名函数。在函数中定义私有函数和私有变量并且返回一个包含公共变量和公共函数作为属性和方法的匿名对象。

var classicModulePattern = function(){
var privateVar = 1;
function privateFunction(){
alert('private');
}
return {
publicVar:2,
publicFunction:function(){
classicModulePattern.anotherPublicFunction();
},
anotherPublicFunction:function(){
privateFunction();
}
}
}();
classicModulePattern.publicFunction();

这种形式也经常令人抱怨,因为每当需要在一个公共方法调用另一个公共方法或者获取公共变量,就需要重复主对象的名字。另外一个比较苦恼的原因是你不得不把返回的公共函数或变量写成对象字面量的形式。

为了解决重复写主对象名字的问题,可以定义一个命名为“pub”的对象,在其上添加公共方法和公共属性,然后return这个对象。

var namedObjectModulePattern = function(){
var pub = {};
var privateVar = 1;
function privateFunction(){
alert('private');
};
pub.publicVar = 2;
pub.publicFunction = function(){
pub.anotherPublicFunction();
};
pub.anotherPublicFunction = function(){
privateFunction();
};
return pub;
}();
namedObjectModulePattern.publicFunction();

但是,添加一个pub对象看起来有些冗余,可以采用另一种方法,在私有作用域中定义所有的函数和变量,然后在模块末尾返回一个匿名对象,可以在其中指向某些私有变量和函数作为公共变量和函数。

var revealingModulePattern = function(){
var privateVar = 1;
function privateFunction(){
alert('private');
};
var publicVar = 2;
function publicFunction(){
anotherPublicFunction();
};
function anotherPublicFunction(){
privateFunction();
};
// reveal all things private by assigning public pointers
return {
publicFunction:publicFunction,
publicVar:publicVar,
anotherPublicFunction:anotherPublicFunction
}
}();
revealingModulePattern.publicFunction();

这样保持了整个脚本连续性并且使哪些函数和变量是公共的看起来一目了然。另一个好处是你能用你想要的命名来展示这些私有函数,增强了可读性。

var revealingModulePattern = function(){
var privateVar = 1;
function privateFunction(){
alert('private');
};
var publicVar = 2;
function publicFunction(){
anotherPublicFunction();
};
function anotherPublicFunction(){
privateFunction();
};
// reveal all things private by assigning public pointers
return {
init:publicFunction,
count:publicVar,
increase:anotherPublicFunction
}
}();
revealingModulePattern.init();

你甚至可以在匿名对象中调用函数返回一个值作为公共属性。

var revealingModulePattern = function(){
var privateVar = 1;
function privateFunction(){
alert('private');
};
var publicVar = 2;
function publicFunction(){
anotherPublicFunction();
};
function anotherPublicFunction(){
privateFunction();
};
function getCurrentState(){
return 2;
};
// reveal all things private by assigning public pointers
return {
init:publicFunction,
count:publicVar,
increase:anotherPublicFunction,
current:getCurrentState()
}
}();
alert(revealingModulePattern.current)
// => 2
revealingModulePattern.init();

2.参考资料

实例参考博客

stackoverflow命名空间

[Js代码风格]浅析模块模式的更多相关文章

  1. 大神的JS代码风格指南

    js代码风格指南:1.缩进使用空格,不要用制表符2.必须用分号3.暂时不用ES6(modules)例如export和import命令4.不鼓励(不禁止)水平对齐5.少用var 都应该使用const或者 ...

  2. JS代码风格自动规整工具Prettier

    问题背景 通常使用 ESLint做代码风格检查检查, 和部分代码质量检查. 但是使用ESLint在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改. 如果很多,并且时间紧迫,甚是尴尬. ...

  3. Google HTML/CSS/JS代码风格指南

    JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...

  4. js精要之模块模式

    // 模块模式是一种用于创建拥有私有数据的单件对象的模式,基本做法是使用立调函数(IIFE)来返回一个对象 var yourObjet = (function(){ // 私有数据 return { ...

  5. JS代码风格指南

    一.基本格式 缩进 建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换 分号 不要省略分号,防止ASI(自动插入分号)错误 行宽 每行代码不超过80个字符,过长应该用操作符手动断行 断行 ...

  6. js 代码风格(2)

    Properties    • 当访问属性的时候,我们使用点(.)操作符. var luke = { jedi: true, age: 28 }; // bad var isJedi = luke[' ...

  7. highlight.js代码风格引入方法

    <link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel=&q ...

  8. js代码风格之链式结构

    <div class="box"> <ul class="menu"> <li class="level1"& ...

  9. Django之代码风格

    1 代码风格 稍微关注一下下面这些代码标准风格指导规则将会对你大有益处,我们高度建议你通读词章,即便你此时可能正想跳过它. 1.1 让你的代码保持可读性的重要性 代码在读方面的重要性胜过写.一个代码块 ...

随机推荐

  1. Opacity函数-transparentize()、 fade-out()函数

    transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反,让颜色更加的透明.这两个函数会让透明值做减法运算,当计算出来的结果 ...

  2. HTML基础 img标签 做一个图库

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. java定义类

    package java04; /* * 定义一个类,用来模拟“学生”,其中包含量两个组合部分 * * 格式: * public class ClassName{ * //成员变量 * //成员方法 ...

  4. 如何开启spring框架以注解形式的配置

    步骤 导包(新版本需要导入spring-aop-4.3.17.RELEASE.jar) 为配置文件applicationContext.xml引入新的命名空间(约束) 开启使用注解 <?xml ...

  5. jQuery给css增加!important

    <div id='ele' style=''width:200px!important"><div> JS $("#el").css(" ...

  6. ajax使用jsonp请求方式

    /* //简写形式,效果相同 $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonp ...

  7. 【leetcode】636. Exclusive Time of Functions

    题目如下: 解题思路:本题和括号匹配问题有点像,用栈比较适合.一个元素入栈前,如果自己的状态是“start”,则直接入栈:如果是end则判断和栈顶的元素是否id相同并且状态是“start”,如果满足这 ...

  8. 在VMware中配置网卡之NAT模式

    为什么要在VMware中配置网卡? 因为在远程连接服务器时,需要虚拟机连接网络 虚拟机网络配置的三种模式:桥接模式,NAT模式,主机模式 NAT模式也称之为网络转换模式,两层路由: 第一层路由:物理机 ...

  9. 540D - Bad Luck Island(概率DP)

    原题链接:http://codeforces.com/problemset/problem/540/D 题意:给你石头.剪刀.布的数量,它们之间的石头能干掉剪刀,剪刀能干掉布,布能干掉石头,问最后石头 ...

  10. python数据储存

    python数据储存 csv文件的操作 安装csv包打开cmd 执行 pip install csv引入的模块名为csv 读取文件 with open("xx.csv"," ...