天猫网站内容架构分析( 本期的模块化方案的困境与我们的解决方案1、模块化)

　　天猫网站内容架构分析(

本期的模块化方案的困境与我们的解决方案1、模块化)

　　本期我们来聊一聊前端页面的模块化。模块化也是《前端架构需要解决的问题》中最后一个没有介绍的问题，也是前端架构问题中最复杂的问题。

　　模块化的目的是为了减少整个项目的工作量，也就是说页面中的部分内容可以被复用。

　　模块化看起来很棒，但如果使用不当会变得很麻烦。而且，目前的模块化方案其实还有很大的提升空间。

　　我们讨论以下问题

　　1、什么是模块化原理

　　2、现有的模块化解决方案

　　3、今天的模块化困境和我们的解决方案

　　1、模块化原则

　　首先，让我们讨论模块化的原理。虽然模块化可以减少代码量，但是如果像这样无限嵌套模块，看起来代码量可以大大减少，但实际上这样的代码是维护的。非常困难。

　　我们推荐的模块化原则是模块只需要限制在单层，模块之间不能嵌套关联。页面分为整体层和模块层。整体层作为沙盒，引入和布局模块。 , 模块层是做细粒度页面元素布局的模块。

　　这样既可以保证模块的复用性（模块之间不相关），也更容易维护。

　　这个原理其实和我们之前的“前端响应式布局”是相呼应的。对此有疑问的可以看看我们之前的内容。

　　2、现有的模块化解决方案

　　接下来我们讨论现有的模块化解决方案，现有的模块化解决方案有3种

　　iframe插件方式使用vue-cli、react-cli等脚手架工具

　　(1）iframe 方法

　　iframe 是一种原生支持的 HTML 方式，它允许将一个页面嵌入到另一个页面中。 iframe 理论上是一种较好的模块化方式，因为嵌入的模块是一个完整的页面，可以单独运行和调试，但是 iframe 方式只适合嵌入一些比较复杂的模块，比如播放器模块、即时聊天模块、等等。因为如果一个页面嵌入了多个iframe，可能会出现性能问题，而且这些多个iframe模块之间的协调也很麻烦。

　　虽然iframes不能作为页面模块化的常用方法，但iframes可以很好的组织整个网站页面。有兴趣的小伙伴可以看看前几期《前端单页应用》单页应用中的伪iframe。

　　(2）插件之道

　　接下来是插件方式，HTML也是原生支持的。插件方式比较常见。比如播放器videojs、文本编辑器CKeditor、组件工具箱BootStrap等。如果使用vue.js的模板，其实是一种插件方式。插件方式是将Css文件和JavaSript脚本打包成一个插件，HTML内容变成字符串塞进JavaScript脚本中。当页面使用插件时，可以直接引用Css和JavaSript文件。

　　这种方式适合单独发布的插件，比如播放器videojs、CKEditor等。但是不适合作为页面模块化的常用方式，包括使用vue.js的模板方式，因为这里面的Html部分方法需要塞进JavaScript脚本，所以Html部分会变得很不直观，代码维护也比较麻烦。

　　(3）脚手架工具

　　最后，还有 vue-cli 和 react-cli 等脚手架工具。这样的脚手架工具很大程度上是为了更好地实现前端模块化而创建的。脚手架工具为模块提供了独立的 HTML、CSS 和 JavaScript。 (TypeScript) 空间。可以更直观地编写和使用模块。这种脚手架工具也受到很多人的推崇，但是因为增加了很多额外的辅助工具（比如nodejs、npm等）和编写规则，让学习变得更加困难，变相的提高了团队的人工成本。而且，实际项目的效果可能不会那么好。在性能优化、项目维护和升级方面，可能会出现各种问题。

　　3、今天的模块化困境和我们的解决方案

　　前端模块化必然是前端架构的发展方向，但是对于上面提到的现有的模块化方法，脚手架工具（vue-cli、react-cli）是最好的方式。

　　但是，我们认为这些脚手架工具不一定是最好的模块化解决方案，因为这些框架工具的学习成本太高，而且很多工程师只有在用于性能优化、维护和升级后才会开始使用它们。会有各种各样的问题

　　在我们看来，更好的模块化解决方案应该是这样的

　　应尽量保持原生开发，降低学习成本；

　　模块的嵌入简单，尽量减少对网页性能的影响；

　　模块本身也是一个完整的网页结构，可以单独调试；

　　虽然无障碍工具的使用是不可避免的，但应尽可能保持正常原生 Web 开发的模式和简单性

　　模块复用很简单，只需将模块代码复制到任意项目即可工作；

　　当然，我们也做了这样一个框架，名字叫Trick。在我们的官方网站上有这个框架的描述。本框架满足上述模块化和更好的方式（不一定是最好的方式）。

　　我们的框架是本地开发的。每个模块都是一个独立的网页，可以单独运行和调试。当网页引入模块时，只需简单的导入即可。在开发环境中运行网页时，页面会自动通过ajax加载模块的网页文件。

　　如果你想在生产环境中运行页面，我们提供了代码*敏*感*词*，自动将模块代码剪切合并到页面中，最终的代码和完整的原生开发没有区别。

　　以后我们会放出专门的视频介绍，有兴趣的朋友可以到时候了解一下。

　　总结

　　最后，前端架构这几年也引入了一些新的模块化解决方案，比如微前端等，我们也对它有很深的了解，但是在实际项目中我们没有尝试过，因为我们认为 Web 开发本身很简单，何必麻烦这么多工具让它变得如此复杂，所以我们不涉及微前端之类的东西。

　　至此，前端架构要解决的问题及相应的解决方案已经介绍完毕，下面的内容将进入后端架构部分。