Tagged

js

A collection of 6 posts

js

小心事件多次绑定

今天同事让我看一个问题,就是jquery中的on事件的回调函数中引用了外部的一个变量a,但是经过一些操作之后在触发事件回调时候a的变量的值总和预期的不一致,好久没写jquery看了半天也没看出来哪里有问题,后来发现原来绑定的这个on语句在操作的时候会不断被执行,意味着添加了好多次的回调函数,而回调触发的时候就会触发n多次。这就意味着如果每次添加on的时候引用的变量a是不同的话,回调函数多次执行时引用的a的值也就是不同的(这次闭包添了乱orz。。)。 所以呢?结论就是绑定事件时最好进行单次绑定,重复绑定时要小心了,看看业务逻辑是否真的需要这么干,当然上面的解决办法也很简单,先解绑元素之前的事件再添加现有的事件即可。 $().off('change').on('change', function(){});

js

从css3和canvas的旋转说起

之前遇到的一个老问题啦,突然发现又傻傻分不清楚啦。。。来总结一下吧,哈哈。先来说一下,为什么要把这两者放在一起说,先上需求:如何把反着的一张图片弄正,并输出出来呢?也就是我们的目标如图: 这个需求来源于,手机照相机照出的图片其实存起来的时候对于程序显示来说不都是正的,我们自己在手机上浏览看起来是正的是因为手机的程序帮我们搞定啦,可是当我们拿到手机原始图片的时候想展示的时候发现,矣?怎么有的反着的,其实照相机照相的时候会留下照片的方向信息,根据这些方向信息我们就可以把照片调正过来,然后再存到服务器或者展示出来,关于照片里的方向信息大家可以去参考EXIF.js这个库,我总结的信息如下:(EXIF信息有1 8 3 6) 1: 正向 8: 需要逆时针旋转90 3: 需要旋转180度 6: 需要顺时针旋转90 好了,有了这些信息我们来看看怎么去做呢? 比如有张图是需要旋转90度才能扶正的,那写css3的rotate的不就行了么?是啊,我最初也是这种感觉,可是这样有诸多限制,比如,如果你想把图片存在服务端,下次别人用的时候图片就是正的了,就不用再做特殊处理了啊,那得图像处理下,前端怎么弄呢?canvas应该可以吧!本以为可以像css3那样两行搞定: transform:

js

js加载与执行你分得清楚吗?

今天在和端上app通过异步回调进行js通信时遇到了些执行顺序的问题,然后就发现矣~js的加载和执行到底是怎样的呢?还真不一定能理得很清楚,然后我想哎~~基础真重要啊,不要把自己老是埋在需求里,要慢慢量变到质变吧! 引用一篇博文里的讲述很清楚 js的运行一定要知道的两大特性: 载入后马上执行 执行时会阻塞页面后续的内容(包括页面渲染,其他资源的下载) 所以,如果有多个js文件被引用,那么这些js被串行的载入,并依次执行。因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。 传统方式 所以,当你写在代码中写下如下的代码: <script type="text/javascript" src="http://coolshell.cn/asyncjs/alert.js">

js

读js红宝书之:栈+队列

js中可以以数组来模拟栈和队里的行为哦,哎~数据结构这东西还是得会用到实际场景中,和算法神马最配哦。。。可是,无奈我还是没什么天赋。。废话不多说,说多了都是泪。。。 1.栈 push()方法:后进 接受任意参数,逐个添加到数组末尾,并返回修改后的数组长度。 pop()方法:先出 从数组末尾移除最后一项,减少length,并返回移除的项。 var colors = ['red', 'blue']; colors.push('brown'); //此时 length为3 var item = colors.pop(); //item 为 brown, length为2 2.队列 push()方法:先进 shift()方法:先出 移除数组中的第一项,并返回该项,减少length

js

读js红包书之:检测数组

一共介绍了三种判断方法: 1.instanceof 判断法 if(value instanceof Array) 缺点:instanceof是根据构造函数来判断的,而且value必须是和Array在同一个全局作用域中,如果一个页面包含多个frame有多个全局作用域的时候就会出现问题。 2.isArray 判断法 if(Array.isArray(value)) 缺点:ES5的方法,旧浏览器不支持 3.toString 判断法 function isArray() { return Object.prototype.toString.call(value) == "[object Array]"; } //类似的还可以检测 function isFunction() { return Object.prototype.toString.call(value) == "[object Function]"

js

js 数组用 for in 循环

今天写数组循环的时候隐约觉得不管object还是array都用forin循环不就得了,写的还少。。哈哈,不过好像在哪里看过不要这样做,查了下资料,综合一下原因,不要使用forin循环数组哦。 数组是跳跃型的 var a = []; a[5] = 5; for (var i = 0; i < a.length; i++) { //会按预想从零循环到5 } var a = []; a[5] = 5; for (var x in a) { //只会循环index5。。。。。 } 数组被添加了其他属性 Array.prototype.foo = 1; var a = [1, 2, 3, 4, 5]; for (var x in