最近项目开发中的JS问题

1）  JavaScript原生结点 vs jQuery封装后结点

JavaScript原生结点存在各浏览器的兼容性；各个浏览器在实现其节点的时候提供的api不同，以event事件为例，FF 还有以webkit为内核的浏览器中 event的目标提供为event.target对象，而IE则提供为event.srcElement;

jQurey 很好的封装了这些功能特性，因此我们在使用节点的时候尽量使用jquery的原生结点，如果无法确定是否为jQuery的原生节点，可以使用$(node)，然后使用jQuery提供的服务，但是jQuery封装后的节点我们不能使用setAttribute等属性，控制其属性和样式尽量使用attr，css等jquery提供的服务。

2）jQuery中事件的绑定和捕获

         a)明确jquery事件绑定的对象，尽量将在使用选择器绑定jquery事件的时候，尽量将所绑定的对象以对象的class或者id进行范围限制，单个元素往往使用id进行限制，而多个元素则使用class进行绑定。不要使用$(“div”).click等绑定方式，换而使用$(“div.myTarget”).click作为绑定方式；

         b)Dom在处理时间捕获的时候分为两个阶段：捕获阶段还有冒泡阶段

         当一个dom事件触发的时候，浏览器的window对象1会根据点击的对象一层层去查找时间的触发者，知道找到时间的触发器对象节点6，这是dom事件的捕获过程，当事件完成捕获以后，然后时间节点就会将dom事件进行封装后向上传播，一直到传递给window为止，这是冒泡过程，因此，所有子类的dom事件都可以被其父节点进行捕获，因此在处理大量相同操作的同级节点的时候可以使用这种传播特性。例如：

         <div  id=’parent’>

                          <a  href=”#” οnclick=’process(this)’ >target1</a>

<a href=”#” οnclick=’process(this)’ >target1</a>

<a href=”#” οnclick=’process(this)’ >target1</a>

<a href=”#” οnclick=’process(this)’ >target1</a>

……

         </div>

Div下的a连接的操作大多是相同的，只是他们需要处理的对象不同，因此我们可以将这种处理方式上升到其父类节点进行处理。可以使用一下方式处理：

$(“#parent”).click(function(event){

         process(event.target)

})

之所以使用这种方式而不是使用$(“a”).click是因为向浏览器注册过多的句柄会严重影响性能，尤其是对于IE这种内存释放存在很大问题的浏览器。

3）关于css的书写，如果需要自己定制样式文件，需要注意样式文件不应该对table，div这种进行定义，好多插件的样式混乱很有可能是FE提供的这种不正确的样式元素造成的，尽量使用table.className,div#id等方式定义自己的注释。

 

4）关于xss攻击和url转义

Xss：在jquery 1.6以后我们可以定义jQuery.ajaxPrefilter()进行非法参数的过滤，但是由于现在内网等系统大多使用jquery1.4，而mailadmin中使用的第三方插件jquery ui只支持到jquery1.5,所以这次是通过改写jquery核心库实现的，但是希望FE或者jquery高手们提供类似于ajaxPrefilter。

url转义：当使用get方式进行传递的时候的参数包含%符号的时候，如果强制使用javascript的encode方法的时候，可能会造成不正确的转义，因此我们需要注意尽量使用POST方式进行请求。

 

5）尽量使用jQuery提供的方法进行查询

         内网还有mailadmin中还是会出现getElementById或者getElementsByTagName等方式进行的dom节点查询和操作，但是这样的操作总是存在浏览器的兼容性问题，因此更推荐通过使用jquery的选择器等操作进行节点的操作。