查看原文
其他

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

2016-10-15 zhiqiang21 前端圈

本文出自强子专栏 

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.  

  9.         console.log('abc'); 

  10.         var aaa=function(){ 

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

  12.             console.log(that.a); 

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

  14.             console.log(this); 

  15.         }; 

  16.  

  17.         aaa(); 

  18.     } 

  19. }; 

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

  21. 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.  

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

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

  11.   } 

  12. };

5.销毁事件绑定

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


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

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

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

而 delegateon 的区别就是

  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的选择器是必须的。ondelegate更加的灵活。

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

  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


长按二维码关注我们

投稿:content@fequan.com

赞助合作:apply@fequan.com

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存