[JavaScript] 前端模块编程实现
前端模块化
前端早期写代码都是全局变量满天飞,这种情况会造成全局命名空间污染,变量冲突等问题
var a = 1;
var b = 2;
function c(){}
function d(){}
后来采用了 js 的对象写法,添加一个单独的命名空间
var space = {
a: 1,
b: 2,
c: function () {
console.log('我是c');
return this.a;
},
d: function () {
console.log('我是d');
return this.b;
},
};
console.log(space.a);
console.log(space.b);
console.log(space.c());
console.log(space.d());
这样就把变量挂载到 space 上了,而不是全局 window 上
亦或是挂载到原型上(构造函数)
function Class() {
this.a = 1;
this.b = 2;
}
Class.prototype.c = function () {
console.log('我是c');
return this.a;
};
Class.prototype.d = function () {
console.log('我是d');
return this.b;
};
var instance = new Class();
console.log(instance.a); //1
console.log(instance.b); //2
console.log(instance.c()); //我是c //1
console.log(instance.d()); // 我是d //2
面向对象一定程度上解决了命名冲突的问题,但是 js 没有私有变量,暴露内部变量,外部可有对内部数据进行修改外部可以修改内部数据
自执行函数(闭包)
(function (window) {
let a = 1;
let b = 2;
function c() {
console.log('我是c');
return a;
}
function d() {
console.log('我是d');
return b;
}
window.module = {
c:c,
d:d,
}
})(window);
//或者
var module = (function(){
let a = 1;
...
function c(){
...
}
...
return {
a:a,
c:c
}
})()
这一方式可以做到私有变量,模块的基本写法,比如 jquery
放大模式
(function () {
var a = 1;
window.module = {
c: function () {
return a
},
}
})();
(function (mod) {
var b = 2;
mod.d = function () {
return b
}
})(window.module)
console.log(module.c());
console.log(module.d());
console.log(module);
可以实现模块的分离和模块的继承,也具有私有变量,还可以将自执行函数拆分成多个文件进行加载,但是文件的执行顺序有一定的要求,要先声明对象 module
宽放大模式
//将上面给module添加功能的函数添加个默认值
(function (mod) {
var b = 2;
mod.d = function () {
return b
}
})(window.module || {})
可以将模块分成不同的文件,同时文件不用再考虑加载顺序不对导致 module 不存在的情况
- 引入外部的库
(function ($) {
var a = 'red';
$('.hello').css({ "background": a });
})(jQuery)
- 自执行函数
自执行函数中()分组操作符是用来将 function(){}这个函数声明转化为一种可以执行的表达式,单纯的 function(){}不是可执行的表达式,是一个函数声明
()分组操作符可以替换为其他操作符,比如 '#','+','-','!','void'......等等
//这样写也是可以的
+function ($) {
var a = 'red';
$('.hello').css({ "background": a });
}(jQuery)
- !function(){}();
- +function(){}();
- -function(){}();
- ~function(){}();
- ~(function(){})();
- void function(){}();
- (function(){}());
function(){}是函数声明,声明的是一个匿名函数,而(function(){})()是一个表达式,而 js 在预编译阶段会解释函数声明,确会忽略表达式.所以到(function(){})的时候,该表达式会返回一个匿名函数,之后该匿名函数遇到后面的(),便会被执行
var lis = document.querySelectorAll('li');
for(var i=0;i<5;i++){
lis[i].onclick = function(){
alert(i); //5,5,5,5,5
}
}
//又是这个经典的题目
//这题最简单还是用元素属性的方式去解决,比如
for(var i=0;i<5;i++){
lis[i].index = i;
lis[i].onclick = function(){
alert(this.index); //0,1,2,3,4
}
}
//还有就是闭包
for(var i=0;i<5;i++){
(function(i){
lis[i].onclick = function(){
alert(i); //0,1,2,3,4
}
})(i)
}
//闭包就是在循环中执行,将i的值保存到当前作用域中,当click绑定的函数触发时,会优先从离得最近的作用域去拿变量(就近原则)
//所以,使用其他的方式将当前i值保存到自己的作用域中就行
for(var i=0;i<5;i++){
click(i);
}
function click(i){
lis[i].onclick = function(){
alert(i); //0,1,2,3,4
}
}
//这其实就跟上面的闭包有些类似了,闭包取i是从上级的匿名函数的作用域中取保存的i,而该方式就是从click函数的作用域中去取i值
模块化的作用
- 解决全局变量污染的问题
- 一个文件一个模块,能够更快速定位问题和解决问题,方便维护
- 解决文件的依赖关系问题
- 使大型项目的开发过程中,每个人负责每个人的模块编写,方便大团队开发工作
参考
- 浏览器加载 CommonJS 模块的原理与实现
- Javascript 模块化编程(一):模块的写法
- JavaScript Module Pattern: In-Depth
- Seajs 与 RequireJS 的异同
- AMD 和 CMD 的区别有哪些?
- Common Module Definition / draft
- js-module-7day
[JavaScript] 前端模块编程实现的更多相关文章
- [JavaScript] 前端模块加载简单实现(require)
模块加载的简单实现 (function(win) { var baseUrl; var paths; var script_cache = {}; var script_queue = []; var ...
- 前端常用的库和实用技术之JavaScript面向切面编程
Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程 中的某个步骤或阶段,以 ...
- 翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言&前言
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.brucec ...
- 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A:Transducing(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 B: 谦虚的 Monad-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
随机推荐
- win7里linux虚拟机安装vmware tools(ubuntu12.04)
安装Vmware Tools工具 1.安装linux虚拟机(略) 2.虚拟机去启动,选择虚拟机à设置,“硬件”中选择CD/DVD(IDE),右侧选择“使用ISO镜像文件(M)” -- 文件选择vmw ...
- shell 命令 创建/删除 软连接 ln -s
软链接的作用是, 1. 节省复制造成的空间浪费 2. 保证两个文件的内容同时修改 所以,可以把软连接理解为给文件/文件夹创建了别名,当访问别名时,实际访问的是链接的文件/文件夹 软链文件 ln -s ...
- MySQL--Insert Buffer
在进行数据插入时,需要将数据插入到聚集索引和非聚集索引中,而对于非聚集索引,需要先确定数据要插入的索引页,再将索引页加载到内存中进行修改,而在业务上很难保证插入数据在非聚集索引上也是连续的,因此插入操 ...
- vsftp搭建文档
vsftpd端口的作用:控制连接:tcp21端口用于发送FTP命令数据连接:tcp20端口用于上传下载数据 传输模式:分为主动模式和被动模式主动模式是当需要传输数据时,客户端以PORT命令告知服务器, ...
- 常见排序算法整理(python实现 持续更新)
1 快速排序 快速排序是对冒泡排序的一种改进. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行 ...
- Vue 中是如何解析 template 字符串为 VNode 的?
在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换的却不了解. 很明显,回答失败. ...
- Django--缓存设置
Django缓存机制 一. 缓存介绍 缓存是将一些常用的数据保存内存或者memcache中,在一定的时间内有人来访问这些数据时,则不再去执行数据库及渲染等操作,而是直接从内存或memcache的缓存中 ...
- sql server 备份与恢复系列一 必备知识
一.备份概述 数据安全是数据库的生命,数据库在使用过程中难免会遇到如:使用者的误操作或是被恶意修改,硬件故障导致数据文件无法被访问,自然灾害导致机房在物理上的损毁.本章从备份与恢复的功能作为解决问题的 ...
- 征服诱人的Vagrant!
一.背景 最近要开始深入学习分布式相关的东西了,那第一步就是在自己的电脑上安装虚拟机,以前在Windows平台,我选择用VMware Workstation作为虚拟机软件,现在在Mac系统下,感觉 ...
- Java-jsoup-解析HTML
/** * jsoup 是一款 Java 的HTML 解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操作方法来取出和操 ...