聊聊从Vue.js源码中我学到了精妙方法

时间：2022-01-07 13:54:02

聊聊从Vue.js源码中我学到了精妙方法

话不多说，赶快试试尤大大教给我们的这几个精妙方法吧!在工作中肯定会用得到。

立即执行函数

页面加载完成后只执行一次的设置函数。

  1. (function (a, b) { 
  2.   console.log(a, b); // 1,2 
  3. })(1, 2); 

通常，全局变量被作为一个参数传递给立即执行参数，这样它在函数内部不使用window也可以被访问到。

  1. (function (global) { 
  2.   console.log(global); // Window对象 
  3. })(this); 

多层嵌套三目运算符

三目运算符嵌套的写法，使得代码可读性差，简单业务场景下可以试着使用。

  1. var a = 1; 
  2. var b = 0; 
  3. a == 1 ? (b == 2 ? (b = 3) : (b = 1)) : ""; 
  4. console.log(b); // 1 

冻结对象

不可对指定对象增删改。

  1. var emptyObject = Object.freeze({ 
  2.   key: "1", 
  3. }); 
  4. emptyObject.name = "maomin"; 
  5. delete emptyObject.key; 
  6. emptyObject.key = "2"; 
  7. console.log(emptyObject); 

密封对象

只能对指定对象进行更改，不可进行增加删除操作。

  1. var sealObject = Object.seal({ 
  2.   key: 3, 
  3. }); 
  4. sealObject.name = "maomin"; 
  5. delete sealObject.key; 
  6. sealObject.key = 4; 
  7. console.log(sealObject); // 4 

检查是否是原始值

  1. function isPrimitive(value) { 
  2.   return ( 
  3.     typeof value === "string" || 
  4.     typeof value === "number" || 
  5.     // $flow-disable-line 
  6.     typeof value === "symbol" || 
  7.     typeof value === "boolean" 
  8.   ); 
  9. } 

快速检测是否是对象

当我们知道原始值时，它主要用于将对象与原始值区分开来。

  1. function isObject(obj) { 
  2.   return obj !== null && typeof obj === "object"; 
  3. } 
  4. console.log(isObject(true)); //false 

检测目标类型

  1. var _toString = Object.prototype.toString; 
  2.  
  3. function toRawType(value) { 
  4.   return _toString.call(value).slice(8, -1); 
  5. } 
  6. console.log(toRawType([])); // Array 

检查目标是否是有效的数组索引

  1. function isValidArrayIndex(val) { 
  2.   var n = parseFloat(String(val)); 
  3.   return n >= 0 && Math.floor(n) === n && isFinite(val); 
  4. } 

检测是否是Promise对象

  1. function isDef(v) { 
  2.   return v !== undefined && v !== null; 
  3. } 
  4. function isPromise(val) { 
  5.   return ( 
  6.     isDef(val) && 
  7.     typeof val.then === "function" && 
  8.     typeof val.catch === "function" 
  9.   ); 
  10. } 
  11. var promiseObj = new Promise(function (resolve, reject) { 
  12.   // 一段耗时的异步操作 
  13.   resolve("成功"); // 数据处理完成 
  14.   // reject('失败') // 数据处理出错 
  15. }).then( 
  16.   (res) => { 
  17.     console.log(res); 
  18.   }, // 成功 
  19.   (err) => { 
  20.     console.log(err); 
  21.   } // 失败 
  22. ); 
  23. console.log(isPromise(promiseObj)); // true 

目标转换为字符串

  1. var _toString = Object.prototype.toString; 
  2. function isPlainObject(obj) { 
  3.   return _toString.call(obj) === "[object Object]"; 
  4. } 
  5. function toString(val) { 
  6.   return val == null 
  7.     ? "" 
  8.     : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString) 
  9.     ? JSON.stringify(val, null, 2) 
  10.     : String(val); 
  11. } 
  12. console.log(toString({ name: 1 })); // {"name": 1} 

转化为数字

将输入值转换为数字以便持久化。如果转换失败，则返回原始字符串。

  1. function toNumber(val) { 
  2.   var n = parseFloat(val); 
  3.   return isNaN(n) ? val : n; 
  4. } 

检测key是否在创建的Map对象内

  1. function makeMap(str, expectsLowerCase) { 
  2.   var map = Object.create(null); 
  3.   var list = str.split(","); 
  4.   for (var i = 0; i < list.length; i++) { 
  5.     map[list[i]] = true; 
  6.   } 
  7.   return expectsLowerCase 
  8.     ? function (val) { 
  9.         return map[val.toLowerCase()]; 
  10.       } 
  11.     : function (val) { 
  12.         return map[val]; 
  13.       }; 
  14. } 
  15. var isBuiltInTag = makeMap("slot,component", true); 
  16. console.log(isBuiltInTag("component")); // true 

删除简单数组中某一项

  1. function remove(arr, item) { 
  2.   if (arr.length) { 
  3.     var index = arr.indexOf(item); 
  4.     if (index > -1) { 
  5.       return arr.splice(index, 1); 
  6.     } 
  7.   } 
  8. } 
  9. console.log(remove([1, 2], 1)); // [1] 

检测对象中是否有指定key

  1. var hasOwnProperty = Object.prototype.hasOwnProperty; 
  2. function hasOwn(obj, key) { 
  3.   return hasOwnProperty.call(obj, key); 
  4. } 
  5. console.log(hasOwn({ name: 1 }, "name")); //true 

将类数组对象转化为真实数组

  1. function toArray(list, start) { 
  2.   start = start || 0; 
  3.   var i = list.length - start; 
  4.   var ret = new Array(i); 
  5.   while (i--) { 
  6.     ret[i] = list[i + start]; 
  7.   } 
  8.   return ret; 
  9. } 
  10. console.log(toArray({ 0: 42, 1: 52, 2: 63, length: 3 })); // [42, 52, 63] 

将属性混合到目标对象中

  1. function extend(to, _from) { 
  2.   for (var key in _from) { 
  3.     to[key] = _from[key]; 
  4.   } 
  5.   return to; 
  6. } 
  7. console.log(extend({ name: 1 }, { name1: 2 })); // {name:1,name1:2} 

将对象数组合并为单个对象

  1. function extend(to, _from) { 
  2.   for (var key in _from) { 
  3.     to[key] = _from[key]; 
  4.   } 
  5.   return to; 
  6. } 
  7. function toObject(arr) { 
  8.   var res = {}; 
  9.   for (var i = 0; i < arr.length; i++) { 
  10.     if (arr[i]) { 
  11.       extend(res, arr[i]); 
  12.     } 
  13.   } 
  14.   return res; 
  15. } 
  16. console.log(toObject([{ name: 1 }, { name: 1 }, { name: 2 }, { name1: 3 }])); // {name: 2, name1: 3} 

检测指定项在数组(简单数组、数组对象)中的索引

  1. function isObject(obj) { 
  2.   return obj !== null && typeof obj === "object"; 
  3. } 
  4. function looseEqual(a, b) { 
  5.   if (a === b) { 
  6.     return true; 
  7.   } 
  8.   var isObjectA = isObject(a); 
  9.   var isObjectB = isObject(b); 
  10.   if (isObjectA && isObjectB) { 
  11.     try { 
  12.       var isArrayA = Array.isArray(a); 
  13.       var isArrayB = Array.isArray(b); 
  14.       if (isArrayA && isArrayB) { 
  15.         return ( 
  16.           a.length === b.length && 
  17.           a.every(function (e, i) { 
  18.             return looseEqual(e, b[i]); 
  19.           }) 
  20.         ); 
  21.       } else if (a instanceof Date && b instanceof Date) { 
  22.         return a.getTime() === b.getTime(); 
  23.       } else if (!isArrayA && !isArrayB) { 
  24.         var keysA = Object.keys(a); 
  25.         var keysB = Object.keys(b); 
  26.         return ( 
  27.           keysA.length === keysB.length && 
  28.           keysA.every(function (key) { 
  29.             return looseEqual(a[key], b[key]); 
  30.           }) 
  31.         ); 
  32.       } else { 
  33.         /* istanbul ignore next */ 
  34.         return false; 
  35.       } 
  36.     } catch (e) { 
  37.       /* istanbul ignore next */ 
  38.       return false; 
  39.     } 
  40.   } else if (!isObjectA && !isObjectB) { 
  41.     return String(a) === String(b); 
  42.   } else { 
  43.     return false; 
  44.   } 
  45. } 
  46.  
  47. function looseIndexOf(arr, val) { 
  48.   for (var i = 0; i < arr.length; i++) { 
  49.     if (looseEqual(arr[i], val)) { 
  50.       return i; 
  51.     } 
  52.   } 
  53.   return -1; 
  54. } 
  55. console.log(looseIndexOf([{ name: 1 }, { name: 2 }], 4)); // -1 
  56. console.log(looseIndexOf([{ name: 1 }, { name: 2 }], { name: 1 })); // 0 

确保函数只调用一次

  1. function once(fn) { 
  2.   var called = false; 
  3.   return function () { 
  4.     if (!called) { 
  5.       called = true; 
  6.       fn.apply(this, arguments); 
  7.     } 
  8.   }; 
  9. } 
  10. var callOnce = once(function () { 
  11.   console.log("javascript"); 
  12. }); 
  13. callOnce(); // javascript 
  14. callOnce(); 

定义对象属性

如果你想禁止一个对象添加新属性并且保留已有属性，就可以使用Object.preventExtensions(obj)。

  1. function def(obj, key, val, enumerable) { 
  2.   Object.defineProperty(obj, key, { 
  3.     value: val, // 对象定义属性 
  4.     enumerable: !!enumerable, // 描述属性是否会出现在for in 或者 Object.keys()的遍历中 
  5.     writable: true, // 是否可写 
  6.     configurable: true, // 是否重新定义或者删除 
  7.   }); 
  8. } 
  9. var obj = { 
  10.   name: 1, 
  11. }; 
  12. def(obj, "name1", 2, true); 
  13. obj.name1 = 3; 
  14. console.log(obj); // {name: 1, name1: 3} 

浏览器环境嗅探

  1. var inBrowser = typeof window !== "undefined"; 
  2. var inWeex = typeof WXEnvironment !== "undefined" && !!WXEnvironment.platform; 
  3. var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase(); 
  4. var UA = inBrowser && window.navigator.userAgent.toLowerCase(); 
  5.  
  6. var isIE = UA && /msie|trident/.test(UA); 
  7. var isIE9 = UA && UA.indexOf("msie 9.0") > 0; 
  8. var isEdge = UA && UA.indexOf("edge/") > 0; 
  9. var isAndroid = (UA && UA.indexOf("android") > 0) || weexPlatform === "android"; 
  10. var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || weexPlatform === "ios"; 
  11. var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge; 
  12. var isPhantomJS = UA && /phantomjs/.test(UA); 
  13. var isFF = UA && UA.match(/firefox\/(\d+)/); 

JS构造函数内的方法与构造函数prototype属性上方法的对比

定义在构造函数内部的方法，会在它的每一个实例上都克隆这个方法;定义在构造函数的 prototype 属性上的方法会让它的所有示例都共享这个方法，但是不会在每个实例的内部重新定义这个方法。如果我们的应用需要创建很多新的对象，并且这些对象还有许多的方法，为了节省内存，我们建议把这些方法都定义在构造函数的 prototype 属性上。当然，在某些情况下，我们需要将某些方法定义在构造函数中，这种情况一般是因为我们需要访问构造函数内部的私有变量。

  1. function A() { 
  2.   this.say = function () { 
  3.     console.log(1); 
  4.   }; 
  5. } 
  6. var a = new A(); 
  7. a.say(); 
  8. function B() {} 
  9. B.prototype.say = function () { 
  10.   console.log(2); 
  11. }; 
  12. var b = new B(); 
  13. b.say(); 
  14. var c = new B(); 
  15. c.say(); 

获取标签内容(包含标签)

  1. function getOuterHTML(el) { 
  2.   if (el.outerHTML) { 
  3.     return el.outerHTML; 
  4.   } else { 
  5.     var container = document.createElement("div"); 
  6.     container.appendChild(el.cloneNode(true)); 
  7.     return container.innerHTML; 
  8.   } 
  9. } 

字符串hash值

  1. function hash(str) { 
  2.   var hash = 5381; 
  3.   var i = str.length; 
  4.   while (i) { 
  5.     hash = (hash * 33) ^ str.charCodeAt(--i); 
  6.   } 
  7.   return hash >>> 0; 
  8. } 
  9. console.log(hash("222sd"));// 164533792 

原文地址：https://mp.weixin.qq.com/s/hfGR1XNsTKgWfCZ___Y46g

标签：

相关文章