《【若川视野 x 源码共读】第二期 | Vue3工具函数源码总结》

本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

1.babelParserDefaultPlugins babel解析默认插件

const babelParserDefaultPlugins =[
    'bigint',
    'optionalChaining',
    'nullishCoalescingOperator'
]

2.EMPTY_OBJ空对象

const EMPTY_OBJ =(process.env_NODE_ENV !== 'production')?Object.freeze({})?{};
//Object.freeze是冻结对象，在冻结对象外边无法向对象进行修改
const EMPTY_OBJ1 = Object.freeze({});
EMPTY_OBJ1.name='zhangsan';
console.log(EMPTY_OBJ1.name)//undeined
const EMPTY_OBJ2 = Object.freeze({
 props:{
  name:'lisi'
 }
});
EMPTY_OBJ2.props.name='wangwu';
console.log(EMPTY_OBJ2.props.name)//wangwu
/**
process.env.NODE_ENV是node项目中的一个环境变量，一般定义为development和production,根据环境写代码
*/

3.EMPTY_ARR空数组

const EMPTY_ARR=(process.env.NODE_ENV !== 'production')?Object.freeze([]):[];
//例
EMPTY.push(1)//error
EMPTY.length=3
console.log(EMPTY.length)//0

4.NOOP空函数

const NOOP = ()=>{}
//使用场景：1.使用方便 2.方便压缩
const instance = { render:NOOP};
const dev = true
if(dev){
    instance.render=function(){
        console.log('render')
        }
}
if(instance.render====NOOP){
 console.log('i')
}

5.NO永远返回false的函数

const NO = () => false

6.isON判断字符串是否由on开头并且后面跟着的字母不是小写字母

const onRE = /^ON[^a-z]/
const isON = (key) => onRE.test(key)
//test检索字符串中指定的值，返回true或false
isON('onchange')//true
isON('abc')//false

7.isModelListener监听器

const isModelListener = (key)=>key.startsWith('onUpdate:')
//例
isModelListener('onUpdate:element')//true
isModelListener('onMounted:element')//false

8.extend 继承 合并

const extend = Object.assign;
const variableA = {a:1,b:2};
const variableB = extend(variableA,{b:3,c:4)};
const variableC = extend(variableb)
console.log(variableB)//{a:1,b:2}
console.log(variableC)//{a:1,b:2}
//Object.assign枚举对象的属性的值从一个或者多个源对象的属性分发到目标对象上，它将返回到目标对象上

9.remove 移除数组的一项

const remove = (arr,el)=>{
    const i =arr.indexof(el);
    if(i>-1){
    arr.splice(i,1) 
  }
}
//例
const arr =[1,2,3];
remove(arr,3);
console.log(arr);//arr [1,2]
//splice是一个很耗性能的方法，删除一位元素，其余元素都会跟着变换位置

10.hasOwn 是不是自身所拥有的属性

 const hasOwnProperty = Object.prototype.hasOwnPorperty;
 const hasOwn = (val,key)=>hasOwnProperty.call(val,key);
 //__proto__是浏览器实现原型的写法
 //原型相关的API
 // Object.getprototypeof
 // Object.setprototypeof
 // Objetc.isprototypeof
 //.call则是函数里this指向的第一个参数，并执行函数
 //例
 hasOwn({a:undefined},'a');//true
 hsaOwn({},'a');//false

11.isArray 判断是否是数组

const isArray = Array.isArray;
const obj = {a:1};
isArray([])//true
isArray(obj)//false

12.isMap 判断是不是Map对象

const isMap = (val)=>toTypeString(val) ==='[object Map]' ;
//例
const map = new Map();
const o = {p:'Hello World'};
map.set(o,'conetnt');
map.get(o);//content
isMap(map);//true
//ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值（包括对象）都可以作为键，Object提供了'字符串-值'的对应，Map提供了'值-值'的对应，是一种更完善的hash结构实现。如果需要兼职对结构，Map比Object更合适

13.isSet 判断是不是Set对象

const isSet = (val)=>totypeString(val) === '[Object Set]';
const set = new Set();
isSet(set)//true
//ES6提供新的数据结构Set，

14.isDate 判断是不是date对象

const isDate = (val)=>val instance date;
isDate(new date());//true
//instanceof 操作符左边是右边的实例，不是很准，根据原型链向上查找。

15.isFunction 判断是不是函数

const isFunction = val=>typeof val === 'function';

16.isString 判断是不是字符串

const isString = val =>typeof val === 'string';

17.isSymbol 判断是不是Symbol对象

const isSymbol = val =>typeof val === 'symbol';

18.isObject 判断是不是对象

const isObject = val => val !== bull && typeof val === 'object';

19.isPromise 判断是不是Promise

const isPromise = val =>{
 return isObject(val)&&isFunciton(val.then)&&isFunction(val.watch);
} 
//判断
const p1 = new Promise(function(resolve,reject){
 resolve('abc');
});
isPromise(p1);

20.objecttostring 对象转字符串

const objectToString = Object.prototype.toString;

21.toTypeString 对象转字符串

const toTypeString = val => objectToString.call(val);

22.toRawType 对象转字符串后截取后几位

const toRawType = (val) => {
return toTypeString(val).splice(8,-1);
}
//typeof返回的类型
//undefined
//bigint
//symbol
//String
//boolean
//object
//number
//function

23.isPlainObject 判断是不是纯粹的对象

const objectToString = Object.prototype.toString;
const toTypeString = val => objectToString.call(val);
const isPlainObject = value => toTypeString(value) ==='[object object]';

24.isIntgerKey 判断是不是数字型字符串key值

const isIntgerkey = val => isString(val)&& val !== 'NaN' && val[0] !='-' && '' &&ParseInt(val,8) === key;

25.makeMap&&isReservedProp

传一个以逗号分隔的字符串，生成一个map（键值对），并且返回一个函数检测key值在不在这个map中，第二个参数是小写选项

function makeMap(str,expectLowerCase){
const map = Object.create(null);
const list = str.split(',');
for(let i=0; i<list.length;i++){
 map[list[i]]=true;
}
return expectLowerCase? val => !!map[val.toLowerCase()] :val => !!map[val]; 
}
const isReservedProp = makeMap(',key,ref');
isReservedProp('key')//true

26.cacheStringFunction 缓存

const cacheStringFunction = (fn) =>{
 const cache = Object.create(null);
 return ((str)=>{
   const hit = cache[str];
   return hit || (cache[str]=fn[str])
 })
}
//js单例模式
var getSingle = function(fn){
var result;
return function(){
 return result||(result=fn.apply(this.arguments));
 }
}

27.hasChanged 判断是不是有变化

const hasChanged = (value,oldvalue) =>!Object.is(value,oldvalud);

28.inVokeArrayFns执行数组里的函数

const inVokeArrayFns = (fns,args)=>{
 for(let i<0;i<args.length;i++){
   fns[i](args);
 }
}

29.def定义对象属性

const def =(obj,key,value)=>{
  Object.defineprototype=(obj,key,{
  numerible:false,
  configurable:true,
  value
  })
 }

30. toNumber 转数值型

const toNumber = (val)=>{
    const n = parsefloat(val);
    return isNaN(n)?val:n;
}

31.getGlobalThis 获取全局

let _globalthis;
const getFlobalthis =()=>{
 return (_globalthis|| (_globalthis = typeof _globalthis !== 'undefined'?
                                   _globalthis tpyeof self !== 'undefined'?
                                   self typeof window !== 'undefined'?
                                   window typeof global !== 'undefined'?
                                   global:{}))
}