Vue.js源碼的使用方法是什么

本篇內(nèi)容介紹了“Vue.js源碼的使用方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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

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

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

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

(function (global) {   console.log(global); // Window對象 })(this);

多層嵌套三目運算符

三目運算符嵌套的寫法，使得代碼可讀性差，簡單業(yè)務場景下可以試著使用。

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

凍結對象

不可對指定對象增刪改。

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

密封對象

只能對指定對象進行更改，不可進行增加刪除操作。

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

檢查是否是原始值

function isPrimitive(value) {   return (     typeof value === "string" ||     typeof value === "number" ||     // $flow-disable-line     typeof value === "symbol" ||     typeof value === "boolean"   ); }

快速檢測是否是對象

當我們知道原始值時，它主要用于將對象與原始值區(qū)分開來。

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

檢測目標類型

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

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

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

檢測是否是Promise對象

function isDef(v) {   return v !== undefined && v !== null; } function isPromise(val) {   return (     isDef(val) &&     typeof val.then === "function" &&     typeof val.catch === "function"   ); } var promiseObj = new Promise(function (resolve, reject) {   // 一段耗時的異步操作   resolve("成功"); // 數(shù)據(jù)處理完成   // reject('失敗') // 數(shù)據(jù)處理出錯 }).then(   (res) => {     console.log(res);   }, // 成功   (err) => {     console.log(err);   } // 失敗 ); console.log(isPromise(promiseObj)); // true

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

var _toString = Object.prototype.toString; function isPlainObject(obj) {   return _toString.call(obj) === "[object Object]"; } function toString(val) {   return val == null     ? ""     : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)     ? JSON.stringify(val, null, 2)     : String(val); } console.log(toString({ name: 1 })); // {"name": 1}

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

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

function toNumber(val) {   var n = parseFloat(val);   return isNaN(n) ? val : n; }

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

function makeMap(str, expectsLowerCase) {   var map = Object.create(null);   var list = str.split(",");   for (var i = 0; i < list.length; i++) {     map[list[i]] = true;   }   return expectsLowerCase     ? function (val) {         return map[val.toLowerCase()];       }     : function (val) {         return map[val];       }; } var isBuiltInTag = makeMap("slot,component", true); console.log(isBuiltInTag("component")); // true

刪除簡單數(shù)組中某一項

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

檢測對象中是否有指定key

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

將類數(shù)組對象轉(zhuǎn)化為真實數(shù)組

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

將屬性混合到目標對象中

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

將對象數(shù)組合并為單個對象

function extend(to, _from) {   for (var key in _from) {     to[key] = _from[key];   }   return to; } function toObject(arr) {   var res = {};   for (var i = 0; i < arr.length; i++) {     if (arr[i]) {       extend(res, arr[i]);     }   }   return res; } console.log(toObject([{ name: 1 }, { name: 1 }, { name: 2 }, { name1: 3 }])); // {name: 2, name1: 3}

檢測指定項在數(shù)組(簡單數(shù)組、數(shù)組對象)中的索引

function isObject(obj) {   return obj !== null && typeof obj === "object"; } function looseEqual(a, b) {   if (a === b) {     return true;   }   var isObjectA = isObject(a);   var isObjectB = isObject(b);   if (isObjectA && isObjectB) {     try {       var isArrayA = Array.isArray(a);       var isArrayB = Array.isArray(b);       if (isArrayA && isArrayB) {         return (           a.length === b.length &&           a.every(function (e, i) {             return looseEqual(e, b[i]);           })         );       } else if (a instanceof Date && b instanceof Date) {         return a.getTime() === b.getTime();       } else if (!isArrayA && !isArrayB) {         var keysA = Object.keys(a);         var keysB = Object.keys(b);         return (           keysA.length === keysB.length &&           keysA.every(function (key) {             return looseEqual(a[key], b[key]);           })         );       } else {         /* istanbul ignore next */         return false;       }     } catch (e) {       /* istanbul ignore next */       return false;     }   } else if (!isObjectA && !isObjectB) {     return String(a) === String(b);   } else {     return false;   } }  function looseIndexOf(arr, val) {   for (var i = 0; i < arr.length; i++) {     if (looseEqual(arr[i], val)) {       return i;     }   }   return -1; } console.log(looseIndexOf([{ name: 1 }, { name: 2 }], 4)); // -1 console.log(looseIndexOf([{ name: 1 }, { name: 2 }], { name: 1 })); // 0

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

function once(fn) {   var called = false;   return function () {     if (!called) {       called = true;       fn.apply(this, arguments);     }   }; } var callOnce = once(function () {   console.log("javascript"); }); callOnce(); // javascript callOnce();

定義對象屬性

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

function def(obj, key, val, enumerable) {   Object.defineProperty(obj, key, {     value: val, // 對象定義屬性     enumerable: !!enumerable, // 描述屬性是否會出現(xiàn)在for in 或者 Object.keys()的遍歷中     writable: true, // 是否可寫     configurable: true, // 是否重新定義或者刪除   }); } var obj = {   name: 1, }; def(obj, "name1", 2, true); obj.name1 = 3; console.log(obj); // {name: 1, name1: 3}

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

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

JS構造函數(shù)內(nèi)的方法與構造函數(shù)prototype屬性上方法的對比

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

function A() {   this.say = function () {     console.log(1);   }; } var a = new A(); a.say(); function B() {} B.prototype.say = function () {   console.log(2); }; var b = new B(); b.say(); var c = new B(); c.say();

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

function getOuterHTML(el) {   if (el.outerHTML) {     return el.outerHTML;   } else {     var container = document.createElement("div");     container.appendChild(el.cloneNode(true));     return container.innerHTML;   } }

字符串hash值

function hash(str) {   var hash = 5381;   var i = str.length;   while (i) {     hash = (hash * 33) ^ str.charCodeAt(--i);   }   return hash >>> 0; } console.log(hash("222sd"));// 164533792

“Vue.js源碼的使用方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！