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

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

立即执行函数

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

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

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

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

多层嵌套三目运算符

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

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

冻结对象

不可对指定对象增删改。

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

密封对象

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

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

检查是否是原始值

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

快速检测是否是对象

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

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

检测目标类型

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

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

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

检测是否是Promise对象

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

目标转换为字符串

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

转化为数字

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

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

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

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

删除简单数组中某一项

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

检测对象中是否有指定key

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

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

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

将属性混合到目标对象中

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

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

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

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

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

确保函数只调用一次

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

定义对象属性

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

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

浏览器环境嗅探

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

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

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

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

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

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

字符串hash值

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

新闻标题：聊聊从Vue.js源码中我学到了精妙方法
转载源于：http://www.shufengxianlan.com/qtweb/news32/383982.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信公众号知识

行业网站建设

资阳网站建设　　 　商城系统开发　　 　重庆电商网站建设　　 　成都小程序开发　　 　支点广告　　 　上海除甲醛　　 　成都棕树机房　　 　眉山电信机房　　 　橡塑保温板　　 　四川鸿达　　 　广安园林绿化公司　　 　重庆网络营销　　 　成都网站制作　　 　成都网站改版　　 　成都网站制作　　 　绵阳网站建设公司　　 　四川雅安服务器托管　　 　小谭建站　　 　虚拟主机　　 　成都广告制作