前端架构之路

一直想做一个全栈工程师, 所以会尝试不一样的技术

从2013年开始做JavaWeb 做各种管理系统 从数据库设计到DAO层Service服务层Action层 的设计和实现 到前端 包括PC pad 和 mobile UI的实现 主要采用Sencha EXTjs 后来公司想做O2O餐饮平台 又去做 nodejs + mongodb + express 前端也在尝试采用appframework.

2014年5月份来到深圳 开始了深圳这边的工作 工作在巨鼎 前期主要做HTML5 使用HTML5 + 嵌套原生的形式 phoneGap打包写依伴APP 现在更名为 51健康档案了 然后又转到 原生APP 开发Android 对于Java 底子不错 开发Android 上手也很快 后来到放射沙龙项目组 做放射沙龙的项目 主要做放射沙龙中嵌入h5网页 放射沙龙管理后台 放射沙龙接口设计和实现 使用C#开发 这个时候 对C#的高级特性 有点入迷 感觉Java就预言特性而言 比 C#还是差点 最喜欢 linQ 箭头函数 await async 异步编程 这些在ES6 ES7中 渐渐被引入
做了2年多 感觉技术到了瓶颈 然后 去一家小公司做前端 2016真是前端高速发展的阶段 各种新框架和技术 不断出现 个人也在不断学习和充实自己 对前端的认识和理解也更近一步 这一年 主要是各种框架的熟悉和学习 vue全家桶(vue + vue-router+ vuex+ vue-rescource) 还有 ES6 lodashi requirejs webpack nodejs nginx配置等 倒也长进了不少.

梳理下本人参与过的项目

  • 东莞智富软件科技[2013.3-2014.5]

    • 红日管理系统 星时空管理系统 SSH +　Extjs + Sencha + mysql
    • 不到店平台 商家版 用户版 nodejs+ express + mongdb sencha appframework zepto

  • 巨鼎医疗设备有限公司[2014.5-2016.3]

    • h5版 依伴APP appframework + zepto + phonegap
    • android版本 依伴APP 以及 依伴APP定制版本 Android
    • 放射沙龙 API接口设计和实现 接口文档 C# web api api Helper
    • 放射沙龙管理后台 以及银医通管理后台 H+ jquery knockoutjs
    • 放射沙龙APP中H5网页 活动页 和分享页等 h5 asp.net

  • 哈巴科技[2016.4-2017.5]

    • 快线扫码 requirejs + vuejs
    • 火车票 vuejs+vue-resoure+mui+mint-ui+webpack nodejs pm2 nginx
    • 汽车票重构 vuejs+vue-router+vuex+vue-resoure+vux+webpack
    • pc端管理网站重构 vuejs+element-ui+webpack

  • 盈峰环境[2017.6-?]

  • 技术调研和自定义组件封装 ckplayer vue全家桶

个人还熟悉的其他技术

  • markdown
  • docute hexo

架构

  • 开发规范 参考ES6开发规范
  • 开发模型 使用ES6 模块化开发 babel
  • 构建 webpack
  • 部署 nginx 或 node+pm2 + nginx

https://segmentfault.com/a/1190000010230939

展开全文 >>

ES6编程规范

ECMAScript 6 Style Guide

用更合理的方式写 JavaScript

参考自 Airbnb JavaScript Style Guide 。

目录

  1. 类型
  2. 引用
  3. 对象
  4. 数组
  5. 解构
  6. 字符串
  7. 函数
  8. 箭头函数
  9. 构造函数
  10. 模块
  11. Iterators & Generators
  12. 属性
  13. 变量
  14. 提升
  15. 比较运算符 & 等号
  16. 代码块
  17. 注释
  18. 空白
  19. 逗号
  20. 分号
  21. 类型转换
  22. 命名规则
  23. 存取器
  24. 事件
  25. jQuery
  26. ECMAScript 5 兼容性
  27. ECMAScript 6 编码规范
  28. 测试
  29. 性能
  30. 资源
  31. 使用人群
  32. 翻译
  33. JavaScript 编码规范说明
  34. 一起来讨论 JavaScript
  35. Contributors
  36. License

类型

  • 1.1 基本类型: 直接存取基本类型。

    • 字符串
    • 数值
    • 布尔类型
    • null
    • undefined
    1
    2
    3
    4
    5
    6
    const foo = 1;
    let bar = foo;
    bar = 9;
    console.log(foo, bar); // => 1, 9

  • 1.2 复制类型: 通过引用的方式存取复杂类型。

    • 对象
    • 数组
    • 函数
    1
    2
    3
    4
    5
    6
    const foo = [1, 2];
    const bar = foo;
    bar[0] = 9;
    console.log(foo[0], bar[0]); // => 9, 9

⬆ 返回目录

引用

  • 2.1 对所有的引用使用 const ；不要使用 var。

    为什么？这能确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。

    1
    2
    3
    4
    5
    6
    7
    // bad
    var a = 1;
    var b = 2;
    // good
    const a = 1;
    const b = 2;

  • 2.2 如果你一定需要可变动的引用，使用 let 代替 var。

    为什么？因为 let 是块级作用域，而 var 是函数作用域。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }
    // good, use the let.
    let count = 1;
    if (true) {
      count += 1;
    }

  • 2.3 注意 let 和 const 都是块级作用域。

  • 在一个作用域内不能重复声明

  • const在声明的时候必须初始化 let在声明的时候可以不用初始化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // const 和 let 只存在于它们被定义的区块内。
    {
      let a = 1;
      const b = 1;
      // error
      let a = 2;
      // error
      const b ;
      const b = 3;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError

⬆ 返回目录

对象

  • 3.1 使用字面值创建对象。

    1
    2
    3
    4
    5
    // bad
    const item = new Object();
    // good
    const item = {};

  • 3.2 如果你的代码在浏览器环境下执行，别使用 保留字 作为键值。这样的话在 IE8 不会运行。 更多信息。 但在 ES6 模块和服务器端中使用没有问题。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    const superman = {
      default: { clark: 'kent' },
      private: true,
    };
    // good
    const superman = {
      defaults: { clark: 'kent' },
      hidden: true,
    };

  • 3.3 使用同义词替换需要使用的保留字。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    const superman = {
      class: 'alien',
    };
    // bad
    const superman = {
      klass: 'alien',
    };
    // good
    const superman = {
      type: 'alien',
    };

  • 3.4 创建有动态属性名的对象时，使用可被计算的属性名称。

    为什么？因为这样可以让你在一个地方定义所有的对象属性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function getKey(k) {
      return `a key named ${k}`;
    }
    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };

  • 3.5 使用对象方法的简写。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // bad
    const atom = {
      value: 1,
      addValue: function (value) {
        return atom.value + value;
      },
    };
    // good
    const atom = {
      value: 1,
      addValue(value) {
        return atom.value + value;
      },
    };

  • 3.6 使用对象属性值的简写。

    为什么？因为这样更短更有描述性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const lukeSkywalker = 'Luke Skywalker';
    // bad
    const obj = {
      lukeSkywalker: lukeSkywalker,
    };
    // good
    const obj = {
      lukeSkywalker,
    };

  • 3.7 在对象属性声明前把简写的属性分组。

    为什么？因为这样能清楚地看出哪些属性使用了简写。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const anakinSkywalker = 'Anakin Skywalker';
    const lukeSkywalker = 'Luke Skywalker';
    // bad
    const obj = {
      episodeOne: 1,
      twoJedisWalkIntoACantina: 2,
      lukeSkywalker,
      episodeThree: 3,
      mayTheFourth: 4,
      anakinSkywalker,
    };
    // good
    const obj = {
      lukeSkywalker,
      anakinSkywalker,
      episodeOne: 1,
      twoJedisWalkIntoACantina: 2,
      episodeThree: 3,
      mayTheFourth: 4,
    };

⬆ 返回目录

数组

  • 4.1 使用字面值创建数组。

    1
    2
    3
    4
    5
    // bad
    const items = new Array();
    // good
    const items = [];

  • 4.2 向数组添加元素时使用 Arrary#push 替代直接赋值。

    1
    2
    3
    4
    5
    6
    7
    8
    const someStack = [];
    // bad
    someStack[someStack.length] = 'abracadabra';
    // good
    someStack.push('abracadabra');

  • 4.3 使用拓展运算符 ... 复制数组。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    const len = items.length;
    const itemsCopy = [];
    let i;
    for (i = 0; i < len; i++) {
      itemsCopy[i] = items[i];
    }
    // good
    const itemsCopy = [...items];

  • 4.4 使用 Array#from 把一个类数组对象转换成数组。

    1
    2
    const foo = document.querySelectorAll('.foo');
    const nodes = Array.from(foo);

⬆ 返回目录

解构

  • 5.1 使用解构存取和使用多属性对象。

    为什么？因为解构能减少临时引用属性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // bad
    function getFullName(user) {
      const firstName = user.firstName;
      const lastName = user.lastName;
      return `${firstName} ${lastName}`;
    }
    // good
    function getFullName(obj) {
      const { firstName, lastName } = obj;
      return `${firstName} ${lastName}`;
    }
    // best
    function getFullName({ firstName, lastName }) {
      return `${firstName} ${lastName}`;
    }

  • 5.2 对数组使用解构赋值。

    1
    2
    3
    4
    5
    6
    7
    8
    const arr = [1, 2, 3, 4];
    // bad
    const first = arr[0];
    const second = arr[1];
    // good
    const [first, second] = arr;

  • 5.3 需要回传多个值时，使用对象解构，而不是数组解构。

    为什么？增加属性或者改变排序不会改变调用时的位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // bad
    function processInput(input) {
      // then a miracle occurs
      return [left, right, top, bottom];
    }
    // 调用时需要考虑回调数据的顺序。
    const [left, __, top] = processInput(input);
    // good
    function processInput(input) {
      // then a miracle occurs
      return { left, right, top, bottom };
    }
    // 调用时只选择需要的数据
    const { left, right } = processInput(input);

⬆ 返回目录

Strings

  • 6.1 字符串使用单引号 '' 。

    1
    2
    3
    4
    5
    // bad
    const name = "Capt. Janeway";
    // good
    const name = 'Capt. Janeway';

  • 6.2 字符串超过 80 个字节应该使用字符串连接号换行。

  • 6.3 注：过度使用字串连接符号可能会对性能造成影响。jsPerf 和 讨论.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // bad
    const 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
    const 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
    const 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.';

  • 6.4 程序化生成字符串时，使用模板字符串代替字符串连接。

    为什么？模板字符串更为简洁，更具可读性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    function sayHi(name) {
      return 'How are you, ' + name + '?';
    }
    // bad
    function sayHi(name) {
      return ['How are you, ', name, '?'].join();
    }
    // good
    function sayHi(name) {
      return `How are you, ${name}?`;
    }

⬆ 返回目录

函数

  • 7.1 使用函数声明代替函数表达式。

    为什么？因为函数声明是可命名的，所以他们在调用栈中更容易被识别。此外，函数声明会把整个函数提升（hoisted），而函数表达式只会把函数的引用变量名提升。这条规则使得箭头函数可以取代函数表达式。

    1
    2
    3
    4
    5
    6
    7
    // bad
    const foo = function () {
    };
    // good
    function foo() {
    }

  • 7.2 函数表达式:

    1
    2
    3
    4
    // 立即调用的函数表达式 (IIFE)
    (() => {
      console.log('Welcome to the Internet. Please follow me.');
    })();

  • 7.3 永远不要在一个非函数代码块（if、while 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。

  • 7.4 注意: ECMA-262 把 block 定义为一组语句。函数声明不是语句。阅读 ECMA-262 关于这个问题的说明。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    if (currentUser) {
      function test() {
        console.log('Nope.');
      }
    }
    // good
    let test;
    if (currentUser) {
      test = () => {
        console.log('Yup.');
      };
    }

  • 7.5 永远不要把参数命名为 arguments。这将取代原来函数作用域内的 arguments 对象。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    function nope(name, options, arguments) {
      // ...stuff...
    }
    // good
    function yup(name, options, args) {
      // ...stuff...
    }

  • 7.6 不要使用 arguments。可以选择 rest 语法 ... 替代。

    为什么？使用 ... 能明确你要传入的参数。另外 rest 参数是一个真正的数组，而 arguments 是一个类数组。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // bad
    function concatenateAll() {
      const args = Array.prototype.slice.call(arguments);
      return args.join('');
    }
    // good
    function concatenateAll(...args) {
      return args.join('');
    }

  • 7.7 直接给函数的参数指定默认值，不要使用一个变化的函数参数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // really bad
    function handleThings(opts) {
      // 不！我们不应该改变函数参数。
      // 更加糟糕: 如果参数 opts 是 false 的话，它就会被设定为一个对象。
      // 但这样的写法会造成一些 Bugs。
      //（译注：例如当 opts 被赋值为空字符串，opts 仍然会被下一行代码设定为一个空对象。）
      opts = opts || {};
      // ...
    }
    // still bad
    function handleThings(opts) {
      if (opts === void 0) {
        opts = {};
      }
      // ...
    }
    // good
    function handleThings(opts = {}) {
      // ...
    }

  • 7.8 直接给函数参数赋值时需要避免副作用。

    为什么？因为这样的写法让人感到很困惑。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var b = 1;
    // bad
    function count(a = b++) {
      console.log(a);
    }
    count();  // 1
    count();  // 2
    count(3); // 3
    count();  // 3

⬆ 返回目录

箭头函数

  • 8.1 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。

    为什么?因为箭头函数创造了新的一个 this 执行环境（译注：参考 Arrow functions - JavaScript | MDN 和 ES6 arrow functions, syntax and lexical scoping），通常情况下都能满足你的需求，而且这样的写法更为简洁。

    为什么不？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    [1, 2, 3].map(function (x) {
      return x * x;
    });
    // good
    [1, 2, 3].map((x) => {
      return x * x;
    });

  • 8.2 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 return 都省略掉。如果不是，那就不要省略。

    为什么？语法糖。在链式调用中可读性很高。

    为什么不？当你打算回传一个对象的时候。

    1
    2
    3
    4
    5
    6
    7
    // good
    [1, 2, 3].map(x => x * x);
    // good
    [1, 2, 3].reduce((total, n) => {
      return total + n;
    }, 0);

⬆ 返回目录

构造器

  • 9.1 总是使用 class。避免直接操作 prototype 。

    为什么? 因为 class 语法更为简洁更易读。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // bad
    function Queue(contents = []) {
      this._queue = [...contents];
    }
    Queue.prototype.pop = function() {
      const value = this._queue[0];
      this._queue.splice(0, 1);
      return value;
    }
    // good
    class Queue {
      constructor(contents = []) {
        this._queue = [...contents];
      }
      pop() {
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
      }
    }

  • 9.2 使用 extends 继承。

    为什么？因为 extends 是一个内建的原型继承方法并且不会破坏 instanceof。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // bad
    const inherits = require('inherits');
    function PeekableQueue(contents) {
      Queue.apply(this, contents);
    }
    inherits(PeekableQueue, Queue);
    PeekableQueue.prototype.peek = function() {
      return this._queue[0];
    }
    // good
    class PeekableQueue extends Queue {
      peek() {
        return this._queue[0];
      }
    }

  • 9.3 方法可以返回 this 来帮助链式调用。

    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
    // bad
    Jedi.prototype.jump = function() {
      this.jumping = true;
      return true;
    };
    Jedi.prototype.setHeight = function(height) {
      this.height = height;
    };
    const luke = new Jedi();
    luke.jump(); // => true
    luke.setHeight(20); // => undefined
    // good
    class Jedi {
      jump() {
        this.jumping = true;
        return this;
      }
      setHeight(height) {
        this.height = height;
        return this;
      }
    }
    const luke = new Jedi();
    luke.jump()
      .setHeight(20);

  • 9.4 可以写一个自定义的 toString() 方法，但要确保它能正常运行并且不会引起副作用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    class Jedi {
      constructor(options = {}) {
        this.name = options.name || 'no name';
      }
      getName() {
        return this.name;
      }
      toString() {
        return `Jedi - ${this.getName()}`;
      }
    }

⬆ 返回目录

模块

  • 10.1 总是使用模组 (import/export) 而不是其他非标准模块系统。你可以编译为你喜欢的模块系统。

    为什么？模块就是未来，让我们开始迈向未来吧。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    const AirbnbStyleGuide = require('./AirbnbStyleGuide');
    module.exports = AirbnbStyleGuide.es6;
    // ok
    import AirbnbStyleGuide from './AirbnbStyleGuide';
    export default AirbnbStyleGuide.es6;
    // best
    import { es6 } from './AirbnbStyleGuide';
    export default es6;

  • 10.2 不要使用通配符 import。

    为什么？这样能确保你只有一个默认 export。

    1
    2
    3
    4
    5
    // bad
    import * as AirbnbStyleGuide from './AirbnbStyleGuide';
    // good
    import AirbnbStyleGuide from './AirbnbStyleGuide';

  • 10.3 不要从 import 中直接 export。

    为什么？虽然一行代码简洁明了，但让 import 和 export 各司其职让事情能保持一致。

    1
    2
    3
    4
    5
    6
    7
    8
    // bad
    // filename es6.js
    export { es6 as default } from './airbnbStyleGuide';
    // good
    // filename es6.js
    import { es6 } from './AirbnbStyleGuide';
    export default es6;

⬆ 返回目录

Iterators and Generators

  • 11.1 不要使用 iterators。使用高阶函数例如 map() 和 reduce() 替代 for-of。

    为什么？这加强了我们不变的规则。处理纯函数的回调值更易读，这比它带来的副作用更重要。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    const numbers = [1, 2, 3, 4, 5];
    // bad
    let sum = 0;
    for (let num of numbers) {
      sum += num;
    }
    sum === 15;
    // good
    let sum = 0;
    numbers.forEach((num) => sum += num);
    sum === 15;
    // best (use the functional force)
    const sum = numbers.reduce((total, num) => total + num, 0);
    sum === 15;

  • 11.2 现在还不要使用 generators。

    为什么？因为它们现在还没法很好地编译到 ES5。 (译者注：目前(2016/03) Chrome 和 Node.js 的稳定版本都已支持 generators)

⬆ 返回目录

属性

  • 12.1 使用 . 来访问对象的属性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const luke = {
      jedi: true,
      age: 28,
    };
    // bad
    const isJedi = luke['jedi'];
    // good
    const isJedi = luke.jedi;

  • 12.2 当通过变量访问属性时使用中括号 []。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const luke = {
      jedi: true,
      age: 28,
    };
    function getProp(prop) {
      return luke[prop];
    }
    const isJedi = getProp('jedi');

⬆ 返回目录

变量

  • 13.1 一直使用 const 来声明变量，如果不这样做就会产生全局变量。我们需要避免全局命名空间的污染。地球队长已经警告过我们了。（译注：全局，global 亦有全球的意思。地球队长的责任是保卫地球环境，所以他警告我们不要造成「全球」污染。）

    1
    2
    3
    4
    5
    // bad
    superPower = new SuperPower();
    // good
    const superPower = new SuperPower();

  • 13.2 使用 const 声明每一个变量。

    为什么？增加新变量将变的更加容易，而且你永远不用再担心调换错 ; 跟 ,。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // bad
    const items = getItems(),
        goSportsTeam = true,
        dragonball = 'z';
    // bad
    // (compare to above, and try to spot the mistake)
    const items = getItems(),
        goSportsTeam = true;
        dragonball = 'z';
    // good
    const items = getItems();
    const goSportsTeam = true;
    const dragonball = 'z';

  • 13.3 将所有的 const 和 let 分组

    为什么？当你需要把已赋值变量赋值给未赋值变量时非常有用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // bad
    let i, len, dragonball,
        items = getItems(),
        goSportsTeam = true;
    // bad
    let i;
    const items = getItems();
    let dragonball;
    const goSportsTeam = true;
    let len;
    // good
    const goSportsTeam = true;
    const items = getItems();
    let dragonball;
    let i;
    let length;

  • 13.4 在你需要的地方给变量赋值，但请把它们放在一个合理的位置。

    为什么？let 和 const 是块级作用域而不是函数作用域。

    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
    33
    34
    35
    36
    37
    38
    39
    40
    // good
    function() {
      test();
      console.log('doing stuff..');
      //..other stuff..
      const name = getName();
      if (name === 'test') {
        return false;
      }
      return name;
    }
    // bad - unnecessary function call
    function(hasName) {
      const name = getName();
      if (!hasName) {
        return false;
      }
      this.setFirstName(name);
      return true;
    }
    // good
    function(hasName) {
      if (!hasName) {
        return false;
      }
      const name = getName();
      this.setFirstName(name);
      return true;
    }

⬆ 返回目录

Hoisting

  • 14.1 var 声明会被提升至该作用域的顶部，但它们赋值不会提升。let 和 const 被赋予了一种称为「暂时性死区（Temporal Dead Zones, TDZ）」的概念。这对于了解为什么 type of 不再安全相当重要。

    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
    // 我们知道这样运行不了
    // （假设 notDefined 不是全局变量）
    function example() {
      console.log(notDefined); // => throws a ReferenceError
    }
    // 由于变量提升的原因，
    // 在引用变量后再声明变量是可以运行的。
    // 注：变量的赋值 `true` 不会被提升。
    function example() {
      console.log(declaredButNotAssigned); // => undefined
      var declaredButNotAssigned = true;
    }
    // 编译器会把函数声明提升到作用域的顶层，
    // 这意味着我们的例子可以改写成这样：
    function example() {
      let declaredButNotAssigned;
      console.log(declaredButNotAssigned); // => undefined
      declaredButNotAssigned = true;
    }
    // 使用 const 和 let
    function example() {
      console.log(declaredButNotAssigned); // => throws a ReferenceError
      console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
      const declaredButNotAssigned = true;
    }

  • 14.2 匿名函数表达式的变量名会被提升，但函数内容并不会。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function example() {
      console.log(anonymous); // => undefined
      anonymous(); // => TypeError anonymous is not a function
      var anonymous = function() {
        console.log('anonymous function expression');
      };
    }

  • 14.3 命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function example() {
      console.log(named); // => undefined
      named(); // => TypeError named is not a function
      superPower(); // => ReferenceError superPower is not defined
      var named = function superPower() {
        console.log('Flying');
      };
    }
    // the same is true when the function name
    // is the same as the variable name.
    function example() {
      console.log(named); // => undefined
      named(); // => TypeError named is not a function
      var named = function named() {
        console.log('named');
      }
    }

  • 14.4 函数声明的名称和函数体都会被提升。

    1
    2
    3
    4
    5
    6
    7
    function example() {
      superPower(); // => Flying
      function superPower() {
        console.log('Flying');
      }
    }

  • 想了解更多信息，参考 Ben Cherry 的 JavaScript Scoping & Hoisting。

⬆ 返回目录

比较运算符 & 等号

  • 15.1 优先使用 === 和 !== 而不是 == 和 !=.

  • 15.2 条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则：

    • 对象 被计算为 true
    • Undefined 被计算为 false
    • Null 被计算为 false
    • 布尔值 被计算为 布尔的值
    • 数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true
    • 字符串 如果是空字符串 '' 被计算为 false，否则为 true
    1
    2
    3
    4
    if ([0]) {
      // true
      // An array is an object, objects evaluate to true
    }

  • 15.3 使用简写。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // bad
    if (name !== '') {
      // ...stuff...
    }
    // good
    if (name) {
      // ...stuff...
    }
    // bad
    if (collection.length > 0) {
      // ...stuff...
    }
    // good
    if (collection.length) {
      // ...stuff...
    }

  • 15.4 想了解更多信息，参考 Angus Croll 的 Truth Equality and JavaScript。

⬆ 返回目录

代码块

  • 16.1 使用大括号包裹所有的多行代码块。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // bad
    if (test)
      return false;
    // good
    if (test) return false;
    // good
    if (test) {
      return false;
    }
    // bad
    function() { return false; }
    // good
    function() {
      return false;
    }

  • 16.2 如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块关闭括号的同一行。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // bad
    if (test) {
      thing1();
      thing2();
    }
    else {
      thing3();
    }
    // good
    if (test) {
      thing1();
      thing2();
    } else {
      thing3();
    }

⬆ 返回目录

注释

  • 17.1 使用 /** ... */ 作为多行注释。包含描述、指定所有参数和返回值的类型和值。

    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
    // 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;
    }

  • 17.2 使用 // 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。

    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
    // bad
    const active = true;  // is current tab
    // good
    // is current tab
    const active = true;
    // bad
    function getType() {
      console.log('fetching type...');
      // set the default type to 'no type'
      const type = this._type || 'no type';
      return type;
    }
    // good
    function getType() {
      console.log('fetching type...');
      // set the default type to 'no type'
      const type = this._type || 'no type';
      return type;
    }

  • 17.3 给注释增加 FIXME 或 TODO 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式。这将有别于常见的注释，因为它们是可操作的。使用 FIXME -- need to figure this out 或者 TODO -- need to implement。

  • 17.4 使用 // FIXME: 标注问题。

    1
    2
    3
    4
    5
    6
    class Calculator {
      constructor() {
        // FIXME: shouldn't use a global here
        total = 0;
      }
    }

  • 17.5 使用 // TODO: 标注问题的解决方式。

    1
    2
    3
    4
    5
    6
    class Calculator {
      constructor() {
        // TODO: total should be configurable by an options param
        this.total = 0;
      }
    }

⬆ 返回目录

空白

  • 18.1 使用 2 个空格作为缩进。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    function() {
    ∙∙∙∙const name;
    }
    // bad
    function() {
    ∙const name;
    }
    // good
    function() {
    ∙∙const name;
    }

  • 18.2 在花括号前放一个空格。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 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',
    });

  • 18.3 在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // bad
    if(isJedi) {
      fight ();
    }
    // good
    if (isJedi) {
      fight();
    }
    // bad
    function fight () {
      console.log ('Swooosh!');
    }
    // good
    function fight() {
      console.log('Swooosh!');
    }

  • 18.4 使用空格把运算符隔开。

    1
    2
    3
    4
    5
    // bad
    const x=y+5;
    // good
    const x = y + 5;

  • 18.5 在文件末尾插入一个空行。

    1
    2
    3
    4
    // bad
    (function(global) {
      // ...stuff...
    })(this);
    1
    2
    3
    4
    5
    // bad
    (function(global) {
      // ...stuff...
    })(this);↵
    ↵
    1
    2
    3
    4
    // good
    (function(global) {
      // ...stuff...
    })(this);↵

  • 18.5 在使用长方法链时进行缩进。使用前面的点 . 强调这是方法调用而不是新语句。

    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
    33
    34
    // bad
    $('#items').find('.selected').highlight().end().find('.open').updateCount();
    // bad
    $('#items').
      find('.selected').
        highlight().
        end().
      find('.open').
        updateCount();
    // good
    $('#items')
      .find('.selected')
        .highlight()
        .end()
      .find('.open')
        .updateCount();
    // bad
    const 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
    const leds = stage.selectAll('.led')
        .data(data)
      .enter().append('svg:svg')
        .classed('led', true)
        .attr('width', (radius + margin) * 2)
      .append('svg:g')
        .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
        .call(tron.led);

  • 18.6 在块末和新语句前插入空行。

    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
    // bad
    if (foo) {
      return bar;
    }
    return baz;
    // good
    if (foo) {
      return bar;
    }
    return baz;
    // bad
    const obj = {
      foo() {
      },
      bar() {
      },
    };
    return obj;
    // good
    const obj = {
      foo() {
      },
      bar() {
      },
    };
    return obj;

⬆ 返回目录

逗号

  • 19.1 行首逗号：不需要。

    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
    // bad
    const story = [
        once
      , upon
      , aTime
    ];
    // good
    const story = [
      once,
      upon,
      aTime,
    ];
    // bad
    const hero = {
        firstName: 'Ada'
      , lastName: 'Lovelace'
      , birthYear: 1815
      , superPower: 'computers'
    };
    // good
    const hero = {
      firstName: 'Ada',
      lastName: 'Lovelace',
      birthYear: 1815,
      superPower: 'computers',
    };

  • 19.2 增加结尾的逗号: 需要。

    为什么? 这会让 git diffs 更干净。另外，像 babel 这样的转译器会移除结尾多余的逗号，也就是说你不必担心老旧浏览器的尾逗号问题。

    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
    33
    34
    35
    36
    // bad - git diff without trailing comma
    const hero = {
         firstName: 'Florence',
    -    lastName: 'Nightingale'
    +    lastName: 'Nightingale',
    +    inventorOf: ['coxcomb graph', 'modern nursing']
    }
    // good - git diff with trailing comma
    const hero = {
         firstName: 'Florence',
         lastName: 'Nightingale',
    +    inventorOf: ['coxcomb chart', 'modern nursing'],
    }
    // bad
    const hero = {
      firstName: 'Dana',
      lastName: 'Scully'
    };
    const heroes = [
      'Batman',
      'Superman'
    ];
    // good
    const hero = {
      firstName: 'Dana',
      lastName: 'Scully',
    };
    const heroes = [
      'Batman',
      'Superman',
    ];

⬆ 返回目录

分号

  • 20.1 使用分号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // bad
    (function() {
      const name = 'Skywalker'
      return name
    })()
    // good
    (() => {
      const name = 'Skywalker';
      return name;
    })();
    // good (防止函数在两个 IIFE 合并时被当成一个参数)
    ;(() => {
      const name = 'Skywalker';
      return name;
    })();

    Read more.

⬆ 返回目录

类型转换

  • 21.1 在语句开始时执行类型转换。

  • 21.2 字符串：

    1
    2
    3
    4
    5
    6
    7
    //  => this.reviewScore = 9;
    // bad
    const totalScore = this.reviewScore + '';
    // good
    const totalScore = String(this.reviewScore);

  • 21.3 对数字使用 parseInt 转换，并带上类型转换的基数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    const inputValue = '4';
    // bad
    const val = new Number(inputValue);
    // bad
    const val = +inputValue;
    // bad
    const val = inputValue >> 0;
    // bad
    const val = parseInt(inputValue);
    // good
    const val = Number(inputValue);
    // good
    const val = parseInt(inputValue, 10);

  • 21.4 如果因为某些原因 parseInt 成为你所做的事的瓶颈而需要使用位操作解决性能问题时，留个注释说清楚原因和你的目的。

    1
    2
    3
    4
    5
    6
    // good
    /**
     * 使用 parseInt 导致我的程序变慢，
     * 改成使用位操作转换数字快多了。
     */
    const val = inputValue >> 0;

  • 21.5 注: 小心使用位操作运算符。数字会被当成 64 位值，但是位操作运算符总是返回 32 位的整数（参考）。位操作处理大于 32 位的整数值时还会导致意料之外的行为。关于这个问题的讨论。最大的 32 位整数是 2,147,483,647：

    1
    2
    3
    2147483647 >> 0 //=> 2147483647
    2147483648 >> 0 //=> -2147483648
    2147483649 >> 0 //=> -2147483647

  • 21.6 布尔:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const age = 0;
    // bad
    const hasAge = new Boolean(age);
    // good
    const hasAge = Boolean(age);
    // good
    const hasAge = !!age;

⬆ 返回目录

命名规则

  • 22.1 避免单字母命名。命名应具备描述性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    function q() {
      // ...stuff...
    }
    // good
    function query() {
      // ..stuff..
    }

  • 22.2 使用驼峰式命名对象、函数和实例。

    1
    2
    3
    4
    5
    6
    7
    8
    // bad
    const OBJEcttsssss = {};
    const this_is_my_object = {};
    function c() {}
    // good
    const thisIsMyObject = {};
    function thisIsMyFunction() {}

  • 22.3 使用帕斯卡式命名构造函数或类。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // bad
    function user(options) {
      this.name = options.name;
    }
    const bad = new user({
      name: 'nope',
    });
    // good
    class User {
      constructor(options) {
        this.name = options.name;
      }
    }
    const good = new User({
      name: 'yup',
    });

  • 22.4 使用下划线 _ 开头命名私有属性。

    1
    2
    3
    4
    5
    6
    // bad
    this.__firstName__ = 'Panda';
    this.firstName_ = 'Panda';
    // good
    this._firstName = 'Panda';

  • 22.5 别保存 this 的引用。使用箭头函数或 Function#bind。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // bad
    function foo() {
      const self = this;
      return function() {
        console.log(self);
      };
    }
    // bad
    function foo() {
      const that = this;
      return function() {
        console.log(that);
      };
    }
    // good
    function foo() {
      return () => {
        console.log(this);
      };
    }

  • 22.6 如果你的文件只输出一个类，那你的文件名必须和类名完全保持一致。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // file contents
    class CheckBox {
      // ...
    }
    export default CheckBox;
    // in some other file
    // bad
    import CheckBox from './checkBox';
    // bad
    import CheckBox from './check_box';
    // good
    import CheckBox from './CheckBox';

  • 22.7 当你导出默认的函数时使用驼峰式命名。你的文件名必须和函数名完全保持一致。

    1
    2
    3
    4
    function makeStyleGuide() {
    }
    export default makeStyleGuide;

  • 22.8 当你导出单例、函数库、空对象时使用帕斯卡式命名。

    1
    2
    3
    4
    5
    6
    const AirbnbStyleGuide = {
      es6: {
      }
    };
    export default AirbnbStyleGuide;

⬆ 返回目录

存取器

  • 23.1 属性的存取函数不是必须的。

  • 23.2 如果你需要存取函数时使用 getVal() 和 setVal('hello')。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    dragon.age();
    // good
    dragon.getAge();
    // bad
    dragon.age(25);
    // good
    dragon.setAge(25);

  • 23.3 如果属性是布尔值，使用 isVal() 或 hasVal()。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    if (!dragon.age()) {
      return false;
    }
    // good
    if (!dragon.hasAge()) {
      return false;
    }

  • 23.4 创建 get() 和 set() 函数是可以的，但要保持一致。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class Jedi {
      constructor(options = {}) {
        const lightsaber = options.lightsaber || 'blue';
        this.set('lightsaber', lightsaber);
      }
      set(key, val) {
        this[key] = val;
      }
      get(key) {
        return this[key];
      }
    }

⬆ 返回目录

事件

  • 24.1 当给事件附加数据时（无论是 DOM 事件还是私有事件），传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器。例如，不好的写法：

    1
    2
    3
    4
    5
    6
    7
    8
    // bad
    $(this).trigger('listingUpdated', listing.id);
    ...
    $(this).on('listingUpdated', function(e, listingId) {
      // do something with listingId
    });

    更好的写法：

    1
    2
    3
    4
    5
    6
    7
    8
    // good
    $(this).trigger('listingUpdated', { listingId : listing.id });
    ...
    $(this).on('listingUpdated', function(e, data) {
      // do something with data.listingId
    });

    ⬆ 返回目录

jQuery

  • 25.1 使用 $ 作为存储 jQuery 对象的变量名前缀。

    1
    2
    3
    4
    5
    // bad
    const sidebar = $('.sidebar');
    // good
    const $sidebar = $('.sidebar');

  • 25.2 缓存 jQuery 查询。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // bad
    function setSidebar() {
      $('.sidebar').hide();
      // ...stuff...
      $('.sidebar').css({
        'background-color': 'pink'
      });
    }
    // good
    function setSidebar() {
      const $sidebar = $('.sidebar');
      $sidebar.hide();
      // ...stuff...
      $sidebar.css({
        'background-color': 'pink'
      });
    }

  • 25.3 对 DOM 查询使用层叠 $('.sidebar ul') 或 父元素 > 子元素 $('.sidebar > ul')。 jsPerf

  • 25.4 对有作用域的 jQuery 对象查询使用 find。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    $('ul', '.sidebar').hide();
    // bad
    $('.sidebar').find('ul').hide();
    // good
    $('.sidebar ul').hide();
    // good
    $('.sidebar > ul').hide();
    // good
    $sidebar.find('ul').hide();

⬆ 返回目录

ECMAScript 5 兼容性

⬆ 返回目录

ECMAScript 6 规范

  • 27.1 以下是链接到 ES6 的各个特性的列表。
  1. Arrow Functions
  2. Classes
  3. Object Shorthand
  4. Object Concise
  5. Object Computed Properties
  6. Template Strings
  7. Destructuring
  8. Default Parameters
  9. Rest
  10. Array Spreads
  11. Let and Const
  12. Iterators and Generators
  13. Modules

⬆ 返回目录

测试

  • 28.1 Yup.

    1
    2
    3
    function() {
      return true;
    }

⬆ 返回目录

性能

⬆ 返回目录

资源

Learning ES6

Read This

Tools

Other Styleguides

Other Styles

Further Reading

Books

Blogs

Podcasts

⬆ 返回目录

License

(The MIT License)

Copyright (c) 2014 Airbnb

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
‘Software’), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ 返回目录

展开全文 >>

js-code

  1. 日期格式化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    Date.prototype.format = function (fmt) { //author: meizz 
          var o = {
              "M+": this.getMonth() + 1, //月份 
              "d+": this.getDate(), //日 
              "h+": this.getHours(), //小时 
              "m+": this.getMinutes(), //分 
              "s+": this.getSeconds(), //秒 
              "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
              "S": this.getMilliseconds() //毫秒 
          };
          if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
      };

  2. 字符串操作

2-1 去除字符串空格

1
2
3
4
5
6
7
8
9
10
//去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格
function trim(str,type){
    switch (type){
        case 1:return str.replace(/\s+/g,"");
        case 2:return str.replace(/(^\s*)|(\s*$)/g, "");
        case 3:return str.replace(/(^\s*)/g, "");
        case 4:return str.replace(/(\s*$)/g, "");
        default:return str;
    }
}

2-2字母大小写切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*type
1: 首字母大写   
2：首页母小写
3：大小写转换
4：全部大写
5：全部小写
 * */
//changeCase('asdasd',1)
//Asdasd
function changeCase(str,type)
{
    switch(type){
        case 1:return str.replace(/^(\w)(\w+)/,function (v,v1,v2){return v1.toUpperCase() + v2.toLowerCase();});
        case 2:return str.replace(/^(\w)(\w+)/,function (v,v1,v2){return v1.toLowerCase() + v2.toUpperCase();});
        case 3:return str.replace(/^([a-z]+)([A-Z]+)/,function (v,v1,v2){return v1.toUpperCase() + v2.toLowerCase();});
        case 4:return str.toUpperCase();
        case 5:return str.toLowerCase();
        default:return str;
    }
}

2-3字符串循环复制

1
2
3
4
5
6
7
8
9
10
//repeatStr(str->字符串, count->次数)
//repeatStr('123',3)
//"123123123"
function repeatStr(str, count) {
    var text = '';
    for (var i = 0; i < count; i++) {
        text += str;
    }
    return text;
}

2-4字符串替换

1
2
3
4
5
//字符串替换(字符串,要替换的字符,替换成什么)
function replaceAll(str,AFindText,ARepText){
　　　raRegExp = new RegExp(AFindText,"g");
　　　return str.replace(raRegExp,ARepText);
}

2-5替换*

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
33
34
35
36
37
38
39
40
41
42
43
//replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）)
function replaceStr(str, regArr, type,ARepText) {
    var regtext = '', Reg = null,replaceText=ARepText||'*';
    //replaceStr('18819322663',[3,5,3],0)
    //188*****663
    //repeatStr是在上面定义过的（字符串循环复制），大家注意哦
    if (regArr.length === 3 && type === 0) {
        regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})'
        Reg = new RegExp(regtext);
        var replaceCount = repeatStr(replaceText, regArr[1]);
        return str.replace(Reg, '$1' + replaceCount + '$2')
    }
    //replaceStr('asdasdasdaa',[3,5,3],1)
    //***asdas***
    else if (regArr.length === 3 && type === 1) {
        regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}'
        Reg = new RegExp(regtext);
        var replaceCount1 = repeatSte(replaceText, regArr[0]);
        var replaceCount2 = repeatSte(replaceText, regArr[2]);
        return str.replace(Reg, replaceCount1 + '$1' + replaceCount2)
    }
    //replaceStr('1asd88465asdwqe3',[5],0)
    //*****8465asdwqe3
    else if (regArr.length === 1 && type == 0) {
        regtext = '(^\\w{' + regArr[0] +  '})'
        Reg = new RegExp(regtext);
        var replaceCount = repeatSte(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
    //replaceStr('1asd88465asdwqe3',[5],1,'+')
    //"1asd88465as+++++"
    else if (regArr.length === 1 && type == 1) {
        regtext = '(\\w{' + regArr[0] +  '}$)'
        Reg = new RegExp(regtext);
        var replaceCount = repeatSte(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
}
ES8中采用`string.padStart`,`string.padEnd`
eg:
"aaa".padStart(5,"x")
"aaa".padEnd(5,"x")

2-6检测字符串

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
//checkType('165226226326','phone')
//false
//大家可以根据需要扩展
function checkType (str, type) {
    switch (type) {
        case 'email':
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'phone':
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case 'tel':
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        case 'number':
            return /^[0-9]$/.test(str);
        case 'english':
            return /^[a-zA-Z]+$/.test(str);
        case 'chinese':
            return /^[\u4E00-\u9FA5]+$/.test(str);
        case 'lower':
            return /^[a-z]+$/.test(str);
        case 'upper':
            return /^[A-Z]+$/.test(str);
        default :
            return true;
    }
}
可以封装成自己的常量库进行封装
var REGS = {
  EMAIL:'/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/',
  PHONE: /^1[3|4|5|7|8][0-9]{9}$/
  ...others
}

2-7检测密码强度

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
//checkPwd('12asdASAD')
//3(强度等级为3)
function checkPwd(str) {
    var nowLv = 0;
    if (str.length < 6) {
        return nowLv
    }
    ;
    if (/[0-9]/.test(str)) {
        nowLv++
    }
    ;
    if (/[a-z]/.test(str)) {
        nowLv++
    }
    ;
    if (/[A-Z]/.test(str)) {
        nowLv++
    }
    ;
    if (/[\.|-|_]/.test(str)) {
        nowLv++
    }
    ;
    return nowLv;
}

2-8随机码（toString详解）

1
2
3
4
5
6
7
8
9
10
11
12
13
//count取值范围0-36
//randomNumber(10)
//"2584316588472575"
//randomNumber(14)
//"9b405070dd00122640c192caab84537"
//Math.random().toString(36).substring(2);
//"83vhdx10rmjkyb9"
function randomNumber(count){
   return Math.random().toString(count).substring(2);
}

2-9查找字符串

1
2
3
4
5
6
7
8
可能标题会有点误导，下面我就简单说明一个需求，在字符串'sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967'中找出'blog'的出现次数。代码如下
function countStr (str,strSplit){
    return str.split(strSplit).length-1
}
var strTest='sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967'
//countStr(strTest,'blog')
//6

  1. 数组操作
    3-1数组去重
    这个方法是在太多了，我之前写的文章(js数组操作–使用迭代方法替代for循环,js关键词变色，数组打乱，数组去重的实现和封装)也有提到，我今天这里就写一种之前没用过的方法。
1
2
3
function removeRepeatArray(arr){
    return Array.from(new Set(arr))
}

3-2数组顺序打乱

1
2
3
function upsetArr(arr){
    return arr.sort(function(){ return Math.random() - 0.5});
}

3-3数组最大值最小值

1
2
3
4
5
6
7
//这一块的封装，主要是针对数字类型的数组
function maxArr(arr){
    return Math.max.apply(null,arr);
}
function minArr(arr){
    return Math.min.apply(null,arr);
}

3-4数组求和，平均值
//这一块的封装，主要是针对数字类型的数组
//求和

1
2
3
4
5
6
7
function sumArr(arr){
    var sumText=0;
    for(var i=0,len=arr.length;i<len;i++){
        sumText+=arr[i];
    }
    return sumText
}

//平均值,小数点可能会有很多位，这里不做处理，处理了使用就不灵活了！

1
2
3
4
5
function covArr(arr){
    var sumText=sumArr(arr);
    var covText=sumText/length;
    return covText
}

3-5从数组中随机获取元素

1
2
3
4
5
6
7
8
9
10
11
//randomOne([1,2,3,6,8,5,4,2,6])
//2
//randomOne([1,2,3,6,8,5,4,2,6])
//8
//randomOne([1,2,3,6,8,5,4,2,6])
//8
//randomOne([1,2,3,6,8,5,4,2,6])
//1
function randomOne(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

3-6返回数组（字符串）一个元素出现的次数

1
2
3
4
5
6
7
8
9
10
11
12
13
//getEleCount('asd56+asdasdwqe','a')
//3
//getEleCount([1,2,3,4,5,66,77,22,55,22],22)
//2
function getEleCount (obj, ele) {
    var num = 0;
    for (var i = 0, len = obj.length; i < len; i++) {
        if (ele == obj[i]) {
            num++;
        }
    }
    return num;
}

3-7返回数组（字符串）出现最多的几次元素和出现次数

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
33
34
35
36
37
38
39
40
41
42
//arr, rank->长度，默认为数组长度，ranktype，排序方式，默认降序
function getCount(arr, rank，ranktype){ 
    var obj = {}, k, arr1 = []
    //记录每一元素出现的次数
    for (var i = 0, len = arr.length; i < len; i++) {
        k = arr[i];
        if (obj[k]) {
            obj[k]++;
        }
        else {
            obj[k] = 1;
        }
    }
    //保存结果{el-'元素'，count-出现次数}
    for (var o in obj) {
        arr1.push({el: o, count: obj[o]});
    }
    //排序（降序）
    arr1.sort(function (n1, n2) {
        return n2.count - n1.count
    });
    //如果ranktype为1，则为升序，反转数组
    if(ranktype===1){
        arr1=arr1.reverse();
    }
    var rank1 = rank || arr1.length;
    return arr1.slice(0,rank1);
}
getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])
默认情况，返回所有元素出现的次数
getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)
传参（rank=3），只返回出现次数排序前三的
getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)
传参（ranktype=1,rank=null），升序返回所有元素出现次数
getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)
传参（rank=3，ranktype=1），只返回出现次数排序（升序）前三的

3-8得到n1-n2下标的数组

1
2
3
4
5
6
7
8
9
10
11
12
//getArrayNum([0,1,2,3,4,5,6,7,8,9],5,9)
//[5, 6, 7, 8, 9]
//getArrayNum([0,1,2,3,4,5,6,7,8,9],2) 不传第二个参数,默认返回从n1到数组结束的元素
//[2, 3, 4, 5, 6, 7, 8, 9]
function getArrayNum(arr,n1,n2){
    var arr1=[],len=n2||arr.length-1;
    for(var i=n1;i<=len;i++){
        arr1.push(arr[i])
    }
    return arr1;
}

3-9筛选数组

1
2
3
4
5
6
7
8
9
/删除值为'val'的数组元素
//removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')
//["aaa"]   带有'test'的都删除
    
//removeArrayForValue(['test','test1','test2','test','aaa'],'test')
//["test1", "test2", "aaa"]  //数组元素的值全等于'test'才被删除
function removeArrayForValue(arr,val,type){
    arr.filter(function(item){return type==='%'?item.indexOf(val)!==-1:item!==val})
}

4.基础DOM操作
这个部分代码其实参考jquery的一些函数写法，唯一区别就是调用不用，参数一样.比如下面的栗子

1
2
3
4
5
6
//设置对象内容
jquery：$('#xxx').html('hello world');
现在：html(document.getElementById('xxx'),'hello world')
//获取对象内容
jquery：$('#xxx').html();
现在：html(document.getElementById('xxx'))

4-1检测对象是否有哪个类名

1
2
3
4
function hasClass(obj,classStr){ 
    var arr=obj.className.split(/\s+/); //这个正则表达式是因为class可以有多个,判断是否包含 
    return (arr.indexOf(classStr)==-1)?false:true;
},

4-2添加类名

1
2
3
function addClass(obj,classStr){
    if (!this.hasClass(obj,classStr)){obj.className += " " + classStr};
},

4-3删除类名

1
2
3
4
5
6
function removeClass(obj,classStr){
    if (this.hasClass(obj,classStr)) {
        var reg = new RegExp('(\\s|^)' + classStr + '(\\s|$)');
        obj.className = obj.className.replace(reg, '');
    }
},

4-4替换类名(“被替换的类名”,”替换的类名”)

1
2
3
4
function replaceClass(obj,newName,oldName) {
    removeClass(obj,oldName);
    addClass(obj,newName);
}

4-5获取兄弟节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function siblings(obj){
    var a=[];//定义一个数组，用来存o的兄弟元素 
    var p=obj.previousSibling; 
    while(p){//先取o的哥哥们 判断有没有上一个哥哥元素，如果有则往下执行 p表示previousSibling 
        if(p.nodeType===1){ 
        a.push(p); 
        } 
        p=p.previousSibling//最后把上一个节点赋给p 
    } 
    a.reverse()//把顺序反转一下 这样元素的顺序就是按先后的了 
    var n=obj.nextSibling;//再取o的弟弟 
    while(n){//判断有没有下一个弟弟结点 n是nextSibling的意思 
        if(n.nodeType===1){ 
            a.push(n); 
        } 
        n=n.nextSibling; 
    }
    return a;
},

4-6设置样式

1
2
3
4
5
function css(obj,json){
    for(var attr in json){
        obj.style[attr]=json[attr];
    }
}

4-7设置文本内容

1
2
3
4
5
6
7
8
function html(obj){
    if(arguments.length==0){
        return this.innerHTML;
    }
    else if(arguments.length==1){
        this.innerHTML=arguments[0];
    }
}

4-8显示隐藏

1
2
3
4
5
6
function show(obj){
    obj.style.display="";
}
function hide(obj){
    obj.style.display="none";
}

5.其他操作
5-1cookie

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
//cookie
//设置cookie
function setCookie(name,value,iDay){
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+iDay);
    document.cookie=name+'='+value+';expires='+oDate;
}
//获取cookie
function getCookie(name){
    var arr=document.cookie.split('; ');
    for(var i=0;i<arr.length;i++){
        var arr2=arr[i].split('=');
        if(arr2[0]==name)
        {
            return arr2[1];
        }
    }
    return '';
}
```js
//删除cookie
function removeCookie(name){
    setCookie(name,1,-1);
}

5-2清除对象中值为空的属性

1
2
3
4
5
6
7
8
9
10
11
//filterParams({a:"",b:null,c:"010",d:123})
//Object {c: "010", d: 123}
function filterParams(obj){
    let _newPar = {};
    for (let key in obj) {
        if ((obj[key] === 0 || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
            _newPar[key] = obj[key];
        }
    }
    return _newPar;
}

5-3现金额大写转换函数

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
//upDigit(168752632)
//"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"
//upDigit(1682)
//"人民币壹仟陆佰捌拾贰元整"
//upDigit(-1693)
//"欠人民币壹仟陆佰玖拾叁元整"
function upDigit(n)   
{  
    var fraction = ['角', '分','厘'];  
    var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];  
    var unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟']  ];  
    var head = n < 0? '欠人民币': '人民币';  
    n = Math.abs(n);  
    var s = '';  
    for (var i = 0; i < fraction.length; i++)   
    {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, ''); 
    } 
    s = s || '整';  
    n = Math.floor(n);  
    for (var i = 0; i < unit[0].length && n > 0; i++)   
    {  
        var p = '';  
        for (var j = 0; j < unit[1].length && n > 0; j++)   
        {  
            p = digit[n % 10] + unit[1][j] + p; 
            n = Math.floor(n / 10);
        }
        //s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')+ unit[0][i] + s; 
        s = p+ unit[0][i] + s;
    }
    return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
}
``` 
5-4获取，设置url参数
```js
//获取url参数
//getUrlPrmt('segmentfault.com/write?draftId=122000011938')
//Object{draftId: "122000011938"}
function getUrlPrmt(url) {
    url = url ? url : window.location.href;
    let _pa = url.substring(url.indexOf('?') + 1), _arrS = _pa.split('&'), _rs = {};
    for (let i = 0, _len = _arrS.length; i < _len; i++) {
        let pos = _arrS[i].indexOf('=');
        if (pos == -1) {
            continue;
        }
        let name = _arrS[i].substring(0, pos), value = window.decodeURIComponent(_arrS[i].substring(pos + 1));
        _rs[name] = value;
    }
    return _rs;
}
//设置url参数
//setUrlPrmt({'a':1,'b':2})
//a=1&b=2
function setUrlPrmt(obj) {
    let _rs = [];
    for (let p in obj) {
        if (obj[p] != null && obj[p] != '') {
            _rs.push(p + '=' + obj[p])
        }
    }
    return _rs.join('&');
}

5-5随机返回一个范围的数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function randomNumber(n1,n2){
    //randomNumber(5,10)
    //返回5-10的随机整数，包括5，10
    if(arguments.length===2){
        return Math.round(n1+Math.random()*(n2-n1));
    }
    //randomNumber(10)
    //返回0-10的随机整数，包括0，10
    else if(arguments.length===1){
        return Math.round(Math.random()*n1)
    }
    //randomNumber()
    //返回0-255的随机整数，包括0，255
    else{
        return Math.round(Math.random()*255)
    }  
}

5-6随进产生颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function randomColor(){
    //randomNumber是上面定义的函数
    //写法1
    return 'rgb(' + randomNumber(255) + ',' + randomNumber(255) + ',' + randomNumber(255) + ')';
    
    //写法2
    return '#'+Math.random().toString(16).substring(2).substr(0,6);
    
    //写法3
    var color='#';
    for(var i=0;i<6;i++){
        color+='0123456789abcdef'[randomNumber(15)];
    }
    return color;
}
//这种写法，偶尔会有问题。大家得注意哦
//Math.floor(Math.random()*0xffffff).toString(16);

5-7Date日期时间部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//到某一个时间的倒计时
//getEndTime('2017/7/22 16:0:0')
//"剩余时间6天 2小时 28 分钟20 秒"
function getEndTime(endTime){
    var startDate=new Date();  //开始时间，当前时间
    var endDate=new Date(endTime); //结束时间，需传入时间参数
    var t=endDate.getTime()-startDate.getTime();  //时间差的毫秒数
    var d=0,h=0,m=0,s=0;
    if(t>=0){
      d=Math.floor(t/1000/3600/24);
      h=Math.floor(t/1000/60/60%24);
      m=Math.floor(t/1000/60%60);
      s=Math.floor(t/1000%60);
    } 
    return "剩余时间"+d+"天 "+h+"小时 "+m+" 分钟"+s+" 秒";
}

5-8适配rem

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
这个适配的方法很多，我就写我自己用的方法。大家也可以去我回答过得一个问题那里看更详细的说明！移动端适配问题
function getFontSize(){
    var doc=document,win=window;
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        //如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
        if(clientWidth>750){clientWidth=750}
        //设置根元素font-size大小
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
    //屏幕大小改变，或者横竖屏切换时，触发函数
    win.addEventListener(resizeEvt, recalc, false);
    //文档加载完成时，触发函数
    doc.addEventListener('DOMContentLoaded', recalc, false);
}
//使用方式很简单，比如效果图上，有张图片。宽高都是100px;
//样式写法就是
img{
    width:1rem;
    height:1rem;
}
//这样的设置，比如在屏幕宽度大于等于750px设备上，1rem=100px；图片显示就是宽高都是100px
//比如在iphone6(屏幕宽度：375)上，375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px;

6.封装成形
写了这么多的操作，小伙伴应该发现了一问题，全局函数太多了

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//这样的话，封装了几个操作，就增加了几个全局函数，污染了全局变量，在开发中应该尽量避免全局变量。不说别的，如果一个项目，几个人开发，很有可能会造成命名的冲突。
function setUrlPrmt(obj){..}
function getUrlPrmt(url){..}
function upsetArr(obj){..}
//所以，建议的封装姿势是
var myJS={
    setUrlPrmt:function(obj){..},
    getUrlPrmt:function(url){..},
    upsetArr:function(arr){..},
}
这样就算别人也写这样的函数,也不会造成冲突。全局变量也只有一个，加上别人也不会很多！
var otherJS={
    setUrlPrmt:function(obj){..},
    getUrlPrmt:function(url){..},
    upsetArr:function(arr){..},
}
//最后，封装的效果是
var myJS={
    //去除字符串空格
    trim:function(obj){..},
    //字母大小写切换
    changeCase:function(obj){..},
    //字符串循环复制
    repeatStr:function(str){..},
    .....
}
//如果是es6的模块化开发，大家也可以
let myJS={
    //去除字符串空格
    trim:function(obj){..},
    //字母大小写切换
    changeCase:function(obj){..},
    //字符串循环复制
    repeatStr:function(str){..},
    .....
}
//暴露模块，里面的方式大家也可以用es6方式实现，代码至少会少一点！
export {myJS}
可能有小伙伴会有疑问，这样封装，调用有点麻烦，为什么不直接在原型上面封装，调用方便。比如下面的栗子！
String.prototype.trim=function(type){
    switch (type){
        case 1:return this.replace(/\s+/g,"");
        case 2:return this.replace(/(^\s*)|(\s*$)/g, "");
        case 3:return this.replace(/(^\s*)/g, "");
        case 4:return this.replace(/(\s*$)/g, "");
        default:return this;
    }
}

js数组去重

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Array.prototype.unique = function() {
  return Array.from(new Set(this));
}
Array.prototype.unique = function() {
  var result = [];
  this.forEach(function(v){
    if(!result.includes(v)){
      result.push(v);
    }
  })
  return result;
}
Array.prototype.unique = function() {
  var json = {};
  var result = [];
  this.forEach(function(value){
    var type = Object.prototype.toString.call(value).match(/\s(\w+)/)[1].toLowerCase();
    if(!((type + '-'+value) in json)){
      json[type + '-'+value] = true;
      result.push(value);
    }
  })
  return result;
}
Array.prototype.unique = function() {
  var sortArr = this.sort(),
    i = 0,
    len = sortArr.length;
  for(; i < len; i++){
    if(sortArr[i] === sortArr[i++]){
      sortArr.splice(i,1);
      i--;
    }
  }
  return sortArr;
}
//filter是es5中新增的数组的一个方法。不了解的同请阅读Array.prototype.filter()
Array.prototype.unique = function() {
  var sortArr = this.sort();
  return sortArr.filter(function(v,i,context){
    return v !== context[i+1];
  })
}
var sortArr = this.sort(), result = [];
  sortArr.reduce((v1,v2) => {
    if(v1 !== v2){
      result.push(v1);
    }
    return v2;
  })
  result.push(sortArr[sortArr.length - 1]);
  return result;
}

生成任意长度的随机字符

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
33
34
35
36
function getRandomStr(len) {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for( var i=0; i < len; i++ )
                text += possible.charAt(Math.floor(Math.random() * possible.length));
            return text;
}
var  aaa = getRandomStr(10000);
console.log(aaa);
``` 
> ps 可以采用es6 string.repeat() 模拟 也可以使用mockjs来模拟 express充当服务器也可以用来模拟
### 浏览器UA 
```javascript
var browser = {
    versions: function() {
        var u = navigator.userAgent,
            app = navigator.appVersion;
        return {
            //移动终端浏览器版本信息             
            trident: u.indexOf('Trident') > -1, //IE内核             
            presto: u.indexOf('Presto') > -1, //opera内核             
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核             
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核             
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端             
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端             
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器             
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器             
            iPad: u.indexOf('iPad') > -1, //是否iPad             
            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部         
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

trim ES6有

1
2
3
4
5
6
7
8
String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
function myTrim(s) {
    return s.replace(/(^\s*)|(\s*$)/g, "");
  }

util 非空

1
2
3
4
5
6
//Util
var Utils = Utils || {};
Utils.isEmpty = function (val) {
    var value = "" + val;
    return $.isEmptyObject(value) || value.trim().length === 0 || $.trim(value).length === 0;
}

mcts蒙特卡洛搜索 蒙特卡洛搜索树 人工智能

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import java.util.LinkedList;
import java.util.List;
import java.util.Random;
public class TreeNode {
    static Random r = new Random();
    static int nActions = 5;
    static double epsilon = 1e-6;
    TreeNode[] children;
    double nVisits, totValue;
    public void selectAction() {
        List<TreeNode> visited = new LinkedList<TreeNode>();
        TreeNode cur = this;
        visited.add(this);
        while (!cur.isLeaf()) {
            cur = cur.select();
            visited.add(cur);
        }
        cur.expand();
        TreeNode newNode = cur.select();
        visited.add(newNode);
        double value = rollOut(newNode);
        for (TreeNode node : visited) {
            // would need extra logic for n-player game
            node.updateStats(value);
        }
    }
    public void expand() {
        children = new TreeNode[nActions];
        for (int i=0; i<nActions; i++) {
            children[i] = new TreeNode();
        }
    }
    private TreeNode select() {
        TreeNode selected = null;
        double bestValue = Double.MIN_VALUE;
        for (TreeNode c : children) {
            double uctValue = c.totValue / (c.nVisits + epsilon) +
                       Math.sqrt(Math.log(nVisits+1) / (c.nVisits + epsilon)) +
                           r.nextDouble() * epsilon;
            // small random number to break ties randomly in unexpanded nodes
            if (uctValue > bestValue) {
                selected = c;
                bestValue = uctValue;
            }
        }
        return selected;
    }
    public boolean isLeaf() {
        return children == null;
    }
    public double rollOut(TreeNode tn) {
        // ultimately a roll out will end in some value
        // assume for now that it ends in a win or a loss
        // and just return this at random
        return r.nextInt(2);
    }
    public void updateStats(double value) {
        nVisits++;
        totValue += value;
    }
    public int arity() {
        return children == null ? 0 : children.length;
    }
}

jquery ajax函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var Ajax = function(url, type success, error) {
    $.ajax({
        url: url,
        type: type,
        dataType: 'json',
        timeout: 10000,
        success: function(d) {
            var data = d.data;
            success && success(data);
        },
        error: function(e) {
            error && error(e);
        }
    });
};
// 使用方法：
Ajax('/data.json', 'get', function(data) {
    console.log(data);
});

jsonp 跨域的封装

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
function jsonp(config) {
    var options = config || {};   // 需要配置url, success, time, fail四个属性
    var callbackName = ('jsonp_' + Math.random()).replace(".", "");
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oHead.appendChild(oScript);
    window[callbackName] = function(json) {  //创建jsonp回调函数
        oHead.removeChild(oScript);
        clearTimeout(oScript.timer);
        window[callbackName] = null;
        options.success && options.success(json);   //先删除script标签，实际上执行的是success函数
    };
    oScript.src = options.url + '?' + callbackName;    //发送请求
    if (options.time) {  //设置超时处理
        oScript.timer = setTimeout(function () {
            window[callbackName] = null;
            oHead.removeChild(oScript);
            options.fail && options.fail({ message: "超时" });
        }, options.time);
    }
};
// 使用方法：
jsonp({
    url: '/b.com/b.json',
    success: function(d){
        //数据处理
    },
    time: 5000,
    fail: function(){
        //错误处理
    }       
});

常用正则表达式
手机号

1
2
3
4
var validate = function(num) {
    var exp = /^1[3-9]\d{9}$/;
    return exp.test(num);
};

前端正则工具

常用js函数

  • 返回顶部

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $(window).scroll(function() {
        var a = $(window).scrollTop();
        if(a > 100) {
            $('.go-top').fadeIn();
        }else {
            $('.go-top').fadeOut();
        }
    });
    $(".go-top").click(function(){
        $("html,body").animate({scrollTop:"0px"},'600');
    });

  • 阻止冒泡

    1
    2
    3
    4
    5
    6
    7
    8
    function stopBubble(e){
        e = e || window.event;  
        if(e.stopPropagation){
            e.stopPropagation();  //W3C阻止冒泡方法  
        }else {  
            e.cancelBubble = true; //IE阻止冒泡方法  
        }  
    }

  • 全部替换replace

1
2
3
4
var replaceAll = function(bigStr, str1, str2) {  //把bigStr中的所有str1替换为str2
    var reg = new RegExp(str1, 'gm');
    return bigStr.replace(reg, str2);
}

  • 获取浏览器url中参数的值

    1
    2
    3
    var getURLParam = function(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
    };

  • 数组去重

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var unique = function(arr) {
        var result = [], json = {};
        for (var i = 0, len = arr.length; i < len; i++){
            if (!json[arr[i]]) {
                json[arr[i]] = 1;
                result.push(arr[i]);  //返回没被删除的元素
            }
        }
        return result;
    };

  • 操作cookie

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    myObj.setCookie = function(cname, cvalue, exdays){
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = 'expires='+d.toUTCString();
        document.cookie = cname + '=' + cvalue + '; ' + expires;
    };
    myObj.getCookie = function(cname) {
        var name = cname + '=';
        var ca = document.cookie.split(';');
        for(var i=0; i< ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
        }
        return '';
    };

示例

HB 定义一些自定义空间 存放常用的方法和变量

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
//定义全局变量  通用库
//通用域名地址
const BASE_PATH = '//dev.m.12308.com';
const HB = {
  // 是否是debug 模式
  debug : false,
  //host base
  HOST_BASE : BASE_PATH,
  // success code 响应成功 code
  PER_PAGE_CNT : 50,
  LOADING_TEXT : '加载中...',
  SC : '0000',
  // 接口访问的基本路径
  BASE : '//192.168.1.120:8100',
  // 域名和端口
  BAIDU_MAP_AK : 'gOxFzMG1XwXoH8OyY7mdAnMdf6EKsPSt',
  // 配置的URL 跳转地址
  URL : {
    // 活动中心地址
    HOME_NOTICE_URL : BASE_PATH + "/user/busTicket/activity",
    // 订单列表 地址
    HOME_ORDER_URL : BASE_PATH + '/user/busTicket/orderList',
    // 个人中心 地址
    HOME_USER_URL : BASE_PATH + '/user/busTicket/personal',
    // 登录的项目地址
    LOGIN_URL : BASE_PATH + "/user/login",
    // 跳转到登录页面并重定向当前页
    LOGIN_URL_REDIRECT : BASE_PATH + "/user/login?redirectURL=" + encodeURIComponent(window.location.href),
    //火车票的项目地址
    HOME_TRAIN:"//dev.m.12308.com/train",
  },
  COMMON:{
    PAY_URL : '',
  },
  //正则验证库
  R:{
    MOBILE:/0?(13|14|15|18)[0-9]{9}/,
  },
  //方法库
  M:{
    getCookie: function(c_name) {
    if (document.cookie.length > 0) {
      var c_start = document.cookie.indexOf(c_name + "=");
      if (c_start != -1) {
        c_start = c_start + c_name.length + 1;
        var c_end = document.cookie.indexOf(";", c_start);
        if (c_end == -1) {
          c_end = document.cookie.length
        }
        return unescape(document.cookie.substring(c_start, c_end))
      }
    }
    return ""
   },
    setCookie: function(c_name, value, expiredays) {
      var exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);
      document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString() + ";path=/;")
    },
    //
    test:function(str,val){
      var regex = new RegExp(str);
      return  regex.test(val);
    },
    // 加载百度地图
    loadBaiduJScript:function () {
      console.log("loadBaiduJScript");
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = "async";
      script.src = "http://api.map.baidu.com/api?v=2.0&ak=vi1EKp70TLnDmSajXQ3NOxldE58nO828&callback=init";
      document.body.appendChild(script);
    },
    // 获取 手机号
    getCurrentUserPhone: function() {
      let userInfo = localStorage.getItem("myInfor");
      let userPhone = '';
      if (userInfo != null && userInfo.length > 0) {
        userPhone = JSON.parse(userInfo).userName;
      }
      return userPhone;
    },
    // 获取 authToken
    getCurrentAuthToken: function() {
      let auth = localStorage.getItem("authToken");
      let result = '';
      if (auth != null && auth.length > 0 && auth != 'undefined') {
        result = auth;
      }
      return result;
    },
    // wx or h5
    getChannel: function() {
      let ua = window.navigator.userAgent.toLowerCase();
      let result = 'h5';
      if (ua != null && ua.indexOf('micromessenger') > -1) {
        result = 'wx';
      }
      return result;
    },
    // 是否是空 空对象 空串(包含trim后为空的串) 空数组  均返回TRUE 其他返回false 
    isEmpty : function(obj) {
      if (obj == null) return true;
      if (typeof obj=== 'string' && obj.trim().length === 0) return true;
      if (typeof obj === 'object' && Object.keys(obj).length === 0) return true;
      if (obj.hasOwnProperty('length') && obj.length === 0)  return true;
      return false;
    }
  },
  // Toast:Toast,
  toast:HbToast
}
window.HB = HB;

展开全文 >>

vue组件

常常会使用到vue封装的各种组件 今天就推荐下

  • NProgress 浏览器顶部加载进度条
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     //base
     // npm i nprogress -S
    import NProgress from 'nprogress' // progress
    import 'nprogress/nprogress.css';// Progress 进度条 样式
    import router from './router/'
    Vue.use(ElementUI)
    Vue.use(router);
    router.beforeEach((to, from, next) => {
      NProgress.start(); 
      next();
    });
    router.afterEach(() => {
      NProgress.done(); // 结束Progress
    });

favicon webpack中的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const resolve = require('path').resolve;
// webpack.config.js
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],
            minChunks: 3,
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            // 关键代码
            favicon: resolve('./src/favicon.ico')
        })
    ],
1
2
3
// vue源码
var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);
var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;

tree-shaking 尽量使用 import * as XX from 'js_modules' 来引入模块 配合webpack2.0 的tree-shaking 能实现代码有效体积减少

1
2
3
4
5
6
7
8
9
10
11
12
1）用import/export来改造代码，这是tree-shaking的基础，ES6的模块支持继承，可以正确执行tree-shaking。
2）webpack的打包非压缩的情况下会保留unused function，压缩版才会真正去掉。
3）尽量使用import * as uu from './invoke.js'隐式语法而无须使用import {ddd} from './invoke.js'这种显式语法。
4）我们的业务接入tree-shaking特性后，代码体积有减少30%。
作者：码匠之心
链接：http://www.jianshu.com/p/7bd8d5e87965
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

// .babelrc
参考bable

1
2
3
4
5
6
7
8
9
10
11
// .babelrc的配置推荐使用babel-preset-env，这是目前最新的解决方案，会非常灵活的通过参数指定来兼容当前的环境。    
{
  "presets": [
    ["env", {
      "target": {
        "browsers": ["ios > 7", "android >= 4"]
      },
      "modules": false
    }]
  ]
}

展开全文 >>

跨域问题

跨域问题

跨域访问是前后端开发中常常遇到的问题 采用cors或部署的时候使用nginx反向代理都是可以解决跨域访问的问题的

node+express 解决跨域

vue-resource代码(其实就是ajax技术)：

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
this.$http.get({url:"http://localhost:3000/getdata"})
.then(function (data) {
    console.log(data)
},function (error) {});
```    
nodejs部分：    
```js
var express = require('express');
var app = express();
//设置跨域访问 控制好响应头
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
app.get('/getdata', function(req, res) {
    res.send({id:req.params.id, name: req.params.password});
});
app.listen(3000);
console.log('Listening on port 3000...');

http-proxy-middleware 解决跨域问题 只能在开发环境中使用

proxyTable: {
‘/list’: {
target: ‘http://api.xxxxxxxx.com‘,
changeOrigin: true,
pathRewrite: {
‘^/list’: ‘’
}
}
}
vue-cli的这个设置来自于其使用的插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明，似乎还支持websocket，很强大的插件。

webpack-dev-server 设置代理解决跨域问题 只能在开发环境中使用

详解见webpack的配置 (webpack-dev-server配置)[https://doc.webpack-china.org/configuration/dev-server/]
webpack-dev-server 设置代理 http://www.jianshu.com/p/3bdff821f859

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//webpack 中dev-server设置带来 解决跨域问题
module.exports = {
 ...此处省略一万字
 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
     target: 'http://localhost',
     changeOrigin: true,
     secure: false
    }
 }
 },
};

nginx 设置代理 解决跨域问题

常用实例 采用nginx反向代理来解决跨域问题

js
1
2
3
4
5
location /api {
  rewrite  ^.+apis/?(.*)$ /$1 break;
  include  uwsgi_params;
  proxy_pass   http://localhost:1894;
 }

eg 开发中常用

配置localhost
使用 localhost 127.0.0.1 本地IP都可以进行访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 server {
        listen       80;
        server_name  localhsot;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
          ### 配置成本地webpack打包生成的路径
          root    D:/infore/infore-web/dist/;
          index  index.html index.htm;
        }
        location /api {
            ### 接口代理请求地址
            proxy_pass http://192.168.31.52:8089/api;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # proxy_cookie_path /disconf /api;
            # proxy_set_header   Cookie $http_cookie;
        }
###

展开全文 >>

小知识点集汇二

小知识点集汇二

短网址生成

微信等部分网址不支持中文路径的识别 可以采用短网址生成器来生成新的短网址坐map映射

http://dwz.cn/ 百度短网址生成地址 还要对应api可以对接

地图慧 直接利用数据 结合地图 生成相对应的表格

http://c.dituhui.com/

TWaver HTML5 3D 商用软件 3D立体展示解决方案

http://www.servasoft.com

YML 配置文件的书写

阮一峰YAML教程

for ... in 遍历对象的属性

for ... of 遍历数组
Array.forEach(value, index,orgDataArray) 遍历

cdn网站推荐 https://cdnjs.com/

当然，用别人的 CDN 都是不保险的，所以建议在 CDN 读取失败的时候从自己服务器提供：

1
2
3
4
5
6
7
8
9
10
11
<script src="//http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script><script>   
if (!window.jQuery) {    
  var script = document.createElement('script');    
  script.src = "/js/jquery.min.js";    document.body.appendChild(script);
}
</script>
作者：顾轶灵
链接：https://www.zhihu.com/question/20227463/answer/14403302
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

关于路基 网页路径 最好是写成相对路径

资源加载 https 和 http 或其他默认协议
http://cdnjs.com/xxx.js 错
//cdnjs.com/xxx.js 对

/assets/img/xxx.jpg 绝对路径 采用/ 标识根路径 不推荐
./assets/img/xxx/jpg 推荐 ./当前同级目录 ../上级目录 ./xxx/ 多级目录

js中 记住 2点关于函数和变量声明

  • 函数和变量声明提前
  • 函数声明优先于变量声明

展开全文 >>

视频直播流web播放

视频直播放映解决方案

分为PC-web端和移动web端

pc-web端采用Ckplay播放器 通过RTMP协议 传输视频流
mobile-web端采用h5 video标签 通过HLS 传输视频流

核心代码示例

  • pc-web端 ckplayer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--pc-web端 ckplayer-->
<body>
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
	var flashvars={
    //配置视频地址
		f:'rtmp://192.168.31.31:1935/live/stream',
		c:0,
		b:1,
    //配置封面
		i:'http://www.ckplayer.com/static/images/cqdw.jpg'
		};
    // 具体配置 参考和查看 [http://www.ckplayer.com/tool/flashvars.htm](http://www.ckplayer.com/tool/flashvars.htm)
	var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
	CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
</script>
  • mobile-web 端[HTML5 player]
    1
    2
    3
    4
    <video controls autoplay webkit-playsinline>
       <source src="http://192.168.31.31:9090/live/stream.m3u8" type="application/vnd.apple.mpegurl">
       <p class="warin">Your browser does not support HTML5 video</p>
    </video>

展开全文 >>

小知识

vue spa 滚动行为的保存 需要启用history模式 参看https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html

flex布局 flex布局的兼容性 部分需要添加 -webkit前缀

理清 主轴 侧轴(和主轴垂直的) justify-content 设置主轴的分布 align-items设置侧轴的分布

JSON 对象最后一个属性列 结尾 别用,

1
2
3
4
5
6
var json = {
    "name":'张三',
    "age" : 24    // ', 这里别打逗号或分号 养成好的习惯
    
}
最好启用 eslint来规范书写习惯

array splice slice

  • slice 浅复制数组 slice(index, end);
  • splice 删除和添加数组元素 splice(index, count. [….add-item]);

国内公开API 可用来写demo 测试数据

https://github.com/jokermonn/-Api/blob/master/DoubanMovie.md

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

我就是我 不一样的烟火 <br/> 解决问题 <br/> 让正确的事情持续发生