专栏首页web前端教室JS代码超过1000行,该怎么维护?

JS代码超过1000行,该怎么维护?

1000行JS代码,听起来挺多的,但实际上真不算什么,随便一个功能完备、代码健壮的JS应用或是模块,很轻松的就写出1000多行,看这里,我以前写的一个tabel插件,带有CRUD功能、展开、加载、上传、预览功能的东西,当时为了赶时间没怎么细写,只是实现了功能,就达到700多行,

所以,现代的大型web应用,1000行以上的JS代码我觉得就是“起步价”而已。那么这种大型应用的开发,我们必须对JS的可维护性有一个清醒的认识。

不要觉得,“我写的代码,我还维护不了么”?很有可能。你写的代码,当它的逻辑性和复杂度达到一定程度的时候,我敢保证,“正因为你了解它,所以你未必敢动它。”

现在前端开发很少有完全从零开始写起的,都是拿一些框架、库、脚手架做为起点,然后进行自己的针对性的开发。都是在他人的成果之上进行工作,所以你要保证你的代码也是可维护的,松耦合的,不要把自己写的代码搞成一个在坑,然后让别人往里跳。

那么可维护性的代码,有啥特点?

变量名、类名、方法名,就是它的功能的说明。再加上一些注释,别人一看就知道你这东西是干嘛的。不要起什么idxx1,idxx2...idxxn之类的名字,而且我个人觉得吧,js起名不要怕名字长,长有什么关系,不重复能看明白就是好名字。

要么就是直观一些,别绕来绕去的。甚至我觉得如果可以用if else,那么别用三元判断。js代码我个人主观觉得,啰嗦一点会更好些。

然后对于数据的加载和使用,要有一定的适应性,不要搞的json的结构一变,你的js整个不能运行。自己封装一个分析json的公共方法。

至于什么可扩展啊,可调试那都应该是标配。

新人写js有一个特点,就是一心想着“我赶紧写出来”。就好像在学校上课一样,赶紧完成老师的作业。其它的就不管了,什么格式啊,缩进啊,都不管。但是良好的代码风格本身就是js可维护性的一个组成部分。

变量和函数的命名,到底用什么方式?是拼音?还是序号?还是怎么样,至少得有个章程。一般来讲变量名用名字,名称嘛;然后函数名用动词,函数是做事的呀。不必担心什么变量名太长会增加体积,现在js都是被压缩过的。

还有一个方面就是声明变量时的变量类型。同学们应该都知道,js中的变量声明是没有类型的。搞一个变量出来,什么都可以往里放。如果想在声明变量的时候,用一些方法对变量的类型进行标记,有二个方法比较有效,

(此截图来自segmentfault-Kraaas,这里表示感谢)

至少在格式、命名、声明变量 & 方法,这几个方面做到一致,那么这个js代码才能算是具有了基本的可维护性。

还有一点,如果上面我写的这些你在面试的时候能说出来,应该会有加分的啊。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实际演示,怎么搞一个demo的业务逻辑、需求分析?

    今天是周日,今天晚上20:00的时候,咱们进行了每周日都会有的先行者视频直播课程,主要内容是,通过一个实例,怎么去分析它的需求、设计它的js的结构。

    web前端教室
  • 前端新人学习中的陌生感是如何产生的,以及解决思路。

    今天在给零基础班的同学们讲nodeJs的时候,也许是讲课讲到一定程度了吧,突然一下就能体会到他们面对一个“新东西”的时候的那种陌生感、疏离感了。一定程度上能够感...

    web前端教室
  • JS本身并不难,为什么前端学起来感觉很难?

    image.png 这个问题我就不等大家的回答了,相信大家也明白,我并不是闲的无聊这么问。JS本身语法并不难,它困难的地方在哪呢?主要在于以下几点: ? 1,怎...

    web前端教室
  • 【前端面筋】终于等到你!!!

    之前一直在牛客刷面筋,今天终于自己也写了一篇,算是秋招的总结吧。希望大家都能顺利拿到自己想要的offer! lz本科妹子,从没有想过要当程序员......无奈非...

    牛客网
  • 1对多业务,数据库水平切分架构一次搞定 | 架构师之路

    本文将以“帖子中心”为例,介绍“1对多”类业务,随着数据量的逐步增大,数据库性能显著降低,数据库水平切分相关的架构实践: 如何来实施水平切分 水平切分后常见的问...

    架构师之路
  • 前端工程师如何持续保持热情(一)

    如果一直以同样的姿态做一样的事情,就很容易觉得无聊,没有成就感。所以需要提升效率做同样的事情,后面越来越快完成,每天都看见自己的进步,自然就有了热情

    lhyt
  • 【python进阶】详解元类及其应用2

    前言 在上一篇文章【python进阶】详解元类及其应用1中,我们提到了关于元类的一些前置知识,介绍了类对象,动态创建类,使用type创建类,这一节我们将继续接着...

    Angel_Kitty
  • 关于Rollup那些事

    下一代打包工具,这是rollup对自己的定位。如今的前端领域,构建工具并不缺少,每个前端工程师都用过或者听过webpack。可以看到的是像React、Vue等框...

    腾讯IVWEB团队
  • sklearn-preprocessing使用

    将数据按期属性(按列进行)减去其均值,并处以其方差。得到的结果是,对于每个属性/每列来说所有数据都聚集在0附近,方差为1。

    周小董
  • 谷歌和OpenAI联合发布五条AI定律:如何有效约束AI?

    镁客网

扫码关注云+社区

领取腾讯云代金券