• js规范


    一.命名

    1.文件夹命名:文件夹、文件的命名与命名空间应能代表代码功能,可读性强,如hub
    2.函数和变量命名:
    具有意义的驼峰命名,如hubList;
    变量函数名禁止使用关键字和保留字,禁止重新定义(不能重名)或定义不用
    3.常量:大写字母,如HUBLIST

    二.编码

    采用统一的缩进方式排版代码。缩进为2个ASCII空格,句末必须用分号结尾(待定,vue就无分号)

    三.注释

    1.单行注释

    // let str = []

    2.多行注释

    /**
    * 方法说明
    * @method getSum
    * @params {Number} firstNumber, secondNumber 第一个值和第二个值
    * @return {Number} 两个数之和
    */
    function getSum(firstNumber, secondNumber) {
        return firstNumber + secondNumber;
    }

    3..Js代码注释console.log和debugger再提交

    4..重要函数或者类等都要添加头描述

    四.字符串拼接

    应使用数组保存字符串片段,使用时调用join方法。避免使用+或+=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能。

    // good 
    let str = [];
    for (var i = 0; len = list.length; i < len; i++){
        str.push('<div>' + list[i] +'<div>');
    }
    fom.innerHTML = str.join('');
    
    
    // bad
    let str = [];
    for (var i = 0; len = list.length; i < len; i++){
        str += '<div>' + list[i] +'<div>';
    }
    fom.innerHTML = str.join('');

    五.ES6使用

    1.变量申明:let :不存在变量提升问题; 不能重复申明。

    2.常量申明: const:原理是内存地址不变。

    3.箭头函数:

    • 有名函数
    • let getCount = (firstNumber, secondNumber) => { return firstNumber + secondNumber; }
    • 无名函数

    (firstNumber + secondNumber) => {return firstNumber + secondNumber}

    • 箭头函数使用注意的问题: This指向定义者,内部无arguments对象,不能new(因为箭头函数的this就是指向定义本身),函数里面不要有太多的return
    • 函数的形参不超过7个,超过用数组,调用时实参和形参对应
    • 不能有重复的返回
    • 在循环内部声明函数慎用,因为是循环执行完成函数调用才会执行
    • Return后面不要写代码,并且不封装成if…then…else…

    4.导入和导出

    使用import和export,只能位于代码顶部和顶部,如果代码中部需要按需导入文件使用require

    5.解决地狱回调问题

     解决回调地狱有很多方法,比如:Promise 对象、Generator 函数、async 函数

    promise对象解决回调地狱

     采用链式的 then,可以指定一组按照次序调用的回调函数。这时,前一个 then 里的一个回调函数,返回的可能还是一个 Promise对象(即有异步操作),这时后一个回调函数,就会等待该 Promise对象的状态发生变化,才会被调用。由此实现异步操作按照次序执行。

    var sayhello = function (name) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          console.log(name);
          resolve();  //在异步操作执行完后执行 resolve() 函数
        }, 1000);
      });
    }
    sayhello("first").then(function () {
      return sayhello("second");  //仍然返回一个 Promise 对象
    }).then(function () {
      return sayhello("third");
    }).then(function () {
      console.log('end');
    }).catch(function (err) {
      console.log(err);
    })

    上面代码中,第一个 then 方法指定的回调函数,返回的是另一个Promise对象。这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolved,就继续执行第二个 then 里的回调函数。

    Generator 函数解决回调地狱

    // 用 co 模块自动执行
    var co = require('co');
    var sayhello = function (name, ms) {
      setTimeout(function (name,ms) {
        console.log(name);
      }, ms);
    }
    var gen = function* () {
      yield sayhello("xiaomi", 2000);
      console.log('frist');
      yield sayhello("huawei", 1000);
      console.log('second');
      yield sayhello("apple", 500);
      console.log('end');
    }
    co(gen());
  • 相关阅读:
    React项目升级遇到的问题复盘(2019-09-02)
    前端项目升级到React-router5中遇到的问题解决方案以及思路
    三行Jquery代码实现简单的选项卡
    开放-封闭原则
    单一职责原则
    简单工厂模式(c++实现)
    博客园使用MarkDown格式记录博客
    Qml 的Image对应的source不变,但是图片内容改变却不会刷新的解决方案
    Qt中第一请求web api连接返回缓慢问题
    Qt的pro文件工程配置
  • 原文地址:https://www.cnblogs.com/wuxu-dl/p/14648534.html
Copyright © 2020-2023  润新知