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. maven多模块

    https://www.cnblogs.com/lichking2017/p/8996939.html

  2. C++ KMP文本匹配

    代码如下: 环境为VC #include <iostream> #include <algorithm> #include <string> #include &l ...

  3. 设置Oracle PL/SQL时间显示格式NLS_TIMESTAMP_FORMAT

    Oracle中TIMESTAMP时间的显示格式   Oracle数据库的时间字段我们通常是使用timestamp 格式,在未做设置前, 查询出来的数据类似于“27-1月 -08 12.04.35.87 ...

  4. Kafka初识

    1.概述 1.1.Apache Kafka是一个   分布式  流处理   平台: 2.Kafka适应于什么场景? 2.1.构造  实时  流数据管道,在  系统 或 应用之间  可靠地获取数据(相当 ...

  5. Thymeleaf入门到吃灰

    Thymeleaf 官网部分翻译:反正就是各种好 Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎 Spring官方支持的服务的渲染模板中,并不包含jsp.而是Thymel ...

  6. bzoj4397【Usaco2015 Dec】Breed Counting(前缀和、树状数组)

    题目描述 Farmer John's N cows, conveniently numbered 1…N, are all standing in a row (they seem to do so ...

  7. 数字滚动动画效果 vue组件化

    参考了这篇文章,作者思路很清晰,简单做了下修改,蟹蟹作者,链接在此:https://www.jb51.net/css/685357.html#comments 主要思路是利用css属性writing- ...

  8. 汇编 “ program has no starting address ”解决方法

           

  9. iview+vue 使用中遇到的问题(表格、select、radio)

    1.iview+vue中,对表头的动态设置: iview表头若是需要动态设置,可以有两个方法,第一种: children: [ { title: '2017年', align: 'center', k ...

  10. JumpServer堡垒机安装笔记

    厂商文档--一步一步安装CentOS(https://jumpserver.readthedocs.io/zh/master/setup_by_centos.html) 厂商文档--简单优化(http ...