JS-call apply bind

经常碰到JS中的这三兄弟,记一下他们的用法和区别。

1.改变函数上下文

2.就算不为了改变,但JS那坑爹的作用域下,也为了能够明确知道函数上下文

(为什么要改变请参考JS的作用域链)

区别:

call与apply

call与apply用法很相似,区别就是一个是一个一个传参数,一个是传一个参数数组

fun().call(object, p1, p2);

fun().apply(object, [p1,p2]);

或者经常直接继承父函数参数

fun().apply(object, arguments);

call和apply都会立刻执行,只是改变了fun()里面的this

bind不会立刻执行,bind会返回一个指定上下文的函数

var fun1 = fun().bind(object, p1, p2); //参数传递跟call一样

bind最适合作为回调函数使用,尤其是setTimeout

func(function(){}.bind(this));

我们知道,setTimeout的回调函数上下文会被置为window(use strict下是null),在setTimeout中没办法使用原有实例,bind就可以了

setTimeout(function(){}.bind(this), 1000);

JS-使用canvas绘制动画

HTML5中提供了transform transition等动画方式,已经能够满足绝大部分动画需求。

但在移动端,使用Transform等还是会出现不流畅的情况,比如背景上一个无限循环的动画,不管是使用setInterval 还是捕捉每次的AnimationEnd来实现,都会有一定的问题,因为我们设定的延时还是动画时间都不能得到保证,并且会影响页面性能。

优化是无尽的,所以学习使用Canvas

使用Canvas能做什么?

1.知道/控制每帧的绘制

2.预加载img来绘制

3.canvas保证了性能

如何使用Canvas?

http://www.w3school.com.cn/html5/html_5_canvas.asp

W3C等有canvas的简单介绍,使用Canvas的基本步骤就是

拿到canvas标签的dom,调用dom的getContext接口拿到Canvas类,就可以使用canvas的各种接口了

Canvas接口手册:http://www.w3school.com.cn/tags/html_ref_canvas.asp

canvas简单使用

1.绘制矩形

2.绘制线

3.绘制圆形

4.绘制渐变

5.绘制图

这些绘制组合使用基本上可以满足我们的一般绘制需求。

绘制动画基本流程

But,如果要绘制动画,还需要配合另一个神接口,

requestAnimationFrame的用法请自行google。大概原理就是,requestAnimationFrame需要传入一个函数,浏览器每绘制一帧都会通过requestAnimationFrame来调用这个函数。通常,我们把这个函数命名为step,在step中,放入我们的draw函数(这里与Android的draw流程很类似,不过Android更方便些)。

draw与requestAnimationFrame绑定

解绑(这里把绑定与show/hide放到了一起)

draw函数

draw函数中我们把绘制分为两步,一步是update(和Android类比就是在这里做mesure,确定View中各个元素的位置),第二步是绘制。

子View中实现各自的update和draw

需要注意的是,Canvas的使用宽高默认为300 150,我们设定的宽高只会对Canvas进行缩放。

update-动画曲线

使用css动画时,可以方便的给一个动画曲线,比如easeinout等,使用canvas绘制就需要我们不断的update绘制范围。

在update里面,我们完成让一个矩形以指定动画曲线在四个方向转圈的位移。

缓动函数就负责返回位移的值

下面的easeInOutQuint按照步进返回值

更高明的做法,比如Jquery中,以时间为参数

draw就比较简单了

什么是Web-Worker?

WebWorker类似于浏览器中的多线程操作。之前的JS中,无论你是使用setTimeout setIntever 还是 使用了XMLHttpRequest,都是在一个线程里面,前两个使用消息队列,XMLHttpRequest则是浏览器会帮你进行闲时进行,归根结底,都是在一个线程里面跑。如果用户想进行一些阻塞操作,很可能会产生卡住页面的情况。甚至于我们想实现一个类似于Android的专用 公用Service,那该怎么办?

H5新标准提出了WebWorker的概念,各个浏览器都各自实现了,先来看一下WebWorker能做什么。

 

WebWorker特点,在后台线程执行JS的能力,与页面通过send message这种方式通信。

WebWorker有两种,专用worker(dedicatedworker)与公用worker(sharedworker)。

疑问:worker与主线程如何同步,worker与主线程同时操作了一个DOM元素,会不会产生脏数据?所以,worker的能力被加以限制,不能访问DOM元素。

worker在chrome中是如何实现的?

chrome浏览器是多进程架构,分为Browser进程以及Render进程,每打开一个页面,浏览器都会为其分配一个Render进程,webkit以及js都运行在这个进程内。如果要起一个DedicatedWorker,Chrome会在Render进程中起一个线程。如果要起一个SharedWorker就稍微复杂一点,必须起一个专门的进程,并且,相同的SharedWorker不管你创建多少次,都只存在一个。

Android中的Chrome有一个限制,限定9个进程。

1.如果用户创建太多SharedWorker,可能第二个标签页都打不开?

2.SharedWorker的优先级如何定义?如果使用SharedWorker的页面都在后台,其优先级如何?

目前Android上的SharedWorker还处于讨论阶段,未实现。

下面看一下worker的基本用法,DedicatedWorker:

worker.js

worker中需要一个this.onmessage接收消息

postMessage发送消息

参数在 event.data中

main.js

使用Worker这个API来创建DedicatedWorker。

同样通过worker实例的onmessage和postMessage通信。

结束Worker:

在worker中,可以通过close()来kill掉自己

main中则调用worker.terminate()

如果worker运行中出现错误,在main中使用worker.onerror可以接收到错误消息

SharedWorker:

https://github.com/mdn/simple-shared-worker

SharedWorker跟DedicatedWorker有两个不同的地方:

1.通信不再直接通过worker,而是worker的port类

2.worker中需要实现onconnect,且其参数中有一个port列表,但目前只使用到了第一个

sharedworker.js

main.js

当然 还可以写另一个页面,同样可以使用跟main.js类似的方法跟sharedworker通信。

ServiceWorker:

ServiceWorker是WebWorker的一种,它更加复杂,所以也更加强大。

首先,ServiceWorker有独立的生命周期:

1.Register:主线程调用API注册ServiceWorker

2.Installing:浏览器启动安装过程,加载和缓存一些静态资源

有可能失败进入Error状态

3.Activated:激活阶段,此阶段可以升级ServiceWorker

4.激活后,ServiceWorker会接管页面,如果页面是刚刚注册,本次不会被接管,下次加载页面才会接管。

5.ServiceWorker接管页面后,如果有fetch和message事件,会处于onfetch和onmessage,其他情况可能被终止。

ServiceWorker的特性:

1.它是一个worker,同样不能操作dom元素,同样可以通过postMessage与调用线程通信

2.ServiceWorker增加了网络处理,onfetch

3.ServiceWorker不被使用的时候,它会自己终止,再次使用会被重新激活,不要依靠它的内存来保存信息,请用webStorage或者indexDB。

4.ServiceWorker大量使用Promise,就是封装的一个callback标准

5.ServiceWorker权限很大,即所有网络请求都经过它,可以劫持连接,伪造和过滤响应,所以只能在https网页上注册ServiceWorker(是只能么?)。

6.ServiceWorker只作用于同域的fetch。onfetch有一个缓存的例子,我们通过缓存类缓存一些request和response,下次request,直接去缓存找response,处理失败了再去网络实时请求。注:response的类型需要是basic,即同域请求。

8.ServiceWorker的自动更新。

当网页激活时,浏览器会检查ServiceWorker是否有更新(有一个字节不同就会认为有更新),浏览器后台下载。

下载完开始运行,进入install状态,之后进入waitting状态。因为此时旧的ServiceWorker仍然在运行。

当页面被杀掉,旧去新来。

当然,如果你之前缓存了request,更新后需要清理一下。

现有问题:

如果在Install时失败了,页面无法感知。

ServiceWorker主要作用是在onfetch里面缓存/处理request。

https://github.com/GoogleChrome/samples

中有大量的onfetch与cache结合使用做离线应用的例子,在此不多赘述。

来自

http://blog.csdn.net/yl02520/article/details/14446763

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

JS处理相对路径

遇到引擎不能处理相对路径的问题,写了一个简单的相对路径转绝对路径的函数,留下备用:

原理很简单,只支持/,且遇到错误不能自动处理

JS常用方法封装

做项目是遇到一个封装的不错的Util类,写一下,长期备用:

CMD标准

IScroll的使用-方向键绑定&自定义滚动条样式

之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条。第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式:

webkit自定义滚动条样式:

后来换了个引擎,发现其他引擎不支持自定义滚动条,那就满足不了UED的要求了。来同事推荐使用IScroll,用了一下,确实比较方便,与平台无关,可操作的属性还有性能都很理想,记录一下:

首先看官方文档 https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/versions.html

github地址:https://github.com/cubiq/iscroll

demo:http://cubiq.org/dropbox/iscroll4/examples/simple/

直接拿demo中的iscroll.js套到自己的工程上,一个段落就是一个li,new 一下就完事了,滚动拖动也很happy。然后发现,我按上下方向键没有响应。

IScroll按键事件绑定:

查源码看iscroll的事件处理,都在handleEvent函数里面

根本就没有keyEvent,看来偷懒是不行的,官方文档看一下,原来iscroll有5个版本,各自平台都是不一样的,demo中这个估计是移动平台用的iscroll-lite版本,移动平台根本不鸟方向键的。

去github上down下来源码,找了找,build目录下,5个版本都有。用最原始的common版本,这个版本的handleEvent就丰富多了:

然后套用上去,可以支持方向键了。中间遇到两个小问题,第一个是按键一直没反应,检查下是z-index太小,keyEvent被上层元素拿走了;第二个是只有在#warpper拿到focus的时候才响应按键,但我用的引擎不支持focus,这个也不难,页面强行绑定handleEvent:

然后整个页面随便按什么键,都可以响应了。接下来就是滚动条样式的问题了,这个也简单,跟着官方文档&样例走就行

http://lab.cubiq.org/iscroll5/demos/styled-scrollbars/

关键步骤有三个:

1.option

设置了scrollbars: 'custom',在页面的Elements就可以找到

<div class="iScrollVerticalScrollbar iScrollLoneScrollbar" ></div>

里面还包含了

<div class="iScrollIndicator" ></div>

第一个是滚动区域,第二个是滚动条。拿到Element就好办了,css给定样式:

大功告成!

当然,IScroll不止这点功能,官方文档后面还有无限滚动等高级用法,以后用到再添加。

使用grunt压缩代码&配置多个任务

grunt是node环境下一个压缩、合并 js、css代码的工具,还可以做一下代码美化等。体验了一下压缩合并,还是不错的,大概流程如下:

在工程下建一个grunt目录,写两个文件 package.json-工程依赖Gruntfile.js-压缩任务

package.jsn:

Gruntfile.js:

这个Gruntfile很容易理解,想要压缩的文件以及目标文件写好就行,还有另一种自动化的写法,后面再说。

之后运行命令,grunt

1

出现了一个错误,网上解释

Note that installing grunt-cli does not install the grunt task runner! The job of the grunt CLI is simple: run the version of grunt which has been installed next to a Gruntfile. This allows multiple versions of grunt to be installed on the same machine simultaneously.

So in your project folder, you will need to install (preferably) the latest grunt version:

也就是说,之前装的grunt-cli只是grunt的运行环境,在工程目录下,还需要装一下grunt,运行一下命令:

2

之后再次运行grunt命令,又出现错误:

3

好吧,没有装这三个插件?原来是grunt一样,也要在工程下装,分别运行 npm install装一下,运行,成功:

4

工程复杂之后,肯定不会一个一个手动填文件,grunt也可以通过逻辑自动压缩js css文件,Gruntfile.js写法:

逻辑也很简单,就是把src里面的文件,压缩,生成文件会经过rename函数处理。

这里面需要注意的地方有

如果只写一个*.js,是不会递归cwd目录下的所有文件的,要递归几级写到数组中就可以了,如果不想添加什么文件,加!符号-‘!*.min.js’。

当然,这次也没有一帆风顺,运行的时候遇到错误:

5

报错在 最后一句,

查了半天也没找到这里有什么错误,网上搜了一下,大多数是 中括号里的uglify没有引号,跟我的情况也不一样。后来仔细检查了一下代码,发现了两处拼写错误,改了后就运行通过了,也就是说,其他错误都会报到最后一句。

做了一个小小的试验,写一个空模块

压缩后是这样的:

对,什么都没了。

 

最近有新的需求,压缩不同版本的文件,就需要开多个contact uglify任务,琢磨了一会,搞出来了,同时对grunt有了进一步的认识。

配置多任务是这么写的

r简单看一下配置文件

contact

首先配置了option,option中配置了不同文件中间增加;分隔符。

这个是contact所有任务的全局配置

后面又写了三个合并任务,分别配置下src和dest就可以了。

合并顺序就是 src中配置的顺序,*.js则按照字母排序。

uglify

uglify中配置了三个压缩任务,

压缩contact的文件

压缩所有文件并生成.min.js

最后运行

会自动加载contact和uglify中的所有任务。

来源于http://www.haorooms.com/post/qd_grunt_cssjs。

ES6新特性

ECMAScript出现了许多有趣的新特性,梳理一下:

1.支持constant声明

ES5中,想实现constant变量必须通过修改var的property实现

2.支持块作用域声明let,

JS只有函数作用域,没有块作用域,var声明有变量提升的效果,即如果var声明了一个未声明过的变量,会自动将此声明提升到顶端,所以想实现块作用域在ES5中是通过闭包的形式。

同时ES6也支持了块级作用域的函数

3.一种function的新写法

function中支持this的使用

4.undefined参数默认配置

ES6:

等效于ES5:

5.支持剩余参数写法

即...p写法会被解释为

ES6:

ES5:

6.可以直接在字符串中加入${表达式}

即console.log("Error: ${e.toString()}");

7.引用

8.支持class 继承,setter、getter

9.支持Promise Generators(待学习)

10.bufferArray