分类目录归档：javascript

javascript自定义事件(event)

发表于 2010 年 02 月 16 日 由 allenm

曾经有次在一个jQuery交流群里，有人问，能不能自定义事件，然后监听事件，比如监听一个变量的变化，当时我屁颠屁颠的给别人说，这个不大可能。现在正是为我当时的无知和逞能感到羞耻，以后再也不轻易的否定一个事情，除非我有完全的理由否定，自己不知道，不是否定的理由. 下面我就来实现那次别人说到的自定义事件，监听某个变量的变化： 标准浏览器（firefox,chrome,safari,opera等）的实现非常简单，自然，有一个document.createEvent()的函数来专门创建自定义事件，使用起来也很简单，等会儿看代码一看就明白了。 var event = document.createEvent(type); event is the created Event object. type is a string that represents the type of event to be created. Possible event types include “UIEvents”, “MouseEvents”, “MutationEvents”, and “HTMLEvents”. See Notes section for details. … 继续阅读 →

发表在 javascript | 标签为 , , | 21 条评论

window.onload 和 DOMContentLoaded

发表于 2010 年 02 月 11 日 由 allenm

相信写js的，都知道window.onload吧，但是并不是每个人都知道DOMContentLoaded，其实即使你不知道，很有可能你也经常使用了这个东西。 一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。 我们可以写代码来简单测试一下这两种事件： javascript代码（引入了jQuery1.4.1)： if(document.addEventListener){ function DOMContentLoaded(){ $(“#status”).text(“DOM is ready now!”); } document.addEventListener( “DOMContentLoaded”, DOMContentLoaded, false ); } window.onload=function(){ $(“#status”).text(“DOM is ready AND wondow.onload is excute!”); } HTML 代码 body 部分： <h1> DOM READY’s TEST </h1> <img src=”./delay.php” alt=”delay image” … 继续阅读 →

发表在 javascript | 标签为 | 一条评论

WEB前端优化

发表于 2009 年 12 月 31 日 由 allenm

刚刚读完了《高性能网站建设指南》，作者给出了网站前端优化的14条建议，第一次系统的了解到了前端性能优化需要做的事情。 简单说来，这14条建议是下面这些： 减少HTTP请求(因为HTTP1.1协议规定同一域名下默认有两个HTTP同时下载，这条是最基本的，最应该去做的） 使用内容发布网络（主要是针对静态内容，具体请搜索CDN） 添加Expires头。（告诉浏览器来缓存那些不容易变化的内容，来加快“回头客”的访问速度） 压缩组件。（使用gzip来压缩组件降低数据传输量） 将样式表放在顶部（避免白屏和闪屏等情况发生） 将脚本放在底部（脚本会阻塞并行下载，所以某些脚本可以放到底部，让页面先显示出来） 避免CSS表达式（CSS表达式计算频繁，用其他方式来实现需要CSS表达式的效果） 使用外部JavaScript和CSS（利用缓存来减少这些组件的下载） 减少DNS查找（DNS查询是要耗时间的，减少DNS查找和增加并行下载是相悖的，这点需要权衡一下） 精简JavaScript（使用工具删掉不必要的空格，注释等） 避免重定向（redirect需要耗时间，尽量避免这种方式） 移除重复脚本（大网站，开发人员多，可能会带来重复脚本的问题，可以借助服务端程序来消除） 配置ETag（ETag经常会破坏缓存规则，他比Expires头权限高。合理配置或者禁用之） 使Ajax可缓存（分析Ajax请求，缓存可以缓存的，同时合理使用一些主动Ajax，以及参照前面指导原则优化Ajax请求） 作为前端开发人员，应该具有前端优化的技能，这些优化花不了多少成本，却相当有效，比改进后台代码的某个算法带来的性能增强性价比要高多了。 网站打开速度快才是王道，速度是用户接触到这个网站的第一体验！！！ 上面这些指导原则在实际生产的时候都是需要好好分析的，看自己的网站适合怎么样。

发表在 javascript, WEB | 标签为 | 留下评论

昨晚写的丑陋的聊天室程序发上来了

发表于 2009 年 10 月 28 日 由 allenm

想了解一下长连接的可以下载下来，老鸟就不要下载来笑话我了。 试玩地址,真的是太简陋了。 下载源代码地址 页面没指定编码，请自行用浏览器强制UTF-8编码。懒得改了，只是拿来试验而已

发表在 javascript, PHP | 4 条评论

晚上尝试使用了一下HTTP长连接技术

发表于 2009 年 10 月 27 日 由 allenm

为了不去想那些乱七八糟的事情，我基本上整个晚上都在写代码。写了一个简单的即时聊天室。性能应该很低。 只是尝试使用了一下HTTP长链接技术。等明天晚上回来放上来。同时有想了解这种东西的，可以看看我写的丑陋的代码。代码量很小，只实现了最基本的功能，目的只是为了了解是怎么实现像friendfeed这样的即时性的东西。

发表在 javascript | 标签为 | 一条评论

平时一直用js库的坏处，今晚阿里巴巴的笔试又悲剧了 。。。

发表于 2009 年 10 月 22 日 由 allenm

让写一个事件处理的js函数，悲剧了，不会写，平时都是用jQuery，用的很爽，但是像这种考试的时候就悲剧了，以前看书的时候也看到过，但是一直没用心看，没用心记，现在转一个AdvanceED DOM scripting 书里的addEvent函数，学习学习。 function addEvent( node, type, listener ) { // Check compatibility using the earlier method // to ensure graceful degradation if(!isCompatible()) { return false } if(!(node = $(node))) return false; if (node.addEventListener) { // W3C method node.addEventListener( … 继续阅读 →

发表在 javascript | 留下评论

腾讯一面名单出来了，附上查看各个分区一面人数的方法

发表于 2009 年 10 月 19 日 由 allenm

自己写了一行js来查看人数 进入到你想查看的分区的面试名单页面，然后在浏览器地址栏输入： javascript:alert(document.getElementsByTagName(‘tr’).length); firefox有效，其他浏览器没测试

发表在 javascript | 标签为 | 4 条评论

《JavaScript: The Good Parts》讲解闭包的章节中一处代码小错误

发表于 2009 年 10 月 17 日 由 allenm

39页，给出了一个讲解闭包的代码： var add_the_handlers=function(nodes){ var i; for(i=0;i

发表在 javascript | 标签为 | 留下评论

javascript两种创建函数的方式的不同

发表于 2009 年 10 月 17 日 由 allenm

javascript常见的两种创建function的方法是： function testFunc(a){ alert(a); } 另外一种 var testFunc=function(a){ alert(a); } 对于第一种方式，当为创建全局执行环境而进行变量实例化时，会根据上面的函数声明创建相应的函数对象。 第二种方式，在全局执行环境的变量实例化过程中，会先为全局对象创建一个命名属性。而在计算赋值语句之前，暂时不会创建函数对象，也不会将该函数对象的引用指定给全局对象的命名属性。但是，最终还是会在全局执行环境中创建这个函数对象。 我们来看个例子来理解他们的不同 先看第一个例子： testFunc(‘test’); function testFunc(a){ alert(a); } 在这种情况下，alert会执行，虽然函数定义在使用这个函数的代码之后，但是由于在创建全局执行环境的时候就会创建这个function，所以执行的时候是有效的，我们接着看这种情况 testFunc(‘test’); function testFunc(a){ alert(a); } 这种情况下，不会alert出’test’如果你有使用firebug等调试工具的话，会报错，提示testFunc不是个function。接着看：说明在执行 testFunc(‘test’)的时候，testFunc这个函数还被有被创建。 var testFunc=function(a){ alert(a); } testFunc(‘test’); 这种情况下，也会alert出’test’ 因为最终这个function还是会被创建，只是创建的时间和第一种函数创建方法不同而已。

发表在 javascript | 标签为 | 留下评论

javascript定义function在'}'后面的那个'()'的用处

发表于 2009 年 10 月 14 日 由 allenm

javascript还有很多东西我还不太明白，现在正在努力学习中。 我们经常看到有些function定义最后面的’}’的后面加了’()’，以前一直不太明白这个括号是干什么用的。今晚看《javascript: the good part》，仔细看了一下，现在明白了。 javascript经常返回一个对象，例如： var learn=function(){ return function(){ alert(‘test the ()’) } }; 执行learn() 后会返回一个function，内容就是那个alert()。如果我们只是这样定义，那么： var learn=function(){ return function(){ alert(‘test the ()’) } }; learn(); 执行这段代码说明都不会发生，因为learn()只是返回了一个function而已，而并没有执行它。 执行 learn()();会alert出上面的数据，这也证实了learn返回的是一个function对象。 如果我们这样写： var learn=function(){ return function(){ alert(‘test the ()’) } }(); … 继续阅读 →

发表在 javascript | 留下评论