前端模块化

前端早期写代码都是全局变量满天飞,这种情况会造成全局命名空间污染,变量冲突等问题

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值

模块化的作用

  1. 解决全局变量污染的问题
  2. 一个文件一个模块,能够更快速定位问题和解决问题,方便维护
  3. 解决文件的依赖关系问题
  4. 使大型项目的开发过程中,每个人负责每个人的模块编写,方便大团队开发工作

参考

[JavaScript] 前端模块编程实现的更多相关文章

  1. [JavaScript] 前端模块加载简单实现(require)

    模块加载的简单实现 (function(win) { var baseUrl; var paths; var script_cache = {}; var script_queue = []; var ...

  2. 前端常用的库和实用技术之JavaScript面向切面编程

    Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程 中的某个步骤或阶段,以 ...

  3. 翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言&前言

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.brucec ...

  4. 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  5. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  6. 翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  7. 翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  8. 翻译连载 | 附录 A:Transducing(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 翻译连载 | 附录 B: 谦虚的 Monad-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

随机推荐

  1. The META for Mobile terminal

    近来想写一些好玩的手机网页,在这里整理了一下在手机端的meta标签,以免下次忘记,再去网上搜. meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描 ...

  2. 【翻译】从头开始写一个时间序列数据库-Writing a Time Series Database from Scratch

    本文来自: https://fabxc.org/tsdb/, 如翻译有误,请纠正. 我是从事监控工作的.特别是Prometheus, 一个包含自定义的时间序列库以及集成Kuberntes的监控系统. ...

  3. 用mplayer从视频中按周期提取帧

    使用方法:extract file time step folder time 设置时间长度 step 设置周期 均以秒(s)为单位 贡献:1. 从视频文件中周期性提取图片:2. Windows下批处 ...

  4. QEMU KVM Libvirt手册(5) – snapshots

    前面讲了QEMU的qcow2格式的internal snapshot和external snapshot,这都是虚拟机文件格式的功能. 这是文件级别的. 还可以是文件系统级别的,比如很多文件系统支持s ...

  5. 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实 ...

  6. str2-045漏洞事件,你想要的这里都有

    话说昨天一觉醒来,发现整个安全圈被一个名为str2-045的漏洞霸屏了,好多小伙伴已经开始了喜刷刷的艰苦奋斗过程.然而对于很多小白童鞋来讲,他们可能还是处于懵逼的状态,别急,咱们专门为你们做了一期专题 ...

  7. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

  8. FFmpeg 学习(七):FFmpeg 学习整理总结

    一.FFmpeg 播放视频的基本流程整理 播放流程: video.avi(Container) -> 打开得到 Video_Stream -> 读取Packet -> 解析到 Fra ...

  9. 谷歌浏览器隐藏url前缀问题

     此前曾有用户表示,谷歌若在Chrome的地址栏中隐藏URL的HTTP.HTTPS及WWW前缀,那么用户的安全将有可能遭至威胁,如果你不希望Chrome浏览器隐藏URL的HTTP.HTTPS及WWW前 ...

  10. Java核心技术卷一基础知识-第7章-图形程序设计-读书笔记

    第7章 图形程序设计 本章内容: * Swing概述 * 创建框架 * 框架定位 * 在组件中显示信息 * 处理2D图形 * 使用颜色 * 文本使用特殊字体 * 显示图像 本章主要讲述如何编写定义屏幕 ...