Require,js配置使用心得

首先你们要知道requirejs是干吗用的，要解释，那就用一句话说下：RequireJS是一个JavaScript文件和模块加载器

接下来咱们开始学会配置使用requireJs，固然在学习使用的过程当中也遇到了不少坑，不论是百度仍是什么方法最终解决了，因此分享给你们，也方便下次使用时忘掉！

一、首页看一下我本身建的项目目录结构，这对接下来配置requireJs有很大的做用

二、下载requireJs及requireJs-text.js，将requirejs引入html文件中

设置async="true"的做用很明显和jq的ajax中async：true的目的是同样的，就是一边加载RequireJs一边执行它，若是设置为false的话则会等待ReuireJs彻底加载完成采起执行它的方法，这会有很大可能致使页面刚开始一片空白，对于一个开发者来讲，好像不是很友好。固然若是你script标签不在head里而在页面的最尾部，那你设不设置都是同样的，由于他最好才会加载，我并不建议你们这样作；data-main="scripts/main"的做用是申明RequireJs会去scripts目录下去找main.js文件，一般main.js是项目目录以及全局配置文件，这里也不例外
三、接下来咱们该设置全局配置以及文件路劲了（main.js）

baseUrl    是设置你项目的路径，在接下来的路劲配置中都会以baseUrl设置的路劲做为相对路径去查找，请注意，这是个人文件目录下，个人require.js和全局配置文件（main.js）都是放在scripts目录下的

paths   是预加载js文件的配置项，通常状况都是不用写后缀名的，固然你的注意你的文件路劲，这里是个人文件路径，个人全部本地脚本都放在了js文件夹下，因此就是相对baseUrl的路径的上一目录的js目录下，
你也能够引入html文件，在引入hrml文件是你的确保你已经有而且引入text.js文件了，固然我把text.js放在了scripts目录下，因此之间去找同级就能够了

waitSeconds  设置的数值的做用的在这个时间段内若是没有加载成功或路径没有找到RequireJs会本身认为加载失败
四、如今咱们看看如何引入css全局文件以及按需加载响应文件

就像图片上看到的同样，必须设置map为全局（*）配置css的引入js，个人这个js文件显然是放在baseUrl的同级目录下的，文件名为：css.min，这个是引入css必须的文件
加下来你会看到shim选项下有一个Btn数组配置了一堆css路劲，而这个Btn你也会发如今paths选项下我有配置，引入了本身的一个js，在这个js（Setting.js）是我项目必需要使用到的全局js文件，能够是我本身封装的方法以及第三方方法之类的，使用它作键值名的缘由就是当我执行或者使用这个js文件是，下面数组里我配置的css文件就会所有引入到页面，好处很明显就是能够用做全局样式的引入
下面的bootstrap以及swiper的就是按需加载方法的例子，前面的jquery说明bootstrap是要依赖于jquery的，使用css!的方法就是会去相对路径去找这个css，而你会发现bootstrap的对象名适合上面paths配置项下的bootstrap的配置名是一致的，特别须要注意的是你的文件的路径，这里是个人项目目录所对应的文件路径。
固然你也可使用这种方法去当个加载一个css样式，可是这是很是麻烦的

define(["require"], function(require) {
    var cssUrl = require.toUrl("./css/Style.css");
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = cssUrl;
    document.getElementsByTagName("head")[0].appendChild(link);
});

　　五、接下来就是你该如何使用刚才配置的js以及css了
Requirejs提供的方法很简单

require( ['jquery','bootstrap','Btn'],function($,bootstrap,Btn) {
    console.log(Btn)
    $('#Nav').html('style'me)
})  

　　你会发现对象的参数都是你刚才配置文件路径起的名字，就是jquery,后面函数的参数适合对象里的参数一一对应的，像jquery使用的是$，那咱们传$就表明着在方法内咱们已经可使用jquery方法了，Btn是个人全局本地js文件，不作任何操做只须要引进来就好了，这时候咱们在Btn配置的js中也就是Setting.js直接可使用jquery的方法了，也就是启动了RequireJs，看图，bootstrap已经能够用了

并且我Setting.js的方法生效啦

浏览器显示点击黑色的盒子已经执行的方法

六、接下来就是如何引入以及使用html的模板了
首先你会看到我已经在paths下配置过两个html页面了，名字分别为page1和page2，在这个基础上配置了text的选项，由于引入html文件是依赖text.js的
用法也很简单，跟启动RequireJs同样的，须要传参到数组里，而且在函数里传入相应的参数就可使用了
这是text.html和test1.html两个文件

参数接收传入直接使用

require( ['jquery','bootstrap','Btn','text!page1','text!page2'],function($,bootstrap,Btn,template,template1) {
    $('#Btn').bind('click',function(){
        $('#Nav').html(template)
    })
    $('#Btn1').bind('click',function(){
        $('#Nav').html(template1)
    })
}) 

　　点击两个按钮能够分别加载不一样的html模板到页面来也是不错的

嗯，就先说这些，固然还有不少，好比说r.js打包，build.js配置，欢迎留言交流！

 

//想一块儿学习交流的欢迎来qq群：565996731（申请注明来自博客园）