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