前端战队群94936336欢迎入伙 唉,上自己blog打个广告,营销营销
Archive > 十二月 2009
JS事件模型小结
翻出了JS权威指南(V4)又复习了一下JS事件模型,简单作一小结。
JS权威指南中将JS事件模型分为四种
1、原始事件模型:属性事件处理模式
2、标准事件模型:DOM2对其作了标准化
3、IE事件模型(IE5.5\IE6)
4、 Netscape事件模型
*
原始事件模型
也就是基本事件处理,其实我们大多数人使用的JS事件处理模式都是这种代码方式。
其事件类型:分为”输入事件(如onclicki)”和”语义事件(如onsubmit)”
事件程序的注册可以以下几种方式:
xml 和 json 的区别
XML 是一种用于面向服务的体系结构 (SOA) 和数据传输的常见传输。当然,目前许多服务以 SOAP 格式存在。不过,何时将其用于数据传输在 Ajax 社区中存在分岐。 [ XML ] 使用XML作为传输格式的优势: 1. 格式统一, 符合标准 2. 容易与其他系统进行远程交互, 数据共享比较方便 3.调用将 XML 用作传输的现有服务。 4.使用 XSLT 可以动态转换 XML。这是企业服务总线 (ESB) 方案中的理想功能。 缺点: 1. XML文件格式文件庞大, 格式复杂, 传输占用带宽 2. 服务器端和客户端都需要花费大量代码来解析XML, 不论服务器端和客户端代码变的异常复杂和不容易维护 3. 客户端不同浏览器之间解析XML的方式不一致, 需要重复编写很多代码 4. 服务器端和客户端解析XML花费资源和时间 [ JSON ] 那么除了XML格式, 还有没有其他格式, 有一种叫做JSON (JavaScript Object Notation) 的轻量级数据交换格式能够替代XML的工作. 优点: 1. 数据格式比较简单, 易于读写, 格式都是压缩的, [...]
JavaScript是否可实现多线程 —- 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如
setTimeout( function(){ alert(’你好!’); } , 0);
setInterval( callbackFunction , 100);
认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!
为什么尽量用局部变量代替全局变量
网页制作Webjx文章简介:在JavaScript中,我们应该尽可能的用局部变量来代替全局变量,这句话所有人都知道,可是这句话是谁先说的?为什么要这么做?有什么根据么?不这么做,对性能到底能带来多大的损失?本文就来探讨这些问题的答案,从根本上了解变量的读写性能都和哪些因素有关。
在JavaScript中,我们应该尽可能的用局部变量来代替全局变量,这句话所有人都知道,可是这句话是谁先说的?为什么要这么做?有什么根据么?不这么做,对性能到底能带来多大的损失?本文就来探讨这些问题的答案,从根本上了解变量的读写性能都和哪些因素有关。
让函数只执行一次的js
这个是在51js上面看到的一讨论,看到月影和客服果果的方法都利用的闭包来实现,实有独到之处,拎过来瞻仰一下 function once1(f) { var run; return function() { if (!run) { run = true; f.apply(this, arguments); } } } //这个来自客服果果的方法 function once(fn){ return function(){ try{ fn.apply(this, arguments); }catch(ex){ alert(“‘this function can only called by once.’”); }finally{ fn = null; } } } //这个来自己月影的方法 //月影果然有独到之处,实参做闭包,finally来清除fn… 调用: var g = once(function(x) { alert(x) }); g(1); g(2); [...]
从我丢失了;号 之后说开来去
js一直以其松散而著称,然后,很多时候,然,童鞋们,不要误解松散的字面意思,松散但是其词法结构,而不是书写习惯,如果果真误解了,会将自己领入一个自己的松散编织的咒语。 上次写的那个jquery的屏蔽层的, 因为我用的 (function(){})(jquery) 方式 我后面想, 如果想再写个插件的话就要 (function(){})(jquery) (function(){})(jquery) 于是,我调试了下,轰, 脚本报错 了,,,,同时我改传window的作用域来 实验 (function(scope){})(window) (function(scope){})(window) 依然 “页面脚本错误” 斗大的报错信息郝然眼底 到这里,我犯了个不可饶恕的低级错误,也许这个错误同样的很多同学也会步这个后尘,细心的你发现了么,当然,也许你一眼就发现了我的问题出在哪里了,因为我这确实是犯的个低级错误! js 是函数式的语言,在js中,()具有二意性, 意一为表达式中的提高优先级别 比如 (a+b)*c 那该运算表达式优先计算a+b 意二 则为函数调用比如(function(){})() 上面的后面()即为匿名函数(function(){})的调用 如果上面的空匿名函数换成这样 (function(){ return function(){ alert(“自由是现实的,现实是操蛋的”) } })() 首先这个匿名方法返回一个function 如果在后面在加个() 比如这样 (function(){ return function(){ alert(“自由是现实的,现实是操蛋的”) } })() (function(){}) 后面在加一个()里面带一个匿名函数。 系统就会把这个()当成是前面返回的那个匿名函数的调用表达式,而里面的空function(){}则被当做参数提交了。 到这里,前面我不小心弄出来的那个 斗大的报错信息 恍然大悟。 我一直和自己说,注重细节,细节决定成败,然而却一直都忽略了这个问题,每一句表达式后一定要加;来断句,这是个良好习惯,只是一直以来都没有引发问题而已,这里,我不得不深刻反省,犯如此之低级错误,真应该做深刻的检讨,上cctv,上新闻联播,向全国人民道歉! 谁动了我的分号
javascript操作符之new 也疯狂 (2)
JavaScript本是一种基于原形的(prototypal)语言,但它的“new”操作符看起来有点像经典语言。这迷惑了广大程序员们,并导致了很多使用上的问题。 在JavaScript中,不要用到new Object()这种操作,该用{ }来代替。同理,也不要用new Array(),相应的,用[]来代替。JavaScript的Array绝不同于Java的Array,模仿Java的语法只会使人越来越糊涂。 也不要用new Number,new String,或是new Boolean。在JavaScript使用包装对象完全没有必要,只需使用普通的声明就可以了。 不要用new Function来新建一个function,而应当用最普通的function表达式。例如: frames[0].onfocus = new Function(”document.bgColor=’antiquewhite’”) 更好的写法是: frames[0].onfocus = function () {document.bgColor = ‘antiquewhite’;}; 同样定义一个事件,第二句不会立即检测函数体,哪怕是函数体有错,也不会立即报错。只有不了解function内部机制的人才会用new Function这种声明方式。 selObj.onchange = new Function(”dynamicOptionListObjects[" dol.index "].change(this)”); 如 果我们直接写出函数体,编译器是无法看到其内部的(也就无法立即执行、无法立即引发错误)。但如果我们用表达式方式声明函数(如上),看不到函数内部的则 是我们。编程的话,还是尽量对一且都尽量清晰可见吧。以声明函数的方式来返回一个函数,我们可以更加明确地传值,如下代码,它还可以设定一个初始值。 selObj.onchange = function (i) { return function () { dynamicOptionListObjects.change(this); }; }(dol.index); 还有一个不好的习惯是将new放到function的前面,比如,new function对于构造新的对象来说,毫无意义。 myObj = new function () { this.type [...]
javascript操作符之new 也疯狂(new 好久不见)
在taobao ued 上看到一好文, 好久没见过这么爽朗的好文了。转了 JavaScript是一门基于原型的语言,但它却拥有一个 new 操作符使得其看起来象一门经典的面对对象语言。那样也迷惑了程序员们,导致一些有问题的编程模式。 其实你永远不需要在JavaScript使用 new Object()。用字面量的形式{}去取代吧。 同理,不要使用 new Array() ,而代之以字面量[]。JavaScript中的数组并不象Java中的数组那样工作的,使用类似Java的语法只会让你糊涂。 同理不用使用 new Number, new String, 或者 new Boolean。这些的用法只会产生无用的类型封装对象。就直接使用简单的字面量吧。 不要使用 new Function 去创建函数对象。用函数表达式更好。比如: frames[0].onfocus = new Function(”document.bgColor=’antiquewhite’”) 更好的写法是: frames[0].onfocus = function () {document.bgColor = ‘antiquewhite’;}; 第二种形式让脚本编译器更快的看到函数主体,于是其中的语法错误也会更快被检测出来。有时候程序员使用 new Function 是因为他们没有理解内部函数是如何工作的。 selObj.onchange = new Function(”dynamicOptionListObjects["+ dol.index+"].change(this)”); 如 果我们让用字符串做函数体,编译器不能看到它们。如果我们用字符串表达式做函数体,我们同样也看不到它们。更好的方式就是不要盲目编程。通过制造一个返回 值为函数的函数调用,我们可以明确的按值传递我们想要绑定的值。这允许我们在循环中初始化一系列 selObj 对象。 selObj.onchange = function [...]
关于float ,文档流的 一些不经意的地方
标准下靠左浮动的块为什么不能位于父框架顶端<div id=”父框架”><div></div> <div></div> <div>现在只能和这个的顶部平齐</div> <div>这个要位于顶部</div></div> 引用: 贴出源码 <style> #con{border:1px solid #ccc;width:200px;overflow:hidden; zoom:1;} #con div{margin:10px;} .right{float:right;clear:right;border:1px solid #ccc;width:100px} .left{float:left;clear:left;border:1px solid #ccc;width:50px} </style> <div id=”con”> <div>right</div> <div>right</div> <div>right</div> <div>right</div> <div>left</div> <div>left</div> </div> 效果图: 《图一,标准浏览器下》 《图二,歪打正着的ie浏览器下》 一般这种情况下,IE 的表现都是错误的。虽然有可能看起来 IE 的表现是你所期望的。也就是说,歪打正着了,在几乎所有的标准浏览器下面的效果都是图一所示。而ie下面则是图二所指,虽然看着对齐了很舒服。 好了,问题出来了, 那么想办法怎么解决吧。 记的float,的元素是脱离了文档流的,那么,如果把左float left的style都 去掉float ? 1 <style> 2 #con{border:1px solid #ccc;width:200px;overflow:hidden; zoom:1;} 3 #con div{margin:10px;} 4 .right{float:right;clear:right;border:1px solid #ccc;width:100px} 5 .left{clear:left;border:1px solid #ccc;width:50px} 6 [...]


