作为一名前端开发,大家都知道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远则
逻辑复用,提取代码
创建公用模板 子类 父类
四、可拓展性
面临改需求 ,不能不工作,不能拿刀,只能改代码
模块分明 单一原则 划分模块,保证模块职能单一
编程就是思想的交流 模块+模块之前的传值
耦合度低, 彼此知道的非常少 彼此更改不会互相影响
合适的扩展技巧