js在工作中遇到的一些问题
2017-08-30 10:22
246 查看
前言
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,防止后续代码挂掉。当然这不是解决方案。
相关文章推荐
- 工作中遇到的一些问题集合
- 写js时遇到的一些小问题
- 记录工作中遇到的一些问题(长期更新)
- 一些常用js的技术和一些常遇到的问题
- 工作中遇到的问题:百万条数据的查询、删除、修改效率提高的一些思考,解决方案(二)
- 一些工作中遇到的问题分享
- 工作中遇到的一些 小问题
- 工作时遇到的一些问题解决
- .Net开发工作中常遇到的一些问题及解决方案
- 关于工作中遇到的一些问题及解决方法
- js开发过程中遇到的一些问题
- CDH5.3.x安装准备工作以及遇到的一些问题
- 使用Jquery.cookie.js遇到的一些问题
- 最近工作中遇到ElasticSearch一些问题总结
- css/js(工作中遇到的问题)-3
- 菜鸟级前端(前段工作遇到的一些浏览器兼容问题)
- 记录工作中遇到的一些问题(一)
- 工作中遇到的一些问题 小 tip
- android studio 工作中遇到的一些常见的问题
- 开始记录工作中遇到的一些技术问题