【WEB前端开发最佳实践系列】JavaScript篇

1、养成良好的编码习惯，提升可维护性

一、避免定义全局变量和函数，解决全局变量而致使的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上，使其变成对象的属性：

1 var  myCurrentAction = {
2     length : 0 ,
3     init : function(){},
4     action : function(){}
5 }

还能够将全局的变量包含在一个局部做用域中，而后在这个做用域中完成这些变量的定义以及变量使用的逻辑：

1 (function(){
2    var length = 0;
3    function init(){}
4    function action (){}
5 })();

模块之间交互使用return语句(即作到了代码逻辑的封装，又公开了须要访问的接口)：

1 var myCurrentAction = (function(){
2      var length = 0;
3      function init(){}
4      function action(){}
5      return {
6          init : init
7  }
8 })();

 在JavaScript中，对象的构造中有一个名为prototype的对象，即为原型对象，这个对象上的属性或方法是共享给全部实例对象的。因此说实例对象上的属性和方法来自于两个地方：自身和对应的原型对象。由于原型自己也能够是其余函数的实例对象。因此原型对象中的属性和方法也可能来自于做为实例对象时对应的原型对象上。这就造成了一个由各原型对象组成的链条，称为原型链。原型链的最顶端是构造函数Object中名为prototype的对象，查找对象上的属性或方法时，首先会查找自身是否存在此属性或方法，若是未找到，则会继续在原型链上查找，直到找到或者未找到返回undefined值为止。

DOM操做对性能影响最大其实仍是由于它致使了浏览器的重绘和重排。

--重绘指的是页面的某些部分要从新绘制，好比颜色或背景色的修改，元素的位置和尺寸并无改变。

--重排则是元素耳朵位置或尺寸发生了改变，浏览器须要从新计算渲染树，致使渲染树的一部分或所有发生变化

--致使缘由

• 增长、删除和修改可见DOM元素
• 页面初始化的渲染
• 移动DOM元素
• 修改CSS样式，改变DOM元素的尺寸
• DOM元素内容改变，是的尺寸被撑大
• 浏览器窗口尺寸改变
• 浏览器窗口滚动

 2、常见的Web前端攻击方式

一、XSS

XSS是Cross Site Scripting的缩写，即跨站点脚本攻击。XSS发生在用户的浏览器端，即当用户在加载HTML文档时执行了非预期的恶意脚本，

二、CSRF

CSRF是Cross Site Request Forgery的缩写，译为跨站请求伪造。CSRF和XSS攻击都是发起各类请求，但对CSRF来讲请求是来源于其余网站的，即为跨站的请求，而且这个请求并非来自于用户的意思，而是伪造的请求，诱导用户发起的请求。

三、界面操做劫持

点击劫持、拖放劫持。

JSONP技术提供的跨域数据访问利用了同源策略不完善的地方，算是技巧性的方案，而CORS则是从规范上专门定义的一项跨域数据访问的技术。JSONP只能用GET请求，而CORS比JSONP更先进和可靠。CORS主要的原理是在服务器端设置Access-Control-Allow-Origin头，从而限定了服务请求的发起端。

防范方式：

一、更安全的使用Cookie :设置Cookie为HttpOnly，即禁止了JavaScript操做Cookie.若是须要用到此方式来传递和保存数据的话，应该使用其余安全的代替方案，好比HTML5的LocalStorage.

3、移动设备和桌面端设备，事件绑定的差别

移动设备上能够作多点触摸操做，但在PC上主要是鼠标的单一点操做。

触摸事件分为4类：touchstart、touchmove，touchend，touchcacel。

touchstart和touchend对应桌面端浏览器的mousedown mousemove和mouseup,每一个触摸事件都包含3个列表：touchs targetTouches和changed-Touches,其中须要注意的是touchcancel事件，它比较独特。在某些状况下触摸事件可能被打断。例如：在IOS系统的Safari浏览器中，用户按下了home按键，或者按了浏览器底部工具条上的按键等

4、如何让桌面WEB页面兼容移动设备

一、使用流式布局

流式布局和固定布局是相对的，流式布局的核心思想是使用百分比来设置页面部分的宽度，而固定布局是指页面主要模块使用固定的宽度。

使用流式布局的优势是不管窗口有多大，网页中的各模块均可以完整地显示在窗口中，不会由于浏览器窗口变窄而致使页面部分模块隐藏。这一优势在兼容各类尺寸的移动设备时尤其有用，保证了在移动设备中能完整地显示网页中的内容。

二、借助于CSS Media queries(媒体查询)技术

Media queries是在CSS3中新加入的特性，经过指定媒体类型的方式来限定所包含样式的做用范围。https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

1 @media (max-width: 12450px) { ... }

三、使用合适的图片显示兼容方案

四、保持页面简洁，不要使用移动设备不兼容的技术

五、设置viewport

六、增长连接和按钮的可操做区域

七、使用响应式设计框架

八、使用工具检查网页的移动设备兼容性（MobiReady  、 W3C mobileOK Checker、iPadPeek、Howtogomo）