学习一门语言的一个非常有效的方法是阅读用该编程语言开发的优秀开源项目的源代码。Vuejs是最好的Javascript开源项目之一。1.变量转字符串在vue/src/shared/util.js中将值转为字符串是一个很常见的需求。在Javascript中，有两个函数可以将值转换成字符串：String()JSON.stringify()这两个函数有不同的机制，请看下面的代码：console.log(String(null));//nullconsole.log(JSON.stringify(null));//nullconsole.log(String(undefined));//undefined这里是字符串console.log(JSON.stringify(undefined));//这里未定义的是变量console.log(String("abc"));//abcconsole.log(JSON.stringify("abc"));//"abc"console.log(String({key:"value"}));//[objectObject]console.log(JSON.stringify({key:"value"}));//{"key":"value"}console.log(String([1,2,3]));//1,2,3console.log(JSON.stringify([1,2,3]));//[1,2,3]constobj={title:"devpoint",toString(){return"obj";},};控制台日志（字符串（obj））；//objconsole.log(JSON.stringify(obj));//{"title":"devpoint"}从上面的输出结果来看，两种对象转字符串的方法是有区别的。如何选择？在实际开发中，当我们需要将null和undefined转为字符串时，我们往往希望它返回一个空字符串。当需要将数组和普通对象转换为字符串时，通常会使用JSON.stringify。如果需要覆盖对象的toString方法，则需要使用String()。在其他情况下，使用String()将变量转换为字符串。为了满足以上条件，Vue源码实现如下：functionisPlainObject(obj){returnObject.prototype.toString.call(obj)==="[objectObject]";}functiontoString(val){if(val===null||val===undefined)返回"";如果(Array.isArray(val))返回JSON.stringify(val);如果(isPlainObject(val)&&val.toString===Object.prototype.toString)返回JSON.stringify(val);returnString(val);}constobj={title:"devpoint",toString(){返回"obj";},};console.log(toString(obj));//objconsole.log(toString([1,2,3]));//[1,2,3]console.log(toString(undefined));//""console.log(toString(null));//""2.普通对象vue/src/shared/util.jsObject.prototype.toString允许将对象转换为字符串。对于普通对象，调用此方法时总是返回[objectobject]。construnToString=(obj)=>Object.prototype.toString.call(obj);console.log(runToString({}));//[objectObject]console.log(runToString({title:"devpoint"}));//[objectObject]console.log(runToString({title:"devpoint",author:{name:"devpoint"}}));//[objectObject]类似于上面的对象我们称之为普通对象。Javascript中还有一些特殊的对象，比如Array、String、RegExp，在Javascript引擎中都有特殊的设计。当他们调用Object.prototype.toString方法时，会返回不同的结果。construnToString=(obj)=>Object.prototype.toString.call(obj);console.log(runToString(["devpoint",2021]));//[对象数组]console.log(runToString(newString("devpoint")));//[对象字符串]console.log(runToString(/devpoint/));//[objectRegExp]为了区分特殊设计对象和普通对象，可以使用如下函数来实现。functionisPlainObject(obj){returnObject.prototype.toString.call(obj)==="[objectObject]";}很多时候，我们希望一个函数只执行一次。如果多次调用该函数，则只执行第一次。3.oncevue/src/shared/util.js很多时候，我们希望一个函数只执行一次。如果多次调用该函数，则只执行第一次。functiononce(fn){letcalled=false;返回函数(){if(!called){called=true;fn.apply（这个，参数）；}};}functionlaunchRocket(){console.log("我已经执行了");}constlaunchRocketOnce=once(launchRocket);launchRocketOnce();launchRocketOnce();launchRocketOnce();4、浏览器嗅探vue/src/core/util/env.js我们知道Javascript可以浏览server、nodejs等环境，如何查看浏览器环境下当前Javascript代码是否运行？如果Javascript运行在浏览器环境中，就会有一个全局对象：window。因此，可以通过以下方式判断环境：constinBrowser=typeofwindow!=="undefined";在Chrome中执行在Node中执行如果脚本在浏览器环境中运行，那么我们可以通过以下方式获取浏览器的userAgent：constUA=inBrowser&&window.navigator.userAgent.toLowerCase();在Chrome中执行不同的浏览器有不同的userAgent。在InternetExplorer的userAgent中，总是包含MSIE和Trident。在Chrome浏览器的userAgent中，始终包含Chrome一词。同样，在Android操作系统浏览器中，userAgent始终包含Android一词。在iOS中，总是有iPhone、iPad、iPod、iOS等术语。因此，可以通过查看userAgent来判断当前浏览器厂商和操作系统。导出常量UA=inBrowser&&window.navigator.userAgent.toLowerCase();导出常量isIE=UA&&/msie|trident/.test(UA);导出常量isIE9=UA&&UA.indexOf("msie9.0")>0;exportconstisEdge=UA&&UA.indexOf("edge/")>0;exportconstisAndroid=(UA&&UA.indexOf("android")>0)||weexPlatform==="android";exportconstisIOS=(UA&&/iphone|ipad|ipod|ios/.test(UA))||weexPlatform==="ios";exportconstisChrome=UA&&/chrome\/\d+/.test(UA)&&!isEdge;exportconstisPhantomJS=UA&&/phantomjs/.test(UA);exportconstisFF=UA&&UA.match(/firefox\/(\d+)/);附带说明一下，Edge和Chrome都是基于Chromium的，所以这两个浏览器的userAgent都包含Chrome这个词。也就是说，当浏览器的userAgent中包含Chrome一词时，该浏览器不一定是Chrome。constisChrome=UA&&/chrome/\d+/.test(UA)&&!isEdge。
