• AMD、CMD、CommonJs和ES6对比


    一、AMD(异步模块定义)

    AMD(异步模块定义)是RequireJS在推广过程中对模块定义的规范化产出。AMD是一个概念,RequireJs是对这个概念的实现。比如javascript语言是对ECMAscript语言的实现,ECMAscript是一个组织,RequireJS是这个组织之下制定的一套脚本语言。

    // 异步的动态的加载js文件
    // 依赖别的库,通过数组形式加载库进来['package/lib']
    ## define定义,依赖lib库,通过['package/lib']加载这个库,通过回调函数接受lib参数,可以得到lib里面的一下方法
    define(['package/lib'], function(lib){
        function foo(){
            lib.log("hello world!")
        }
        return {    // return输出
            foo:foo
        }
    })
    引用的话通过require就可以加载。就是异步模块定义,称为依赖前置(依赖或需要的时候在最上面定义好)

    二、CMD(同步模块定义)

    CMD(同步模块定义)是SeaJS(淘宝团队)在推广过程中对模块定义的规范化产出。

    // 所有模块都通过define来定义
    define(function(require, exports, module){
        // 通过require引入依赖
        var $ = require('jquery');
        var Spinning = require('./spinning');
    })
    
    依赖就近(什么时候使用,就什么时候引进来),即用即返回

    三、CommonJS规范

    CommonJS规范-module.exports   是服务端nodeJs后端支持的规范,前端浏览器不支持CommonJS规范。

    是服务端进行模块划分的方式
    exports.area = function(r){
        return Math.PI * r * r;
    }
    exports.circumference = function(r){
        return 2 * Math.PI * r;
    }
    两种输出方式:
    module.exports  没有名字的命名输出
    exports   带有有名字的输出

    四、ES6特性 export/import 导出/导入

    export default{}  // 默认导出
    import router from './router' // 导入
    export function formatDate(date, fmt) {} // 向浏览器暴露这个方法
    import { format } from 'common/js/utils' // 导入
    export let sum = (x,y)=>{ return x+y }
    import * as util from './util'    // 通过*封装起来
    console.log(`sum:${util.sum(1,6)}`)
    
    相当于:
    define('util',function(){
        return {
            sum:function(){
            
            },
            minus:function(){
            
            }
        }
    })
    methods:{
        increment(){
            this.$emit("incre");
            import('./../util')   // 异步加载  与require('...')一样的
        }
    }
  • 相关阅读:
    通过通过url routing解决UIViewController跳转依赖
    vs2010下配置CUDA出现kernel launch failed问题,内核无效
    ganglia监控自己定义metric实践
    faq
    Android进阶图片处理之三级缓存方案
    操作系统 内存管理(一)
    rocketmq消费队列代码
    网页固定側栏的做法
    web爬虫之登录google paly 商店
    C之内存地址
  • 原文地址:https://www.cnblogs.com/ccyinghua/p/7889460.html
Copyright © 2020-2023  润新知