在内部分享了浏览器兼容性的一些问题,主要是平常遇到过的但是又不是大家都熟悉的一些问题,PPT在这里:
淘宝北京UED招聘-前端开发工程师
Filed in Theory 7 Comments
岗位名称:前端开发工程师
要求:
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组织网站结构
Filed in Theory 2 Comments
最近在做一个保险的重构项目,在着手开始做之前就是考虑怎么来组织前端的代码,我的做法是使用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之后将会极大地提高前端的性能,对于团队开发来说也是比较灵活的方式。
Building iPhone Apps with HTML CSS and JavaScript
Filed in APP | Theory 1 Comment
编写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前端开发”。