Archive for the ‘javascript’ Category

过年我也会看书的

过年在家其实有时候晚上是很无聊的,因为家里常年没人住,过年的时候回家,家里没什么东西,当然电脑和网络也没有的,不过我是一个熬得住无聊的人,我很容易就可以打发时间,放假的时候我顺手问同学借了这本书《ppk 谈 JavaScript》。

这本书的简介我就直接引用豆瓣的啦,毕竟我还没有看完哈。

不看不知道一看吓一跳,这本是一本好书,我看了第一章的前几节就给迷住了。就我看的那几节,它把javascript的来龙去脉都说清楚了,‘浏览器大战’之类的词藻我还真第一次听说,说得挺让人感兴趣的。越看越兴奋,让我感觉到javascript甚至其他前端知识的前卫性,前端将牵起一段革命,这一点也不夸张,因为按这书说的,不同巨头公司之间一直以来都在技术革新...

......[ More Detail ]

js中自定义mouseenter、mouseleave的写法

首先说一下什么是mouseenter事件:

实际上就是鼠标从外面移到某个元素里面(触发了目标方法)后,鼠标再在里面移动不会重新触发目标方法。moueseleave同理。

本身ie系列浏览器是有onmouseenter这个事件定义的,但是firefox之类的浏览器没有这个,所以只能模拟。

以下提供完美模拟的方法:

//ele为目标元素,type为事件类型不用'on',func为事件响应函数 var addEvent=function(ele,type,func){ if(window.document.all) ele.attachEvent('on'+type,func);//ie系列直接添加执行 else{//ff if(type==='mouseenter') ele.addEventListener('mouseover',this.withoutChildFunction(func),false); else if(type==='mouseleave') ele.addEventListener('mouseout',this.withoutChildFunction(func),false); el...
......[ More Detail ]

实际上js文件放最后是个好方案,但有更好的方案

问:javascript文件在页面加载的时候放哪里最好?

之前被这样问到,我马上就答:放最后。现在反省!实际上这个答案太肤浅了。

运行 Internet Explorer 7 或更早版本的浏览器在遇到 JavaScript 文件时会产生阻碍。通常,它们在以所谓的推测模式下载时速度足够快。但如果遇到 JavaScript,浏览器会跳出此模式,专门下载 JavaScript。而且多个Javascript是按串行形式下载,您将发现 JavaScript files 文件之间不会出现并行,也绝少会同时加载其他类型的文件。

所以我们会把所有其他东西都下载才开始下载js文件,所以我以前的答案是:把js放最后面。

而实际上在这个基础上还有技巧,就是把原来串行加载js的方式转为并行。具体做法:

function AsyncLoad(){ var l = ar...
......[ More Detail ]

js中方法类的拟静态属性、公有属性、私有属性

今天斗完地主,发现芋头童鞋在群里面提了一个很有趣的一个问题:

下列代码使Test方法类具有一个静态属性arr(数组)

var Test=function(){ } Test.prototype={ arr:[] } var test1=new Test(); test1.arr.push('ddd') var test2=new Test(); alert(test2.arr.length) //1

他问为什么两个实例(test1和test2)会共用一个arr数组。他要的是独立实例具有独立的那个arr(数组)属性,我刚开始还以为他问怎样可以共用一个数组。

后来给他提了一个解决方法:

下列代码使隶属于Test方法类的两个实例test1和test2具有各自的arr(数组)属性

var Test=function(){ this.arr=[];//原理很简单,初始化的时候使当前实例(this)的arr(数组)属性(来源于对象原型:T...
......[ More Detail ]

ie和firefox中的事件处理

1,捕捉阶段,事件从对象沿着文档树向下传播给目标节点。2,目标节点触发阶段:在目标上的适合的事件处理程序将运行。3,气泡阶段,在这个阶段,事件将从目标元素向上传播或者气泡回对象的文档层次。

ie和ff下的事件传播阶段应该是一样的。但是两个浏览器依据的模型有区别。

由于firefox支持dom2的时间模型,用法可以直接这样:

function test(event){ alert(event.clientX); } ele.addEventListener('click',test,true);//ele为某dom元素 关于这个模型(event可以理解为一个全局变量) DOM2的事件模型函数 作用 addEventListener 添加事件监听函数。 removeEventListener 删除事件监听函数。 preventDefault 组织默认事件的发生 stopPropagation 可以组织事件从当前正在处理它的节...
......[ More Detail ]

web workers超强悍的新技术

最近学习HTML5的时候发现这个技术,不得不惊叹。

为网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建,Web Workers就可以通过postMessage()向任务池发送任务请求,执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序(通过onmessage进行捕获)。

Web Workers进程能够在不影响用户界面的情况下处理任务,并且,它还可以使用XMLHttpRequest来处理I/O,无论responseXML和channel属性是否为null。

注意:通常,后台进程(包括web workers进程)不能对DOM进行操作。如果希望后台程序处理的结果能够改变DOM,只能通过返回消息给创建者的回调函数进行处理。

workers不仅仅能够让我们未来的web APP更加MVC。同时,他的异步后端运算给web程序带来更多可...

......[ More Detail ]