js在工作中遇到的一些问题

前言

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,防止后续代码挂掉。当然这不是解决方案。

上一篇:
标签让