技术文章

前端开发如何包装可重用的JavaScript代码?

关于前端如何包装自己的代码。其本质说的就是一个组件化的问题,目的就是最大程度上提升开发效率。

下面我就前端如何更高效的进行组件化开发,谈一下前端如何包装自己的共享代码。

项目开发方式分组件化和非组件化。先讲讲组件化。毕竟主流

一、组件化

组件化开发分同一个业务内和不同业务之间如何包装共享代码问题。

1. 同一个业务内:

话不多说,先来看一张图。

前端开发

如上图所示:

其实任何一个项目都是由一个或者两个或者N个页面组成,在组件化的开发模式下,每一个页面的开发过程,其本质就是变成了,将一个页面如何拆分成不同的业务组件,这其中,有两种情况:(业务组件)比如一个组件,它是和业务还是有关系的,被多个页面所引用的话,我们是可以把它抽离成一个公共组件的。另外一种(公共组件),完全和业务没有关系的,不旦在业务内可以使用,而且可以跨业务使用,可以抽离成更基础的组件。接着往下就是基础模块,它属于这种非UI的模块,涉及到一些功能型组件,如格式化时间数据,登录,上报代码等。最后一层,也是最底层就是项目的构建层,包括打包依赖资源安装升级部署等等。

如此看来,对于业务内如何包装共享代码就一目了然了。只要按照这几个层次来划分(在业务内封装可重用组件,至于如何来封装一个更优的组件,也是有些详细的讲究,这个回头也可以开篇来详述),即使多人合作开发也不会出乱。稳中有序。

2. 不同业务之间

同样先来看一张图:

前端开发

如上图所示:

如果两个不同业务之间,出现相同的功能及相同业务组件需要复用的话,就会出现不停的被COPY。一旦组件出现改动,就需要打开多个项目进行个性,出现遗漏还得背锅。copy这种方式也极其容易出错。不是一个有效的工作方式。

因此,我们可以将这公用组件代码包装成一个NPM安装包(公共组件,基础组件),将项目初始架构包装成一个脚手架。这样在新开一个业务需要复用这些东西的时候,只需命令式安装和组装,然后改改UI就完事了。当然,这里会涉及到NODE命令行工具的开发及NPM安装包的封装,具体封装细节下回也可以详细来讲讲。

二、非组件化

如果你的JS代码是一个大文件,找机会把可以重用的功能提取到自包含的对象中,放入到一个单独的库中。

若发现已经有了在所有项目开发中重复使用的一组函数,考虑将它们打包,以通过一个对象直接量来重用。

下面举一个简单的例子:

下面这段代码,包含三个可以在各个业务中高度复用的功能。

前端开发

可以将上面这段代码写在一个字面量里自由调用。

前端开发

当然,有时间或者有兴趣的可以自己来封装一个类似于JQ的库,一个属于自己调用的基础库,也是一种极其优越的代码包装方式。

总结一下:

代码包装也可以根据实际的场景来做,在你的业务场景的复用性极高的功能都可以包装成一个公共JS方法,或者组件,或者安装包,总之,我们最终的目的就是提升二次开发效率。