1 / 18

Alibaba Japan Javascript 开发规范分享

Alibaba Japan Javascript 开发规范分享. Evance/UI. 目录. Javascript 规范详解。 代码技巧. 代码规范. 严格遵守，一起推进，保证代码质量。 Coder 遵守并执行 PL 进行代码质量审核， JS 加入代码 review 内容中。 共同维护，不断改进，确保合理性。根据网站实际情况，增加或者去除现有规范条目。 新加入同学的保障执行。. Entry 1:jQ core. 全站采用 jQuery 作为 Javascript 代码框架。版本和版本号： 1.2.6 / mini 。

trent
Download Presentation

Alibaba Japan Javascript 开发规范分享

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Alibaba Japan Javascript开发规范分享 Evance/UI

  2. 目录 • Javascript规范详解。 • 代码技巧

  3. 代码规范 • 严格遵守，一起推进，保证代码质量。 • Coder遵守并执行 • PL进行代码质量审核，JS加入代码review内容中。 • 共同维护，不断改进，确保合理性。根据网站实际情况，增加或者去除现有规范条目。 • 新加入同学的保障执行。

  4. Entry 1:jQcore • 全站采用jQuery作为Javascript代码框架。版本和版本号：1.2.6 / mini 。 • 请不要修改此文件的任何内容。同时对此文件的任何修改都将会通过邮件通知到每一个开发人员。 • 位置：http://image.alibaba.co.jp/js/jquery.js • 说明：1.3升级准备。

  5. Entry 2:common.js • 全站公用common.js，用于全站范围的最通用和最基本的脚本(如顶部下拉菜单，底部添加到收藏夹等)，替代base.js。 • 请不要修改此文件。对此文件的任何修改都将会通过邮件通知到每一个开发人员。 • 位置： http://image.alibaba.co.jp/js/common.js • 说明： base.js是一个YUI包和网站的基本函数。

  6. Entry 3:代码构建 • Javascript(以下简写JS)代码必须基于jQuery进行构建。 • 说明： • 减少代码 • 提高代码性能。 • 统一代码格式，方便各个级别的涉及者阅读。

  7. Entry 4：旧框架原则 • 考虑到不可预知的冲突问题，新页面禁止使用其它的JS框架(包括YUI) 。 • 说明： • 新页面完全采用新框架 • 旧页面确保不新增基于其它框架代码。 • BOPS加入新框架。 • 多框架页面并存冲突解决办法。

  8. Entry 5：JS外部调用 • 除以下三种情况： • 消息处理 • 跟踪/统计代码 • 脚本代码必须内置页面中的特殊情况 以外，JS脚本必须分离于页面结构之外。 • 数据较多的提示信息通过JSON格式，数据较少的参数(变量)通过HTML元素属性值传递-保证服务器代码不和JS脚本混写。

  9. Entry 6：JS文件格式 • 分离于页面之外的JS文件必须采用utf-8无BOM格式编码，否则极其容易出现不可预知的乱码问题。维护已存在的JS脚本文件必须把非utf编码转换成规范要求的utf-8无BOM格式。 • 说明:

  10. Entry 7：监听机制 • 事件监听采用jQuery的高效监听机制。除极其特殊的要求(如图片load)外，禁止在脚本中出现onclick , onfoucs等事件。 • 说明:<input type=“text” id=“submit” onclick=“” /> <input type=“text” id=“submit” />----------------------------------------------------------------------------------<script type=“text/javascript”> $(“#submit”).click(function() { …. })</script>

  11. Entry 8：兼容性 • 开发JS必须考虑兼容性问题，至少兼容IE6/7, Firefox2/3。 主要表现在: DOM结构细微差异，event对象机制差异，以及少数内置方法差异方面。 • 说明: 1.jQuery已经内置很多兼容性解决方案 2.一些特殊实现,如keyCode,浏览器判断,ajax等.

  12. Entry 9：注释 • 自己开发的代码核心部分要写明作用。if(window.event && window.event.keyCode ==13) //detect the Enter key only for IE • 修改他人的代码和新增代码请注明日期和修改人，原注释根据需要删除或保留。 • 注释使用英文注释,非英文注释可能会导致意外的乱码问题。 • JS文件头，重要函数,复杂算法等地方都必须加上注释。

  13. Entry 10：代码格式

  14. Entry 11：文件归档

  15. Entry 12：全局函数

  16. Entry 13

  17. 代码技巧 • 解决多框架页面冲突 • 服务器数据传递给外部JS。

  18. 解决多框架页面冲突

More Related