前言
js这种语言没有太多封装好的模式或者统一的编程方式,所以一些细节的问题很容易导致bug,那下面就写为:一份坚固的代码是什么样的。
持续更新一下,记一些good case和bug。
事件绑定的选择器不要写元素名(bug)
有这样一个结构
<section>
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</section>
每个区块是一个section,我在每个li上面绑定一个click事件,看起来是没问题的,$(section li).click(xxx),
但是某一天,另一位维护此代码的同学在li里面又写了一段ul,li的结构,并绑定了另一段click事件,这样事件绑定就gg了。
人家怎么知道你会在li上面绑定click事件呢?
good case
就是给每个要绑定事件的元素class。
空数组赋值和取值(bug)
我需要给一个数组的第一项赋值,然而我觉得arr[0]=xxx
这样写太丑陋了,也存在下面的问题。于是我写为[xxx]
,好像是没什么问题。
但是有一天,后台服务挂了,于是我的xxx成了undefined,于是我的arr成了[undefined],后面的逻辑处理arr的时候就取不到值,后面的判断是
if(arr.length<0){
return false
}
[undefined]竟然通过了这种判断,这就造成了后面取值出错的问题。
good case
没什么好方案只能多加判断,这里的情况是xxx是数组我们需要[xxx[0]],利用[].slice(0,1)还是空,避免undefined。
给class加特定命名(good case)
尝试给css加特定的命名吧,比如模块我用.m-xxx,元件我用.u-xxx,规则就是.模块/布局-元件-状态。为每个样式分组,每个组是一个模块,最小模块是每个元件,元件的不同样式用状态,比如bootstrap的不同颜色,用了.danger,.info,.sucess等。
这样避免class的重复,样式的覆盖,重要的一点就是一眼能看清楚这个class的作用和这个div的作用。
比如网易nec的规范: http://nec.netease.com/standard/css-sort.html
危险动作-取值 (bug)
尝试$('#xxx')的取值动作,一定要判空处理。。!!!!!!
认真的。。
重要代码!最好包try catch,防止后续代码挂掉。当然这不是解决方案。