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. Flutter-tabbar切換

    頂部tabbar切換 import 'package:flutter/material.dart'; import 'index_attendance_record.dart'; import 'in ...

  2. spring boot集成mongodb的增删改查

    添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  3. 用setInterval方法实现弹框闪烁

    每次看到某电商平台的拼团提示会觉得很有趣也很方便,正好自己在学习小程序,那就想个法子实现一下这种效果咯~思虑了一下还是觉得用setIntercal方法比较简便(数据方面就先不考虑了,我这里只做一下表现 ...

  4. find命令查找目录

    find <path> -type d -name "dir_name" -type d是查找目录的参数,如果是查找其他的: -type b: Block specia ...

  5. leetcode-167周赛-1293-网格中的最短路径

    题目描述: 自己的提交:广度优先 O(mn*min(k,m+n)) class Solution: def shortestPath(self, grid, k: int) -> int: vi ...

  6. ckeditor实现WORD粘贴图片自动上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  7. 【Linux】端口反查进程

    平时时常遇到端口占用的情况,又不知道端口是哪个服务启的. 本文以80端口为例. [root@localhost jenkins]# netstat -tunlp | grep 80 tcp6 0 0 ...

  8. 【BZOJ2555】SubString(后缀自动机,LCT)

    题意:给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支持这些操作. 长度 <= ...

  9. 7 November in 614

    每日总结不能少!让自己的头脑好好清醒清醒,才不会犯那些所谓的低级错误! Contest A. ssoj3045 A 先生砍香蕉树 根据数据范围 \(m\le 1000,b\le 10000\),显然本 ...

  10. php开发面试题---禁用cookie之后,如何使用session

    php开发面试题---禁用cookie之后,如何使用session 一.总结 一句话总结: 在每个url后面自动加上PHPSESSID的值即可,用户禁止cookie后,服务器仍会将sessionId以 ...