有图有真相,先上图。

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

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

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

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

  1. Openlayer3之C++接口在javaScript的封装使用

    0.写在前面: 1)涉及的关键词定义: 传入:JavaScript向CAPI传值 传出:CAPI向JavaScript传值 2)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...

  2. javascript 实现java中的Map

    javascript实现java中的Map,代码是在国外的一个网站上看到的(http://stackoverflow.com/questions/368280/javascript-hashmap-e ...

  3. [开源] 基于Layui组件封装的后台模版,HG-Layui-UI通用后台管理框架V1.0版

    HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...

  4. 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

  5. 用好JAVA中的函数式接口,轻松从通用代码框架中剥离掉业务定制逻辑

    大家好,又见面了. 今天我们一起聊一聊JAVA中的函数式接口.那我们首先要知道啥是函数式接口.它和JAVA中普通的接口有啥区别?其实函数式接口也是一个Interface类,是一种比较特殊的接口类,这个 ...

  6. How Javascript works (Javascript工作原理) (二) 引擎,运行时,如何在 V8 引擎中书写最优代码的 5 条小技巧

    个人总结: 一个Javascript引擎由一个标准解释程序,或者即时编译器来实现. 解释器(Interpreter): 解释一行,执行一行. 编译器(Compiler): 全部编译成机器码,统一执行. ...

  7. Javascript - Vue - webpack中的组件、路由和动画

    引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...

  8. Javascript中的Trait与代码重用

    Javascript中的Trait与代码重用 来源 http://www.ituring.com.cn/article/64103 我们知道,OOP中最普遍的代码重用方式是通过继承,但是,继承有一些缺 ...

  9. Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

随机推荐

  1. Python 通用日志模块

    import os base_dir=os.path.dirname(os.path.dirname(__file__)) base_db=os.path.join(base_dir,'db') ba ...

  2. GET请求中的乱码原理解析和解决方案

    2. 乱码问题解决 基础知识 1)浏览器会在中文的UTF-8后加上上%得到URL编码   例如: %e8%b4%b9%e7%94%a8%e6%8a%a5%e9%94%80 2)以get的请求发送到to ...

  3. May we can use Turbolinks or Pjax in our web apps

    Turbolinks[1]: Turbolinks makes following links in your web application faster.Instead of letting th ...

  4. httpmodule VS2012 和 VS2013

    http://stackoverflow.com/questions/963545/httpmodule-not-running-with-visual-studio 如果将 httpmodule 配 ...

  5. xgene:之illumina,,ion-torrent

    illumina技术: 工具:flowcell(流动池):8通道,每个通道都有 2种DNA引物 种在玻璃表面(用共价键连到Flowcell上),这引物和文库中的接头互补    Flowcell:8个l ...

  6. java之二叉树--未完待续

    参考http://how2j.cn/k/collection/collection-tree/476.html#nowhere 二叉树概念 二叉树由各种节点组成二叉树特点:每个节点都可以有左子节点,右 ...

  7. Vue.js中,如何自己维护路由跳转记录?

    在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...

  8. 记微软OpenHack机器学习挑战赛

    有幸参加了微软OpenHack挑战赛,虽然题目难度不大,但是很有意思,学到了很多东西,还有幸认识了微软梁健老师,谢谢您的帮助!同时还认识同行的很多朋友,非常高兴,把这段难忘的比赛记录一下~~也分享一下 ...

  9. Unity 5 全局光照GI与新的烘焙系统初探

    http://blog.csdn.net/sparrowfc/article/details/45650013 GI是啥 Realtime GI,实时全局光照,听上去就是一个非常高大上的词,但是越高大 ...

  10. Node.js 内置模块crypto加密模块(1) MD5 和 SHA

    MD5:消息摘要算法(Message-Digest Algorithm) SHA家族:安全散列算法( Secure Hash Algorithm ) 1.首先看一个简单的加密 "use st ...