前端日常开发规范_前端不需要定义全局变量吗-CSDN博客

本文链接：https://blog.csdn.net/AmyGeng123/article/details/120206926

前端日常开发规范

编码规范

1. 可读性 --代码缩进添加注释

2. 变量和函数命名

  2.1 变量类型透明化 例如car或person。
  2.2 函数名应该以动词开始 , 例如getName()。返回布尔值的函数通常以is开头，比如isEnabled()。
  2.3 变量、函数和方法应该以小写字母开头，使用驼峰大小写（camelCase）形式，如getName()和isPerson。类名应该首字母大写，如Person、RequestFactory。常量值应该全部大写并以下划线相接，比如REQUEST_TIMEOUT。

3. 变量类型透明化 // 通过初始化标明变量类型

let found = false; // 布尔值 
let count = -1; // 数值 
let name = ""; // 字符串 
let person = null; // 对象

降低耦合性的方式

1. 解耦HTML/JavaScript

避免在JavaScript中创建大量HTML (以下为不推荐的示例)

// HTML紧密耦合到了JavaScript 
function insertMessage(msg) {  
  let container = document.getElementById("container");  
  container.innerHTML = `<div class="msg">  <p> class="post">${msg}</p>  <p><em>Latest message above.</em></p>  </div>`; }

2. 解耦CSS/JavaScript

现代Web应用程序经常使用JavaScript改变样式，因此虽然不太可能完全解耦CSS和JavaScript，但可以让这种耦合变成更松散。这主要可以通过动态修改类名而不是样式来实现，比如：

// CSS与JavaScript松散耦合 
element.className = "edit";

3. 解耦应用程序逻辑/事件处理程序

看下边的例子

function handleKeyPress(event) {  // 处理事件
  if (event.keyCode == 13) {  
    let target = event.target;  
    let value = 5 * parseInt(target.value);  
    if (value > 10) {             // 应用程序逻辑
      document.getElementById("error-msg").style.display = "block";  
      }  
    } 
  }

优化后的写法

function validateValue(value) {  
  value = 5 * parseInt(value);  
  if (value > 10) {  
    document.getElementById("error-msg").style.display = "block";  
    } 
  }  
function handleKeyPress(event) {  
  if (event.keyCode == 13) {  
    let target = event.target;  validateValue(target.value);  
    } 
  }

把应用程序逻辑从事件处理程序中分离出来有很多好处。首先，这可以让我们以最少的工作量轻松地修改触发某些流程的事件。如果原来是通过鼠标单击触发流程，而现在又想增加键盘操作来触发，那么修改起来也很简单。其次，可以在不用添加事件的情况下测试代码，这样创建单元测试或自动化应用程序流都会更简单。

编码惯例

1. 尊重对象所有权 (意思就是如果你不负责创建和维护某个对象及其构造函数或方法，就不应该对其进行任何修改。)

主要如下内容:

不要给实例或原型添加属性。
不要给实例或原型添加方法。
不要重定义已有的方法。

2. 不声明全局变量

如果有多个变量,可以用对象的形式来定义

3. 不要比较null

JavaScript不会自动做任何类型检查，因此就需要开发者担起这个责任。

function sortArray(values) {  
  if (values != null) { // 不要这样比较！  
  values.sort(comparator);  
  } 
}

function sortArray(values) {  
  if (values instanceof Array) { // 推荐  
  values.sort(comparator);  
  } 
}

应该如下这样操作
 如果值应该是引用类型，则使用instanceof操作符检查其构造函数。
 如果值应该是原始类型，则使用typeof检查其类型。
 如果希望值是有特定方法名的对象，则使用typeof操作符确保对象上存在给定名字的方法。

4. 使用常量

依赖常量的目标是从应用程序逻辑中分离数据，以便修改数据时不会引发错误。
需要定义为常量的值:

重复出现的值：任何使用超过一次的值都应该提取到常量中，这样可以消除一个值改了而另一个值没改造成的错误。这里也包括CSS的类名。
用户界面字符串：任何会显示给用户的字符串都应该提取出来，以方便实现国际化。
URL：Web应用程序中资源的地址经常会发生变化，因此建议把所有URL集中放在一个地方管理。
任何可能变化的值：任何时候，只要在代码中使用字面值，就问问自己这个值将来是否可能会变。如果答案是“是”，那么就应该把它提取到常量中。

性能

作用域意识

1. 避免全局查找
示例

function updateUI() {  
  let imgs = document.getElementsByTagName("img");  
  for (let i = 0, len = imgs.length; i < len; i++) {  
    imgs[i].title = '${document.title} image ${i}';  
    }   
    let msg = document.getElementById("msg");  
    msg.innerHTML = "Update complete."; 
  }

这个函数看起来好像没什么问题，但其中三个地方引用了全局document对象。如果页面的图片非常多，那么for循环中就需要引用document几十甚至上百次，每次都要遍历一次作用域链。
通过在局部作用域中保存document对象的引用，能够明显提升这个函数的性能，因为只需要作用域链查找. 如下所示

function updateUI() {  
  let doc = document;  
  let imgs = doc.getElementsByTagName("img");  
  for (let i = 0, len = imgs.length; i < len; i++) {  
    imgs[i].title = '${doc.title} image ${i}';  
    }   
    let msg = doc.getElementById("msg");  
    msg.innerHTML = "Update complete."; 
    }

2. 不使用with语句

选择正确的方法

1. 避免不必要的属性查找
尽量通过在局部变量中保存值来替代属性查找。
2. 优化循环
(1) 简化终止条件。因为每次循环都会计算终止条件，所以它应该尽可能地快。这意味着要避免属性查找或其他O(n)操作。
(2) 简化循环体。循环体是最花时间的部分，因此要尽可能优化。要确保其中不包含可以轻松转移到循环外部的密集计算。
(3) 使用后测试循环。最常见的循环就是for和while循环，这两种循环都属于先测试循环。do-while就是后测试循环，避免了对终止条件初始评估，因此应该会更快。

3. 展开循环
如果循环的次数是有限的，那么通常抛弃循环而直接多次调用函数会更快。
4. 其他性能优化注意事项

原生方法很快
switch语句很快。
如果代码中有复杂的if-else语句，将其转换成switch语句可以变得更快。然后，通过重新组织分支，把最可能的放前面，不太可能的放后面，可以进一步提升性能。

语句最少化

1. 多个变量声明

// 一条语句更好 
let count = 5,  
color = "blue", 
values = [1,2,3], 
now = new Date();

这里使用一个let声明了所有变量，变量之间以逗号分隔。这种优化很容易做到，且比使用多条语句执行速度更快

2. 插入迭代性值

let name = values[i++];

这一条语句完成了前面两条语句完成的事情。因为递增操作符是后缀形式的，所以i在语句其他部分执行完成之前是不会递增的。只要遇到类似的情况，就要尽量把迭代性值插入到上一条使用它的语句中。

3. 使用数组和对象字面量

// 一条语句创建并初始化数组 
let values = [123, 456, 789];  
// 一条语句创建并初始化对象 
let person = {  
  name: "Nicholas",  
  age: 29,  
  sayName() {  
    console.log(this.name);  
  } 
};

注意减少代码中的语句量是很不错的目标，但不是绝对的法则。一味追求语句最少化，可能导致一条语句容纳过多逻辑，最终难以理解

*[注释:] 本篇内容为学习<<JavaScript高级程序设计(第四版) >> 的时候摘录