浏览器兼容性问题小结
在内部分享了浏览器兼容性的一些问题，主要是平常遇到过的但是又不是大家都熟悉的一些问题，PPT在这里：
浏览器兼容性问题小结
View more presentations from Adam Lu.
淘宝北京UED招聘-前端开发工程师
岗位名称：前端开发工程师
要求：
1. 精通各种Web前端技术，包括XHTML/XML/CSS/Javascript/ActionScript等（JS和AS之一即可）；
2. 深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验；
3. 有基于Ajax或Flash的RIA应用开发经验；
4. 至少精通一门非Web前端脚本的语言（如Java/PHP/C++），并有项目经验；
5. 个性乐观开朗，逻辑性强，善于和各种背景的人合作；
6. 计算机、数学、自动化等相关专业本科以上学历优先。
简历请发邮件至yizhou@taobao.com
使用YUI3组织网站结构
最近在做一个保险的重构项目，在着手开始做之前就是考虑怎么来组织前端的代码，我的做法是使用YUI3，在insure下有一个base.js，这个js定义了整个网站需要的组件，如公共的组件 日历 表单校验 购买流程 提示 级联等等，这些组件可以是使用YUI2开发，也可以是使用YUI3开发，也可以是使用原生的js来写，最后都会通过yui的loader加载后来使用。base.js里面大概是这样的：
yui-min.js的代码
var module = {
‘casecade’:{
fullpath: widgetsUrl+’cascade/cascade.js’,
require: ['node']
}
…
};//整个网站需要用到的一些模块定义，有新的模块添加或修改时就更新这个module
var yuiCfg = {};//yui的一些配置
var INS = YUI(yuiCfg);//定义了保险的全局变量INS
前端Assets的目录结构是这样的：
js/
—base.js >定义了widgets组件的各个模块
—widgets/cascade/ >级联菜单组件
—widgets/calendar/ >日历组件
—widgets/validator/ >校验组件
—widgets/… >其它组件
—taikang/tk_traffic.js tk_estimate.js >泰康险种各个功能页面需要用到的js文件
—huatai/ht_traffic.js >华泰险种各个功能页面需要用到的js文件
css/
—index.css >首页的样式
—common.css >公共的样式
—taikang/tk_traffic.css … >泰康险种的样式
—huatai/ht_traffic.css … >华泰险种的样式
比如在tk_traffics.js里面就可以这样来使用，INS.use(’casecade’, ‘validator’, function(Y){
//泰康保险的页面逻辑
});
使用这样的目录结构在工程师嵌套页面的时候有很大的灵活性，因为头部工程师会把它做成一个公共的头，这个里面我把base.js和common.css放在公共头里面，每个险种的页面除了引用这样的公共头之外还会引用这个险种自有的样式以及js代码。把base.js放在头部之后，每个页面想要用某个组件都非常灵活，而且是使用了YUI的异步加载以及动态加载机制，如果服务器端提供了combo之后将会极大地提高前端的性能，对于团队开发来说也是比较灵活的方式。
从ADOBE和QCOF会议看前端开发
从Adobe和qcof会议看前端开发
View more presentations from Adam Lu.
Building iPhone Apps with HTML CSS and JavaScript
编写Iphone Web App的三个主要技术是HTML, CSS, Javascript，不需要在Iphone上安装，也不要用Objective-C来写，所以对于前端来说算是比较容易上手。相对于Native App来说，Web App的优点是开发周期比较快而且可以运行在任何Web浏览器中并且开发不只是在Mac OS上，缺点是你不可以访问Iphone的一些硬件特性而且很难实现一些高级的UI效果。
有一些需要注意的地方整理了一下：
1.准备一个Iphone的样式表
<link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only screen and (max-width: 480px)” />
2.控制页面的缩放，如果不指定的话Iphone会认为你的网页宽度为950px
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
3.添加Home页图标，如果用户要添加你的Web App到Home页的快捷方式的话，需要指定一个ICON，有两种
<link rel=”apple-touch-icon” href=”myCustomIcon.png” />
<link rel=”apple-touch-icon-precomposed” href=”myCustomIcon.png” />
4.全屏模式
<meta name=”apple-mobile-web-app-capable” content=”yes” />
5.状态栏
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
6.自定义启动图片，这个png图片的尺寸是320px X 460px
<link rel=”apple-touch-startup-image” href=”myCustomStartupGraphic.png” />
7.使用JQTouch来实现动画
JQTouch是一个基于Jquery的手机Web开发的插件，下载地址：http://jqtouch.com/
8.使用HTML5来实现客户端数据存储
HTML5提供了LocalStorage, SessionStorage和客户端数据库
9.使用HTML5来实现离线应用
离线应用需要在服务器端存放一个manifest文件，然后<html manifest=”demo.manifest”>，如果你在使用Apache或其它的Web服务器，需要添加一个.htaccess文件到你的网站目录，里面的内容为：AddType text/cache-manifest .manifest
manifest的文件格式如下：
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
NETWORK:———–>FALLBACK:
logo.jpg ————>logo.jpg offline.jpg
NETWORK表示的是在线文件白名单，如果你离线的话，这个图片不会显示，如果想让其它图片替换这个图片的话，可以改成箭头所示。
10.使用PhoneGap让你的Web App变成Native App
PhoneGap是一个连接Web应用程序和手机设备桥梁的开源开发工具。
了解更多请阅读“Building iPhone Apps with HTML, CSS, and JavaScript”这本书以及云谦的“iPhone 上的Web前端开发”。
WEB标准化交流会思考
周六在北京银科大厦腾讯公司参加了“WEB标准化交流会”，这次会议的主要内容是“研发流程、协同规范和有效沟通”。交流会来的大部分都是各个互联网公司的前端工程师，有大公司的，也有小公司的，在研发流程方面，总的感觉大公司的流程基本一致，如淘宝和百度的工作流程就很类似，在项目前期会有一个项目评审，然后产品和设计师讨论PRD，前端进行页面开发，后端进行代码逻辑开发，开发的方式基本遵循MVC的工作流程。
关于规范，我觉得设计师有设计师的规范，前端也该有前端的规范，一旦规范制定起来并形成文档之后，如果遇到问题就可以参考规范去执行从而避免一些问题。期间还谈到了标准，我个人认为不必完全拘泥于是否通过W3C验证，而是要保证项目的质量，因为前端的职责就是实现人机交互的展现，并且给网站带来更好的用户体验，只要你的HTML代码够简洁，够语义话，CSS代码够重用，Javascript够高效，你就可以称得上是一个合格的前端工程师了，再要去成为一个专业的前端工程师则需要以更加专业的技能与经验去解决实际问题，期间克军还讨论了前端架构师的职责是什么，我觉得前端架构师应该能够为整个前端小组解决一些基础的问题，如一个网站的CSS规划，框架，组件等的实现并且了解前后端技术以及新技术。
关于有效沟通，我觉得月影举的一个例子挺好，如果有两个杯子，怎样让这两个杯子里面的水一样，做法就是把每杯水都倒掉然后两个杯子叠在一起就可以了。这个例子告诉我们在沟通前要先把自己的观点丢掉，然后从对方的角度来考虑问题再去沟通，才能取得双赢的效果。
Flash设计模式
【读书笔记】
在面向对象领域，已经有许多成熟的问题解决方式，这些方式的抽象化就形成了设计模式。Flash的设计模式有下面几种：
1.观察者模式
事件处理的基本过程为：发送者发送事件，接收者接收事件。为了保证接收者能接收到事件，首先要把接收者告诉发送者，这个过程一般称为注册事件。在使用观察者模式编写的类中：只需要两个类：一个类表示接收者，一个类表示发送者。在发送者中，要有注册事件的方法，用来注册接收者；相应的，要有移除事件方法，用来移除接收者；当发送者发出事件时，会通知注册的接收者，因此还需发送事件方法。
2.MVC模式
MVC模式是“Model-View-Controller”的缩写，中文翻译为“模式-视图-控制器”，MVC应用程序总是由这3个部分组成。事件导致Controller改变Model或View，或者同时改变两者。只要Controller改变了Model的数据或者属性，所有依赖的View都会自动更新。类似的，只要Controller改变了View, View会从潜在的Model中获取数据来刷新自己。、
3.工厂模式
一般来说，在创建类的实例时，都会采用下面的方式：var ins:MyClass = new MyClass(); 从实际应用的角度考虑，构造函数被调用时经常要做些初始化的工作，例如，变量的初始化等。生成实例时，需要向构造函数传递参数：var ins:MyClass = new MyClass(参数); 如果构造函数的参数很多，说明构造函数中放置了大量代码，一般来说，这样的构造函数会进行调整，让创建实例所需要的大量初始化工作从构造函数中分离出去。同时如果MyClass有大量的子类，需要实例化的类就很多，这时并不需要一个一个去实例化，使用工厂模式就可以了：
package{
public class Factory{
public static function create(i:int):MyClass{
if(i==1){
return new MyClass1();
}else if(i==2){
return new MyClass2();
}
}
}
}
有了上面的代码之后，就可以这样来创建实例: Factory.create(1);由于在create()方法中可以放置很多代码，可以很灵活来控制类的实例化，特别是控制多个类的实例化，因此，在实际应用中会经常用到这种方法。由于create()能像工厂生产产品一样，产生一个个实例，所以把这种方法成为工厂方法。
4.单例模式
在前面编写的类中，都是直接调用类的构造函数来创建类的实例，多次调用就会产生多个实例。实际上，有些类的实例不需要有多个，只需要一个就行，因此就需要对构造函数进行控制，使其只能被调用一次，解决这个问题已经有现成的答案，即使用单例模式。
5.模板方法模式
模板方法模式是设计模式中的一种，是基于继承的代码复用的基本技术。模板方法模式的基本思路是：由父类给出某个算法的框架，但并不一定给出全部算法的每一步，因为在不同的情况下，算法中的某些小步可能是不同的，这些不同的小步由不同的子类实现，这样，通过不同的子类就可以实现不同的需求。在模板方法模式下，实现具体的小步的方法称为基本方法，而将这些小步合起来的方法称为模板方法。
前端工程师面试小结
最近公司在招前端工程师，我有幸面试了一些应聘者，其中不乏合格的工程师。下面是我给应聘者准备的一些面试题目草稿(这篇文章发了后再面试的话可能就不是这些题目了，哈哈)：
HTML && CSS
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？
2.CSS引入的方式有哪些? link和@import的区别?
3.CSS选择符有哪些？哪些属性可以继承？优先级？内联和important哪个优先级高？
4.经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解情况
7.你怎么来实现下面这个设计图
Javascript
1.怎样添加、移除、移动、复制、创建和查找节点
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
3.面向对象编程:b怎么继承a
4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
(来自淘宝网校园招聘笔试题)
6.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
7.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
8.最近看的一篇Javascript的文章
9.你如何去实现这个Tabview
10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.性能-Yslow
小结：面试只是一个检测技能的手段，我个人更看重面试者分析问题和解决问题的能力以及对前端的热爱。
使用ARIA，增强网站可访问性
关于网站的可访问性，Wikipedia的描述是“可访问性是一个产品、设备、服务或环境可以被大多人访问的一个通用的规则”，不论是对于什么样的用户或是他们所用的什么设备还是他们处于什么样的环境都要让他们能够直接地访问到你的网页内容。而WAI-ARIA（富互联网应用程序可访问性小组）定义了一种使网页内容更加可访问性的方法
请看这个slide
前端开发工具整理
在前端开发过程中会遇到很多工具，我接触的主要的前端工具整理了一下有：
1.Firebug http://getfirebug.com/
最流行的前端开发工具
2.HttpWatch http://www.httpwatch.com/
集成在IE和Firefox上的监听HTTP和HTTPS的工具
3.Fiddler http://www.fiddler2.com/fiddler2/
Fiddler是一个记录你电脑和网络之间所有HTTP(S)请求的网络调试代理
4.HttpFox https://addons.mozilla.org/eu/firefox/addon/6647?lang=en-US
和HTTPWatch很类似的一个工具
5.Yslow http://developer.yahoo.com/yslow/
Firebug的一个扩展，可以根据高性能网站的一些准则来分析网页并且提出建议来提高网站的性能
6.Css Usage https://addons.mozilla.org/zh-CN/firefox/addon/10704
Firebug的一个扩展，可以用来察看哪些CSS被用到了
7.VIM http://www.vim.org/
一个高级的文本编辑工具，是在UNIX系统上面VI编辑器的升级版本
8.Editplus http://www.editplus.com/
Windows系统上的一个好用的文本编辑器
9.DNS Flusher https://addons.mozilla.org/en-US/firefox/addon/7408
Firefox上的一个附加组件，当HOST文件改变时可以很快地更新页面而不需要重启浏览器
10.PageSpeed http://code.google.com/intl/zh-CN/speed/page-speed/
Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能，并获得有关如何改进性能的建议
11.Dust-me Selectors https://addons.mozilla.org/zh-CN/firefox/addon/5392
Firefox上的一个附加组件，可以找出没有用到的CSS选择符
12.Myspace Performance Tracker http://msfast.myspace.com/
Myspace的性能分析工具, 可以分析到页面渲染的各个阶段的时间、CPU和内存的消耗情况，只使用于IE中
13.YUI Compressor http://developer.yahoo.com/yui/compressor/
用java写的一个代码压缩工具，使用方法： java -jar yuicompressor-x.y.z.jar [options] [input file]
14.JS Beautifier http://jsbeautifier.org/
在线JS格式化工具
15.JSLint http://jslint.com/
在线JS校验工具，使用请注意“JSLint will hurt your feelings.”
16.JSCompress http://jscompress.com/
在线JS压缩工具
17.JSMin http://www.crockford.com/javascript/jsmin.html
JS压缩工具
18.HTML2Javascript http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的document.write()申明
19.Web Developer https://addons.mozilla.org/da/firefox/addon/60?lang=zh-CN
Firefox的一个附加组件，给Firefox增加了一个菜单以及工具栏，里面包含了很多开发工具
20.JS Regexp Generator http://www.jslab.dk/tools.regex.php
一个制作正则表达式的在线工具
21.Opera Dragonfly http://www.opera.com/dragonfly/
Opera Dragonfly 是Opera浏览器的跨设备，跨平台调试环境—调试 JavaScript, 检查编辑CSS和DOM， 并且查看移动设备或计算机上的错误
22.IE Web Developer http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
微软的浏览器开发者工具条为网页的快速创建，理解和故障诊断提供了各种的工具
23.DynaTrace http://ajax.dynatrace.com/pages/
一个页面性能分析工具，是针对浏览器 IE 6 ~ 8 的。它可以用来分析页面渲染时间、DOM方法执行时间，甚至可以看到 JS 代码的解析时间。多谢“有米啦”同学的推荐，好友卓群的博客以前也介绍过
24.IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage
IETester是一个免费的浏览器，它同时包括了IE 5.5、IE 6、IE 7、IE 8的所有内核，多版本IE测试好工具,DIV测试,CSS兼容和各个版本浏览器兼容检测工具
25.Companion JS http://www.my-debugbar.com/wiki/CompanionJS/HomePage
IE下的js调试工具，需要结合Microsoft Script Debugger使用，通过安装这个工具，但页面出现错误时会在左上角弹出一个小错误提示，点击会在IE下面显示出一个错误控制台，就如FF下的firebug控制台一样，错误信息提示很详细
26.Live Http Header https://addons.mozilla.org/zh-CN/firefox/addon/3829
live HTTP headers是firefox的一个插件，可以查看到http头，非常方便
27.Closure Compiler http://code.google.com/intl/zh-CN/closure/compiler/
Google的JavaScript编译工具
还有其他前端总结的工具可以看一下，如云谦的http://www.chencheng.org/blog/2008/10/25/f2e-manual/，嗷嗷的http://www.aoao.org.cn/resource/
您在使用什么好的前端开发工具呢？