Tag Archive for 'javascript'
January 5th, 2008 by 张磊
近期写了不少javascript，也深入地看了prototype和script.aculo.us。因为我平日都在Linux下，所以很少有机会用IE去调试。但js和网页后端的语言不一样，是browser-sensitive的，所以成熟的东西不只需要用FF测试，也要用IE测试。而且IE6和IE7都得测。 于是我把写的东西拿到IE6下，发现根本不能跑。其实这个没什么，比较郁闷的是IE很少能提供准确的错误信息，于是Debug极其艰难，甚至有点像没头的苍蝇。到Google翻腾了好久，也没寻到一个合适的调试器，感叹要是有一个匹敌Firebug的，该多好啊。 最后还是让程序跑了起来，其间归纳出一些小心得，和大家分享下： IE对JS的语法检查更严格。调试的时候我发现，FF委实健壮。比如这样的一句：”xxx.prototpye={}”，如果后面不加分号，FF也可以顺利运行，可是IE会在下一行提示出错。 是我的疏忽。需要注意的是，我用aptana写这段js时，它内建的语法提示并没有提示这里有错误，当然为了程序在IE下能跑起来，我们还是加上分号吧。 IE和FF在DOM元素的属性上有差异——差异通常是FF有的IE没有，但一般都有替代的办法。比如FF下的a标签有text属性，可是到了IE下就没法用。 用链接去触发事件时，通常会写href=”#”，可是这样会在URL末尾加上一个“#”。另一个推荐的用法是写成href=”javascript:void(0);”。以前看某同学的文章，说这样在IE下会有问题，亲身试了试，还没发现啥问题。 虽然IE和FF在处理JS时有一定的区别，但都是细节上的。大体的逻辑是一样的，所以在设计程序时，可以先用FF进行调试，因为FF里有一个好使的Firebug。后面再对IE和其他浏览器进行微调。CSS的设计，大抵也可以用这样的方式。 废话说了好多。如果你还没有装Firefox，推荐 。如果你是个Web程序员，一定要装上Firebug这个插件。
January 2nd, 2008 by 张磊
最近为了调试javascript方便，安装了一个叫做Firebug的插件。使用一下，果然很爽。可是昨天下午就遇到了问题——在我的Ubuntu上，Firefox变得非常慢，几乎不响应。弄得Ubuntu也一起慢下来——我的鼠标很长时间才能移动一下，一直没弄明白问题出在哪里。 后来再一次开FF，慢吞吞打开了Gmail。看到了一个红色的提示，说Firebug会让Gmail变慢，突然就啥都明白了。重新打开FF，把Firebug禁用，速度就回来了。 Firebug是一个很优秀的javascript调试工具，功能非常强大。但也因为这个，在面对大量js时，很可能耗费很多系统资源。像是Gmail这样把Ajax用得出神入化的东西，估计累坏了Firebug。可能不只是Gmail，在js使用比较频繁的页面上，都可能降低浏览器的速度。所以建议使用Firebug时，可以只在需要时启用它进行调试。平时将它禁用即可。
December 28th, 2007 by 张磊
因为近期的Project Lucas要用到Rails，可是手里实在没有趁手的工具。工欲善其事，必先利其器，找个好工具还真难。 之前说了Scribes，确实是个值得推荐的东西。但有两个问题：一是它会打开很多窗口，每个窗口只能看一个文件。要知道，Rails项目的文件尤其多，它的窗口会堆满任务栏，有时还会死。另一个问题是我键盘上唯一的CRTL键坏了，于是那些便利的快捷键根本没办法用了。所以我放弃了Scribes回到Gedit。而Gedit一个很大的毛病就是每次编辑文件都会自作聪明搞一个备份，要把人烦死。后来，我找到了Aptana。 准确地说是找到了RadRails。Aptana最初是找来做javascript开发的，装好后发现它的界面和eclipse太相似了，肯定有着某种关联，可是我也不知道到底它们是什么关系。RadRails是aptana的一个插件，猜测也能给Eclipse用。我在aptana上装好了RadRails，用了一下，感觉不错。 Aptana对javascript的支持也非常好，昨天晚上和今上午我做了一个用来编辑链接的“InPlaceEditor”，对里面的代码提示、自动缩进兴奋不已。 不好的一面是，IDE很容易让人产生依赖。本来好多事可以我们自己来做的，比如在命令行里生成rails控制器、启动服务器，可是现在都在aptana中可以搞定了。如果不是要用Firebug调试js，里面Web浏览器也可以让我们省了打开Firefox。Aptana还有个不好就是暂时不能输中文，我也暂时用不到。如果需要，应该可以通过这种方式搞定的。
December 21st, 2007 by 张磊
有好长时间不用javascript，这几天用起来还有点不纯熟。不想看到再有人说javascript是rubbish，关键还是人怎么使用它。复习一下有关的知识： javascript中的数组 arr = new Array(); arr = new Array(num); arr = new Array(["item1","item2"...]); 数组的创建基本就这几种，我用的最多的是第一种。表面看起来，创建数组的时候提供一个整型参数可以创建一个定长数组，其实还是可以使用超出范围的index来设置数组元素的。比如用arr = new Array(3)创建一个数组，仍然可以用arr[100]=”item100″进行赋值。所以，还不如干脆用第一种呢。 javascript中的类 function Shop (name) { this.name = name; this.somefunc = function (){ } } 在JS中，声明一个类不是用class XXX，而是用上面的方法。Javascript中的类有些高级的用法，如果感兴趣可以看一下script.aculo.us/prototype这些库的程序，还是比较容易懂的。我自己掌握的就是上面这个简单的办法。使用的时候，通过shop = new Shop(name) 就可以创建一个Shop的类。 当然，类也可以包含方法，具体的用法，实践一下就好。 JSON 最初接触AJAX的时候，在我的启蒙书籍“AJAX基础教程”中看到过JSON。当时我用AJAX根本用不到XML（只用TEXT），所以也没打算去折腾这个看起来比XML复杂的JSON。 JSON是这样一个东西，可以把任何Javascript的对象、数组等数据编码为一个字串，而比同样内容编码为XML要省了不少空间。如果想向服务器发送一个或多个对象的信息，用JSON无疑是很方便的。关于JSON的具体介绍可以看这里。 想用JSON，需要先下载一个JSON的文件，地址是http://json.org/json.js。下载之后包含在页面内，对任何想编码为JSON的数据，只要调用一下toJSONString()就可以了。 比如一个数组定义为 arr = new Array(["item1","item2"]); ，使用arr.toJSONString()将返回[["item1"],["item2"]]。 上面说了编码JSON。想把原来的对象还原回来，只要用eval()函数。当然eval的效率值得商榷，不过还没进行过具体的测试。 此外，友情提醒一下，那个JSON.js文件里面注释占了一大部分。如果要用在实际的项目中，最好都干掉吧，不然很影响加载的速度。
December 18th, 2007 by 张磊
最近需要做一个包含拖放功能的东西，一直在考虑如何去实现。前些日子我在看Dojo，一边看一边脑子里就一个念头：不会吧，这么强悍啊。而最近要做的东西打算后端用rails做，rails里面自带了script.aculo.us（后面简称s.a.u吧），于是很长时间我都在面临选择：是用dojo呢还是用s.a.u呢？ 后来还是下载了s.a.u，花了大概半个小时，一边看书一边看wiki上的帮助，成功做了这么一个拖放的demo。演示在这里：http://www.blogkid.net/prototype/testdnd.html 在IE浏览器下排序列表的序号会有奇怪的变化，还没搞明白怎么解决。推荐用Firefox试。每个大的块可以拖动，每个小条目也可以移动。 具体的实现其实是用了Sortable，创建了可排序的拖放。程序大体是这样的 ： HTML部分： <ul id=”base1″><li>item1</li> <li>item2</li></ul> <ul id=”base2″><li>item3</li> <li>item4</li></ul> Javascript部分： Sortable.create(“base1″,{ constraint:false , dropOnEmpty:true , containment: ["base1","base2"] }); Sortable.create(“base2″,{ constraint:false , dropOnEmpty:true , containment: ["base1","base2"] }); 其中create的第二个参数可以有很多选项，这里用的constraint是指定拖动方向的；dropOnEmpty表示当容器为空时，是否还能继续拖入；而containment用来指定可以容纳来自哪几个元素的子元素。 当然，在s.a.u中，Drag and Drop大多数时候是用Draggable和Droppables来实现的，我也试了一下。具体内容大家用s.a.u的时候，自己体会吧。推荐这本书：征服Ajax-Dojo、Prototype、script.aculo.us框架解析与实例，我最初是看它才初步了解了Dojo/Prototype这些东西的。
October 27th, 2007 by 张磊
最近频繁在流量统计里看到来自美国Google的IP，窃喜，难道有Google的人关注我blog？可是今天一下子就看到4个Google的IP，不会吧，我在Google有这么多Fans？后来想到这个可能性，Google的爬虫开始支持JS了。 我在流量统计的后台看到这几个访问者的客户端信息是：Windows XP, MSIE 6.0, 800×600, 224 色, 未安装 Alexa 工具条。若这些是真的，Google的人用的电脑也太差了吧，或者人家在手机上装了XP？怎么显示器才800*600。想想都不现实。很有可能这些信息都是51啦的默认信息，而使用默认信息的原因是51啦没有获得相应的信息——为什么得不到这些信息呢？因为这几个访问者都是Googlebot。 前些日子看了这篇文章，谈到Google百度对于JS的处理是直接跳过的，现在看来不然。Tiny早先的一篇文章说，Google Adsense的爬虫是支持部分js的。而后来的某篇文章（实在搜不出来了）说，Googlebot将和Google Adsense爬虫在抓取时共享一些数据（应该是应用了缓存一样的东西）。把后面两件事联系起来，完全有理由相信，Googlebot现在支持部分js了。 于是我去查阅了本站的Apache日志，发现了相匹配IP访问，只是头信息没有显示为Googlebot——也许是Google正在实验呢？然后我就打开了51啦统计代码，发现最后提交统计信息的一句是用document.write()输出到浏览器然后由浏览器提交到51啦的。document.write()应该是最容易被支持的了，而获得系统分辨率啥的都比较麻烦，对爬虫也没意义，估计Google就没支持。 其实爬虫支持js本来就不是啥技术问题，只是考虑到性能所以大多SE都不支持。从这个意义上说，性能也算是技术问题~ 不知道我猜得对不对，不过通过js生成的链接啥的，肯定对SEO没啥作用。
August 12th, 2006 by 张磊
这一段陆续做了两个输出JS的程序。其实做得多了，觉得也无非就是那么回事。去年这个时候，馒头让我在blog侧栏放上他的一段JS，那是不懂编程的我从HACKER的角度看了看，愣是没看明白。转眼做了半年有余的PHP，现在做一个输出JS的东西简直太容易了。 echo “document.write(\”XXXXXXX\”);”; 当年觉得那么奥妙的东西，不过如此简单。技术本身就是这么简单的东西，容易入门，容易上手，容易学成——但终究有那么多人说，“我要学编程！”，然后拼命在讨论XXX语言是不是比XXX好。C++的高手断然不是只会写C++。技术永远都是简单却繁琐，真正要学的东西，是我们驾驭这些技术的能力。 做一个广告，http://www.buyren.net/shop.php要升级了，采用dianping的数据库，礼品卡信息实时更新——相信会焕发出新的活力。只是我不知道智勇对我做的是不是满意。
July 16th, 2006 by 张磊
昨天晚上，蜗牛MM给我发来两个文件，让我看看能不能搞定。他做的是一个弹出日历选择窗口的东西，用户选择了日期就会自动关闭。现在要做的是，用户不选的话，他也能关闭。 我琢磨了一会儿，后来想了一招，在body的标签上加了一个”onMouseMove=’check_if_close()’;”。这里的事件可以用onclick。不过后来发现，这两个都不是最好的（先卖个关子）。 同时声明一个全局变量，if_popup。初始值设为0，然后打开新窗口时把if_popup的值变为1。然后这样写check_if_close()函数(这里假设弹出窗口名为popup)： Code: function check_if_close(){ if(if_popup){ popup.close();if_popup=0; } } 然后把程序里面其它地方有close()的后面都加上一句”if_popup=0;”。好了，这个程序逻辑上没啥问题了，但跑起来却有问题。新窗口打开的时候很快就被关闭了，为什么呢？因为在单击按钮的时候，同时发生了按钮的”onclick”和body的”onclick”。但是按钮的事件处理在前，于是把if_popup值变成了1。后面再调用”check_if_close()”的时候，刚开的窗就被关了。怎么办呢？一个解决的办法就是用setTimeout(‘if_popup=1′,2000)让程序的执行延迟一下，这样能逃过”check_if_close()”的扫荡，呵呵。 自动关闭的功能至此已经实现了，但今天下午琢磨的时候，想到还可以用body的”onfocus”事件，这样似乎更符合要求。用了onfocus之后，也不必在那里用setTimeout延迟了，这样做貌似一举两得…… 不过，昨天晚上出了一件小事，算是花絮。做完之后我给蜗牛发短信，可能用的言辞比较有点XX，更郁闷的是记错她手机号了。然后那边就回过来一个“神经病”——我一想完了，肯定把我当色狼了。唉，马上又发信息过去解释。反正她不认识我，后来想想可能解释多余了。
July 6th, 2006 by 张磊
上午着手搞的时候，不知道javascript里面怎么声明一个类。反正肯定不能用C++那一套Class{……};。于是我去查了下文档，原来如此，这样的做法还真是第一次见到——用一个构造函数来实现。 以下是我今天程序里的一小段，实现了一个类： Quote: function Shop(shopname,price,shopaddr,trans) { this.shopname=shopname; this.price=price; this.shopaddr=shopaddr; this.trans=trans; this.used=0; } var shopinfo = new Array (100); shopinfo[ShopNum++]=new Shop(“卓越网”,0.88,”http://www.joyo.com/?sourse=WUID”,5); shopinfo[ShopNum++]=new Shop(“当当网”,0.92,”http://www.dangdang.com/?sourse=WUID”,5);
January 27th, 2006 by 张磊
那天被智勇批评了，我确实挺大意的。 我现在看到个什么系统总想找找人家的毛病，其实自己的系统或多或少也存在一些问题。那天静下来想，总的来说，应该从哪些方面注意呢？我整理了这么些东西： 1、是否禁用异地表格提交并不重要。馒头的程序一般都会有异地提交表单的问题。说白了真不是什么问题，红包系统是没有禁止异地提交的，如果谁有兴趣，不妨试试。 2、永远不要相信前台传递来的信息，后台对信息过滤要严格。禁用了异地提交只能限制一部分“菜鸟级”的选手，对于某些BT机的高手来说这简直不是什么限制。但是后台一定要做好限制，保证只要有非法信息，就自动取消操作。有的程序员过分依赖前台的javascript，导致一旦禁用了javascript，程序就没有任何限制了（明基会员中心的系统就是这样，所幸危险还不大）。 3、操作数据库格外小心。数据库是个好东西，可是如果使用不合理的语句操作数据库，后果不堪设想。在编写代码阶段，应该把各种情况都考虑在内。 其实也很简单，就是我们总会少考虑一些东西。呵呵……
