/The-front-end-code-specification

The front-end code specification

The-front-end-code-specification

css规范

  • 全局通用类放在 global.css 样式以 g- 开头
  • 两个空格代替制表符
  • 为选择器分组时，将单独的选择器单独放在一行
  • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）
  • 十六进制值应该全部小写, 例如: #fff 在扫描文档时, 小写字符易于分辨, 因为他们的形式更易于区分
  • 避免为 0 值指定单位, 例如: 用 margin: 0; 代替 margin: 0px;
  • 简写形式的属性声明
  • 良好的注释
  • 尽量少的重绘和重排, 当需要给元素设置样式时, 超过2个及2个以上时, 采用className处理
  • 用元素使用 class ，避免使用 id tagName， 尽可能简短
  • 减少子选择器的层级, CSS级联深度不能超过4层, 降低选择符整体的权重, 减少对HTML结构的依赖
  • 使用组合的CSS类选择器 多组合,少继承
  • css编码风格
/* Compact Style */
.app { background: #333; color: #fff; }

or 

/* Expanded Style */
.app {
  background: #333;
  color: #fff;
}

class 命名

  • 命名语意化, class 名称中只能出现小写字符和破折号 -

  • class 名称应当尽可能短, 并且意义明确

  • 破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）

  • 避免过度任意的简写, .btn 代表 button，但是 .s 不能表达任何意思

  • 使用有意义的名称, 使用有组织的或目的明确的名称, 不要使用表现形式（presentational）的名称

  • 使用 .j-* class 来标识行为, 不要给这些 class 包含任何样式

  • 组成类名称的关键字的连接符为中划线 -

  .app-title { }
  • 为了避免class命名的重复，命名时取父元素的class名作为前缀。
  .app { }
  .app-title{ }

Javascript规范

变量
  • 必须使用var关键字定义变量。
常量
  • 使用大写字符，用下划线分隔，例如：NAME_LIKE_THIS；
  • 推荐使用这样的常量明明模式：<常量类型>_<适用场景>_<具体作用>，例如：
分号
  • 推荐使用分号，但是不作检查。
等值比较
  • 始终使用===和!==操作符会更好。==和!=操作符会做类型强制转换。特别是，不要使用==来和"假"值做比较。
Latedef
  • 变量声明丢在函数顶部。
块内函数声明
  • 不能在一个块内声明一个函数。不能写成：
if (x) {
    function foo() {}
}
  • 如果确实需要在块中定义函数, 建议使用函数表达式来初始化变量:
if (x) {
    var foo = function() {}
}
标准特性
  • 优先使用标准特性，最大化可移植性和兼容性，尽量使用标准方法。例如优先使用string.charAt(3)，而不使用string[3]
没有必要分装基本类型
  • 完全没必要对基础类型进行分装，有可能会引起问题：
var x = new Boolean(false);
if (x) {
    alert('hi'); // Shows 'hi'.
}
  • 可以用于类型转换：
var x = Boolean(0);
if (x) {
    alert('hi'); // This will never be alerted.
}
typeof Boolean(0) == 'boolean';
typeof new Boolean(0) == 'object';
for-in迭代
  • 只使用for-in来迭代Object，即所谓的Map或者Hash。用来迭代Array有时候会有问题：
  • 使用普通的for循环来迭代数组：
关联数组
  • 不允许使用关联数组，即不要把Array当作Object来使用。
多行字符串
  • 不允许像下面这边书写多行字符串，非ECMAScript规范：
var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error 。';
内置对象原型
  • 禁止扩展原生对象如： Array Math String 。
console & debugger
  • 在提交的代码中不允许出现console、debugger。
  • 开发时期的解决方案
dataset
  • 不推荐自定义属性，推荐使用dataset
引号
  • 字符串定义时推荐使用单引号'，关键字、保留字使用引号括起来

编码风格

命名
  • 常见的命名方式：functionNamesLikeThis, variableNamesLikeThis, ClassNamesLikeThis, EnumNamesLikeThis, methodNamesLikeThis和SYMBOLIC_CONSTANTS_LIKE_THIS。
  • 私有的属性、变量或者方法以“_”开头
  • 文件的命名包括小写字母、-、_（不能包含其他字符，且-优于_），使用.js结尾。
  • 不能使用拼音。
推荐命名范式

  • dom选择器调用的返回值以$开头，这是jQuery常用的方式：$body = jQuery(document.body);

  • boolean定义：比起bEmpty，更推荐使用isEmpty,canExit,hasNext这样的命名方法。推荐使用is、can、has这样的前缀作为这类变量的前缀。

  • 函数或者方法推荐使用动宾或动结构，例如：

  • 比起arrBooks，更推荐使用bookList，比起objStates，更推荐使用stateMap。

  • 推荐的一些回调函数（或对象）的范式：wordHandler、changeListener、getBookCallback、onLoad。也可以使用其他能够表达功能的命名方式

字符串
  • 单引号'优于双引号"（包含HTML的字符串）。
代码风格

  • 使用 sublime 插件(jsformat)统一格式化

  • 模块

// 一个实用的模块
(function (global) {
    var Module = (function () {

        var data = "secret";

        return {
            // 这是一个布尔值
            bool: true,
            // 一个字符串
            string: "a string",
            // 一个数组
            array: [1, 2, 3, 4],
            // 一个对象
            object: {
                lang: "en-Us"
            },
            getData: function () {
                // 得到 `data` 的值
                return data;
            },
            setData: function (value) {
                // 返回赋值过的 `data` 的值
                return (data = value);
            }
        };
    })();

    // 其他一些将会出现在这里

    // 把你的模块变成全局对象
    global.Module = Module;

})(this);
  • 构造器
// 一个实用的构造器
(function (global) {

    function Ctor(foo) {

        this.foo = foo;

        return this;
    }

    Ctor.prototype.getFoo = function () {
        return this.foo;
    };

    Ctor.prototype.setFoo = function (val) {
        return (this.foo = val);
    };

    // 不使用 `new` 来调用构建函数，你可能会这样做：
    var ctor = function (foo) {
            return new Ctor(foo);
        };

    // 把我们的构建函数变成全局对象
    global.ctor = ctor;

})(this);
文件
  • JavaScript程序应该作为一个 .js文件存储和发布，文件编码为utf-8。
  • JavaScript代码不应该嵌入在HTML文件里，除非这些代码是一个单独的会话特有的或者是需要有后台开发工程师进行控制的。HTML里的JavaScript代码大大增加了页面的大小，并且很难通过缓存和压缩来缓解，同时也难以通过前端来维护。
  • JavaScript文件应该在body里越靠后的位置越好，最好是放在最后面。这减少了由于加载script而导致的其它页面组件的延迟。

图片

  • 切图时必须合理的压缩每张图片，提高页面加载速度，如果能用1像素的就切成1像素
  • 一般情况下，请保存为 png-8 格式，所有能保存为静态gif的图像，都应该保存为 png-8 格式
  • png-24与JPG都是一种压缩图像格式，但是与JPG不同，png-24 是无损压缩，因此不会降低图像的品质（比如JPG图像锐利边缘的噪点），这也是要求效果图使用png-24格式保存的原因。
  • JPG就不多说了。JPG作为一种有损压缩格式，在每次使用它压缩的时候，均会再次降低图像的品质。多次编辑同一个JPG图像，情况会变得越来越糟糕。所以一定要从设计师手中拿到无损格式的设计稿再进行工作。一般不应该为JPG格式，除非这个图像：色值远超过256色(鲜艳而华丽)，保存为索引颜色会出现明显的梯度变化（梯田），颜色抖动（点状渐变）
  • CSS背景图使用 PNG 格式的图像

构建工具 and 开发环境

  • Gulp, Webpack
  • Sublime
  • NodeJs
  • Nginx
  • Chrome

编辑器配置

  • 用两个空格代替制表符（soft-tab 即用空格代表 tab 符）
  • 保存文件时，删除尾部的空白符
  • 设置文件编码为 UTF-8
  • 在文件结尾添加一个空白行

Sublime Package

Gulp

Webpack

NodeJs

Reference