[JavaScript 篇]移动端h5开发相关内容总结

本文出自强子专栏 

http://blog.csdn.net/yisuowushinian

1.改变页面标题的内容

有时候我们开发 h5页面的时候需要动态的去更新title 的名字，这个时候使用

1. document.title='修改后的名字';

就可以解决我们的问题。或者使用

1. //当前firefox对 title 参数不支持 

2. history.pushstate(state,title,url);

这种方法不仅能够修改 title 而且能够修改 url 的值，并且将这些信息存储到浏览器的历史堆栈中，当用户使用返回按钮的时候能够得到更加好的体验。 

当我们在做一个无刷新更新页面数据的时候，可以使用这种方法来记录页面的状态，使得页面能够回退。

2.日志记录同步发送请求

有这样的一个场景： 
在做电商类的产品的时候，我们要对每个产品的点击数进行统计（其实就是出发一个ajax请求）。PC端的交互大多数是点击商品后新开页面。这个时候ajax是同步发送或者异步发送对统计没有影响。 

但是嵌套在客户端中，长长是在当前 tab 中跳页。如果我们仍旧使用异步的ajax 请求，有请求会被阻断，统计结果不准确。

3.JavaScript 中 this 相关

这部分内容之前也是看过很多次，但是都不能够理解深层次的含义。后来看的多了，也就理解了。

1. var ab = { 

2.     'a': 1, 

3.     'b': 2, 

4.     'c': 3, 

5.     abc:function(){ 

6.         // 对象的方法中，this是绑定的当前对象 

7.         var that=this; 

8.         console.log('abc'); 

9.         var aaa=function(){ 

10.             //that指向的是当前对象 

11.             console.log(that.a); 

12.             //函数中this的值绑定的是全局的window对象 

13.             console.log(this); 

14.         }; 

15.         aaa(); 

16.     } 

17. }; 

18. console.log('---------'); 

19. ab.abc();

以上代码浏览器中输出结果如下：

1. var BBB=function(){ 

2.   var a=0; 

3.   this.b=1; 

4.   return this; 

5. } 

6. var bb= new BBB();

在浏览器中输入一下的内容查看输出：

我们对代码做一下修改，如下：

1. var BBB=function(){ 

2.   var a=0; 

3.   this.b=1; 

4. } 

5. var bb= new BBB();

与之上相同的输入，查看一下输出是什么

由上可知 new 操作符的执行过程：

1. 一个新对象被创建。它继承自BBB.prototype。

2. 构造函数 BBB 被执行。执行的时候，相应的传参会被传入，同时上下文this会被指定为这个新实例。new BBB 等同于new BBB(), 只能用在不传递任何参数的情况。

3. 如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new出来的结果为步骤1创建的对象。

一般情况下构造函数不返回任何值，不过用户如果想覆盖这个返回值，可以自己选择返回一个普通对象来覆盖。当然，返回数组也会覆盖，因为数组也是对象。

4.JavaScript 中闭包相关

定义在闭包中的函数可以“记忆”它创建时候的环境。

1. var test=function(string){ 

2.   return function(){ 

3.     console.log(string); 

4.   } 

5. }; 

6. var tt=test(); 

7. tt();

1. //li列表点击每一行 显示当前的行数  

2. var add_li_event=function(node){ 

3.   var helper=function(i){ 

4.     return function(e){ 

5.       alert(i); 

6.     } 

7.   }; 

8.   for (var i = 0, len =node.length; i < len; i++) { 

9.     node[i].onclick=helper(i);  

10.   } 

11. };

5.销毁事件绑定

我自己在写 js 的事件绑定的时候也经历了一个过程，刚开始的时候onclick，bind，live，delegate,on 这样一个过程。

之所以会有这样的需求就是因为我们页面上的 DOM 是动态更新。比如说，某块内容是点击页面上的内容显示出来，然后在这块新出现的内容上使用click肯定是满足不了需求的。

live 和delegate 属于较早版本的事件委托（代理事件）的写法。最新版本的  都是使用on 来做代理事件。效率上比 live 和 delegate更高。

live是将事件绑定到当前的document ，如果文档元素嵌套太深，在冒泡的过程中影响性能。 

而 delegate和on 的区别就是

1. jQueryObject.delegate( selector , events [, data ], handler ) 

2. //或者 

3. jQueryObject.delegate( selector, eventsMap )

1. jQueryObject.on( events [, selector ] [, data ], handler ) 

2. //或者 

3. jQueryObject.on( eventsMap [, selector ] [, data ] )

由此可知，使用on的话，子代元素的选择器是可选的。但是 delegate的选择器是必须的。on比delegate更加的灵活。

很多时候我们都是只声明事件绑定，而不管事件的销毁。但是在编写前端插件的时候，我们需要提供事件销毁的方法，提供给插件使用者调用。这样做的好处就是使，使用者对插件更加可控，释放内存，提供页面的性能。

1. var that={}; 

2. $('.event_dom').on('click','.childK_dom',function(){}); 

3. $(window).on('scroll',scrollEvent); 

4. var scrollEvent=function(){}; 

5. //事件销毁 

6. that.desrory=function(){ 

7.     $('.event_dom').off(); 

8.     //window 方法的销毁必须使用事件名称和回调函数 

9.     //主要是 window 上可能绑定这系统自定义的事件和回掉 

10.     $(window).off('scroll',scrollEvent); 

11. };

如果您觉得不错，请访问 github（https://github.com/zhiqiang21/blog） 地址给我一颗星。谢谢啦！

【您可能感兴趣的文章】

一、[译]使用 Yarn 安装 Vue-cli

二、[译]取代 npm 的新利器 Yarn

三、git分支进阶

四、入职新手必知的劳动法

五、组件化的css-module

六、再谈移动端适配和点5像素的由来

七、js的沙箱内容

八、高清屏概念解析与检测设备像素比的方法

九、学习设计模式前需要知道的事情

十、[VueJS] V1 与 V2 组件实体之差异

前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态，推动web标准化的发展

官网：http://fequan.com

微博：fequancom | QQ群：41378087

长按二维码关注我们

投稿：[e-mail]

赞助合作：[e-mail]