Javascript编码原则

一、 各司其职

结构行为分离，js中尽量少写样式修改，尽量只保留基本逻辑代码，用class操作css，这样代码更为简洁，可读性更强。简单逻辑甚至可以只使用css完成。总之应该避免js直接操作样式

二、 组件封装

注意组件复用性、拓展性，避免重复“造轮子”。
以轮播图为例，首先写好html结构

<template>
      <div class='xtx-carousel'>
        <ul class="carousel-body">
          <!-- 所有图片列表 -->
          <li class="carousel-item fade">
            <RouterLink to="/">
              <img src="" alt="">
            </RouterLink>
          </li>
        </ul>
        <!-- 左箭头 -->
        <a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
        <!-- 右箭头 -->
        <a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
        <!-- 计数器 -->
        <div class="carousel-indicator">
          <span v-for="i in 5" :key="i"></span>
        </div>
      </div>
</template>

之后写好js框架，决定行为设计

import { ref } from 'vue'
export default {
  name: 'swiper',
  props: {
    sliders: {
      type: Array,
      default: () => []
    }
  },
  setup () {
    // 记录图片的下标值变量
    const index = ref(0)
 
    return { index }
  }
}

最后使用css实现展示效果

封装完成后的组件引用时只用写<Swiper><Swiper/>,在react、vue中还可以进一步将轮播内容封装起来，使用props.children动态更改轮播内容，进一步增强复用性

三、 过程抽象

可以将复杂的过程封装成函数，形成闭包直接调用，不需要在意过程细节，类似于api的调用，可以选择命令式、声明式的编程方式

四、 代码质量优化

1、减少全局变量使用

每个 JavaScript 执行环境都有一个全局对象 例如： 浏览器窗口的 window 对象, 可在函数外部使用 this 关键字进行访问。JavaScript 中在函数外部创建的每一个变量都是全局变量， 可以在整个执行环境中的各个地方使用 例如：下面的定义 globalVar 变量可以在代码块中的各个部分访问， 即使在不同的 script 标签内。
而在 function foo 中定义的 localVar 变量， 就只局限于 foo 函数的作用域内可以访问

<script>
    var globalVar = 'feifeiyu'
    function foo() {
        var localVar = 'feiyu'
        console.log('global foo:', globalVar) // => feifeiyu
        console.log('local foo:', localVar)  // => feiyu
    }
    console.log('global:', globalVar)  // => feifeiyu
    console.log('global window1:', window.globalVar) // => feifeiyu
    console.log('global window2:', window['globalVar'])  // => feifeiyu
    // console.log('local:', localVar) // error
</script>
<script>
    console.log('global2:', globalVar)
</script>

由上例中想到， 如果一个页面中如果有两块独立的代码中， 包含有相同名称的变量， 但却有着不同的作用时， 会引起程序运行出错。在其他的程序中为了解决这个问题引入了命名空间的概念， 例如： C++ 有个专门的关键字 namespace 来声明命名空间。在 JavaScript 中没这样的关键字来控制命名空间， 因此， 为了避免变量在全局作用域中冲突， 在同一个页面中应该尽可能地减少全局作用域中的使用。如何减少全局变量数量， 大致的解决方案有两种， 一种是人为去构造 JavaScript 的命名空间， 这种模式相对复杂不常用; 另一种是采用自执行即使函数(self-execting immediate funtionsl)来实现。

2、 关注变量提升

变量提升是 JavaScript 代码编写中容易忽略的一个点。JavaScript 允许在函数任意地方声明多个变量， 无论在哪里声明， 效果都等同于在函数顶部声明， 这就是变量提升（hoisting)。当先使用变量后定义变量，将会导致逻辑上的错误。例如：

(function() {
    var myName = 'feifeiyu'
    function func() {
        console.log('myName 1:', myName)  // => myName 1: undefined
        var myName = 'feiyu'
        console.log('myName 2:', myName)  // => myName 2: feiyu
    }
}())

上述代码执行后， 安装开发者的意图， 第一个console 输出的应该是 myName 1: feifeiyu, 第二个 console 输出的应该是 feiyu, 然而意想不到的结果出现了， 第一个 console 输出的是 undefined。 导致这个的元凶是 JavaScript 的变量提升， JavaScript 解释器在执行时， 函数中的 myName 会提升到函数 func 最顶部去定义， 本质上述代码是按如下逻辑去执行的：

(function() {
    var myName = 'feifeiyu'
    function func() {
        var myName  //此时 myName 是 undefined
        console.log('myName 1:', myName)  // => myName 1: undefined
        myName = 'feiyu'
        console.log('myName 2:', myName)  // => myName 2: feiyu
    }
}())