星悦内蒙麻将下载苹果
扫描关注网站建设微信公众账号

扫一扫微信二维码

陕西丫丫麻将苹果:日照网站建公司告诉你设如何维护整洁的JavaScript代码!

昊诺网络o2017-07-21 10:03:50o网络知识o

星悦内蒙麻将下载苹果 www.zyyo.com.cn 维护整洁的JavaScript代码

即使平时做的项目都比较简单,复杂的情况也不过是使用 jQuery 和插件,如果能针对“如何编写 JavaScript”创建标准,你仍然能从中获益。你会发现,如果没有某种期望和规范,你的 JavaScript 文件会像断线的风筝一样不受控制,代码也难以测试和重构。作为前端架构师,在给 JavaScript 代码评审制定标准的时候,你可以参考下面概括的一些规范。

1. 保持代码整洁

JavaScript 是一种脚本语言,这跟 HTML 和 CSS 不同。如果你忘记闭合一个 HTML 标签或者写了无效的 CSS,坏的情况不过是页面上出现了一些小缺陷。如果你在 JavaScript 代码里添加了太多的逗号或者忘记闭合大括号,整个网站都有可能崩溃。

由于编写恰当的 JavaScript 非常关键,在项目中结合单元测试使用一些格式 / 错误提示工具。如果在开发流程里运用其中一条,这不仅有助于发现导致崩溃的代码,而且能帮助你执行关于代码格式甚至是代码编写的规范。

JS Hint是这些工具中一个很好的例子。它能够在你的文本编辑器里使用,一旦你犯错,它就会即时标记出来。你甚至可以把它用在构建系统中,这样如果有任何代码不符合规范,将无法通过测试。

这里有几条可以使用 JS Hint 检查的规则:

强制使用 === 和 !== 代替 == 和 !=

限制代码块嵌套深度

限制函数的参数数量

如果函数重复定义,发出警告

如果变量创建后未被使用,发出警告
2. 创造可复用的函数

依照写 jQuery 代码的方式,我们的代码常常以 CSS 选择器(名词)开始,紧接着是执行一连串函数(动词)。这正是人类大脑的工作方式,我们首先想到需要锁定的事物,然后考虑对它做什么。虽然这使代码对人们来说可读性很强,但可复用性却并不高。来看看我们给 CMS 创造的警告类名:
网站建设素材图片1
这段代码很短,也很容易读懂。我们知道 .redalert 给元素添加了红色背景,然后绑定事件函数,点击元素后,它的内容会被打印到控制台上。

我们也知道 .yellow-alert 给元素添加了黄色背景,并绑定了同样的事件函数。

对于只有两个类名的情况,这可能还比较好用,但是这样的代码是不可复用的。如果想创建更多的警告颜色,我们需要复制其中一个,然后改变类名和颜色。而且,如果因为某些原因创建了十多块这样的代码,当我们想回头调整点击函数或者添加字体颜色去搭配背景色时,可能需要改几十次才能完成。

相比写一系列描述句一样的代码,把代码拆分成小块、可复用函数可以帮我们创建出更好的系统??纯匆韵绿娲桨福?br /> 网站建设素材图片2
这个方案虽然需要多写几行代码,但有以下优点:

现在有了清晰地说明用途的函数

如果需要创建新的 .green-alert 类名,只需要修改定义好的 add_background() 和 log_text_on_click 函数

如果需要将 console.log($(this).html()); 改成 console.log($(this).text());,只需要在一个位置修改,而不是多个位置

可以在项目里的很多地方复用这两个函数

就像 Sass 的混入(mixin)写法比原生 CSS 有更多好处,把代码拆分为可复用的函数,我们的代码将变得更加清晰、精简、灵活和可测。

以上是星悦内蒙麻将下载苹果(昊诺网络公司)分享,如果大家喜欢该网络知识,请关注我们的网站动态!

文章关键词