有图有真相,先上图。

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

首先我们先来看一下整体的结构。(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. Modbus通讯协议学习 - 认识篇

    转自:http://www.cnblogs.com/luomingui/archive/2013/06/14/Modbus.html 什么是Modbus? Modbus 协议是应用于电子控制器上的一种 ...

  2. Eclipse插件:tomcatPluginV33.zip 安装

    一.下载 地址:http://www.eclipsetotale.com/tomcatPlugin.html 二.安装 1.解压tomcatPluginV33.zip到Eclipse的\feature ...

  3. [hdu3853]LOOPS(概率dp)

    题意:迷宫是一个R*C的布局,每个格子中给出停留在原地,往右走一个,往下走一格的概率,起点在(1,1),终点在(R,C),每走一格消耗两点能量,求出最后所需要的能量期望. 解题关键:概率dp反向求期望 ...

  4. 动态调用dll遇到的问题

    问题:动态调用第三方提供的dll报错. Run-Time Check Failure #0 - The value of ESP was not properly saved across a fun ...

  5. 10天彻底搞定-webpack4.0

    本机存放的路径: F:\教程\10天彻底搞定-webpack4.0 联想电脑代码存放的路径: D:\MyDemos\webpack4 10天彻底搞定-webpack4.0 1.webpack课程介绍 ...

  6. 初步使用redis

    1.导入jar包 2.新建类: public class JedisAdapter { private static final Logger logger = LoggerFactory.getLo ...

  7. Weekly Contest 113

    949. Largest Time for Given Digits (string::compare) Given an array of 4 digits, return the largest ...

  8. VMware Workstation “无法连接 MKS: 套接字连接尝试次数太多;正在放弃。” 解决方法【转】

    今天和往常一样打开电脑,打开VMware Workstation,打开其中的一台虚拟机,以前都是这么打开没有问题,今天打开虚拟机突然提示“无法连接 MKS: 套接字连接尝试次数太多:正在放弃.”. 经 ...

  9. cf813C(bfs)

    题目链接:http://codeforces.com/problemset/problem/813/C 题意:给出一颗树,开始时两个人 Alice 和 Bob 分别站在 1(树根)和 x 处.此后每一 ...

  10. 洛谷P1602 Sramoc问题

    P1602 Sramoc问题 题目描述 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐 ...