前端模块化要解决的两个问题 -网站建设-火龙果软件工程

捐助

前端模块化要解决的两个问题

作者：曾广营来源：segmentfault 发布于：2016-11-7

次浏览

前言

前端模块化，主要是解决两个问题——“命名空间冲突”，“文件依赖管理”。

坑___命名空间冲突

1.我自己测试好的代码和大家合并后怎么起冲突了?

2.页面脚本的变量或函数覆盖了公有脚本的。

坑___文件依赖管理

1.明明项目需要引入的包都引进来了怎么还报缺少包?

2.手动管理依赖，有天要更换某个插件，要深入代码内部进行修改

3.如下图，显示的代码加载，依赖关系复杂。在F.js中，分不清某个变量是来自C.js，还是E.js

4.两次加载同一个模块。比如引入了两遍JQ

其他的坑

1.为了实现脚本复用，将一个很大的公用public文件引入各个页面中，其中的某些函数，只有个别页面用到。

2.某个功能的函数群函数，与另一个功能的函数群摆在一起，使用注释来分隔。

目前解决的方法是:模块化

1.命名空间：各个模块的命名空间独立。A模块的变量x不会覆盖B模块的变量x。

2.模块的依赖关系:通过模块管理工具如webpack/requireJS/browserify等进行管理。

模块化的基本原理——解决命名空间冲突

JavaScript的缺陷，首当其冲就是全局变量。这使得每想命名一个变量的时候都要三思又三思，生怕上方无穷远的地方有一个同事些的代码和自己冲突。以下是一些防范方法

一、使用命名空间

//定义
var module = {
name: 'rouwan',
sayName:function(){
console.log(this.name)
}
}
//使用
var a = module.name;
console.log(a)

总结：直接修改name不会影响module.name，一定程度保护了命名空间。有两个缺点，一，外部还是可以修改module的属性和方法。二，命名空间有时长起来超乎你的想象。适合一些小型的封装，如一些配置。

二、立即执行函数 + 闭包(实现模块的基本方法)

立即函数可以创建作用域，闭包则可以形成私有变量和函数

//创建
var module = (function(){
var privateName = 'inner'; //私有变量
var privateFunc = function(){ //私有函数
console.log('私有函数')
}

return {
name: 'rouwan', //公有属性
sayName:function(){ //公有函数
console.log(this.name)
}
}
})()
//使用
module.sayName(); //'rouwan'

总结：这是目前比较常用的模块定义方式，可以区分私有成员和公有成员。公有变量和方法，和之前一样可以直接通过module.name的方式修改。私有变量和方法，是无法访问的，除非给你个修改私有成员的公有方法。

三、在上述基础上，引入其他模块

//定义
var module1 = (function(mod){
var privateName = 'inner1';
var privateFunc = function(){
console.log('私有函数1')
}

return {
name : 'rouwan1',
sayName: function(){
console.log(this.name)
},
anotherName:mod.name, //另一个模块上的公有参数
sayAnotherName:mod.sayName //另一个模块上的公有方法
}

})(anotherModule) //引入了另一个模块
//使用
module1.sayOtherName()