Posted on | by liu
谢谢邀请！关于前端如何包装自己的代码。其本质说的就是一个组件化的问题，目的就是最大程度上提升开发效率。下面偶就前端如何更高效的进行组件化开发，谈一下前端如何包装自己的共享代码。项目开发方式分组件化和非组件化。先讲讲组件化。毕竟主流
一、组件化
组件化开发分同一个业务内和不同业务之间如何包装共享代码问题。1.同一个业务内：话不多说，先来看一张图。如上图所示：其实任何一个项目都是由一个或者两个或者N个页面组成，在组件化的开发模式下，每一个页面的开发过程，其本质就是变成了，将一个页面如何拆分成不同的业务组件，这其中，有两种情况：（业务组件）比如一个组件，它是和业务还是有关系的，被多个页面所引用的话，大家是可以把它抽离成一个公共组件的。另外一种（公共组件），完全和业务没有关系的，不旦在业务内可以使用，而且可以跨业务使用，可以抽离成更基础的组件。接着往下就是基础模块，它属于这种非UI的模块，涉及到一些功能型组件，如格式化时间数据，登录，上报代码等。最后一层，也是最底层就是项目的构建层，包括打包依赖资源安装升级部署等等。如此看来，对于业务内如何包装共享代码就一目了然了。只要按照这几个层次来划分（在业务内封装可重用组件，至于如何来封装一个更优的组件，也是有些详细的讲究，这个主题回头也可以开篇来详述），即使多人合作开发也不会出乱。稳中有序。2.不同业务之间同样先来看一张图：如上图所示：如果两个不同业务之间，出现相同的功能及相同业务组件需要复用的话，就会出现不停的被COPY。一旦组件出现改动，就需要打开多个项目进行个性，出现遗漏还得背锅。copy这种方式也极其容易出错。不是一个有效的工作方式。因此，大家可以将这公用组件代码包装成一个NPM安装包（公共组件，基础组件），将项目初始架构包装成一个脚手架。这样在新开一个业务需要复用这些东西的时候，只需命令式安装和组装，然后改改UI就完事了。当然，这里会涉及到NODE命令行工具的开发及NPM安装包的封装，具体封装细节下回也可以详细来讲讲。
二、非组件化
如果你的JS代码是一个大文件，找机会把可以重用的功能提取到自包含的对象中，放入到一个单独的库中。若发现已经有了在所有项目开发中重复使用的一组函数，考虑将它们打包，以通过一个对象直接量来重用。下面举一个简单的例子：下面这段代码，包含三个可以在各个业务中高度复用的功能。可以将上面这段代码写在一个字面量里自由调用。当然，有时间或者有兴趣的可以自己来封装一个类似于JQ的库，一个属于自己调用的基础库，也是一种极其优越的代码包装方式。总结一下：代码包装也可以根据实际的场景来做，在你的业务场景的复用性极高的功能都可以包装成一个公共JS方法，或者组件，或者安装包，总之，大家最终的目的就是提升二次开发效率。