1.改变页面标题的内容

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

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

就行解决我们的问题。

或者使用

  1. //当前firefox对 title 參数不支持
  2. history.pushstate(state,title,url);

这个方案不仅可以改动 title 并且可以改动 url 的值,并且将这些信息存储到浏览器的历史堆栈中,当用户使用返回button的时候可以得到更加好的体验。

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

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

有这种一个场景:

在做电商类的产品的时候,我们要对每一个产品的PV数进行统计(事实上就是出发一个ajax请求)。PC端的交互大多数是点击商品后新开页面。这个时候ajax同步发送或者异步发送对统计没有影响。

可是嵌套在client中。长长是在当前 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 的事件绑定的时候也经历了一个过程。刚開始的时候onclickbindlivedelegate,on 这样一个过程。

之所以会有这种需求就是由于我们页面上的 DOM 是动态更新。

比方说,某块内容是点击页面上的内容显示出来。然后在这块新出现的内容上使用click肯定是满足不了需求的。

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

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 方法的销毁必须使用事件名称和回调函数,主要是 window 上可能绑定这系统自己定义的事件和回掉
  9. $(window).off('scroll',scrollEvent);
  10. };

假设您认为不错。请訪问 github(点我) 地址给我一颗星。谢谢啦。

移动端 h5 开发相关内容总结——JavaScript 篇的更多相关文章

  1. 移动端h5开发相关内容总结css篇--笔记

    原文参考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ 1.开发移动端,头部必要的配置<meta name="viewport&quo ...

  2. 转---移动端 h5开发相关内容总结——CSS篇

    作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ...

  3. 移动端 h5开发相关内容总结——CSS篇

    1.移动端开发视窗体的加入 h5端开发以下这段话是必须配置的 <meta name="viewport" content="width=device-width, ...

  4. 移动端 h5开发相关内容总结(三)

    之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...

  5. 移动端H5开发遇到的问题及解决方法

    本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...

  6. 移动端H5开发自适应技巧

    移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ...

  7. 移动端H5开发 之 渲染引擎

    渲染引擎 浏览器渲染引擎,负责解析 HTML, CSS,javascript的DOM部分,如桌面浏览器一般手机端也有4个比较重要的渲染引擎 Gecko,Trident,WebKit,Blink . 黑 ...

  8. 在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)

    一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...

  9. 移动端H5开发中的常见问题处理

    1.问题之合成海报: 功能技术:http://html2canvas.hertzen.com 问题描述:合成模糊.合成区域内容错位,合成不完整,合成边缘白条等. 解决方案:如有页面布局正常合成错位的, ...

随机推荐

  1. Redis学习笔记--Redis客户端(三)

    1.Redis客户端 1.1 Redis自带的客户端 (1)启动 启动客户端命令:[root@kwredis bin]# ./redis-cli -h 127.0.0.1 -p 6379 -h:指定访 ...

  2. C++ 补课 (三)

    1,枚举类型 —— 下标自0开始 enum 枚举类型名 { 常数表 } 2,C++ 的异常处理机制实际上是一种运行时通知机制 3,delete p;只是删除指针p指向内存区,并不是删除指针p,所以p还 ...

  3. react-native React Native version mismatch

    android/app/build.gradle     file: dependencies { compile fileTree(dir: "libs", include: [ ...

  4. 【Codeforces Round #457 (Div. 2) B】Jamie and Binary Sequence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把n分解成二进制的形式. n=2^a0+2^a1+...+2^a[q-1] 则固定就是长度为q的序列. 要想扩展为长为k的序列. 可 ...

  5. tomcat日志配置之一自带log

    问题 tomcat每次启动时,自动在logs目录下生产以下日志文件,且每天都会生成对应日期的一个文件,造成日志文件众多: localhost.2012-07-05.txt catalina.2012- ...

  6. mvc定时执行任务(获取气象台的气象数据,定时新增)

    1.定时任务: gloabl.asax文件Application_Start()方法注册: System.Timers.Timer t = new System.Timers.Timer(theInt ...

  7. bug 7715339 登录失败触发 ‘row cache lock’ 等待

    Bug 7715339 - Logon failures causes "row cache lock" waits - Allow disable of logon delay ...

  8. js04---object1

    我们目前为止大多数引用类型都是Object类型的实例,Object也是ECMAScript中使用最多的一种类型(就像java.lang.Object一样,Object类型是所有它的实例的基础).Obj ...

  9. 10lession-if-else条件语句

    python的条件选择语句跟其他语言的及其相似,这里就不做详细记录,仅仅是看个例子好了 #!/usr/bin/python "]: print('1 in [1,2,3,"4&qu ...

  10. SSO单点登录学习总结(3)—— 基于CAS实现单点登录实例

    第一: 本demo在一个机器上实现(三个虚拟主机),来看SSO单点登录实例(我们可以布到多个机器上使用都是同一个道理的),一个服务器主机,和两个客户端虚拟主机 [html] view plaincop ...