前端编码规范

相关文章推荐

失恋的仙人掌 · Unity ...· 6 月前 ·

气宇轩昂的热水瓶 · 如何使用CSS/Javascript实现自动 ...· 1 年前 ·

玩命的海豚 · javascript - ...· 1 年前 ·

刚毅的长颈鹿 · JavaWeb向浏览器返回一个音频流 - ...· 1 年前 ·

腾讯云

备案控制台

开发者社区

TVP

文章/答案/技术大牛

写文章

专栏首页各类技术文章~ 前端编码规范

2 0

分享

<input type="text" name="title">     //good
<input type="text" name="title" />     //bad
复制代码

<table cellspacing="0">...</table>    //good
<table cellSpacing="0">...</table>    //bad
复制代码

<script src="babel.js"></script>    //good
<script src=’babel.js’></script>     //bad
复制代码

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
复制代码

/* good */
.selector {
/* bad */
.selector{
复制代码

.selector {
	color: white;
.selector {
	color:white; /* 或 color : white;*/
复制代码

1.位置属性（position, top, right, z-index , display, float, overflow 等）
2.大小（width，height，padding，margin，border）
3.文字系列（font，line-height，letter-spacing，color-text-align等）
4.视觉（background，color，list-style等）
5.其他（animation，transition等）
复制代码

/* good */
.tab {
    -webkit-transition: color .5s;
       -moz-transition: color .5s;
            transition: color .5s;
/* bad */
/* bad */
.tab {
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    transition: color .5s;
复制代码

/* good */
var result = number1 + number2 + number3
+ number4 + number5;
/* bad */
var result = number1 + number2 + number3 +
number4 + number5;
复制代码

// 如果是函数表达式，分号是不允许省略的。
var funcName = function() { 
复制代码

// good
var task = (function () {
   // Code
   return result;
})();
var func = function () {
// bad
var task = function () {
    // Code
    return result;
var func = (function () {
复制代码

/**
* @file Describe the file
复制代码

/**
 * @class
function Developer() {
    // constructor body
复制代码

/**
 * @class
 * @extends Developer
function Fronteer() {
    Developer.call(this);
    // constructor body
util.inherits(Fronteer, Developer);
复制代码

/**
* 类描述
* @class
* @extends Developer
function Fronteer() {
Developer.call(this);
// constructor body
util.extend(
Fronteer.prototype,
/** @lends Fronteer.prototype */{
_getLevel: function () {
// TODO
复制代码

/**
 * 类描述
 * @class
 * @extends Developer
var Fronteer = function () {
    Developer.call(this);
     * 属性描述
     * @type {string}
     * @private
    this._level = 'T12';
    // constructor body
util.inherits(Fronteer, Developer);
复制代码

/**
 * 方法描述
 * @private
 * @return {string} 返回值描述
Fronteer.prototype._getLevel = function () {
复制代码

/**
 * 函数描述
 * @param {Object} option 参数描述
 * @param {string} option.url option项描述
 * @param {string=} option.method option项描述，可选参数
function foo(option) {
    // TODO
复制代码

/**
 * 常量说明
 * @const
 * @type {string}
var REQUEST_URL = 'myurl.do';
复制代码

// good
function kv2List(source) {
    var list = [];
    for (var key in source) {
        if (source.hasOwnProperty(key)) {
            var item = {
                k: key,
                v: source[key]
            list.push(item);
    return list;
// bad
function kv2List(source) {
    var list = [];
    var key;
    var item;
    for (key in source) {
        if (source.hasOwnProperty(key)) {
            item = {
                k: key,
                v: source[key]
            list.push(item);
    return list;
复制代码

// 字符串为空
// good
if (!name) {
    // ......
// bad
if (name === '') {
    // ......
// 字符串非空
// good
if (name) {
    // ......
// bad
if (name !== '') {
    // ......
// 数组非空
// good
if (collection.length) {
    // ......
// bad
if (collection.length > 0) {
    // ......
// good
if (!notTrue) {
    // ......
// bad
if (notTrue === false) {
    // ......
// null 或 undefined
// good
if (noValue == null) {
  // ......
// bad
if (noValue === null || typeof noValue === 'undefined') {
  // ......
复制代码

// good
switch (typeof variable) {
    case 'object':
        // ......
        break;
    case 'number':
    case 'boolean':
    case 'string':
        // ......
        break;
// bad
var type = typeof variable;
if (type === 'object') {
    // ......
else if (type === 'number' || type === 'boolean' || type === 'string') {
    // ......
复制代码

// good
function clicker() {
    // ......
for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    addListener(element, 'click', clicker);
// bad
for (var i = 0, len = elements.length; i < len; i++) {
    var element = elements[i];
    addListener(element, 'click', function () {});
复制代码

var len = elements.length;
while (len--) {
    var element = elements[len];
    // ......
复制代码

String.prototype.trim = function () {
复制代码

var newInfo = {};
for (var key in info) {
    if (info.hasOwnProperty(key)) {
        newInfo[key] = info[key];
复制代码

var emptyFunction = function () {};
复制代码

/**
 * 构建类之间的继承关系
 * @param {Function} subClass 子类函数
 * @param {Function} superClass 父类函数
function inherits(subClass, superClass) {
    var F = new Function();
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
复制代码

function Animal(name) {
    this.name = name;
// 直接prototype等于对象时，需要修正constructor
Animal.prototype = {
    constructor: Animal,
    jump: function () {
        alert('animal ' + this.name + ' jump');
// 这种方式扩展prototype则无需理会constructor
Animal.prototype.jump = function () {
    alert('animal ' + this.name + ' jump');
复制代码

function TextNode(value, engine) {
    this.value = value;
    this.engine = engine;
TextNode.prototype.clone = function () {
    return this;
复制代码

var handler = new Function('x', 'y', 'return x + y;');
var result = handler($('#x').val(), $('#y').val());
复制代码

玖柒的小窝

前端编码规范

前端编码规范

前端编码规范

前端编码规范

前端安全编码规范

编码规范

编码规范

编码规范

规范-编码

编码规范

编码规范

C#编码规范2