模块化开发

Posted 2020-09-21 晴天de雨滴

我介绍一下我关于模块化开放的理解，我主要从三个方面阐述我的观点：

1.为什么要进行模块化开发？

2.什么是模块化开发？

3.如何使用模块化开发来开发项目？

 

一、那么我们就从第一点进行解析，为什么要进行模块化开发？

 

     在实际工作中，相信大家都会遇到这样的问题，就是我自己测试好的代码和大家合并之后怎么

就起冲突了呢？明明项目需要引入的文件都引入进来了，怎么还是缺少呢？这些问题总结起来

就是命名空间冲突以及文件依赖加载顺序问题，但是在团队，尤其在几十，几百个页面的项目中，

你是不会知道自己写的函数或变量是否与别人冲突的，那么我们应该怎么做呢？当出现问题时

我们也不能重复去引入，因为我们开发的最基本的原则就是不要重复。还有当项目中有多处运用到

同一个功能时，我们就该想，它是不是可以抽离开来，当需要的时候直接调用它呢？但是如果你

之后的代码时依赖于它的，而你又忘了调用或者调用顺序出错，那么代码就会报各种错误。

举个简单的例子：

大家都知道bootstrap的js是依赖jquery的，每次引入时都要将jquery放在bootatrap前面，

一两个类似这样的依赖你或许还能记住，但如果在庞大的项目中，有许多这样的依赖关系，你还能

清晰的记得吗？当项目越来越复杂，众多文件之间的依赖甚至都会让你抓狂，关于下面的这些问题，

我相信每天都在真实的发生着：

1.业务想用某个新的功能组件，但无法简单通过几行代码搞定

2.老的产品要上新的功能，最后评估只能基于老的类库继续开发

3.公司整合业务，某两个产品要合并，结果发现前端代码冲突

以上这些问题都是文件依赖没有很好的管理，如果项目小，还不会有什么问题，可当团队越来

越大，业务越来越复杂，依赖关系如果不去解决就会出大问题。

二、那么大家就想问了，什么是模块化开发呢？

模块化的意义在于最大化的设计重用，以最小的模块零部件，更快速度满足更多个性化需求，

把不同功能按照模块区分开来，把共同需要引入的文件放在首页，一次引入，减少多个页面

不必要的http请求，模块之间是相对独立的，不会相互影响，因为有了模块，我们就可以

更方便使用别人的代码，按需加载，这样大家就可以共同开发，一方面加快项目进展，

另一方面便于后期维护与优化。

目前浏览器支持模块化开发规范的，只有require.js 和 sea.js 对于这两个:require.js是AMD规范的

代表，简单说，就是异步模块定义，它是依赖前置，会尽早的执行依赖模块，相当所有的require都
被提前了。

而sea.js 是CMD规范的代表，他的加载和AMD就有不同，对他来说一个模块就是

一个文件，它推崇依赖就近，即什么时候require就什么时候加载，而且没有全局的require，在这两
年来说，sea.js的很多内容更新较少，用户量也持续下降，而require的使用率是相对较高的。

三、那么说了这么多，如何使用模块化来开发项目呢？

在前端大趋势之下，框架的使用率高达90%，而在前端框架排名前三的angular vue react都很好的支持
模块化开发，这无疑给我们提供了很大的帮助，那么就拿vue来做讲解，vue的模板结构为：

     template style script 分类来放置不同内容。

     template:放置html页面布局代码，就是原来我们书写在body的内容

     style:放置当前template的css样式

     script:用import。。form引入当前template需要的js文件，以及当前页面需要的方法在外部去暴露，
    在mouted里面来调用，实现按需加载，而一些共同的库文件，可在首页进行统一调用即可，减少重复
的请求，提高性能。

总体来说，模块化是为了是新建一种自然，便捷，高性能，一体化的解决方案，帮我们解决

了模块静态资源管理，模块依赖关系处理以及模块预加载。所以说模块化也越来越成为一种趋势

以上就是我个人对模块化开发的理解，谢谢！