AMD

作者: 丁小时候 | 来源:发表于2016-10-22 23:42 被阅读12次

    AMD https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
    异步模块定义规范(AMD)制定了定义模块的规则,
    这样模块和模块的依赖可以被异步加载。
    这和浏览器的异步加载模块的环境刚好适应
    (浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

    index.html 在body部分
    //这里的data-main = "main" 是同目录 下的main.js
    <script src = "lib/require.js" data-main = "main"></script>

    =============
    main.js

    //配置
    require.config({
    paths :{
    //这里是先加载 , 不执行 ,所以 不用但心 执行 顺序
    //注意 这里 的 文件 不需要 写 后缀
    'jquery' : './lib/jquery-2.1.1.min',
    'Zepto' : './lib/zepto',

        'underscore':   './lib/underscore.min',
        //backbone  依赖 underscore库 , 所以必需有
        //backbone  单页 应用
        'backbone'  :   './lib/backbone.min',
        
        //text  用来 解析  切换 内容 页面的 
        'text'  :   './lib/text',
        
        
        'home'  :   './js/home'
        
    }
    

    });

    // require方法: 当数组内的依赖文件加载完毕之后,
    //再执行回调函数内的方法。
    //这里可以只加载 , 不执行回调函数 , 如test
    //require(['jquery','home','test'],function($,home){

    //假如 下面的 依赖文件 上面没写, 则 根据 路径 来找
    //如 router 假如 ,找的只是js文件
    require(['jquery','router'],function($,router){
    // home.fn1();
    });

    ========================
    home.js

    define(['Zepto'],function(Zepto){
    console.log("home.js");
    function fn1(){
    $('html').css({
    'background':'#000'
    });
    }
    function fn2(){
    $('body').html("hello AMD");
    }

    //多个方法 ,通过 obj返回
    return {
        fn1:fn1,
        fn2:fn2
    }
    

    });

    相关文章

      网友评论

        本文标题:AMD

        本文链接:https://www.haomeiwen.com/subject/mqrjettx.html