2010年8月

本期w3ctech交流会主题是《我和JavaScript那些事儿》,是很泛的话题,有幸听到了老潘阿当rank月影音速MM等同学的分享,收获很大。

既然话题是我和JavaScript那些事儿,我也插播下我自己与JavaScript的那些事。我几乎也是05年左右第一次开始接触javascript,当然记得第一次alert出来hello的时候的那个兴奋。不过很惭愧的是,后来一直没怎么深入学习。月影大侠也是05年开始玩js,现在是js界叱咤风云的人物,我却还基础的JavaScript都玩不好,更惭愧的是现在还每天坐在月影旁边。后来工作了之后项目承担点与JavaScript打交道较少,并且有月影、JK及rank等同学写好的脚本库和组件,加上自己懒惰的性格,学习得也愈少了。

以一个用瀑布型都玩不好的菜鸟的理解,我认为JavaScript可以说是一个人小鬼大的语言,他的很多特性使得他容易上手又难以精通。并且他从出生起就带着很多不完善的东西,就像老道说的可惜大家已经用上并且爱上他了,所以再要严格的来次涅磐就不大可能了,后面rank同学也说到了组件开发中接口的设计就说到了设计中的这一点要一开始就考虑到。还有就是JavaScript规范的相对混乱,在基于浏览器的开发情况下:核心部分是ECMA来制定,而DOM又是W3C来规范,BOM部分实现上各个浏览器各自为政。不过个人觉得JavaScript最好玩的就是他的弱类型及对象的prototype,这是一种很好的抽象。这样一切传参和返回都可以是任意类型包括函数。就可以玩出看上去可能有点非主流但是很帅很流行的闭包、泛函这样的东西。

接下来说下在交流会上得到的收获。

首先是吕婷同学的分享,分享了她自己学习JavaScript的过程,ppt很漂亮。

然后老潘分享了《JavaScript闭包实例》,开始之前他自嘲说这个话题很枯燥,基本大家都会睡觉了。结果还好,好像就一哥们睡着了(不小心被我发现了)。老潘的分享很好,基本用很容易理解的方式向大家介绍了闭包及使用中内存泄漏等风险。

然后阿当用一个tabView实现来说明组件开发,用多步修正的方法来演示,很不错,一步步带领大家思考怎样满足多变的需求及优化余地。相信刚接触JavaScript的同学也能很好的理解。

接下来是rank的分享,分享的也是组件开发。从需求实现使用迭代等方面说明了组件开发中的重点及大家容易忽视的一些点。比如接口的实现,既要做到统一又方便后面升级开发、要做到内部高效率又要使使用者能容易使用。

很巧合的是这次虽说话题是《我和JavaScript那些事儿》,不过讨论最多的是组件实现这个具体的话题上,可能因为分享者带来的话题有关系吧。其中很有收获的一点是月影突然带来的一个关于组件实现的一个很独特的观点。可能是因为我们过多的关注(样式)组件最终的“展现”形式而没有用一种归类抽象的观点来看问题。就拿样式组件来说,其实质其实是通过交互带来的样式反馈。月影同时用Twitter来类比,比如我(类比页面中的某ELement)fo了@akira_cn(类比页面中另一个Element如button等),然后月影受到某刺激事件如女朋友的表扬(类比页面中click等事件,这个事件可以是任何的,onclick,onmouseover或者onhit什么的无所谓),然后月影发出通知:“MM表扬我了”(组件中建立好的联系通道),接着我作为一个fo对这个通知作出反映:“恭喜,恭喜!请客!”(类比出现popup框或者将某块常用说到的tabView中某块content块显示出来)。

这次交流会收获很大,也特别感谢soso提供的QQ公仔奖品,感谢腾讯的同学热情的招待,感谢所有分享者的准备,感谢所有参与交流的同学。boboRobin一上午就在忙碌的布置会场,大家给他俩来点掌声。

同时,因为某些特别的原因,在这里特别祝福波波,不管他做出怎样的决定,希望他以后的人生路更加精彩!也特别感谢他带给我们这么好的交流机会和平台。

最后,交流会下一期就是一周年生日了,祝福我们的交流会!

源于空空这条推

百度搜索结果页的那句 var location; 宛如神来之笔……


发散一下,然后在JerryQu及好奇同学的教导下知道了window.opener这个神奇的对象,然后发现它实在调皮又邪恶。他的location属性是个奇怪的东东,是外域虽然不可读却是可写的。
比如我们在页面中这样写(实例可以在http://hi.baidu.com/ivershuo_h右侧友情链接中点击最后一个那个名为“测试”的链接玩):

<script type="text/javascript">
var u = ['baidu.com', 'google.com', 'ivershuo.com'], 
i = 0 , 
l = u.length;
setInterval(function(
){
    opener.location = 'http://' + u[i];
    i++;
    i = (i == l?i = 0 : i);
},2000);
</script>


这样在所有链接到这个页面的页面就会出现不停跳转的情况,就算是使用后退按钮退回到先前的页面也一样(这个页面的opener将一直指向打开它的那个窗体)。这样对于一个普通的用户来说会觉得很奇怪。
如果用setTimeout及大延迟时间,然后用户又一直没关闭open(链接执行)页及opener页,且用户回到opener页继续查看,就会导致看到某个时间正在看的页面突然跳转而不知道在后面“捣乱”的却是来自外域的另外一个页面。
而如果针对某个特定的链接来源页(如搜索引擎搜索结果页),还可以预先埋上opener.location的hash到指定的页面id元素上,加上定时还可以让页面“跳舞”。
而如果是搜索引擎快照这样可能导致某些小风险同域风险的页面呢?
p.s:猜测因同步自己twitter显示到网页上的缘故,服务器ip在天朝某些范围处于和谐状态,建议用google reader订阅我的blog,RSS地址:http://feed.ivershuo.com/shuo