Fox-Wikis

§ Fox2.0前端框架-开发规范

§ 1.前端目录结构

.
├── custom                              项目相关配置和资源目录
│   ├── css                             项目公共css
│   ├── fonts                           项目公共fonts
│   ├── js                              项目公共js(工具类)
│   ├── plugins                         项目定义原生插件js接口 
│   ├── plugins_ios                     项目定义ios原生插件js接口
│   ├── route-tables                    项目路由表
│   ├── templates                       自定义组件
│   └── main**.js                       入口函数、服务过滤器、录用过滤器、校验功能配置
├── debug                               调试信息
│   ├── fox.device                      外设调试配置
│   ├── fox.file                        原生文件操作调试配置
│   ├── fox.native                      原生native接口调试配置
│   ├── fox.preference                  原生prefrence调试配置
│   └── fox.servcie                     服务请求调试配置
├── libs                                公共lib目录
│   ├── fox                             fox公共库
│   ├── fox-ui                          fox ui基础库
│   ├── lib                             vue、console整合库
│   ├── plugins                         平台原生访问接口
│   └── templates                       公共组件库
├── pages                               项目页面目录
│   └── phone
│       └── demo
├── resource
│   └── image
└── themes                              主题目录
    └── default
        ├── css                         主题css 
        ├── fonts
        └── images                       主题font
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

注意事项 a、custom/css、custom/font是放置无主题属性的css和font、而theme/css、theme/font是主题相关的，优先考虑theme。 b、项目中多处使用的js方法，应当抽取到custom/js中。 c、pages下的文件夹、文件命名不推荐使用驼峰风格，应该使用下划线分隔： schoolScene 不推荐 school_scene 推荐

§ 2.后端目录结构

--工程
----服务        后端服务
------common    公共服务
------配置文件  服务配置文件
----公用        工具类、公共函数
1
2
3
4
5

注意事项 a、项目中的公共方法尽量抽取出来，放在服务/common或公用目录中 b、SQL不用使用+拼接，而是使用占位符预编译的方式

§ 3.JS规范

§ 3.1 类型

原始值: 相当于传值(JavaScript对象都提供了字面量)，使用字面量创建对象。

  • string
  • number
  • Boolean
  • null
  • Undefined

let foo = 1,bar = foo; bar = 9; console.log(foo, bar); // => 1, 9

复杂类型: 相当于传引用

  • object
  • array
  • function

let foo = [1, 2],bar = foo;
bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9

§ 3.2 对象

  • 使用字面值创建对象
// bad
 let item = new Object();
// good
    let item = {};
  • 不要使用保留字 reserved words 作为键

// bad let superman = { class: 'superhero', default: { clark: 'kent' }, private: true }; // good let superman = { klass: 'superhero', defaults: { clark: 'kent' }, hidden: true };

§ 3.3 数组

  • 使用字面值创建数组

// bad let items = new Array(); // good let items = [];

  • 如果你不知道数组的长度，使用push

let someStack = []; // bad someStack[someStack.length] = 'abracadabra'; // good someStack.push('abracadabra');

  • 当你需要拷贝数组时使用slice. jsPerf

let len = items.length, itemsCopy = [], i; // bad for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good itemsCopy = items.slice();

  • 使用slice将类数组的对象转成数组

function trigger() { let args = [].slice.apply(arguments); ... }

§ 3.3 字符串

  • 对字符串使用单引号 ''(因为大多时候我们的字符串。特别html会出现")
 // bad
 let name = "Bob Parr";
 // good
 let name = 'Bob Parr';
 // bad
 let fullName = "Bob " + this.lastName;
 // good
 let fullName = 'Bob ' + this.lastName;
  • 超过80(也有规定140的，项目具体可制定)个字符的字符串应该使用字符串连接换行
  • 注: 如果过度使用，长字符串连接可能会对性能有影响. jsPerf & Discussion

// bad let errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad
let errorMessage = 'This is a super long error that \
    was thrown because of Batman. \
    When you stop to think about \
    how Batman had anything to do \
    with this, you would get nowhere \
    fast.';


// good
let errorMessage = 'This is a super long error that ' +
    'was thrown because of Batman.' +
    'When you stop to think about ' +
    'how Batman had anything to do ' +
    'with this, you would get nowhere ' +
    'fast.';
  • 编程时使用join而不是字符串连接来构建字符串，特别是IE: jsPerf

let items, messages, length, i;

messages = [{
    state: 'success',
    message: 'This one worked.'
},{
    state: 'success',
    message: 'This one worked as well.'
},{
    state: 'error',
    message: 'This one did not work.'
}];

length = messages.length;

// bad
function inbox(messages) {
items = '<ul>';

for (i = 0; i < length; i++) {
    items += '<li>' + messages[i].message + '</li>';
}

return items + '</ul>';
}

// good
function inbox(messages) {
items = [];

for (i = 0; i < length; i++) {
    items[i] = messages[i].message;
}

return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
}

§ 3.5 函数

  • 函数表达式

// 匿名函数表达式 let anonymous = function() { return true; };

// 有名函数表达式
let named = function named() {
    return true;
};

// 立即调用函数表达式
(function() {
    console.log('Welcome to the Internet. Please follow me.');
})();
  • 绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同
  • 注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句。阅读ECMA-262对这个问题的说明

// bad if (currentUser) { function test() { console.log('Nope.'); } }

// good
if (currentUser) {
let test = function test() {
    console.log('Yup.');
};
}
  • 绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象

// bad function nope(name, options, arguments) { // ...stuff... }

// good
function yup(name, options, args) {
    // ...stuff...
}

§ 3.6 属性

  • 当使用变量和特殊非法变量名时，访问属性时可以使用中括号(. 优先)
let luke = {
        jedi: true,
        age: 28
    };

function getProp(prop) {
    return luke[prop];
}

let isJedi = getProp('jedi');

§ 3.7 变量

  • 总是使用 let 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间

// bad superPower = new SuperPower();

// good
let superPower = new SuperPower();
  • 使用一个 let 以及新行声明多个变量，缩进4个空格
// bad
let items = getItems();
let goSportsTeam = true;
let dragonball = 'z';

// good
let items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';
  • 最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用

// bad let i, len, dragonball, items = getItems(), goSportsTeam = true; // bad let i, items = getItems(), dragonball, goSportsTeam = true, len;

// good
let items = getItems(),
    goSportsTeam = true,
    dragonball,
    length,
    i;
  • 在作用域顶部声明变量，避免变量声明和赋值引起的相关问题

// bad function() { test(); console.log('doing stuff..');

    //..other stuff..

    let name = getName();

    if (name === 'test') {
        return false;
    }

    return name;
}

// good
function() {
    let name = getName();

    test();
    console.log('doing stuff..');

    //..other stuff..

    if (name === 'test') {
        return false;
    }

    return name;
}

// bad
function() {
    let name = getName();

    if (!arguments.length) {
        return false;
    }

    return true;
}

// good
function() {
    if (!arguments.length) {
        return false;
    }

    let name = getName();

    return true;
}

§ 3.8 条件表达式和等号

  • 合理使用 === 和 !== 以及 == 和 !=
  • 合理使用表达式逻辑操作运算
  • 条件表达式的强制类型转换遵循以下规则
    1. 对象 被计算为 true
    2. undefined 被计算为 false
    3. null 被计算为 false
    4. 布尔值 被计算为 布尔的值
    5. 数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true
    6. 字符串 如果是空字符串 '' 则被计算为 false, 否则为 true
if ([0]) {
    // true
    // An array is an object, objects evaluate to true
}
  • 使用快捷方式

// bad if (name !== '') { // ...stuff... }

// good
if (name) {
    // ...stuff...
}

// bad
if (collection.length > 0) {
    // ...stuff...
}

// good
if (collection.length) {
    // ...stuff...
}
  • 阅读 Truth Equality and JavaScript 了解更多

§ 3.9 块

  • 给所有多行的块使用大括号

// bad if (test) return false;

// good
if (test) return false;

// good
if (test) {
    return false;
}

// bad
function() { return false; }

// good
function() {
    return false;
}

§ 3.10 注释

  • 使用 /** ... */ 进行多行注释，包括描述，指定类型以及参数值和返回值
> // bad
>     // make() returns a new element
>     // based on the passed in tag name
>     //
>     // @param <String> tag
>     // @return <Element> element
>     function make(tag) {
> 
>         // ...stuff...
> 
>         return element;
>     }
> 
>     // good
>     /**
>     * make() returns a new element
>     * based on the passed in tag name
>     *
>     * @param <String> tag
>     * @return <Element> element
>     */
>     function make(tag) {
> 
>         // ...stuff...
> 
>         return element;
>     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  • 使用 // 进行单行注释，在评论对象的上面进行单行注释，注释前放一个空行

// bad let active = true; // is current tab

// good
// is current tab
let active = true;

// bad
function getType() {
    console.log('fetching type...');
        // set the default type to 'no type'
    let type = this._type || 'no type';

    return type;
}

// good
function getType() {
    console.log('fetching type...');

    // set the default type to 'no type'
    let type = this._type || 'no type';

    return type;
}
  • 如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解
function Calculator() {

    // FIXME: shouldn't use a global here
    total = 0;

    return this;
}
function Calculator() {

    // TODO: total should be configurable by an options param
    this.total = 0;

    return this;
}
  • 满足规范的文档，在需要文档的时候，可以尝试jsdoc

§ 3.11 空白

  • 缩进、格式化能帮助团队更快得定位修复代码BUG
  • 将tab设为4个空格

// bad function() { ∙∙let name; }

// bad
function() {
∙let name;
}

// good
function() {
∙∙∙∙let name;
}
  • 大括号前放一个空格

// bad function test(){ console.log('test'); }

// good
function test() {
    console.log('test');
}

// bad
dog.set('attr',{
    age: '1 year',
    breed: 'Bernese Mountain Dog'
});

// good
dog.set('attr', {
    age: '1 year',
    breed: 'Bernese Mountain Dog'
});
  • 在做长方法链时使用缩进

// bad $('#items').find('.selected').highlight().end().find('.open').updateCount();

good
$('#items') .find('.selected') .highlight() .end() .find('.open') .updateCount(); // bad let leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); // good let leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') .class('led', true) .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led);

§ 3.12 逗号

  • 不要将逗号放前面

// bad let once , upon , aTime;

// good
let once,
    upon,
    aTime;

// bad
let hero = {
        firstName: 'Bob'
    , lastName: 'Parr'
    , heroName: 'Mr. Incredible'
    , superPower: 'strength'
};

// good
let hero = {
    firstName: 'Bob',
    lastName: 'Parr',
    heroName: 'Mr. Incredible',
    superPower: 'strength'
};
  • 不要加多余的逗号，这可能会在IE下引起错误，同时如果多一个逗号某些ES3的实现会计算多数组的长度

// bad let hero = { firstName: 'Kevin', lastName: 'Flynn', };

let heroes = [
'Batman',
'Superman',
];

// good
let hero = {
firstName: 'Kevin',
lastName: 'Flynn'
};

let heroes = [
'Batman',
'Superman'
];

§ 3.13 分号

  • 语句结束一定要加分号
// bad
(function() {
    let name = 'Skywalker'
    return name
})()

// good
(function() {
    let name = 'Skywalker';
    return name;
})();

// good
;(function() {
    let name = 'Skywalker';
    return name;
})();

§ 3.14 类型转换

  • 在语句的开始执行类型转换.
  • 字符串
this.reviewScore = 9;

// bad
let totalScore = this.reviewScore + '';

// good
let totalScore = '' + this.reviewScore;

// bad
let totalScore = '' + this.reviewScore + ' total score';

// good
let totalScore = this.reviewScore + ' total score';
  • 对数字使用 parseInt 并且总是带上类型转换的基数.，如parseInt(value, 10)

let inputValue = '4';

// bad
let val = new Number(inputValue);

// bad
let val = +inputValue;

// bad
let val = inputValue >> 0;

// bad
let val = parseInt(inputValue);

// good
let val = Number(inputValue);

// good
let val = parseInt(inputValue, 10);

// good
/**
* parseInt was the reason my code was slow.
* Bitshifting the String to coerce it to a
* Number made it a lot faster.
*/
let val = inputValue >> 0;
  • 布尔值

let age = 0;

// bad
let hasAge = new Boolean(age);

// good
let hasAge = Boolean(age);

// good
let hasAge = !!age;

§ 3.14 命名约定

  • 避免单个字符名，让你的变量名有描述意义

// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }

  • 当命名对象、函数和实例时使用驼峰命名规则

// bad let OBJEcttsssss = {}; let this_is_my_object = {}; let this-is-my-object = {}; function c() {}; let u = new user({ name: 'Bob Parr' }); // good let thisIsMyObject = {}; function thisIsMyFunction() {}; let user = new User({ name: 'Bob Parr' });

  • 当命名构造函数或类时使用驼峰式大写

// bad function user(options) { this.name = options.name; } let bad = new user({ name: 'nope' }); // good function User(options) { this.name = options.name; } let good = new User({ name: 'yup' });

  • 命名私有属性时前面加个下划线
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';

// good
this._firstName = 'Panda';
  • 当保存对 this 的引用时使用 self(python 风格),避免this issue.Angular建议使用vm(MVVM模式中view-model)

// good function() { let self = this; return function() { console.log(self); }; }

最后更新于: 4/15/2022, 2:41:22 PM

← 应用生命周期事件 →