前端规范的一些理解

前端开发有很多乐趣，自己要学习的地方还有很多，得跟随潮流保持学习状态不断更新自己的技术栈，根据之前看过的文章和自己平时遇到的总结了下前端规范，时刻提醒自己注意代码规范，也供大家参考，有不正确的地方希望得到各位大牛的指正。

推荐用法

• 推荐使用vsCode进行开发，轻量级界面美观，调试方便，代码自动格式化 vscode相关

• 推荐使用箭头函数，可以很好地解决了this的指向问题，并且更加简洁明了

  常规函数写法

  function getPersonList() {
      // do something
      return personList
  }
  

  箭头函数

  const getPersonList = () => personList
  

• 推荐使用es6语法对字符串进行拼接，例如

  var message = `Hello ${name}`
  

• 推荐使用es6解构赋值，代码更加简洁明了

  常规写法

  var data = { name: 'zjf', age: 1 };
  var name = data.name;
  var age = data.age;
  

  解构写法

  let data = { name: 'zjf', age: 1, height: 1 };
  let { name, ...rest } = data;
  

• 推荐使用lodash/moment.js工具库，可以运行在浏览器环境，也可以运行在 Node.js 环境，都是在原生方法上进行了封装，如果非必要推荐函数式编程

  • lodash 是一个现代、高效、模块化的 JS 功能包 lodash库

  // 存在很大的问题，personList如果被不小心处理成非数组，就会进行报错
  personList.map((value, key) => {
      // do something
  })
  // 代码不够简洁
  for(let i=0; i<LEN ; i++) {
      // do something
  }
  // 推荐写法，lodash会进行一些处理,如果personList为null,会返回空数组
  _.map(personList, value => {
      // do something
  })
  

  • moment.js 主要用来处理日期时间相关的操作 moment库

• 推荐学习使用devTool代码调试工具 chrome-devtool

• 学习Promise的内部机制 Promise实现原理

• 推荐学习Event-loop事件轮询，当出现异步问题时候将会帮助更好地帮助你找到出错原因
  彻底搞懂浏览器Event-loop Event loop——浏览器和Node

• 学习各个框架的源码，express，react，vue对自己的提高有很大的帮助

• 学习webpack的知识 webpack4-用之初体验，一起敲它十一遍

• 推荐使用axios，说白了就是在你请求前进行拦截封装，可以自定义地进行配置，支持请求取消,推荐使用封装的方法，获取axios返回的data数据，逻辑上可以上获取一层，只关注接口和传参，而不需要每次套上固定的url，method

  export function post(url, data, config) {
    return new Promise((resolve, reject) => {
      $http
        .post(url, data, config)
        .then(res => {
          resolve(res.data);
        })
        .catch(err => {
          reject(err.data);
        });
    });
  }
  

• 推荐安装一些官网的依赖或者插件，尽量避免使用github上个人开发的库

vue相关

• v-for中不要使用索引作为key，key的本质其实就是一个id，在diff更新操作的时候如果使用index作为索引，则当数组长度进行更新的时候，会增加render的成本，降低性能

• 组件开发推荐使用JSX语法，更加高效便捷

  Vue.component('xxx', {
      props: {},
      render(h) {
          return (
              <div>{this.slotScope.default()}</div>
          )
      }
  })
  

• vue中尽量增加data属性的可读性，非必要情况下不要初始化成各种奇形怪状的形式，一方面可读性不强，另一方面后期扩展性不强，比如

  // 不推荐
  data() {
      return {
          msg: [[], []]  
      }
  }
  

• 本地样式不要污染全局，写上scoped

• 慎用deep watch，因为vue底层会通过notify进行更新一直遍历到最底层对象，增加性能上的消耗

• 减少组件之间的耦合度，尽量避免一个值传递通过多层组件的情况，这种情况推荐使用vuex状态管理

• 如果是涉及到数组生成元素，推荐添加key增加优化效率

• 如果属性是数组，通过arr[index]进行修改不会进行更新，原因是Object.defineProperty不支持数组，所以vue改写了数组的所有方法，需要使用原生的数组方法才会进行更新

  var methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
  ];
  

  或者

  vue.$set(obj, key, value)
  

• 使用vue中的小技巧高效开发 12个Vue.js开发技巧和窍门

• 封装css提高写样式效率 55个提高你CSS开发效率的必备片段

• 使用指令加速简化代码逻辑 这15个Vue指令，让你的项目开发爽到爆

格式规范

• 在复杂逻辑进行适当的功能拆分，一个函数处理一个功能，并增加注释，取合理的方法名，增加后期可读性, 不合理的写法比如

  // 很难辨别这个方法的返回值
  function showPersonList() {....} 
  // 很难知道方法的作用
  function msg() {}
  

  推荐如果返回值带is/should/has, 如果是处理相关的就使用动词作为开头，handler/use/send

  function hasPersonList() {}
  function sendMsg() {}
  

• 当逻辑过多的时候，不推荐使用if-else，推荐switch，增加代码可读性

• 命名规范，注释的作用是为了帮助后续理解和修改，而有意义的命名在一定程度上可以减少注释

  let fName = 'jackie'; // f指什么
  let firstPersonName = 'bob'; // 过长的变量名字不够简洁
  if (value.length < 8) {   // 长度为什么为8
  }
  let personLen = 4;  // 定义好了之后再也没用过
  

  上面这种只有本人才会看懂的命名不推荐,涉及到无用的变量需要注释或者删除

  // 有意义简洁命名
  let firstName = 'jackie';
  const MAX_PERSON_LIST = 8;
  if (value.length < MAX_PERSON_LIST) {
  }
  // let personLen = 4; 
  

• 尽量不要使用魔术字块，比如'1', '2'等等，推荐创建静态参数放入const文件，比如

  // const/base.js
  export const STATUS = {
      invalid: '0',
      valid: '1',
  }
  

• 注重代码的重构，减低后期维护成本