摘要：
1、 全局变量带来的问题a) 命名冲突b) 代码脆弱c) 难以测试2、 意外的全局变量a) 当为没有定义的变量赋值时，该变量为全局变量var count = 10; name = “chen”;此时的nane为全局变量b) 使用jsLint或者JSHint进行代码检查使用严格模式进行代码编写”use strict”3、 使用单全局变量a) 为window添加一个代表整个页面或者整个模块的全局变量，并将变量和函数都绑定在该对象内。b) 将上面的单全局变量拆分为多个命名空间。 阅读全文
posted @ 2013-10-21 00:13
charling
阅读(660)
评论(0)
推荐(0)
摘要：
1、 没有很好的将事件处理程序和应用逻辑程序相分离。应当将事件的处理和逻辑过程分解成两个不同的部分。2、 对事件对象的分发传递。当事件对象传入事件处理函数之后，简单的将事件对象传入了应用逻辑处理函数。这样做的坏处是：很难让别人一眼就看出逻辑处理函数中具体需要什么。Var myapp = { handleClick : function( event ){ event.preventDefault(); event.stopPropagation(); this.showPopup( event.clientX, event.clientY );},showPopup : function( x 阅读全文
posted @ 2013-10-21 00:11
charling
阅读(198)
评论(0)
推荐(0)
摘要：
UI层的松耦合主要是指html、css、js的松耦合1、 将js代码从css中分离，即不使用expression2、 将css从js中分离，尽量不要在js中直接操作css。如果需要操作，可以使用添加或删除class的方法（class在css中定义好），避免在出现bug时，定位不到出错位置3、 将js从html中抽离4、 将html从js中抽离，当遇到需要在js中使用html模板时a) 从服务器加载b) 将模板储存于客户端，即html文档当中，以无法渲染的方式存储 i. 以注释的形式 ii. 以script的形式，将script的type设置为浏览器无法解读的形式，如：type=“text/my 阅读全文
posted @ 2013-10-21 00:10
charling
阅读(335)
评论(0)
推荐(0)
摘要：
分号结尾一定要加行长度最好不超过80个字符换行：a) 运算符后换行，防止分析器自动分号加入机制误加分号b) 长度达到单行最大限制换行时，运算符后换行并加入两个层级的缩进c) 赋值时，如果需要换行，第二行之后对其到“=”空行方法之间方法中的局部变量和第一条语句之间在多行或多行注释之前方法内的逻辑片段之间变量和函数驼峰命名，尽量简短，变量名词词义，函数动词词义，如can、has、is、get、set构造函数使用大驼峰表示，即从首字母就开始大写不要用null来检测一个未初始化的变量采用对象、数组直接量的方式创建对象或数组，而尽量不要使用new操作符创建。注释：a) 注释前加空行b) 可能会被认为是错 阅读全文
posted @ 2013-10-21 00:09
charling
阅读(821)
评论(0)
推荐(0)
摘要：
很多时候我们会通过记录cookie的方式来记录用户的最后一次行为，但是对cookie的处理是在js中进行的。但通常情况下，html、css都要早于js加载完成，并且可能在js生效之前就已经渲染完成了内容。可渲染完成的内容并不一定就是cookie中所记录的需要展现的内容，就会造成从一种内容跳转到另外一种内容的状况。解决方案： 1、在该模块解析之前发送一条同步请求，请求返回之后根据js中的cookie记录进行展示。 同步请求会阻塞页面的解析 2、将该模块的内容方式textarea，等待js加载之后判断展示textarea中的内容还是重新发异步请求去加载cookie中记录的相应数据。 不会阻... 阅读全文
posted @ 2013-10-17 23:30
charling
阅读(311)
评论(0)
推荐(0)
摘要：
1、缓存的处理方法： 为请求添加定时改变的时间戳2、快速请求到非实时数据的方法 数据静态化，而不是读接口，可以节省后端处理数据的时间。3、防止不同请求错乱的方法 为每个请求添加不同的ID4、css书写清晰化，减小维护的成本。5、js需要根据规范形成特定的团队风格，减少维护成本。如果大家都用统一的规范书写代码，别人理解自己代码的成本就会降低。 阅读全文
posted @ 2013-10-17 22:59
charling
阅读(192)
评论(0)
推荐(0)
摘要：
在使用a标签做切换tab或者其他功能时，经常使用javascript:;来作为a标签的href来使用。缺点： 1、在js尚未加载的情况下，点击该a标签会弹出新窗口。 2、会使gif动画失效（没经历过） 3、会使请求禁止（没经历过）改进： 1、增加onclick属性 onclick=“return false;” 2、href传入#和任意字符，这样会被默认成锚点。并且为该a标签设置target=“_self”，解决打开新窗口的问题。 阅读全文
posted @ 2013-10-17 09:16
charling
阅读(3209)
评论(0)
推荐(0)
摘要：
在项目中发现，当设置 通过设置img的width属性和height属性在img未请求回来之前为其预留位置。浏览器在渲染时会为这张图片预留出100px*100px的的位置，等待图片的加载。这种方式可以避免图片错乱的问题，同时避免因为图片而造成的页面重排。但问题是在chrome浏览器中，这种策略并没有生效。其它主流浏览器均正常。解决hack方案是：为该图片包裹一层span并设置为inline-block。但这种方式增加了代码，并且破坏了html的结构化。 阅读全文
posted @ 2013-10-16 21:58
charling
阅读(522)
评论(0)
推荐(0)
摘要：
项目中，经常会用到line-height和vertical-algin来解决垂直居中的问题，但对其原理和应用限制却很少了解。因此做了一下总结： line-height具有继承性，对inline元素、textnode节点、inline-block、block都起作用。和很多网上的描述并不一致（已验证），当设置了line-height但是没有设置高度的情况下，高度由line-height决定。 vertical-algin不具有继承性。vertical-algin的实现基本上每个浏览器都不相同，但是它的middle值得实现却基本相同，因此用来实现垂直居中是可以的。默认是baseline居中。只.. 阅读全文
posted @ 2013-10-15 22:00
charling
阅读(337)
评论(0)
推荐(0)
摘要：
背景：三个inline-block元素，其中两个内容为空，另外一个包含文字，设置文字的font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。原因： 当设置了font-size之后，改变了元素排列的基线。垂直方向的默认基线是是baseline。当文字设置font-size之后，会将inline-block元素的默认基线设置为文字的base-line，从而导致排列的问题。 阅读全文
posted @ 2013-10-15 21:35
charling
阅读(2801)
评论(0)
推荐(0)
浙公网安备 33010602011771号