SeaJS从入门到精通

淘宝高手. @玉伯也叫射雕  .开发的一个js加载技术核心思想是KISS[Keep It Simple, Stupid].

这个是高手的PDF文档.http://speakerdeck.com/u/lifesinger/p/seajs

SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS,可以更好地组织 JavaScript 代码。

快速入门

在 SeaJS 的世界里,一个文件就是一个模块。所有模块都遵循 CMD 规范,我们可以像在 Node 环境中一样来书写模块代码:

define(function(require, exports, module) {
  var $ = require('jquery');

  exports.sayHello = function() {
    $('#hello').toggle('slow');
  };
});

将上面的代码保存为 hello.js,然后就可以通过 SeaJS 来加载使用了:

seajs.config({
  alias: {
    'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'
  }
});

seajs.use(['./hello', 'jquery'], function(hello, $) {
  $('#beautiful-sea').click(hello.sayHello);
});

核心特性

无论是中小型站点,还是大型复杂应用,使用 SeaJS,都可以让我们的工作变得更轻松愉悦。SeaJS 具有以下核心特性:

  • 简单一致的模块格式
  • 依赖的自动管理
  • 脚本的异步并行加载
  • 丰富的插件
  • 友好的调试

SeaJS 带来的最大好处是:提升代码的可维护性。上面的每一项特性,在使用文档中都会有详细阐述。如果一个网站的 JS 文件超过 3 个,就适合用 SeaJS 来组织和维护代码。涉及的 JS 文件越多,SeaJS 就越适合。

 

SeaJS 追求的是更简单、自然的代码书写和组织方式。

html代码书写规范文档

  1. 文档类型声明及编码:统一为html5声明类型<!DOCTYPE html>,编码统一为<meta charset=”utf-8″ />;书写时实现层次分明的缩进,建议统一使用TAB键进行缩进。
    目的:统一性和网站提高开发合作效率。
  2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部( </body>之前 );
  3. 所有编码均遵循xhtml标准,标签必须闭合,包括br (<br />),hr(<hr />)等;属性值必须用双引号包括,且写完整,如checked=”checked”;
    注意:在html5中,以上标签不再有闭合的了(如:<br><hr><base target=”_blank”>)
  4. css使用<link href=”css/style.css” rel=”stylesheet” />,js使用<script src=”js/jquery.js”></script>在html5中 type=”text/css”和type=”text/javascript”不再必要!
    页面统一的新建html文件代码如下:

    01 <!DOCTYPE HTML>
    02 <html>
    03 <head>
    04 <meta charset="utf-8">
    05 <title>新建html页面的代码结构</title>
    06 <meta name="keywords" content="" />
    07 <meta name="description" content="" />
    08 <link href="css/style.css" rel="stylesheet"/>
    09 </head>
    10 <body>
    11
    12 <script src="http://pic.lvmama.com/js/common/losc.js"></script>
    13 </body>
    14 </html>
  5. 在页面中尽量避免使用style属性,如:style=”…”;
  6. 书写链接地址时,必须避免重定向,例如:href=”http://www.lvmama.com/”, 即须在URL地址后面加上“/”;
  7. 给区块代码及重要功能(比如循环)加上注释,方便后台添加功能;
  8. 特殊符号使用:尽可能使用代码替代:比如 <(&lt;) & >(&gt;) & 空格( &nbsp;)等等;
  9. 充分利用无兼容性问题的html自身标签,比如span, em, strong, optgroup, label等等;需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置, 如果没有,可以使用须以”data-”为前缀来添加自定义属性,避免使用”data:”等其他命名方式;
  10. 语义化html,如 标题根据重要性用h1~h6 (同一页面只能有一个h1),段落标记用p,列表用ul;
  11. HTML应在保证弹性的基础上尽量减少嵌套层数,尽可能减少div嵌套,如:
    01 <div>
    02   <div>
    03   欢迎访问XXX, 您的用户名是<div>用户名</div>
    04   </div>
    05 </div>
    06 完全可以用以下代码替代:
    07 <div>
    08   <p>
    09   欢迎访问XXX, 您的用户名是<span>用户名</span>
    10   </p>
    11 </div>;
  12. 必须为含有描述性表单元素(input, textarea)添加label,如:
    1 <p>姓名:<input type="text" id="name" name="name" /></p>
    2 须写成:
    3 <p><label for="name">姓名:</label><input type="text" id="name" /></p>
  13. 重要图片必须加上alt属性;给重要的元素和截断的元素加上title;
  14. 使用table标签时(尽量避免使用table标签),请不要用width/height/cellspacing/cellpadding等 table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如 thead,tr,th,td,tbody,tfoot,colgroup,scope;
  15. 书写页面过程中,请考虑向后扩展性;

css/html/javaScript编码注释规范

  1. html注释:页面中推荐的两种注释
    <!–前端html注释方法–>, ‘–’只能在注释的始末位置,不可置入注释文字区域;
    <%!–jsp注释,不会输出,推荐使用–%>
  2. css 注释: 注释格式 /*这儿是注释*/;
  3. JavaScript 注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;
注意:
css注释 /* ffff */ 注意要加空格,不然在JSP读取下会忽略掉注释下的第一个css

html/css/js的web标准命名规范

html/css命名

按web标准来进行网站设计时,尤其是比较大型的门户站,会发现用的css会特别多,名字随意命名,会严重增加后期维护成本及团队合作难度,所以在网页制作中制定html/CSS命名规范,可以改善优化功效,特别是团队合作时候可以提供合作制作效率

    1. 常用命名

      外 套:wrap      外 套:wrapper
      页 眉:header   整个页面:content   页 脚:footer      侧栏:aside
      lOGO:logo         标语/广告:banner   版 权:copyRight   商 标:label
      导航:nav           子导航:subnav       顶导航:topnav     边导航:sidenav
      面包屑:crumb    菜单:menu            子菜单:subMenu  搜索:search
      登陆:login          登录条:loginBar     注册:regsiter       栏目:column
      边导航图标:sidebnav_icon
      小技巧:tips        注释:note              弹窗:pop             状态:status
      提醒框:notice    错误提示框:error 提示信息:msg         按钮:btn
      投票:vote          加入:joinus
      合作伙伴:partner 友情链接:friendLink
      新闻:news          下载:download     服务:service         指南:guide
      文章列表:list       滚动:scroll           标签页:tab           热点:hot
      当前:current       选中:selected
      常用配合标签div、h1、h2、h3、h4、span、b、strong、i、em等

    2. class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在规划中统一命名.其他样式名 称由 小写英文 & 数字 & _ 来组合命名,如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合;
    3. 使用中文拼音,命名要有意义,尽量使用简易的单词组合;
    4. 避免出现如left、right等方向名词的class/id;
    5. 避免出现如xxx1、xxx2等的数字class/id;
    6. 尽可能提高代码模块的复用,复用模块、独立模块可按xxx命名,xxx下面再取xxx-hd(头部)、xxx-bd(内容)、xxx-ft(底部)命名;
    7. 公共组件因为高度重用,命名从简,不要加前缀。总之,命名要语义化、简明化。
    8.  重复使用率高的命名, 请以自己代号加下划线起始,比如xh_aside;

JS命名

  1. 变量命名:驼峰式命名。原生JavaScript变量要求是纯英文字母,首字母须小写,如iTaoLun; jQuery变量要求首字符为’_’,其他与原生JavaScript 规则相同,如: _iTaoLun;另,要求变量集中声明,避免全局变量。
  2. 类命名:首字母大写,驼峰式命名. 如 ITaoLun;
  3. 函数命名:首字母小写驼峰式命名. 如iTaoLun();
  4. 命名语义化,尽可能利用英文单词或其缩写;

大型网站搭建中的图片规范事项

  1. 所有页面元素类图片均放入pic 应用下,根据项目名称进行文件夹命名;
  2. 图片格式仅限于gif || png || jpg;
  3. 命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另外, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
  4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
  5. 尽量避免使用半透明的png 图片(若使用, 请参考css 规范相关说明);
  6. 运用css sprite 技术集中小的背景图或图标, 减小页面http 请求, 但注意, 请务必在对应的sprite psd 源图中划参考线.
  7. 严格区分作为内容的图片和作为背景的图片;能以背景形式呈现的图片,尽量写入css样式中;能使用gif或png-8的背景透明就不要使用png-24;

JavaScript书写规范

  1. 文件编码统一为utf-8, 每行代码结束必须有分号; 原则上所有功能均根据XXX 项目需求原生开发, 以避免网上down 下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …)等。
  2. 库引入: 原则上仅引入jQuery 库, 若需引入第三方库, 须与团队其他人员讨论决定;
  3. 变量命名: 驼峰式命名. 原生JavaScript 变量要求是纯英文字母, 首字母须小写,如iZhangWei;jQuery 变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iZhangWei;另, 要求变量集中声明, 避免全局变量.
  4. 类命名: 首字母大写, 驼峰式命名. 如 IZhangWei;
  5. 函数命名: 首字母小写驼峰式命名. 如iZhangWei();
  6. 命名语义化, 尽可能利用英文单词或其缩写;
  7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
  8. 后期优化中, JavaScript 非注释类中文字符须转换成unicode 编码使用, 以避免编码错误时乱码显示;
  9. 代码结构明了, 加适量注释. 提高函数重用率;
  10. 注重与html 分离, 减小reflow, 注重性能.

css书写规范web标准化

  1. 无特殊说明,编码统一为utf-8;为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字(unicode码), 如:宋体( \5b8b\4f53)微软雅黑(”Microsoft YaHei”,”\5FAE\8F6F\96C5\9ED1″),几个单词中间有空格组成的必须加引号) ;
  2. 为CSS类名定义的时候,尽量使用小写字母,如果有两个以上的单词,在每个单词之间使用”-”或”_”符或单词首字母大写(第一个单词除外)。 如:”main-content”或”mainContent”。关于class与id命名等详细请参考命名规范,样式实现除特殊情况,全优先使用 class;
  3. CSS引用按照制定的框架结构来使用,详情见css框架结构;
  4. 命名避免结构化方式,尽量使用语义化/功能化方式,如下示例:
    结构化命名与语义化命名
    

    而现在我们想把页面中的元素调换一下位置,

    结构化命名与语义化命名
    

    换句话说,使用语义化方式的话,你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可,而不用修改它们的类名了,如果网站的代码很庞大,这将节省大量的时间。

  5. class与id的使用: id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;id原则上都是在分发框架文件时统一命名,为JavaScript预留钩子的除外;
  6. 为JavaScript预留钩子的命名,请以 JS_ 起始,比如:JS_hide, JS_show;
  7. 充分利用html自身属性及样式继承原理减少代码量,或制定特定标签的指定使用方式,比如:全局统一价格标签<dfn>¥<i>320</i>起</dfn>
  8. 书写代码前,考虑并提高样式重复使用率;
  9. 禁止使用expression表达式;
  10. 禁止滥用!important(使用前必须讨论确认不会造成其他BUG或者维护问题);
  11. 尽量少的使用滤镜,尽量减少hack数,能不hack的坚决不hack;
  12. 字体粗细采用具体数值,粗体bold写为700,正常normal写为400;
  13. 能缩写的尽量缩写,如 padding:5px 0 0 5px;
  14. 去掉0后面的单位(禁止出现如0px等多余的单位)、颜色值使用颜色的名称或者16进制代码16进制来表示,CSS3的rgb除外;
  15. 层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999,如showWin、pop等),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比。
  16. 为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不应设置外边界,外边界用组合css方式实现,如:pd10{padding:10px}mt10{margin-top:10px}等;
  17. 必须为大区块&重要模块的样式添加注释,小区块适量注释;
  18. 代码缩进与格式:统一单行书写,可根据自身习惯,后期优化会统一处理;
  19. 正式发布前应进行压缩,压缩后文件的命名应添加”_min”后缀;