• requireJS的配置心得


    1、html页面中如果同时存在data-main和require()和配置(config中的baseUrl)
    ,那么定义根路径 baseUrl > data-main > index.html 但是data-main和index中的require也都会执行 


    2、data-main的入口问题:
    a. 首先的问题是你在main.js中所设置的脚本是异步加载的。所以如果你在data-main所指的js页面中配置了其它JS加载,则html主页面则不能保证它们所依赖的JS已经加载成功。

    3、配置路径paths所导致的问题
    当你paths:{
    "h":"modules/header",
    "f":"modules/footer"
    } 的时候,如果这个配置被加载后,如果你在访问配置后的文件(指的是js文件),第一次访问的路径非常关键
    为什么说关键?
    因为此时的这个js文件已经被路径“锁定”
    例如访问 modules/header/header.js文件
    a: 如果第一次用h/header.js访问的话,那么此时的header.js文件的路径被h/header.js锁定,再想访问的话就只能通过这条路径访问,
    modules/header/header.js访问会报错。
    b: 如果第一次用modules/header/header.js访问该js文件的话,那么即使这个文件被配置了,那么h/header.js也将访问不到这个js文件(但是可以通过h访问modules/header文件夹下面的js文件,如module/header/skin.js文件)


    4、paths和map联合使用导致的问题
    eg:如本文件夹中的main.js
    paths: {
    'h': 'modules/header',
    'f': 'modules/footer'
    }
    map: {
    'h': {
    // 引入jquery10版本
    'lib/jquery': 'lib/jquery10'
    },
    'f': {
    'lib/jquery': 'lib/jquery200'
    }
    ,
    'modules/header/skin': {
    'lib/jquery': 'lib/jquery-1.12.2'
    }
    }
    在以上的两条配置中,虽然将modules/header赋值给了h,但是在后面的代码中想要正确的引入jq10版本必须用h/...的形式,用modules/header的方式不可以(因为我们定义的时候是用h定义的)

    5、require([],fn)中[]内文件是异步加载的
    require(["mvc","bg/bg","header/header","home/home","foot/foot","bottom/bottom","css!../lib/reset.css"],function(MVC){
    MVC.install();
    })

    //注意:这个中括号里面的文件都是异步加载的,我没有在main.js引入jq,在bg加载时如果也没有传入jquery的话,按理来说它的回调函数是不能用$的,但是试验证明回调函数可以用$,这就是引文它后面的header.js加载到了jquery,requirejs特点加载既执行,所以在全局作用域下就有了$了!!

    6、配置中shim的问题
    拿作品里的MVCrequire版举例
    paths:{
    jquery:"../lib/jquery-1.12.2",
    mvc:"../lib/MVC"
    },
    shim:{
    mvc:{
    exports:"MVC",
    deps:[]
    }
    }
    主要看exports这个属性,它暴露的是MVC这个对象(这个对象必须在MVC.js这个文件中存在),
    这个MVC这个名不是随便起的,它是把MVC.js中的一个变量MVC作为接口暴露出来的,这样之后再次访问该路径下的MVC.js,就会得到MVC对象

    再举一个例子:
    shim: {
    // 处理jquery文件
    'lib/jquery-1.12.2': {
    // 定义接口
    exports: '$',
    // 定义依赖集合
    deps: []
    }
    },
    在这个例子中,(main是主入口,header是由main require进来的一个文件)
    define(['modules/header/skin', 'lib/jquery-1.12.2'],fn)
    如果直接像上面这一行这么引入,会是underfined的,因为jquery的路径(lib/jquery-1.12.2)和名字(jquery,这个是JQ内置暴露的名字)不一样
    解决这个问题有两个办法:
    a:paths: {
    jquery: 'lib/jquery-1.12.2'
    }
    直接配置这个路径,使他的名字和路径一样
    b:还是define(['modules/header/skin', 'lib/jquery-1.12.2'],fn)这样直接引入,不过在引入之前要 shim: {
    // 处理jquery文件
    'lib/jquery-1.12.2': {
    // 定义接口
    exports: '$',
    // 定义依赖集合
    deps: []
    }
    }
    这样的话,只要你路径写对了,访问到这个文件了,它就会把$暴露出来!


    还有 这里配置的mvc是一个路径


    小提示:想看JQ版本号,用$().jquery

  • 相关阅读:
    dp 简单例题poj 1260 Pearls
    多校赛 Barareh on Fire
    中国剩余定理的简单应用 poj 1006 Biorhythms
    CF 5A. Chat Server's Outgoing Traffic
    springmvc使用aop心得
    Firefox添加插件支持修改Headers
    提高网站打开速度的18点要素
    用maven打包项目成war文件
    springmvc使用@ResponseBody返回json乱码解决方法
    用JS实现删除买家信息(阿里巴巴模拟笔试)
  • 原文地址:https://www.cnblogs.com/bandeng/p/6403612.html
Copyright © 2020-2023  润新知