一. 开发中遇到的问题

通常我们在做项目的时候一般会出现这样的一种情况。

<script>// a.jsvar varity=1;function changeHTML(){//define function changeHTML
    }function decodeHTML(){// define function decodeHTML
    }//………………
</script>

main.html的引入

<html><body></body><script src="a.js"></script>
</html>

这个按照我们正常的写法上面来说是没有什么问题的，至少在使用上面没有问题，但是却存在一些隐患

1. 假设后来有A同事需要添加一个方法叫做decodeString来处理string文本，B同事如果也要添加一个类似的方法，那么就不能够使用decodeString来命名，除此之外这样的函数定义也会直接把函数暴露到全局中。

2. 变量也会被散乱分布到全局变量中，后续变量命名就会有命名冲突的隐患

3. 如果是函数与函数之间的依赖关系比较难维护等问题

二、初级的解决方案

对于这样的一种情况最开始谷歌的YUI提出的解决方案是与PHP,JAVA的解决方案相似就是添加一个命名空间。

上面的代码我们可以这样的去编写。

<script>// a.js//  变量var variable={};//全局中只有唯一的一个variable，用来保存所有的变量variable.varity=1;// 方法var methods={};//全局中只有唯一的一个methods，用来保存所有的方法　　 var methods.common={};methods.common.changeHTML=function(){//define function changeHTML　　　　　　alert(1);
    }methods.common.decodeHTML = function () {//define function decodeHTML
    }</script>

我们发现这样的基本上面的这种方法是可以解决一些不必要的冲突的(除非你是想给自己挖坑)，假如我们要添加一个关于用户登录的方法，我们可以这样写。

methods.users = {};methods.users.login=function(str){console.log(str);}methods.users.login("this is a test");

这样去管理方法和变量虽然相比于第一种方法来说可以有效的解决冲突，但是也是存在如下的一些问题：

1. 如果我们要调用这个简单的login方法，我们会发现需要书写一大串的前缀（methods.users.login）。代码编写风格不简洁

2. 变量虽然是可以有效的管理，但是确实没有解决读写的控制，特别是如果团队的人较多的话，容易发生误操作，所以应该进行读写分离。

三、进一步的解决方案

变量的管理方案----闭包

其实上面对变量的管理已经比较有效了，但只是缺少读写的控制，容易发生误操作，所以参照ES6的做法，重新编写了一个getter方法和setting方法来获取参数。

var val=function(){var that=this;var variable={};variable.varity=1;var returnVal={};this.isString=function(str){try {if (typeof str !== "string") {throw "TypeErr";}else{return true;}} catch (e) {if (e == "TypeErr") {return false;}}}returnVal.getter=function(str){var isStr=that.isString(str);if(isStr){return variable[str];}else{console.error("input type must string!!!!!");}}returnVal.setter=function(key,value){var isStr=that.isString(key);if(isStr){if(variable[key]==undefined){eval(variable[key]);}variable[key]=value;}else{console.error("input type must string!!!!!");}}return returnVal;}

运行代码测试：

var val= val();//初始化方法console.log(val.getter("varity"));//  1val.setter("va222rity",3);//不存在重新添加并赋值console.log(val.getter("va222rity"));  // 3

现在这样写变量就不容易发生误操作了(读写已经分离)，也不会把变量泄漏到全局中去。

上面的函数就是对闭包的一个实际的应用。具体不懂的可以自行百度闭包的知识（具体还可以实现的更加的简洁，在这里不累赘）。

变量相关的优化方案我们已经说了，我们接下来说一说关于函数模块化的应用。

函数的管理方案-------模块化

模块化最早是由node.js提出来的一种规范，具体的实现是CommonJS

但是由于服务器端与浏览器端的不同，不同之处主要表现在服务器端加载文件是通过缓存读取本地文件的形式来实现的，所以加载的时间可以忽略不计，但是在浏览器端（前端）却不是这样的，每个文件都是通过HTTP请求从服务器中下载而来，所以中间会产生一定的加载时间，所以浏览器端和服务器端你是不同的。

服务器端

采用的方式是按需加载，也就是说什么时候需要就什么时候加载这个文件进来

浏览器端

共同点：都是实行对代码的预先加载

异同点：RequireJS提出的观点是预先加载并执行[早期]，SeaJS提出的观点是预先加载，按需执行。

相比之下，作者更倾向于RequireJS的实现方式，具体原因如下

1.RequireJS社区和文档的支持比较完善

2,SeaJS项目停止维护

3.RequireJS在后续的版本中含括了SeaJS的功能

在实际的应用之中，一般模块化是用来解决以下的几种情况的：

1. 解决文件与文件之间相互的依赖关系所产生的问题，方便后期代码的升级维护。

2. 解决过渡加载不需要的函数代码

3. 函数直接不会泄漏到全局

具体的用法不过多的解释不懂点这里：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html#define

四、小结

写这篇文章的时候已经是2018年了，这些东西虽然可以用，但是未免有些过时。

该文章主要是讲关于闭包和模块化在项目中要怎样的合理使用，目前模块化最好的解决方案我认为是ES6的module。

但是考虑到团队中可能水平参差不齐，导致ES6推动的难度。所以建议首选ES6，次选RequireJS。

关于ES6的讲解介绍会在之后的文章提及，如果觉得文章对你有帮助请点个赞。

转载于:https://www.cnblogs.com/st-leslie/p/8159639.html

前端项目怎样合理使用模块化和闭包？相关推荐

More than React（一）为什么ReactJS不适合复杂交互的前端项目？
<More than React>系列的文章会一共分为五篇和一则附录.本文是第一篇,介绍用 ReactJS开发时遇到的种种问题.后面四篇文章的每一篇将会分别详细讨论其中一个问题,以及Bin ...
gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
用gulp构建你的前端项目
前言前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
记前端项目首屏加载优化（网络篇）
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
知识图谱前端插件_大型前端项目可持续演进开发的思考
引言当谈起这个话题的时候,不得不去想到<人月神话>这本著作中所描述的软件工程思想,其中的最后一段总结论述: 软件工程的焦油坑在将来很长一段时间内会继续地使人们举步维艰,无法自拔.软件系统 ...
Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
精选 GitHub 值得收藏的100个前端项目
作者:小明小明长大了博客:https://www.jianshu.com/p/72ca8192f7b8 引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者 ...
为什么vue前端项目要使用nodejs
一.传统的JavaScript 传统的js是运行在浏览器上的,因为浏览器内核分为两个部分: 渲染引擎---渲染HTML和CSS, JavaScript 引擎---负责运行 JavaScript 随着技 ...
gulp + webpack 构建多页面前端项目 1
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

前端项目怎样合理使用模块化和闭包？