灵活的JavaScript

Posted 2020-08-19

　　自己对javascript的原型，继承，闭包，多少也还是了解些，但是平时写的东西都挺简单的，也用不上，所以感觉提升不大。于是乎买了一本《JavaScript设计模式》来提高下自己，这本是百度写的，不是国外的那本，看了第一章，哇靠。。。写的真好，带入感真的强，看小说的朋友应该都懂。

　　平时也都会看一些别人的博客之类的，但是平时不怎么用，所以久而久之也就忘记了。这次便打算一边看，一边将自己的理解和书里的一些东西做个简单的笔记，以后也好看看。

　　1.用对象收编变量

　　刚开始接触前端的那会儿，写一些方法都是直接定义一堆函数或者干脆写在onclick事件里，后来才知道可以通过对象或者函数去封装，使我们的代码更加简洁并且可维护性高。

　　对于一些小项目，我们可能只需要将函数或者属性直接写在一个通过字面量的方式所创建的对象里就够了，比如：

var obj = {
  name: ‘macbai‘,
  func1: function () {},
  func2: function () {}
}

　　但是随着项目的增大，我们可能会遇到类似于全局变量冲突，或者需要通过继承等，来使代码更加精简等问题，这个时候我们便会需要用到构造函数来创建对象，然后来封装一系列的方法和属性等，比如：

var Check = function (nameType) {
  this.nameType = nameType;
};
Check.prototype.checkName = function () {};
Check.prototype.checkAcount = function () {};

// 使用时
var loginCheck = new Check();
loginCheck.checkAcount()

　　因为每次通过关键字new创建一次对象，就会新创建一个实例，所以我们把可以共用的属性和方法放在原型上，不能共用的放在自身里。

　　2.像jQuery一样链式调用方法

　　写jQuery时经常这样$(‘#id‘).addClass(‘xx‘).siblings().removeClass(‘xx‘)，其实实现还是很简单的：

var Check = function (nameType) {
  this.nameType = nameType;
};
Check.prototype.checkName = function () {
  ...;
  return this;
};
Check.prototype.checkAcount = function () {
  ...;
  return this;
};

// 使用时
var loginCheck = new Check();
loginCheck.checkName().checkAcount()

　　我们只需要return this，返回当前对象就行了。当然这只是最简单的一种实现方式，网上还有好些其他的方法，这里不一一介绍，大家可以自己研究。

　　3.方法的扩展

　　在写这篇文章的时候刚好要做前端埋点的工作，产品狗也不知道要具体做些什么，需要什么数据，就告诉我两字，全埋！心里一万只草泥马在奔腾啊....只好百度埋点一般都会需要一些什么数据，都有哪些方法。

　　看了一圈，大致知道了，但是一想到产品狗说的全埋，每个按钮和功能都要埋的时候，内心真的是崩溃的......能通过事件监听的尽量都用事件监听来做了，但剩下的一些不好做的也还是有好多，这该怎么办？踏破铁鞋无觅处，得来全不费功夫，之前听说过prototype.js这个东西，但一直不知道干嘛用的，看到书的第一章的时候才真正接触。就是给JavaScript的祖先对象类（Function、Array等）进行扩展。比如：

// 扩展方法
Function.prototype.stayTime = function () {}

// 使用方法
var a = function () {}
f.stayTime()

 

　　不过不推荐直接扩展JavaScript原始数据类型，因为这样容易造成全局污染，除非像我这样一个公司就一个前端的....

　　所以我们可以只扩展一个可以方法，一个可以统一添加方法的功能方法，就像这样：

Function.prototype.addMethod = function (name, fn) {
  this[name] =  fn;
}

// 创建方法
var a = function () {};
// 或者
var a = new Function ();
a.addMethod(‘stayTime‘, fnction () {
  ...
})

// 使用方法
a.stayTime();

 　　但是通过函数来调用，总感觉怪怪的，虽然函数也是对象，这样做也没错，不过为了更符合习惯与类式调用，也就是普通的对象那样去调用，可以改一改：

Function.prototype.addMethod = function (name, fn) {
  this.prototype[name] =  fn;
  return this; // 还可以链式添加方法
}

// 创建方法
var Fun = function () {
  ...
};
Fun.addMethod(‘stayTime‘, fnction () {
  ...
  return this; // 当然也可以链式调用方法
}).addMethod(‘counter‘, fnction () {
  ...
  return this; // 当然也可以链式调用方法
})
// 使用方法
var b = new Fun();
b.stayTime().counter();

　　要实现类式调用，其实就是在函数的原型上添加方法。