前端组件化方案随手记

[hjin-me]

前端组件化，是个坑。自己想尝试挑战一下这个方向，记录一下自己想的内容。

因为前端本身没有组件化的解决方案（Shadow DOM 路还很长），所以必然依赖于预处理器和后处理器将按照某种规范编写的代码处理成为低耦合无冲突可复用的组件代码。

JS 模块化

JS 模块化已经有很多成熟的方案，CommonJS/AMD/ES6 Module。向前看，个人偏向于使用 ES6 Module。

当然还有其他的，例如 angular 1.x 自带模块系统，但是没有加载器

HTML 模块化

HTML 就是一段字符串，并且可以重复使用。加上特定 class 或自定义 tag ，直接以字符串形式混入 JS 即可。

CSS 模块化

CSS 是全局性的，需要引入命名空间来避免 CSS 样式覆盖。目前 less stylus sass 等都支持 nested 方式书写 CSS 来通过选择器来隔离。

其他静态资源

HTML/CSS/JS 都可能引用其他静态资源，如图片，字体等。这类资源需要提供两种访问方式

• 外链形式，通过 URL 访问
• 内嵌形式，转换为 base64 通过 dataURI 访问

  JS/HTML/CSS 组件化方案

  方案选择的原则

  1. 尽量避免重复造轮子，复用充分用于生产项目的开源项目更能保证项目质量；
  2. 尽量减少对编码人员的约束，努力不引入新的编码风格，必要的代码处理由打包工具自动生成；
  3. 产出为 Single Page Application，不考虑后端模板渲染方案；
  4. 提高生产效率的 MVVM；
  5. 移动端？！凑合就行；
  6. 第一版简单处理，粗暴的 All In One 加载打包模式。

     基础框架

AngularJS + UIRouter

单页面解决方案，MVVM 的 AngularJS 提高生产效率。丰富的社区文档和错误信息是其优势。同时 AngularJS 自身提供了 JS 的模块化方案，directive 也能很好的封装 UI 组件（HTML/JS部分）

语言选择

HTML + Less + Typescript

Less 亲近 CSS 的预编译语言，不给开发者带来额外的学习成本。同时支持 Nested 风格编码，用于解决命名空间的问题。

Typescript 支持 ES6 部分特型，引入类型系统在一定程度上可以避免一些 213 的编码错误。提供了简洁 ///<reference path=''/> 的文件拼接方案，与 AngularJS 的模块系统不会引起冲突。

预编译/后处理工具

目前已经基于 FIS3 实现了一个初版，感觉不太理想。未来计划基于 Webpack 定制一套打包编译流程。

目前的想法就是，一个目录就是一个组件（对应 AngularJS 的 directive），相同文件名的 html/ts/less 相互依赖。

编译流程

1. 单个 less 文件包裹 namespace（组件名）后编译成单个 css 文件
2. 修正 css 文件内引入的图片 url
3. 合并所有组件目录下的 css 文件
4. 所有 ts 文件基于 /// <reference path=''/> 生成 All In One 的 js 文件
5. 修正 js 文件内以字符串形式引入的 html 文件
6. TODO

   编码约定

7. Typescript 按照特定编码规范书写 Class，由代码自动将 Class 绑定成 AngularJS 对应的 factory/service/controller/directive/filter 等
8. 依赖关系声明，以目录为组件，目录下同名文件相互依赖。
9. TODO

PS.

先试试看，踩到坑了再看看怎么办