javascript组件封装中一段通用代码解读

Posted 2020-10-08 hero小呆

有图有真相，先上图。

相信很多想去研究源码的小伙伴一定被这段代码给吓着了把，直接就打消了往下看下去的想法。我刚开始看的时候也是有点一头雾水，这是什么东东这么长，但是慢慢分析你就会发现其中的奥秘，且听我慢慢到来。

首先我们先来看一下整体的结构。（function (global, factory) {}）（this, (function() {})）,这个看着是不是还有点不明白，那（function (a ,b) {console.log(a,b)}）(a, b)这个你总不会陌生了把，就是把a和b这两个参数传到前面的函数中,然后再在函数中进行后续的一系列的操作。那这个你搞懂了，开始的代码是不是优点眉目了，就是把this和（function() {}）当成两个参数传到前面那个括号中，然后用global，和factory这两个参数来接收，所以前面函数中的factory就是后面传入的函数，而global就是this代表的值，一般在调用时this即为window对象。整体的结构清楚了，再来看一下函数里面是什么意思把。

首先第一眼扫过去js中应该是一个三元运算表达式（不懂也没关系，我会解释哒），可是为啥有好几个":"和"?"呢，我们先来看一个标准的结构 1&&2 ? console.log("a") : console.log("b"),标准的三元运算表达式，即如果1&&2判断为真则会执行第一个语句如果为假就会执行第二个语句。那这个1&&2 ? console.log("a") : 0&&1 ? console.log("b") : console.log("c")是不是也就不那么难理解了。就是把第二个执行语句有换成了一个三元表达式而已。也就是当第一个判断为真是执行第一个语句console.log("a")而如果判断为假则执行第二个三元表达式再进行判断如果为真则执行console.log("b"),如果为假则执行console.log("c")。好了铺垫都已走完，我们再来看一下最初的那个表达式，这回小伙伴是不是能看懂了。

即先判断exports是对象并且同时module不是undefined这时候通过module.exports将factory（这个就是后面传入的函数，别又懵了）函数导出（兼容commonjs写法），如果这个判断不成立再执行后面那一条语句判断defined是function并且define.amd存在，即将factory导入defined中（兼容amd模式），如果不成立则将factory赋值给Vue对象，并且将Vue绑定到global（window对象）下，以便可以在全局调用，这个就是我们直接通过script标签引入时调用的方法了。

终于解释完了，小伙伴又可以开心的去做源码分析了.....