淘宝旅行活动页面编码规范
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md

README.md

淘宝旅行活动页面技术规范

Hi,亲,很高兴接下来由你来参与淘宝旅行活动页面的开发,开始工作前,请熟知这些“约定”。淘宝旅行的活动技术规范的建立是为了提升页面的前端代码质量,提高页面的扩展性和降低其维护成本,在你发布的页面完成后,我们的前端工程师也会在线上对您的页面完成质量进行审核,感谢你的密切配合:)

页面制作规范

规范包含编码规范,模块要求两个方面,模块要求考虑日后的维护成本和扩展性

####代码规范

  1. 采用旅行统一模板进行开发。
  2. CSS代码和JS代码均内联,CSS写在头部,JS代码写在页尾。
  3. CSS命名空间规范化,以模块为单位设置命名空间
  4. JS代码禁止滥用全局变量和函数,代码放入独立的作用域
  5. 除商品图片和banner图片以外,其他修饰图片大小不能超过150K,特殊情况联系@影逸

css样本

.actglobal .highlight{}/*页面公用样式*/
.actmod-xxx .list{…} /*模块为单位的独立样式*/
.actmod-xxx .item{…} /*同上*/

/*也可以这样*/
.actglobal-highlight{}
.actmod-xxx-list{...}
.actmod-xxx-item{...}

JavaScript模板

/**
* JS示范代码
**/
KISSY.use('node,event',function(S){
   // your code...
});

//您也可以这样使用-匿名函数:
(function(){
   // your code ...
})()

模块规范

  • Banner模块:
    1. Banner图片为一张完整图片,禁止垂直切割,图片若超出了banner区域,考虑将其作为背景放入祖级元素.
    2. 图片大小控制在300K以内。
    3. 在banner区域大小改变时,不影响后续模块的展示。
  • 内容模块:
    1. 模块分为标题区和内容区
    2. 模块标题文案必须为活字,禁止将文案切入背景图。
    3. 模块宽度为自适应,模块高度由模块内容决定,禁止设定模块高度。
    4. 内容模块中最常见的商品模块请参照公用模块里的商品模块提供的基本HTML代码结构和TMS标记

模板说明

在统一模板基础上进行开发,模板地址:http://,模板包含以下内容:

  • 内置了reset.css,页头页尾,旅行通用样式库(包含价格样式,常用字体等,更多参看:http://
  • 内置kissy1.3.0种子文件

旅行公用模块/组件

  • 搜索模块 http://
  • 机票低价模块 http://
  • 商品模块 http://
  • 页内导航模块 http://
  • 短信订阅模块 http://
  • 抽奖模块
  • 验证码组件:

其他

前端质量审核

  • 前端质量审核人为@影逸 ,对于特定的设计稿不能完全按照规范实现的,请联系审核人。

奖惩

  • 对于外包同学完成的模块在日后其他活动中得到复用的或者使用合理的页面性能优化方案极大提高页面访问速度的,我们给您赠送淘公仔,贡献的多少不一样,公仔的大小也不一样哟。当然,对于不符合规范的活动页面,我们也会很不情愿的占用你的个人时间,尽管我们很不希望这样的事情真的发生.