js selector设计及实现(一) 实现思路

发布日期:2010年7月21日

前言

前阵子和伟大的JK同学学习了一下目前我们框架里新版本的selector,这里列的是第一版selector的代码思路。
后一版本调优性能,多了些函数,从性能上与各大框架比还是有竞争力的。

说句实在话,虽然各大框架和库都实现了selector。但看他们的selector实现其他的人看上去无疑都是难看懂。
而google,baidu上query出的结果基本都是说使用方式的文章,基本没有类似针对selector设计和具体实现上的文章。
所以,决定将整个思路和实现写出来,一来是增加印象,二来是给目前想写的人以参考。

我是以我学习及写selector的角度及把我向JK学习思路和我自己的设计,代码写的思路写出来。
这篇文章我也想不到写了这么长。建议这么看比较好:

  • 不熟悉selector用户先去熟悉了休息会,再看此文;文中没有写详细的selector的具体内容,只是为了描述,大略的提了下;
  • selector了解了之后再看看思路;顺序解析还是比较容易看懂的;
  • 后文中的js代码里,我做了详细的注释,结构也和文中提的代码结构一样,有兴趣的同学可以读下,这个selector代码暂名为:Fox,接口为Fox.query(selector, context)。

代码可以点这里下载和测试
此份代码已经注释,比较简单,我没去写优化的代码,之所以代码里面不写,是因为写了解释起来很绕,熟悉思路先吧,以后详细优化的文章及代码可以抽空再写。

OK,开始吧。

more »

知道五周年UE那点事儿

发布日期:2010年7月20日

百度知道5年了 …5年来,知道正是因无穷的网友的智慧才不惑,因网友间的真诚的互助才永葆青春。我们拿什么来感谢这些最可爱的人?怀着一颗感恩的心来做设计,将知道赋予一个时代、赋予一种激情、赋予一种趣味,借用一位知道用户在台上讲的一句话:我仿佛回到了延安….知道就是力量!知道给予了我们想象,我们为知道创造更多的想象空间。

感谢知道运营团队精心策划的线下聚会和颁奖典礼 辛苦了 ^-^

感谢全体知道团队的努力 pm、rd、fe、op、qa、ue

接下来我们看图说话 :)

more »

初探 jQuery 的 Sizzle 选择器

发布日期:2010年7月15日

这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成。在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你展示出如何借用Sizzle之手实现自定义选择器(也许更标准的叫法叫做过滤符)和它与YUI 选择器的大致比较。

前序

jQuery相比1.2的版本,在内部代码的构造上已经出现了巨大的变化,其之一便是模块的分发.我记得09年在jquery 9月开的一次大会上 john放出的一张ppt上 也指出了当前的jquery下一步目标,不仅仅是除了sizzle选择器的分离,届时core,attribute,css以及manipulation,包括event也都会独立成单独的js文件.(1.4的文件结构,其实已经分成单独的16个模块的组成)

随着jQuery被用来构建web app的场合愈来愈多,它的性能自然受到了大部分开发者的高度关注,它的内部实现机理又是如何,比如选择器的实现。

Sizzle,作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的项目,可以用于其他框架:Mool, Dojo,YUI等。

好了,现在来看为什么Sizzle选择器如此受欢迎,使它能够在常用dom匹配上都快于其他选择器而让这些框架们都垂青于它。

more »

xss是前端经常会遇到的问题,由于页面中的js都执行在同一个上下文中,意味着一旦出现xss漏洞,攻击者就能享有和页面其它部分js同样的权利,能做任何事情

所以一般情况下我们都会对用户输入进行过滤,禁止任何js的执行。但有时由不得不嵌入第三方js,如Google Adsense,这时就只能完全信任它,而没有机制来避免它的恶意行为,另外还有一种方法是通过iframe嵌入,但这样又会遇到不少问题,如高度调整等,而且同样不能避免第三方的恶意行为,如使用ActiveX

是否还有其它方法呢? 文整理了facebook、google、microsoft、yahoo对于这个问题的解决方案,希望能给大家带来一些启发

more »

夏日里的激情——FE鹅和鸭农庄行

发布日期:2010年6月29日
作者:小飞侠类别:关于我们 | 评论(8)

5月29号的北京,终于迎来迟来的夏天。天气已经开始热起来,但是早晚还是有浓浓的凉意。就在这天的清晨,我们迎着朝阳,踏上了体验休闲的农家乐之旅。因为之前对鹅和鸭农庄已经有过了解,所以大家对这次旅程都充满了期待,面对这么丰富的娱乐项目,不少人开始摩拳擦掌跃跃欲试。

目的地离市区不远,差不多一个小时左右我就到了鹅和鸭。一直很奇怪为什么要起鹅和鸭这个看似很俗气的名字,但是农庄内的景色确一点都不俗,茂密的小树林,清澈的河流,在这里没有城市里的嘈杂,没有汽车的尾气,没有工作的压力,在这里,你只需尽量放松,将自己完全融入到这大自然的绿色怀抱中。 看一看我们的摄影师记录的美景吧!

more »

手机选购项目中运用的一些技术细节

发布日期:2010年6月21日
作者:sherrie类别:Flash, 创新实验室, 前端技术 | 评论关闭

本项目的目标是使用户更方便的筛选和选购手机,通过手机图片的动画和过渡等效果让用户在视觉和筛选流程上得到更满意的体验,保留最近四次选择的手机历史列表。选中一个手机会在后端通过关联算法得到用户最感兴趣的6个手机组成的列表。下面简单介绍下程序中所使用的技术细节。

1.RSL的运用

RSL(Runtime Shared Libaray)即为运行时共享库,只有当程序运行时才加载所需要的资源,包括图形元件,图片,定制化的组件等,这样就减小了编译后的swf文件的大小,如果一次性的都包含到主程序中,编译后的文件会很大,用户加载时就会变慢。共享库的格式有两种,一种是后缀名为swz的文件,这是adobe的官方签名,普通用户是无权创建的,它可以缓存在用户本地的磁盘文件中(C:\Documents and Settings\{user}\Application Data\Adobe\Flash Player\AssetCache),如果不手动删除会一直存在,flash player 9以上的版本才支持;另一种就是常规的swf文件,可以由普通用户创建,它缓存在浏览器中。

more »

Web Storage全解析

发布日期:2010年6月21日

Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。

more »

零度﹒百度——新员工培训随笔

发布日期:2010年6月12日
作者:彩虹糖类别:关于我们 | 评论(2)

北京,晴

一夜的好梦使我从兴奋和疲倦中苏醒。走在路上,并不刺眼的阳光照在身上,暖暖的感觉.下意识的看了下手表:还好,今天的迟到不用再从残忍的三个频道中选择节目。到了公司,打开电脑,熟悉的Hi提示音响起,才发现 “零度突破-第十期”的聊天群已经呱呱坠地,赶紧以冒牌主持人的身份来报道。嘿……貌似今天的话题是“原来你的工位离我这么近”!

—————————— 低调的分割线 ——————————

零度突破合影

翻看照片,整理思绪,两天内的情景像幻灯片一样在脑中闪过,太多的记忆可以追溯,太多的画面值得用文字去记录,但拿起笔的时候,却真的不知道哪里应该是起点,哪里是终点。想起小组成立时大家脸上洋溢的喜悦,想起面对难题时大家齐心协力而紧皱的眉头,想起拼图游戏时大家争分夺秒而不顾脸上淌下的汗水,又想起大家在表演节目时的欢呼雀跃……闭上双眼,思绪万千。
两天的活动,我们学到了什么?“求实 卓越 惜时 系统 分享 用户导向” 这六个词,在每一个项目结束后被大家提过太多次了,它作为一个灵魂深入到每个百度人的心里。就像一个道标指引着我们今后工作的方向。而现在,我却想要写些除此之外我得到的和我要做的。破茧重生是一个漫长的蜕变和沉淀的过程,培训完毕后的今天,我整理着情绪,小心收集着着这一点一滴的收获,我需要用这些感受去修正我的不足。 more »

Page 4 of 7« First...«23456»...Last »