自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

聊聊從Vue.js源碼中我學(xué)到了精妙方法

作者： maomin9761
開(kāi)發(fā) 前端
如果我們的應(yīng)用需要?jiǎng)?chuàng)建很多新的對(duì)象，并且這些對(duì)象還有許多的方法，為了節(jié)省內(nèi)存，我們建議把這些方法都定義在構(gòu)造函數(shù)的 prototype 屬性上。當(dāng)然，在某些情況下，我們需要將某些方法定義在構(gòu)造函數(shù)中，這種情況一般是因?yàn)槲覀冃枰L問(wèn)構(gòu)造函數(shù)內(nèi)部的私有變量。

[[393248]]

話不多說(shuō)，趕快試試尤大大教給我們的這幾個(gè)精妙方法吧!在工作中肯定會(huì)用得到。

立即執(zhí)行函數(shù)

頁(yè)面加載完成后只執(zhí)行一次的設(shè)置函數(shù)。

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

通常，全局變量被作為一個(gè)參數(shù)傳遞給立即執(zhí)行參數(shù)，這樣它在函數(shù)內(nèi)部不使用window也可以被訪問(wèn)到。

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

多層嵌套三目運(yùn)算符

三目運(yùn)算符嵌套的寫(xiě)法，使得代碼可讀性差，簡(jiǎn)單業(yè)務(wù)場(chǎng)景下可以試著使用。

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

凍結(jié)對(duì)象

不可對(duì)指定對(duì)象增刪改。

  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); 

密封對(duì)象

只能對(duì)指定對(duì)象進(jìn)行更改，不可進(jìn)行增加刪除操作。

  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. } 

快速檢測(cè)是否是對(duì)象

當(dāng)我們知道原始值時(shí)，它主要用于將對(duì)象與原始值區(qū)分開(kāi)來(lái)。

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

檢測(cè)目標(biāo)類(lèi)型

  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 

檢查目標(biāo)是否是有效的數(shù)組索引

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

檢測(cè)是否是Promise對(duì)象

  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.   // 一段耗時(shí)的異步操作 
  13.   resolve("成功"); // 數(shù)據(jù)處理完成 
  14.   // reject('失敗') // 數(shù)據(jù)處理出錯(cuò) 
  15. }).then( 
  16.   (res) => { 
  17.     console.log(res); 
  18.   }, // 成功 
  19.   (err) => { 
  20.     console.log(err); 
  21.   } // 失敗 
  22. ); 
  23. console.log(isPromise(promiseObj)); // true 

目標(biāo)轉(zhuǎn)換為字符串

  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} 

轉(zhuǎn)化為數(shù)字

將輸入值轉(zhuǎn)換為數(shù)字以便持久化。如果轉(zhuǎn)換失敗，則返回原始字符串。

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

檢測(cè)key是否在創(chuàng)建的Map對(duì)象內(nèi)

  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 

刪除簡(jiǎn)單數(shù)組中某一項(xiàng)

  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] 

檢測(cè)對(duì)象中是否有指定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 

將類(lèi)數(shù)組對(duì)象轉(zhuǎn)化為真實(shí)數(shù)組

  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] 

將屬性混合到目標(biāo)對(duì)象中

  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} 

將對(duì)象數(shù)組合并為單個(gè)對(duì)象

  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} 

檢測(cè)指定項(xiàng)在數(shù)組(簡(jiǎn)單數(shù)組、數(shù)組對(duì)象)中的索引

  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 

確保函數(shù)只調(diào)用一次

  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(); 

定義對(duì)象屬性

如果你想禁止一個(gè)對(duì)象添加新屬性并且保留已有屬性，就可以使用Object.preventExtensions(obj)。

  1. function def(obj, key, val, enumerable) { 
  2.   Object.defineProperty(obj, key, { 
  3.     value: val, // 對(duì)象定義屬性 
  4.     enumerable: !!enumerable, // 描述屬性是否會(huì)出現(xiàn)在for in 或者 Object.keys()的遍歷中 
  5.     writable: true, // 是否可寫(xiě) 
  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} 

瀏覽器環(huán)境嗅探

  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構(gòu)造函數(shù)內(nèi)的方法與構(gòu)造函數(shù)prototype屬性上方法的對(duì)比

定義在構(gòu)造函數(shù)內(nèi)部的方法，會(huì)在它的每一個(gè)實(shí)例上都克隆這個(gè)方法;定義在構(gòu)造函數(shù)的 prototype 屬性上的方法會(huì)讓它的所有示例都共享這個(gè)方法，但是不會(huì)在每個(gè)實(shí)例的內(nèi)部重新定義這個(gè)方法。如果我們的應(yīng)用需要?jiǎng)?chuàng)建很多新的對(duì)象，并且這些對(duì)象還有許多的方法，為了節(jié)省內(nèi)存，我們建議把這些方法都定義在構(gòu)造函數(shù)的 prototype 屬性上。當(dāng)然，在某些情況下，我們需要將某些方法定義在構(gòu)造函數(shù)中，這種情況一般是因?yàn)槲覀冃枰L問(wèn)構(gòu)造函數(shù)內(nèi)部的私有變量。

  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(); 

獲取標(biāo)簽內(nèi)容(包含標(biāo)簽)

  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 

 

責(zé)任編輯：武曉燕 來(lái)源： maomin9761
Vue.js源碼方法
相關(guān)推薦

2021-01-02 09:48:13

函數(shù)運(yùn)算js

2022-03-27 09:06:04

React類(lèi)型定義前端

2021-03-09 09:55:02

Vuejs前端代碼

2024-05-13 08:04:26

Vue.jsWeb應(yīng)用程序

2021-05-08 06:14:28

Vue.js片段開(kāi)發(fā)

2016-01-18 10:06:05

編程

2020-02-22 15:01:51

后端前端開(kāi)發(fā)

2020-04-01 08:40:44

Vue.jsweb開(kāi)發(fā)

2016-09-21 13:32:13

JavascriptWeb前端

2021-03-13 11:23:51

源碼邏輯框架

2020-06-01 14:02:25

Vue.js框架模板

2020-09-25 06:32:25

前端

2021-10-25 05:43:40

前端技術(shù)編程

2020-12-31 10:47:03

開(kāi)發(fā)Vuejs技術(shù)

2016-09-21 12:56:31

JavascriptWeb前端

2020-10-27 08:07:17

Vue.js

2020-06-14 15:09:00

JavaScript開(kāi)發(fā)技術(shù)

2023-04-26 22:52:19

視覺(jué)人臉檢測(cè)人臉對(duì)齊

2024-04-12 08:54:13

從庫(kù)數(shù)據(jù)庫(kù)應(yīng)用

2022-12-01 17:13:44

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)