zoukankan      html  css  js  c++  java
  • 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());
  • 相关阅读:
    【docker报错】starting container process caused "exec: "-P8080:8080": executable file not found in $PATH".
    java调用openoffice踩坑集
    SWERC 2019-2020 题解(全)
    【GYM102091】2018-2019 ACM-ICPC, Asia Nakhon Pathom Regional Contest F
    UVA10615 Rooks 二分图的边着色
    2020.07.20 牛客多校第四场
    2020.07.27 牛客多校第六场
    2020.07.18 牛客多校第三场
    Deepfake Video Detection Using Recurrent Neural Networks 阅读笔记
    网易互娱 8.7笔试 代码记录
  • 原文地址:https://www.cnblogs.com/wuxu-dl/p/14648534.html
Copyright © 2011-2022 走看看