[Js代码风格]浅析模块模式
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.参考资料
[Js代码风格]浅析模块模式的更多相关文章
- 大神的JS代码风格指南
js代码风格指南:1.缩进使用空格,不要用制表符2.必须用分号3.暂时不用ES6(modules)例如export和import命令4.不鼓励(不禁止)水平对齐5.少用var 都应该使用const或者 ...
- JS代码风格自动规整工具Prettier
问题背景 通常使用 ESLint做代码风格检查检查, 和部分代码质量检查. 但是使用ESLint在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改. 如果很多,并且时间紧迫,甚是尴尬. ...
- Google HTML/CSS/JS代码风格指南
JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...
- js精要之模块模式
// 模块模式是一种用于创建拥有私有数据的单件对象的模式,基本做法是使用立调函数(IIFE)来返回一个对象 var yourObjet = (function(){ // 私有数据 return { ...
- JS代码风格指南
一.基本格式 缩进 建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换 分号 不要省略分号,防止ASI(自动插入分号)错误 行宽 每行代码不超过80个字符,过长应该用操作符手动断行 断行 ...
- js 代码风格(2)
Properties • 当访问属性的时候,我们使用点(.)操作符. var luke = { jedi: true, age: 28 }; // bad var isJedi = luke[' ...
- highlight.js代码风格引入方法
<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel=&q ...
- js代码风格之链式结构
<div class="box"> <ul class="menu"> <li class="level1"& ...
- Django之代码风格
1 代码风格 稍微关注一下下面这些代码标准风格指导规则将会对你大有益处,我们高度建议你通读词章,即便你此时可能正想跳过它. 1.1 让你的代码保持可读性的重要性 代码在读方面的重要性胜过写.一个代码块 ...
随机推荐
- BZOJ4269 再见xor
考前挣扎 线性基裸题 mx直接求 次大直接从低到高枚举第一个非0位 然后次大就是异或上就行了[显然贪心呐qwq 不到800b可还行 //Love and Freedom. #include<cs ...
- 18.Vim基础指令(自用)——2019年12月13日
title: vim study date: "2018-12-26 20:17:16" tags: 指令学习 categories: 技术驿站 vim study 2018年12 ...
- MySQL学习笔记_时间,多表更新,数据库元数据
MySQL技术内幕一.MySQL基础知识1.1.显示表中的列SHOW COLUMNS FROM order_info like 'order%'1.2.显示表SHOW TABLES LIKE 'ord ...
- python使用qq邮箱向163邮箱发送邮件、附件
在生成html测试报告后 import smtplib,time from email.mime.text import MIMEText from email.mime.multipart impo ...
- PHPthink 配置目录
系统默认的配置文件目录就是应用目录(APP_PATH),也就是默认的application下面,并分为应用配置(整个应用有效)和模块配置(仅针对该模块有效). ├─application 应用目录 │ ...
- Shorten IPv6 Address
题目链接 题意:转换一个128位的二进制串,变成16进制,并且格式为x:x:x:x:x:x:x:x然后多个相邻的0变成::,且只有一个::,求变成的字典序最小且最短的字符串. 思路:大水题,但是就是一 ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 前端每日实战:33# 视频演示如何用纯 CSS 创作牛奶文字变换效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MGNWOm 可交互视频教程 此视频 ...
- Http协议面试题(总结)
Http协议面试题(总结) 一.总结 一句话总结: 主要考常见的状态码,以及https,其它的多抓抓包就熟悉了 1.说一下什么是Http协议? 数据传输的格式规范:对器客户端和 服务器端之间数据传输的 ...
- 彻底搞定C指针-函数名与函数指针
函数名与函数指针 一 通常的函数调用 一个通常的函数调用的例子://自行包含头文件 void MyFun(int x); //此处的申明也可写成:void MyFun( int ); int mai ...