我从Vue源码中学到的一些JS编程技巧

在咱们面试的过程当中，常常会遇到问源码的环节，由于优秀的框架一般都会包含不少设计理念跟编程实践。这段时间我一直在看Vue2的源码，发现了不少有意思的实现。虽然如今Vue3都已经发布了，也没法否定Vue2是个优秀的框架这个事实，不影响咱们从中学到一些最佳实践。javascript

对Vue不感兴趣的同窗也能够看看，由于我只是谈论一些我从这个框架的实现上学到的一些JavaScript的用法，不涉及Vue的概念。html

获取HTML格式的字符串中非标签文本(vue/src/compiler/parser/entity-decoder.js)

假设咱们有这样一个字符串：前端

var html = '<span class="red">hello world</span> <span>hello xxx</span>'。咱们如今想要提取其中非标签的文本，拿到以下结果：vue

'hello world hello xxx'。这该怎么办？咱们首先想到的确定是正则表达式，可是这个场景下正则表达式写起来确定很烦，咱们来看看Vue的开发者是怎么处理的：java

既然这个字符串是HTML文本格式，咱们就能够把它解析成对应的HTML元素。
HTML元素的textContent属性能够用来获取HTML元素中的文本内容。

代码以下：android

function decoder(html){
  let decoder = document.createElement('div')
  decoder.innerHTML = html
  console.log(decoder.textContent)
  // return decoder.textContent
}
复制代码

这个代码建立了一个div元素做为容器，而后经过设置innerHTML把字符串转换成对应的HTML元素，最后就能够经过textContent属性来获取文本内容了。ios

肯定运行环境(vue/src/core/util/env.js)

随着前端的高速发展，咱们已经能够在多个环境中运行JavaScript代码，为了针对不一样的运行环境做出调整，咱们须要知道咱们的代码跑在哪一个环境下，咱们来看看Vue是怎么肯定运行时环境的：面试

const inBrowser = typeof window !== 'undefined'
const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
const isPhantomJS = UA && /phantomjs/.test(UA)
const isFF = UA && UA.match(/firefox\/(\d+)/)
复制代码

若是咱们的代码是运行在浏览器中，那咱们确定会拿到一个window对象，因此咱们能够经过const inBrowser = typeof window !== 'undefined'这种方式来判断环境。正则表达式

并且在浏览器中，咱们能够经过window对象拿到浏览器的userAgent，不一样的浏览器对应的userAgent也不一样，像IE的userAgent老是会包含MSIE，而Chrome的userAgent会包含Chrome。相似地安卓系统的浏览器userAgent就会带Android。那咱们经过userAgent就能够判断当前用的是什么浏览器，运行在什么操做系统上。上面的代码中已经列举出了对主流的浏览器跟操做系统的判断，注意因为Edge浏览器最新版本也基于Chromium内核，因此它的userAgent也会包含Chrome，因此咱们要写const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge这样的代码来判断当前环境是Chrome。chrome

肯定一个函数是否是用户自定义的(vue/src/core/util/env.js)

通常咱们使用的就两种函数，环境提供给咱们的跟咱们用户本身定义的，这两种函数在转换成字符串时表现形式是不一样的：

Array.isArray.toString() // "function isArray() { [native code] }"
function fn(){} 
fn.toString() // "function fn(){}"
复制代码

环境自带函数调用toString方法后老是会返回相似function fnName() { [native code] }格式的字符串，咱们能够利用这一点来区分函数类型：

function isNative (Ctor){
  return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}
复制代码

实现只执行一次的函数(vue/src/shared/util.js)

不少时候咱们须要一个函数只被执行一次，就算它被调用屡次，也只有第一次调用时会被执行，因此咱们能够写出以下代码：

function once (fn) {
  let called = false
  return function () {
    if (!called) {
      called = true
      fn.apply(this, arguments)
    }
  }
}
复制代码

这样后续再执行时咱们会直接跳过，这里是使用高阶函数来实现的，感兴趣的能够看看我以前的文章JavaScript高级技巧。咱们来测试一下这个方法：

能够看到test方法只被执行了一次。

缓存函数执行结果(vue/src/shared/util.js)

这个我也在以前的博客中提到过的，有时候函数执行比较耗时，咱们想缓存执行的结果。这样当后续被调用时，若是参数相同，咱们能够跳过计算直接返回结果。咱们须要的就是实现一个cached函数，这个函数接受实际被调用的函数做为参数，而后返回一个包装的函数。在这个cached函数里，咱们能够用一个对象或者Map来缓存结果。

function cached(fn){
  const cache = Object.create(null);
  return function cachedFn (str) {
    if ( !cache[str] ) {
        let result = fn(str);
        cache[str] = result;
    }
    return cache[str]
  }
}
复制代码

转换命名风格(vue/src/shared/util.js)

咱们每一个人使用的编程风格可能都不同，有人喜欢驼峰写法，有人喜欢小横杠链接符，为了解决这个问题，咱们能够写一个函数去作统一的转换。(好比把a-b-c转换成aBC)

const camelizeRE = /-(\w)/g
const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
camelize('a-b-c')
// "aBC"
复制代码

肯定对象的类型(vue/src/shared/util.js)

在JavaScript中，有六种基本类型(Boolean, Number, String, Null, Undefined, Symbol)跟一个对象类型，但其实对象类型是能够细分到许多类型的，一个对象能够是数组，也能够是函数等等。咱们有没有办法得到它确切的类型呢？

咱们能够利用Object.prototype.toString把一个对象转换成一个字符串，若是是咱们用{}建立的对象，这个方法老是返回[object Object]。

而对于数组，正则表达式等环境自带的对象类型，它们会返回不一样的结果。

基于这个特性咱们能够判断一个对象是否是咱们用{}建立的对象了：

function isPlainObject (obj){
  return Object.prototype.toString.call(obj) === '[object Object]'
}
复制代码

并且咱们注意到，Object.prototype.toString()的返回值老是以[object tag]的形式出现，若是咱们只想要这个tag，咱们能够把其余东西剔除掉，这边比较简单用正则或者String.prototype.slice()均可以。

function toRawType (value) {
    const _toString = Object.prototype.toString
    return _toString.call(value).slice(8, -1)
}
toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"
复制代码

这样咱们就能够拿到一个变量的类型了。

把值转换成字符串(vue/src/shared/util.js)

咱们常常须要把一个值转换成字符串，在JavaScript里面，咱们有两种方式来获得字符串：

String()
JSON.stringify()

不过这两种方式的实现机制是不一样的：

咱们里看到，他们是基于彻底不一样的规则去转换字符串的，String(arg)会尝试调用arg.toString()或者arg.valueOf()，那么那咱们该用哪一个比较好？

对于null跟undefined，咱们但愿把它转成空字符串
当转换一个数组或者咱们建立的对象时，咱们会使用JSON.stringify
若是对象的toString方法被重写了，那咱们会偏向使用String()
其它状况下，通常都用String()

为了匹配上面的需求，Vue开发者是这么实现的：
```
function isPlainObject (obj){
  return Object.prototype.toString.call(obj) === '[object Object]'
}
function toString (val) {
  if(val === null || val === undefined) return ''
if (Array.isArray(val)) return JSON.stringify(val)
if (isPlainObject(val) && val.toString === Object.prototype.toString)
    return JSON.stringify(val)
  return String(val)
}
复制代码
```
又是收获满满的一天，经过阅读优秀框架的代码实现能够快速地提升咱们对语言的运用，增强咱们对于一些特性的理解，总结出一些编程实践，咱们的编程能力也在无形中获得质的飞跃，很是建议你们深刻学习一门语言时就去阅读用那个语言实现的优秀代码。对于JavaScript而言咱们光讨论了Vue的这三个源码文件就学到这么多东西，还有比这更开心的事吗？但愿本文也能给你们带来一些帮助，happy coding~