zoukankan      html  css  js  c++  java
  • 一、vue最外层结构

    Vue.js v2.5.16源码分析

    最外层框架

    (function (global, factory) {
        // 判断是不是AMD Commonjs模块写法
        typeof exports === 'object' && typeof module !== 'undefined'
            ? module.exports = factory()
        	: typeof define === 'function' && define.amd 
                ? define(factory) 
                : (global.Vue = factory());
    }(this, (function (){
        /*
        	vue实现的全部内容...
        */
    }))); // 最外层使用()包裹起来形成单独作用域
    

    最外层框架是一个自执行函数 (function(gloal, factory){} ())
    其中global是自执行函数中第一个形参,执行的时候将this传递进去
    factory是第二个形参,参数传递的是一个匿名函数,该匿名函数内部包含vue处理的全部逻辑 ( function(){ /* 具体处理 */} )

    AMD CMD模块写法分析

    自执行函数中,通过this上是否挂载module,define来判断是否是CommonJs AMD模块化写法,如果不是,就执行 global.Vue = factory(),将传入的factory函数执行,并赋值给挂载在全局对象的Vue属性上。

    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
            typeof define === 'function' && define.amd ? define(factory) :
                (global.Vue = factory());
    // 如果引入的是在CommonJS中,this上会挂载exports,module属性,通过typeof exports === 'object' && typeof module !== 'undefined'判断是否是CommonJS模块环境
    // 如果是CommonJS模块,执行 module.exports = factory(),将factory执行并通过module.exports导出
    // 如果不是CommonJS模块,执行 typeof define === 'function' && define.amd,来判断是否是AMD模块写法
    // 如果是AMD模块,通过define(factory)导出,
    // 如果也不是AMD模块,就执行global.Vue = factory()
    

    以上代码 参照MDN运算优先级 分析

    typeof优先级16,三元运算符4,!==优先级10,&&优先级6,成员访问(a.b)优先级19

    以上关于AMD,CommonJS模块化的规范就不详细说明了。

  • 相关阅读:
    【论文笔记】迁移自适应学习综述
    David Silver强化学习Lecture3:动态规划
    David Silver强化学习Lecture2:马尔可夫决策过程
    David Silver强化学习Lecture1:强化学习简介
    【论文笔记】深度人脸识别综述
    《构建之法》读书笔记
    个人作业——软件工程实践总结
    个人作业——关于K米的产品案例分析
    Hibernate简单增删改查
    Intellij IDEA中的Hibernate配置(MySQL8.0+Hibernate5.4.11)
  • 原文地址:https://www.cnblogs.com/kenanyah/p/13031343.html
Copyright © 2011-2022 走看看