本期我们来聊一聊前端页面模块化， 模块化也是《前端架构需要解决的问题》中最后一个还没介绍的问题 ，也是前端架构问题中最为复杂的问题。
模块化的目的，是为了降低整体项目的工作量 也就是说页面中的部分内容是可以复用的。
模块化虽然看起来很美好， 但用不好的话，反而会变成累赘 。而且，现在的模块化方案其实还有很大的改进空间。
我们讨论以下几个问题
1、模块化的原则是什么
2、现有的模块化方案
3、现今模块化的困境与我们的解决方案
1、模块化原则
首先，我们先讨论模块化的原则， 模块化虽然能降低代码量 ，但如果像这样无限级嵌套模块的话， 看上去能极大程度地降低代码量 ，但其实这样的代码维护起来是十分困难的。
我们推荐的模块化原则是， 模块只需要限制在单层，且模块之间不能互相嵌套关联， 页面分为整体层和模块层 整体层作为沙盒，引入模块且对模块进行布局， 模块层就是一个个模块，做精细页面元素布局。
这样的话，既可以保证模块的复用度（模块间不互相关联） 维护起来也是比较容易的。
这个原则其实与我们之前的《前端响应式布局》相呼应的 ，对此有疑问的小伙伴可以翻看我们之前的内容 。
2、现有的模块化方案
接下来，我们讨论现有的模块化方案，现有的模块化方案有3种
- iframe
- 插件的方式
- 使用vue-cli、react-cli等脚手架工具
（1）iframe方式
iframe是HTML原生支持的方式 ，它允许将一个页面嵌入到另外一个页面， iframe是理论上比较好的一种模块化方式， 因为被嵌入的模块是完整的页面，可以单独运行和调试， 但是，iframe的方式只适合嵌入一些较为复杂的模块，如播放器模块、即时聊天模块等。 因为如果一个页面嵌入多个iframe的话 ，那么可能会出现性能问题 ，而且这多个iframe模块之间的协调也是很麻烦的事情。
虽然iframe不能作为页面模块化常用的方法， 但是iframe可以很好地组织整个网站的页面， 有兴趣的小伙伴可以翻看往期《前端单页应用》中的iframe伪单页应用。
（2）插件的方式
接下来是插件的方式 ，这种方式也是HTML原生支持的方式 插件的方式是比较常见的。 如播放器videojs、文本编辑器CKeditor、组件工具箱BootStrap等。 如果使用vue.js的template的话，其实也是插件的方式， 插件的方式说白了就是把Css文件、JavaSript脚本打包成插件， 而HTML内容则变成字符串塞到JavaScript脚本中， 页面使用插件时，直接引用Css、JavaSript文件即可。
这种方式适合于单独发布的插件，如播放器videojs、CKEditor等。 但不适合作为页面模块化常用的方法 ，包括使用vue.js的template方式， 因为这种方式的Html部分需要塞到JavaScript脚本当中 ，这样Html部分就会变得十分不直观 ，代码维护也比较麻烦。
（3）脚手架工具
最后是vue-cli、react-cli等脚手架工具， 这类脚手架工具很大程度上也是为了更好地实现前端模块化而被制造出来 ，手架工具为模块提供了独立的HTML、CSSJavaScript（TypeScript）空间。 可以更直观地编写和使用模块 ，这类脚手架工具也是被很多人推崇 ，但是由于其加入了很多额外的辅助工具（如nodejs、npm等）和编写规则，让学习难度变大，变相提升了团队的人力成本 。而且实际项目的效果也未必那么好， 一到性能优化、项目维护升级则可能出现各种各样的问题 。
3、现今模块化的困境与我们的解决方案
前端模块化必然是前端架构的发展方向， 但是对于以上提及的现有模块化方法而言， 脚手架工具（vue-cli、react-cli）是最好的一种方式。
但是，我们认为，这些脚手架工具并不一定是最好的模块化方案， 因为这些框架工具让学习成本过大， 很多工程师也只是仅仅会初步使用 一到性能优化、维护升级时，就会有各种问题
我们认为，更好的模块化方案应该是这样的
- 应该尽量保持原生开发，降低学习成本；
- 模块的嵌入是简单的，尽量少地影响网页的性能；
- 模块本身也是完整的网页结构，可以单独调试；
- 虽然不可避免地使用辅助工具，但应该尽量保持普通原生网页开发的模式及简单性
- 模块的复用是简单的，把模块代码复制到任意工程即可工作；
当然，我们也做了这样的框架，名字叫Trick 我们官网上就有这套框架的说明 ，这套框架满足了以上我们认为的模块化更好的方式（不一定是最好的方式）。
我们的这套框架是保持原生开发的， 每个模块都是一个独立的网页且可以单独运行调试 ，网页引入模块时也只需要简单地引入 ，在开发环境运行网页时 ，页面会自动通过ajax加载模块的网页文件。
如果要在生产环境运行页面的话， 我们提供了代码生成器 ，把模块代码自动剪切合并到页面中 ，最终代码与完全原生开发无异。
后续我们会出专门的视频介绍 ，有兴趣的小伙伴可以到时候了解一下。
总结
最后，前端架构最近几年也有一些新的模块化方案，如微前端等 ，我们也深入了解过，但是没有在实际项目当中尝试 因为我们认为，网页开发本身是简单的，那何必搞那么多工具弄得那么复杂 ，所以诸如微前端的方式我们并没有介绍。
截止到本期，前端架构需要解决的问题以及对应的方案已经全部介绍完毕， 后面的内容会进入后端架构部分。
