前端开发规范文档（初稿）

总体原则

  • 缩进

    对于所有编程语言，我们要求缩进必须是软tab（用空格字符）。在你的文本编辑器里敲 Tab 应该等于 4个空格 。

  • 可读性 vs 压缩

    对于维护现有文件，我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS，也不必把Javascript代码最小化得面目全非。

    我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件，例如CSS和JS

  • HTML,CSS,JS代码分离

    html代码尽量保持整洁，采用最简单的代码层级完成复杂的布局要求，方便以后的维护和扩展

    css代码本身都是全局的，所有应当采用css模块化思想，约束css的规则，尽量减少对全局的污染

    JS代码分为功能代码和业务代码，功能代码尽量抽取成功能组件，方便团队内其他同事的使用

  • 命名规范

    文件及文件夹: 全部英文小写字母+数字或连接符"- , _ "，不可出现其他字符 如：jquery.1.x.x.js
    文件：调用 /libs 文件需包含版本号，压缩文件需包含min关键词，其他插件则可不包含 如：/libs/modernizr-1.7.min.js
    ID: 小駝峰式命名法 如：firstName topBoxList footerCopyright
    Class: [减号连接符] 如：top-item main-box box-list-item-1
    尽量使用语义明确的单词命名，避免 left bottom 等方位性的单独的词语命名样式

html规范

基本语法

在属性上，使用双引号，不要使用单引号。
不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。
不要忽略可选的关闭标签（例如， 和 ）。
尽量用class来渲染样式，避免用id来写样式

Doctype

在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。

1 <!DOCTYPE html>

字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后，需要避免在 HTML 中出现字符实体，直接提供字符与文档一致的编码（通常是 UTF-8）。

1 <head>
2   <meta charset="UTF-8">
3 </head>

兼容模式

优先使用最新版本的IE 和 Chrome 内核

1 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

基本的SEO

<meta name="keywords" content="your keywords">
<meta name="description" content="your description">

viewport 设置

  • viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
  • width: 浏览器宽度，输出设备中的页面可见区域宽度；
  • device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
  • initial-scale: 初始缩放比例；
  • minimum-scale: 最小缩放比例；
  • maximum-scale: 最大缩放比例；
  • user-scalable: 时候可以允许用户对页面进行缩放
  • minimal-ui，不支持（去除导航栏） 为移动端设备优化，设置可见区域的宽度和初始缩放比例。
<meta name="viewport" content="width=640,user-scalable=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

  • 在 Web Server 根目录放置 favicon.ico 文件；
  • 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">

移动端页头推荐配置

    <meta charset="UTF-8">
    <title>title</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=640,user-scalable=no" />
    <!--<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">-->
    <meta http-equiv="cleartype" content="on">
    <meta name="apple-mobile-web-app-title" content="...">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">

CSS 和 JavaScript 结构、样式、行为分离

尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。
根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

<link rel="stylesheet" href="code-guide.css">
<script src="code-guide.js"></script>

<style>
  /* ... */
</style>

实用高于完美

尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

避免用 document.write 生成标签

用 document.write生成标签让内容变得更难查找，更难编辑，<b>性能更差</b>。应该尽量避免这种情况的出现。

CSS 规范

  • 外部文件LINK加载CSS，尽可能减少文件数。加载标签必须放在文件的 HEAD 部分。
  • 避免使用内联样式 不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则
  • 使用 reset.css 让渲染效果在不同浏览器中更一致。
  • 避免使用CSS表达式（Expression）
  • 不要用@import
  • 避免使用ID选择器
  • 避免使用开销大的CSS选择器 如：*
  • 禁止给class加上html标签 如：li.list
  • 避免让选择符看起来像正则表达式 如：[name=‘aa‘] 高级选择器执行耗时长且不易读懂，避免使用。
  • 避免直接使用html tag作为样式选择器
  • 避免使用 !important
  • 有节制的使用css3伪元素
  • 避免使用css3 低效属性，如：linear-gradient，borde-image；
  • 使用语义化、通用的命名方式；
  • 使用连字符 - 作为 Class 名称界定符，不要驼峰命名法和下划线；
  • 避免选择器嵌套层级过多，尽量少于 3 级；

用css模块化

css代码本身都是全局的，所有应当采用css模块化思想，约束css的规则，尽量减少对全局的污染

属性简写

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:
padding
margin
font
background
border
border-radius
大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

一行还是多行书写？

css实例都是用的多行的格式，每一对属性和值占单独一行。这个是广泛使用的约定，不仅是在css文件中，也多出现在书里和文章里。许多人认为他的可读性很好。
然而在和团队的工作中，尤其是大型的css文件，我是将样式写成多行，并使用css模块化思想:

.alert-window {
       background: #fff;
       border: 1px solid #ff0;
       font-weight: bold;
       padding: 10px;
       }
.alert-window .window-title{　　　　...　　　　}
.alert-window .window-content{　　　　...　　　　　　}
.alert-window .window-buttom{　　　　...　　　　}

PS:　　1. 现在纯手写css比较少了，一般 都是用sass 和 less 来管理样式。
       2 书写sass 和 less 一行简直就是灾难 3 css 多行书写，还有个好处，可以要求团队，css 输出按照盒子模型的顺序去书写，更好维护，不强制但是倡导输出是一致的。

Javascript

命名规范

  • 使用单引号‘而不是双引号"
  • 类的命名使用骆驼命名规则，并且首字母大写，例如： Account, EventHandler
  • 常量必须使用大写，在对象（类）或者枚举变量的前部声明，骆驼命名规则
  • 类的私有变量和属性建议以 _开头。例如：var _buffer; _init:function(){}

变量

  • 必须全部小写字符组成
  • 变量必须在声明初始化以后才能使用，即便是 NULL 类型。
  • 在作用域顶端对变量赋值，这有助于避免变量声明问题和与声明提升相关的问题
  • 变量不要产生歧义。
  • 相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
  • 变量应该尽量保持最小的生存周期。
  • 能直接使用直接量的，不要使用 new ....; 如： a=/\d/g; a=new RegExp(‘\d‘,‘g‘);

不要用 void

不要用 with 语句

不要用 continue 语句

尽量不要用位运算

PS：前端团队很少有科班出身的，位运算符效率不见得会有太高的性能，优势非常不明显，出发是高强度的算法需要，否则还是不要有位运算；它会造成代码的苦涩难懂，不利于后续的维护

不要扩充内置原型（Object,Array,String...）

不要用 eval();

+运算要注意

    ‘1‘+1==2 //false;
    1+1==2 //true

使用简易条件判断方式

if (name !== 0 || name !== ‘‘ || name!==null || name!==undefined) {
...
}

if (name) {
...
}

if (collection.length > 0) {
  ...
}

if (collection.length) {
...
}

使用三元表达式来代替简单的if else

if(a){
        d=‘b‘
    }else{
        d=‘c‘
    }

    d=a?‘b‘:‘c‘;

使用&& 和 || 替代简单的if

if(a){
        b()
    }

    a && c();

    if(bb){
        a=bb
    }else{
        a=2
    }

    a=bb||2

使用数组或json优化if else

if(a==‘1‘ || a==‘b‘ || a==‘c‘ || a==‘ss‘){
        bb();
    }else{
        ...
    }

    var hasData={
        ‘1‘:1,
        ‘b‘:1,
        ‘c‘:1,
        ‘ss‘:1
    }

    if(hasData[a]){
        bb()
    }else{
    ...
    }

不要在非函数块中(if, while etc)声明函数

尽管浏览器允许你分配函数给一个变量，但坏消息是，不同的浏览器用不同的方式解析它
如果一定要定义函数，请用函数表达式方式声明；
如：

function b(){
    ...
    }

    if(a){
        function b(){
            ...
        }
    }

    var b=function(){
    ...
    }
    if(a){
        b=function(){
            ....
        }
    }

有else的if都要有{}

if(a)
        b()
    else
        c();

    if(a){
        b();
    }else{
        c();
    }

不要有多余逗号

这会在IE6、IE7和IE9的怪异模式中导致一些问题；同时，在ES3的一些实现中，多余的逗号会增加数组的长度。在ES5中已经澄清

 var hero = {
    firstName: ‘Kevin‘,
    lastName: ‘Flynn‘,
  };

  var heroes = [
    ‘Batman‘,
    ‘Superman‘,
  ];

  var hero = {
    firstName: ‘Kevin‘,
    lastName: ‘Flynn‘
  };

  var heroes = [
    ‘Batman‘,
    ‘Superman‘
  ];

使用事件代理

在分配低调（unobtrusive）的事件监听器时，通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过，偶尔也会有多个元素同时符合触发条件，给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下，你就应该改用事件代理了

图片

尽量使用png8替代gif图片

不要在移动端手机使用gif动画图片

使用雪碧图，减少css背景图的加载

使用第三方工具压缩png24的图片，可以有非常高的压缩率

PS：手机端不适用GIF图的原因是：1.可以用css3动画来代替，css3动画只出发页面复合，性能更好，2 gif动画都在手机端显示不流畅，不能使用GPU加速，会造成页面重排，严重影响页面性能

时间： 2024-08-10 23:12:03

前端开发规范文档（初稿）的相关文章

WEB前端开发规范文档（转）

http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或

前端开发规范文档(html,css,js)

首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的规范都不一样..仅供参考 前端开发规范文档 Html规范 1 代码风格 1.1 缩进 **[强制]**使用 4 个空格作为一个缩进层级,不允许使用 2 个空格或 tab 字符: 2 属性 2.1 属性引号 **[强制]**对于属性的定义使用双引号,不允许使用单引号,不允许不使用引号: 示例: <!-

Web前端开发规范文档（google规范）

(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 我推荐去看看google的开发规范,然后从他的当中去总结自己的开发规范. Google HTML/CSS代码风格指南 Google JavaScript 编码规范指南 ------------------------------------------------------------------------------------------------------------------------------- 绝大多数项

web开发规范文档二

头部        header\hd 内容块      content\con\bd text txt title 尾部        footer 导航        nav\menu sub-nav\sub-menu 侧栏        side-con 栏目        item 外容器      wrapper\sprite 左右中      left\right\center 上下        top\bot 登录        login-bar 标志        logo

微信小程序开发规范文档-项目结构

*项目结构 project/ // 根目录 ├─ images/ // 图片/小图标 ├─ pages/ // pages目录 ├─ utils/ // 工具,包文件目录 ├─ app.js // 入口文件 ├─ app.wxss // 公共设置 ├─ app.json // 公共样式表 └─ project.config.json // 项目的编辑器配置 页面目录 1.由历史原因和个人习惯导致目录命名不统一,语义不清晰,不同成员在维护时难以快速识别. 目录命名应遵循以下规范: 尽量简短 采用英

微信小程序开发规范文档-注意事项

一个页面的数据如果需要被其它页面修改,则把这个页面的数据放入storage里. 目录结构符号 └ ┌ ┘ ┐ ┤ ├ ┴ ┬ ┼ │ ─ JS模块引入请使用import关键字,而非require,WXML引入模板用标签,WXSS使用@import语法,三者统一 所有方法和变量名称都使用小写camel模式,一般是动词+名词形式,尽量不要超过5个单词,如:getList,setBackImage 所有用到的常量的地方都使用全大写,下划线分隔的形式,如:EGG_CHE 使用this转换的地方,统一使用

【转载】WEB前端开发规范文档

本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改.以下为[WEB前端开发规范文档]正文点此查看WEB版本 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量

WEB前端开发规范文档

规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至约定的目录中;

Web前端开发规范手册

一.规范目的 1.1 概述 ..................................................................................................................................... 1 二.文件规范 2.1 文件命名规则...................................................................................