1,相同的一个js文件导入了两次,那么他们相等吗?
回答:相等。
疑问:这样的结果,我没想通,plug与plug1即便是相同的文件,但是,也是导入了两次啊,每一次执行都是获取对象myPlugin,两次的myPlugin怎么会相等呢,这不是相当于定义了两次吗 ?就像 var p1={install:function(){}} , var p2={install:function(){}} , p1 == p2吗?false啊,不相等啊。百思不得其解plug == plug1 为何是true,所以,我只能这样理解:plug == plug1 实际上是引用类型 var p1=p2={install:{}} 这种形式,哎,先搁置吧,日后看看底层。
能证明上面的疑问了,证明 plug==plug // true 啦,如下:
疑问解除了!!
是这样的,我给Vue通过插件添加了全局函数,在install函数中定义了局部count(简单提一下:这里涉及到了闭包,延长了count的作用域链,只要函数globzzMessage没销毁,count就一直在哦!)
var count=1
Vue.globzzMessage = function () {
count++
console.log(‘全局的插件函数’, count)
}
分别在不同的组件中引入Vue ,然后分别调用这个函数改变count ,结果count是累加的,并没有因为切换组件重新执行导入Vue而把count初始化成1,所以,足以证明 es6中的import导入的插件方式是引用类型的方式,才出现了plug==plug1// true的现象。就像注册插件不能重复注册一样(源码中会先判断是否注册过了)
再次补充一下结论:
其实,与其说是引用类类型的方式解决了上述疑问,不如说是es6的modoule的加载方式,也就是es6的模块原理 导致这样的。es6的module原理是:import …from… 会在编译时将所有的模块依赖关系加载好,存入缓存中,当出现重复导入模块时,会从缓存中取模块加载好的结果。
测试的代码如下:
import Vue from 'vue'
import plug from './plugins/commonMsg.js'
import plug1 from './plugins/commonMsg.js'
import plugC from './plugins/commonMsgC.js'
console.log('同一段代码放入两个文件中导出plug == plugC对比?:', plug == plugC)
console.log('同一个文件被两次导入plug == plug1', plug == plug1)
双等号和三等号分别尝试了对比,结果一样:
参与对比的插件代码如下:
第一个文件:plugin/commonMsg.js
const myPlugin = {
install(Vue, options) {
Vue.prototype.zzMessage = function () {
console.log((options && options.msg) || 'default msg...')
}
},
age: 900
}
export default myPlugin
第二个文件:plugin/commonMsgC.js
const myPlugin = {
install(Vue, options) {
Vue.prototype.zzMessage = function () {
console.log((options && options.msg) || 'default msg...')
}
},
age: 900
}
export default myPlugin