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

发布时间 : 08-03

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

vscode怎么格式化前端代码?

别用beautify了,基本过时,等待退休状态。

用prettier,把vscode设置formatter为prettier,并且设置保存文件触发自动格式化。根目录建立.prettierrc文件,设置锁进,引号风格等配置。

然后js的话装个eslint,ts的话装个tslint,在vscode里设置格式化优先继承lint配置,并用prettier配置复写。根目录建立lint的config文件。

然后再装个editorconfig插件,根目录建立.editorconfig配置。这个的作用是为项目统一编辑器的实时格式。简单来说就是它负责敲代码那一刻的格式,prettier负责保存代码那一刻的格式。两者统一体验更好。

最后,你在package.json里面再来一条lint prettier的全项目自动审阅命令,以及自动全局格式化命令。用来做代码审阅和自动修复,保证很多人参与的大项目都有完全统一的代码格式。

以上基本实现vscode优雅格式化。

手机打字比较麻烦,就不详细讲具体配置了。

sublime JavaScript软件如何配置比较好?

由于工作关系,换了新电脑,目前我的mac还没有安装sublime,我现在就一边安装sublime一边回答这个问题!

下载sublime软件mac的软件我一般会去pc6下载,/mac/120663.html

然后就是直接安装........

安装package control按一下快捷键command `,打开Show Console(在view中也能打开)

然后把上面这段python代码拷贝到控制台中执行(版本选择对应的2或者3),然后重启即可

安装插件按一下command shift,输入package controll:install Package,即可安装插件

常用插件如下:

1、Emmet 补全代码

2、HTML-CSS-JS Prettify 格式化代码

这个插件需要设置node路径,所以需要预先安装node

可以在这个文件中设置格式化参数,比如缩进等

3、DocBlockr 注释代码

4、MarkdownLivePreview 用markdown写文档

5、如果开发中用了react 或者 vue,还需要找对应的框架插件,比如高亮、格式化、补全等,这类插件一般都是以文件后缀区分的,如果有自定义的文件后缀,可能需要修改配置!

以上就是我认为是必须配置的插件,其他个性化插件可以自己选择性安装。

编辑器 其实我一直在使用atom编辑器,atom可以在侧边栏添加很多文件夹,这点sublime不行,另外atom编辑器比较重,容易卡死。最近比较风靡vscode,但是我一直偏爱atom,看个人喜好吧!不管怎么说这几块编辑器都是非常强大的,完全可以满足工作需要!

喜欢我的回答就关注我吧,有问题可以发表评论,我们一起学习,共同成长!

文章推荐:

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

node.js怎么获取访问者的内网ip?

使用js实现的简单拖拽效果?

post请求的提交数据方式有(请在微信客户端内提交验证)

在html中怎么使用转义字符啊?