移动端 h5 开发相关内容总结——JavaScript 篇
1.改变页面标题的内容
有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用
document.title='改动后的名字';
就行解决我们的问题。
或者使用
//当前firefox对 title 參数不支持
history.pushstate(state,title,url);
这个方案不仅可以改动 title 并且可以改动 url 的值,并且将这些信息存储到浏览器的历史堆栈中,当用户使用返回button的时候可以得到更加好的体验。
当我们在做一个无刷新更新页面数据的时候,可以使用这个方案来记录页面的状态,使得页面可以回退。
2.日志记录同步发送请求
有这种一个场景:
在做电商类的产品的时候,我们要对每一个产品的PV数进行统计(事实上就是出发一个ajax
请求)。PC端的交互大多数是点击商品后新开页面。这个时候ajax
是同步发送
或者异步发送
对统计没有影响。
可是嵌套在client中。长长是在当前 tab
中跳页。假设我们仍旧使用异步的ajax
请求,有请求会被阻断。统计结果不准确。
3.JavaScript 中 this 相关
这部分内容之前也是看过非常多次,可是都不可以理解深层次的含义。后来看的多了。也就理解了。
var ab = {
'a': 1,
'b': 2,
'c': 3,
abc:function(){
// 对象的方法中,this是绑定的当前对象
var that=this;
console.log('abc');
var aaa=function(){
//that指向的是当前对象
console.log(that.a);
//函数中this的值绑定的是全局的window对象
console.log(this);
};
aaa();
}
};
console.log('---------');
ab.abc();
以上代码浏览器中输出结果例如以下:
var BBB=function(){
var a=0;
this.b=1;
return this;
}
var bb= new BBB();
在浏览器中输入一下的内容查看输出:
我们对代码做一下改动,例如以下:
var BBB=function(){
var a=0;
this.b=1;
}
var bb= new BBB();
与之上同样的输入,查看一下输出是什么
由上可知 new 操作符的运行过程:
- 一个新对象被创建。它继承自
BBB.prototype
。 - 构造函数
BBB
被运行。运行的时候。对应的传參会被传入,同一时候上下文this
会被指定为这个新实例。new BBB
等同于new BBB()
, 仅仅能用在不传递不论什么參数的情况。 假设构造函数返回了一个“对象”。那么这个对象会代替整个new出来的结果。
假设构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。
普通情况下构造函数不返回不论什么值,只是用户假设想覆盖这个返回值,可以自己选择返回一个普通对象来覆盖。
当然,返回数组也会覆盖。由于数组也是对象。
4.JavaScript 中闭包相关
定义在闭包中的函数可以“记忆”它创建时候的环境。
var test=function(string){
return function(){
console.log(string);
}
};
var tt=test();
tt();
//li列表点击每一行 显示当前的行数
var add_li_event=function(node){
var helper=function(i){
return function(e){
alert(i);
}
};
for (var i = 0, len =node.length; i < len; i++) {
node[i].onclick=helper(i);
}
};
5.销毁事件绑定
我自己在写 js 的事件绑定的时候也经历了一个过程。刚開始的时候onclick
。bind
,live
,delegate
,on
这样一个过程。
之所以会有这种需求就是由于我们页面上的 DOM 是动态更新。
比方说,某块内容是点击页面上的内容显示出来。然后在这块新出现的内容上使用click
肯定是满足不了需求的。
live
和delegate
属于较早版本号的事件托付(代理事件)的写法。最新版本号的 jquery 都是使用on
来做代理事件。效率上比 live
和 delegate
更高。
live
是将事件绑定到当前的document
。假设文档元素嵌套太深。在冒泡的过程中影响性能。
而 delegate
和on
的差别就是
jQueryObject.delegate( selector , events [, data ], handler )
//或者
jQueryObject.delegate( selector, eventsMap )
jQueryObject.on( events [, selector ] [, data ], handler )
//或者
jQueryObject.on( eventsMap [, selector ] [, data ] )
由此可知,使用on
的话,子代元素的选择器是可选的。
可是 delegate
的选择器是必须的。
on
比delegate
更加的灵活。
非常多时候我们都是仅仅声明事件绑定。而无论事件的销毁。可是在编写前端插件的时候,我们须要提供事件销毁的方法,提供给插件使用者调用。这样做的优点就是使,使用者对插件更加可控。释放内存,提供页面的性能。
var that={};
$('.event_dom').on('click','.childK_dom',function(){});
$(window).on('scroll',scrollEvent);
var scrollEvent=function(){};
//事件销毁
that.desrory=function(){
$('.event_dom').off();
//window 方法的销毁必须使用事件名称和回调函数,主要是 window 上可能绑定这系统自己定义的事件和回掉
$(window).off('scroll',scrollEvent);
};
假设您认为不错。请訪问 github(点我) 地址给我一颗星。谢谢啦。
移动端 h5 开发相关内容总结——JavaScript 篇的更多相关文章
- 移动端h5开发相关内容总结css篇--笔记
原文参考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ 1.开发移动端,头部必要的配置<meta name="viewport&quo ...
- 转---移动端 h5开发相关内容总结——CSS篇
作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ...
- 移动端 h5开发相关内容总结——CSS篇
1.移动端开发视窗体的加入 h5端开发以下这段话是必须配置的 <meta name="viewport" content="width=device-width, ...
- 移动端 h5开发相关内容总结(三)
之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...
- 移动端H5开发遇到的问题及解决方法
本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...
- 移动端H5开发自适应技巧
移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ...
- 移动端H5开发 之 渲染引擎
渲染引擎 浏览器渲染引擎,负责解析 HTML, CSS,javascript的DOM部分,如桌面浏览器一般手机端也有4个比较重要的渲染引擎 Gecko,Trident,WebKit,Blink . 黑 ...
- 在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)
一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...
- 移动端H5开发中的常见问题处理
1.问题之合成海报: 功能技术:http://html2canvas.hertzen.com 问题描述:合成模糊.合成区域内容错位,合成不完整,合成边缘白条等. 解决方案:如有页面布局正常合成错位的, ...
随机推荐
- java为什么要定义接口等相关解释
1.接口的作用是实现多重继承 因为只能继承一个类(规定的) 2.一个类只能继承一个父类,但是可以实现一个或多个接口 3.abstract关键词能让你在类里创建一个或多个没有定义的方法—你给出接口,但 ...
- IBM Tivoli Netview在企业网络管理中的实践(附视频)
今天我为大家介绍的一款高端网管软件名叫IBM Tivoli NetView,他主要关注是IBM整理解决方案的用户,分为Unix平台和Windwos平台两种,这里视频演示的是基于Windows 2003 ...
- Regularization —— linear regression
本节主要是练习regularization项的使用原则.因为在机器学习的一些模型中,如果模型的参数太多,而训练样本又太少的话,这样训练出来的模型很容易产生过拟合现象.因此在模型的损失函数中,需要对模型 ...
- OpenCV —— 跟踪与运动
理解物体运动主要包含两个部分:识别和建模 识别在视频流后续的帧中找出之前某帧镇南关的感兴趣物体 寻找角点 可跟踪的特征点都称为角点,从直观上讲,角点(而非边缘)是一类含有足够信息且能从当前帧和下一帧中 ...
- Oracle定义变量、常量
1 定义变量 declare var_countryname varchar2(50):='中国'; 2 定义常量 con_day constant integer:=365;
- java判断编码格式
package com.sssjd.storm; import java.io.UnsupportedEncodingException; /** * Created by jorda on 2017 ...
- 请求头header里的contentType为application/json和capplition/x-www-form-urlencoded
application/x-www-form-urlencoded 最常见的 POST 提交数据的方式了.浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 ...
- groupmod---更改群组识别码或名称
groupmod命令用于更改群组识别码或名称. 需要更改群组的识别码或名称时,可用groupmod指令来完成这项工作. 语法 groupmod [-g <群组识别码> <-o> ...
- sim800c GPRS模块的透传模式
一.透传模式 基于sim800c GPRS模块在建立TCP/IP连接情况下,可以设置进入透传模式,用来接收和发送数据,一旦进入即从串口收到的数据将被打包,然后发送.接收同理. 注意在透传模式下所有的A ...
- Trafodion:Transactional SQL on HBase
Trafodion: Transactional SQL on HBase HBase上实时分布式事务处理 介绍 HBase的SQL能力一直不足.Phoenix缺乏Join能力,eBay提出的kyli ...