有图有真相,先上图。

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

首先我们先来看一下整体的结构。(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. JavaScript:Map使用

    定义Map /** * Map * */ function Map() { /** 存放键的数组(遍历用到) */ this.keys = new Array(); /** 存放数据 */ this. ...

  2. bzoj5093

    NTT+组合数学 $把每个点分别按度数考虑,由于有标号,可以得出$ $ans=n*2^{(n-1)*(n-2)}*\sum_{i=1}^{n-1}{C(n-1,i)*i^{k}}$ $本质上是求\su ...

  3. Linux 之 .bashrc 文件作用

    Linux 系统中很多 shell,包括bash,sh,zsh,dash 和 korn 等,不管哪种 shell 都会有一个 .bashrc 的隐藏文件,它就相当于 shell 的配置文件. 一般会有 ...

  4. echarts学习的一些笔记

    工具栏组件 Show 是否显示 Feature 具体显示的功能 saveAslmage  保存图片 Restore 还原 dataZoom  缩放视图 magicType 动态类型切换 toltip组 ...

  5. [开发技巧]·TensorFlow&Keras GPU使用技巧

    [开发技巧]·TensorFlow&Keras GPU使用技巧 ​ 1.问题描述 在使用TensorFlow&Keras通过GPU进行加速训练时,有时在训练一个任务的时候需要去测试结果 ...

  6. 2018杭电多校第三场1003(状态压缩DP)

    #include<bits/stdc++.h>using namespace std;const int mod =1e9+7;int dp[1<<10];int cnt[1& ...

  7. 洛谷P1070 道路游戏

    P1070 道路游戏 题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将 ...

  8. 洛谷P1722 矩阵 II(Catalan数)

    P1722 矩阵 II 题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(us ...

  9. 加权并查集(银河英雄传说,Cube Stacking)

    洛谷P1196 银河英雄传说 题目描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展.宇宙历七九九年,银河系的两大军事集团在 ...

  10. Android实现监听控件点击事件

    Android实现监听控件点击事件 引言 这篇文章主要想写一下Android实现监听点击事件的几种方法,Activity和Fragment实现起来有些方法上会有些不同,这里也略做介绍. 最近一直在忙一 ...