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

有图有真相,先上图。

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

首先我们先来看一下整体的结构。(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标签引入时调用的方法了。

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

时间: 2024-10-01 07:22:42

javascript组件封装中一段通用代码解读的相关文章

python中两段登陆代码的比较

两段登陆代码的比较 第一段 valid_user = 'chuan' valid_passwd = '123' user_input = raw_input("Your username:") passwd = raw_input("Your password:") if user_input == valid_user: if passwd == valid_passwd: print "Welcome %s login to our system!&q

javascript 实现java中的Map

javascript实现java中的Map,代码是在国外的一个网站上看到的(http://stackoverflow.com/questions/368280/javascript-hashmap-equivalent),自己稍作了修改,之前也看到过有人用2个数组实现了Map,但是我感觉效率比较低,现在这个我感觉效率还可以,自己做了下测试,代码如下: Map.js Java代码   function Map(linkItems) { this.current = undefined; this.

Javascript中最常用的61段经典代码

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false"

程序中的bss段,data段,代码段,堆,栈

程序中的bss段,data段,代码段(.text),堆(heap),栈(stack) .bss段:程序中未初始化的和已经初始化为0的全局变量和已经初始化为0的静态局部变量(static) .data段:程序中已经初始化的非零的全局变量和已经初始化的非零的静态局部变量(static) 代码段:用来存放代码的地方(.text段),不可修改,存放在只读区域内. 堆:程序员自己申请的内存区域,也就是用malloc()函数申请的内存区域,用free()函数来释放的区域. 栈:存放局部变量的区域,函数中的局

AngularJS中页面呈现html代码段

如何在页面呈现一段html代码段呢? 在textarea中我们这样写: <textarea name="" id="" cols="30" rows="" ng-model="app.someHtml"></textarea> 也可以这样写: <div ng-bind-html="app.someHtml"></div> 在controll

JavaScript使用Max函数返回两个数字中较大数的代码

JavaScript使用Max函数返回两个数字中较大数的代码. JavaScript的Math对象带有一个max函数用于获取两个数字的较大数代码: <p id="demo"> Click the button to return the highest number of 5 and 10. </p> <button it</button> <script> function myFunction() { document.getE

在JavaScript中,运行下面代码,sum的值是()。

在JavaScript中,运行下面代码,sum的值是(). var sum=0;for(i=1;i<10;i++){if(i%5==0)break;sum=sum+i;} A. 40B. 50C. 5D. 10 答案:http://hovertree.com/shortanswer/bjaf/j43wyyvr.htm 下列关于JavaScript的Date对象的getMonth()方法的返回值描述,正确的是(). A. 返回系统时间的当前月B. 返回值的范围介于1~12之间C. 返回系统时间的当

程序运行中(BSS段、数据段、代码段、堆栈)

程序运行中(BSS段.数据段.代码段.堆栈) BSS段:(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS段属于静态内存分配. 数据段 :数据段(data segment)通常是指用来存放程序中 已初始化 的 全局变量 的一块内存区域.数据段属于静态内存分配. 代码段: 代码段(code segment/text segment)通常是指用来存放 程序执行代码 的一块内存区域.这部分区域的大小

【转】在Visual Studio中怎样快速添加代码段

原文网址:http://blog.csdn.net/yl2isoft/article/details/9735527 以前一直只知道,键入prop,再按两次tab键,会生成自动属性代码. 今天闲着无事,就整理了一下在Visual Studio中其他快速添加代码段的方法. 1.自动属性 键入prop,再按两次tab键,会生成自动属性代码. [csharp] view plaincopy public int MyProperty { get; set; } 通过实验发现,输入pr,pro,proc