函数的变形技巧优秀的源代码就像一部文学巨作，开拓思维，提供启示

UI设计师 2022-07-31 影视后期 410 0

Javascript函数方法学习

序言

阅读代码是减少编码水平的好办法，优秀的源代码如同一部哲学杰作，开拓思维，提供启示。近期在阅读vue2的源代码，学到了这些JS的编码方法，后续相继分享下来供参考，顺便小结一下代码阅读成果。

1.缓存函数

先来看一个需求，假定有一个逻辑复杂的函数superComputed执行很费时间函数的变形技巧，假如每天使用都去估算一次，还会给用户带给很长的等候。这个时侯还要考虑将估算结果缓存上去供后续程序读取，缓存函数还要实现当参数相似的状况下，直接取缓存结果。这跟服务器端为防止过多的查询数据库而用文件缓存查询结果相同，在后端怎样实现呢？

const superComputed = (str) => {
  // 假设这个函数执行时间很长
  console.info("===> 超级计算开始了……");
  return `输入：${str}`;
};

撰写一个cached函数来封装目标函数，这个cached函数接受目标函数作为参数，于是返回一个封装好的新函数。在cached函数的内部，可以使用Object或Map缓存前一个函数读取的结果。

vue/src/shared/util.js

这个cached的代码如下：

/**
* Create a cached version of a pure function.
*/
export function cached(fn: F): F {
  const cache = Object.create(null);
  return (function cachedFn(str: string) {
      const hit = cache[str];
      return hit || (cache[str] = fn(str));
  }: any);
}

目前将cached稍稍改下，让其可以执行，每天执行superComputed函数就会复印===>超级估算开始了……，以便于查看函数是否被缓存，

如下：

const superComputed = (str) => {
  // 假设这个函数执行时间很长
  console.info("===> 超级计算开始了……");
  return `输入：${str}`;
};
const cached = (fn) => {
  const cache = Object.create(null);
  return (str) => {
      const hit = cache[str];
      return hit || (cache[str] = fn(str));
  };
};
const cacheSuperComputed = cached(superComputed);
console.log(cacheSuperComputed("DevPoint"));
console.log(cacheSuperComputed("DevPoint"));
console.log(cacheSuperComputed("juejin"));

执行后的结果如下：

===>超级估算开始了……

键入：DevPoint

===>超级估算开始了……

键入：juejin

从结果不难听出，函数执行结果在参数不变的状况下，取得缓存的数据。

2.将dev-point转化为devPoint

在项目开发过程中，一般会出现变量色调不一致的问题函数的变形技巧，可以撰写一个函数将其转化为统一的色调。

vue/src/shared/util.js

/**
* Camelize a hyphen-delimited string.
*/
const camelizeRE = /-(\w)/g
export const camelize = cached((str: string): string => {
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

将其稍为更改，上面的cached函数就是之前介绍的缓存函数。

const camelizeRE = /-(\w)/g;
const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ""));
});
console.log(camelize("dev-point")); // devPoint

3.自定义函数判定

这儿所说的自定义函数，指的是开发人员自定义的函数，不是Javascript原生寄主函数。或许想起原理就是将函数转化为字符串，先来看下结果：

console.log(cached.toString());
console.log(toString.toString());

执行结果如下：

// 下面是自定义函数的结果
(fn) => {
  const cache = Object.create(null);
  return (str) => {
      const hit = cache[str];
      return hit || (cache[str] = fn(str));
  };
}
// 下面是原生宿主函数的结果
function toString() { [native code] }

从执行结果来看，原生寄主函数toString的结果依然是functionfnName(){[nativecode]}格式，所以就可以通过这个来分辨，接下去瞧瞧VUE项目中的实现方法。

vue/src/core/util/env.js

在文件的第58行，代码如下：

/* istanbul ignore next */
export function isNative (Ctor: any): boolean {
return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}

4.JS运行环境

在后端迅速发展的明天，JavaScript代码可以在不同的运行环境中执行。为了更好的适应各类运行环境，须要辨别当前代码是在那个运行环境中执行的，下边来学习一下Vue是怎样判别运行环境的：

vue/src/core/util/env.js

在文件的第6行开始，代码如下：

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

这种判定代码都值得借鉴的，这儿不展开介绍了，之前在《4个值得收藏的Javascript方法》介绍了浏览器的判别。

关于Javascript函数方法学习的文章就介绍至此，更多相关Javascript方法内容请搜索编程宝库先前的文章，希望之后支持编程宝库！

下一节：直观具体的typescript隐式类别转化图文解析JS编程技术

正文1、unknown是所有类别的父类别，其他类别都可以形参给unknownleta:undefined=undefined;letb:null=null;l...