require.js因为默认加载的文件都是js文件,所以如果要加载css文件的话就得借助插件了。
这里搜索了一下,发现require-css这个插件用的最多,所以随大流看一下这个插件怎么用。
首先当然下载js文件,这个可以去github搜索项目地址下载。
将js文件放入工程目录后,接下来就是敲代码了。

require.config(
        {
            paths: {
                'jquery': 'js/jquery-3.2.1',
                'bootstrap' : 'http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min',
            },
            map: {
                '*': {
                    'css': 'js/css'
                }
            },
            shim: {
                bootstrap: {
                    deps: [
                        'css!http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css'
                    ]
                }
            }
        }
    );
require(["bootstrap"]);

这里在require.config()中添加两个属性,一个是map,一个是shim。
map属性是require.js中一个映射的概念,它的主要作用是解决同名依赖的冲突。也就是两个js文件都有一个名叫module的依赖,但其实依赖的js文件不一样,那么这里就可以在map属性中配置

map{
   'js1':{
      'module':'js-module1'
      },
   'js2':{
      'module':'js-module2'
      }
}

这里js1和js2中加载的模块就会分别指向正确的文件。
而我们这里的配置就是表示所有的文件都会加载css.js这个文件。
shim属性则是require.js专门用来加载非规范的模块,这里就是用这个属性来加载css文件。deps表示依赖的文件或模块。
不过这里要在地址前加上css!作为标志。
这里有一点要注意的是:
1.可以看到这里bootstrap.js和bootstrap.css的模块名称都一样,所以加载的时候一个require(‘bootstrap’)就可以了。但是如果这里bootstrap不一样,比如bootstrap.css的名称是a的话,这里require(‘a’)还会加载一个a.js文件,当然是没有这个文件导致加载失败。或者会加载可能存在的但你不需要的文件。所以这里的模块名称最好和有依赖关系的js文件一样。
2.在上一节的内容中我是单独加载两个js模块的,后来继续写代码发现无法使用jquery的方法,$对象不存在。后来发现是自己粗心了。

define(['jquery'],function($){
    useAjax();
});

这里define方法会接受两个参数,一个是依赖的模块,一个是一个函数对象,函数中的参数就是所以来的模块对象,这样就可以使用模块的方法了。
测试:
测试
可以看到这里成功加载了需要的js和css文件。不过可以注意这里的加载顺序,define方法中jquery模块首先加载,然后是map中设置的css模块。而bootstrap模块先加载的是css文件,在执行了define方法的ajax后才加载了bootstrap的js文件。具体原因我还没搞清楚,不过在使用require.js的时候还是要需要注意下这个加载的顺序,以免导致错误。

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐