前端如何写出一手高质量的JavaScript代码（一）

作为一名前端开发，大家都知道javascript是一门动态类型的语言 ，所以其具有很大的灵活性，也正是因此，造成了Javascript写的代码具有很多的不确定性，废话不多说，下面我会从 代码的健壮性、可读性、可复用性、可拓展性 来说说，怎么写出一手好的代码。

一、健壮性

举个粟子，我们经常计算两个数相加，作为结果返回。于是有了:

参数方面

function add(a,b){
	return a + b ;
}

看起来没什么问题，当我们传入两个数字，比喻 1 和 2，这个函数可以正确地给我们返回两者相加的结果（3），但是这是比较理想的状态下，如果，我们传入的参数不是数字类型，那么这个函数就不能正确给我返回结果了。
所以，我们要养成个习惯，对传入的不确定的参数进行必要的判断，可以进行对上面的代码进行如下改进：

function add(a,b){
	if(typeof a==='number' && typeof b==='number'){
		return a+b;
	}else{
		throw new Error("a or b is not number")
	}
}

参数方面就这样进行了吗？答案肯定不是，有没有想过，当参数是个对象或者说是某个固定的类时，这个时候我们要怎么做呢？
看过一些插件源码的人都可能知道。这情况在很多的插件或者是每个库的源码都可以看到，拿现在国内满天下都是Vue来说，看过Vue源码，Vue里面（建造者模式）就使用这样的判断 ：

 function Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

这个是一个对于类的判断。

// 参数是某个类的实例化对象
	function class1(){
		
	}
 	function a(obj){
		 if(obj instanceof class1){
			 
		 }else{
			 
		 }
 	}

下面是对于对象，有个原则 —合并选项

function Vue(config){
	var _default={
		el:document,
		template:"<div></div>"
	}
	for (let key in _default){
		config[key] = config[key] || _default[key]
	}
}

区分类和方法
javascript的函数分为普通函数和构造函数,在ES6没出来之前，构造一个类，我们都是通过new 首大写字母的函数（构造函数）来 制造一个类。

 function f1(){
	if(this instanceof f1){
		 this.a = 123;
	 }else{
		 return new f1();
	 }
 }
 f1();

易错代码

 var a = {
	 b:[
		 {
			 c:23
		 }
	 ]
 }
 
 a.b[0].c;
 a && a.b[0] && a.b[0].c

变量权限

 var a = {
	 b:123,
 }
 Object.defineProperty(a,'b',{
	 writable:false,
 })

二、可读性

// 语义化

// 命名规范

// 常量 全大写

const PTE = 3.1415926;

// 类 首字母大写，驼峰写法
// 一般的变量和方法 ，小驼峰
// 临时变量 — 下划线开头

function f1(){
	var _this = this;
}

// 结构清晰
// javascript结构不清晰 回调 if else

// 连接发三个请求

$.ajax({
	$.ajax
})

async function a(){
	await ajax1;
	await ajax2;
	await ajax3;
}

三、可复用性

Dry远则

逻辑复用，提取代码

创建公用模板 子类 父类

四、可拓展性

面临改需求 ，不能不工作，不能拿刀，只能改代码

模块分明 单一原则 划分模块，保证模块职能单一

编程就是思想的交流 模块+模块之前的传值

耦合度低， 彼此知道的非常少 彼此更改不会互相影响

合适的扩展技巧