require.js

最近项目需要用require.js所以就看了看，以下为require.js的基本用法。
参考文献：
菜鸟教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html
阮一峰网络日志：http://www.ruanyifeng.com/blog/2012/11/require_js.html

为什么要用require.js

最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载多个js文件。
这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
require.js的诞生为了解决：
1）实现js文件的异步加载，避免网页失去响应；
2）管理模块之间的依赖性，便于代码的编写和维护。

如何使用require.js

• 首先去官网下载最新插件点我下载
• 将require.js引入到项目中 使用引入
  使用data-main 加载我们自己的代码（主模块）假设我们的文件名称为demo.js

• require.js 基本API
  require会定义2个变量：
  define ： 从名字就可以看出这个api是用来定义一个模块
  require ：加载依赖模块，并执行加载完后的回调函数
  使用这两个变量定义引用路径的时候文件名不用写成 demo.js 直接写demo就行

一、代码不依赖任何其他模块

通过define函数定义了一个模块：

define(function(){ 
    function fun1(){ 
      alert("it works"); 
     } 
    fun1();
})

然后在页面中用require使用

require(["demo"]);

来加载该模块(注意require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义)，requir API的第二个参数是callback，一个function，是用来处理加载完毕后的逻辑

require(["demo"],function(){
     alert("load finished");
})

二、模块的加载

假如需要用各种插件（比如jquery或者是基于jquery的插件）
首先创建一个js文件 我们起名为min.js，用require.config来配置我们所用插件的路径方便多项目调动

设置的方式有两种：
1、直接把路径写在path中

require.config({
 paths :{
    "jquery" : ".js/jquery-1.12.3.min",
    "placeholder":"js/placeholderfriend",
    "swiper":"js/idangerous.swiper.min",
    "bar":"js/jqbar",
    "city":"js/jquery.citys"
 },
 //使用shim声明插件基于什么开发的比如以下都为jquery的插件
 shim:{
   "placeholder":{
     deps: ["jquery"]
  },
  "swiper":{
     deps: ["jquery"]
  },
  "bar":{
     deps:['jquery']
  },
  "city":{
     deps:['jquery']
  }
 }
})

然后在demo.js中引入

//define后面的路径就是刚配置完产检的js路径
define(["main"],function(){
//require 后参数需要的插件（要写成数组形式，即使只用一个）
 require(['jquery','placeholder'],function(){

  //下面就可以正常写代码了 如

  $(function(){
   
        $("#btn").click(function(){
              alert("我点击了")
        });
         
   })
 })
 
})

2、直接改变基目录（baseUrl）

require.config({
 baseUrl: "js",
 paths :{
    "jquery" : "jquery-1.12.3.min",
    "placeholder":"placeholderfriend",
    "swiper":"idangerous.swiper.min",
    "bar":"jqbar",
    "city":"jquery.citys"
 },
 //使用shim声明插件基于什么开发的比如以下都为jquery的插件
 shim:{
   "placeholder":{
     deps: ["jquery"]
  },
  "swiper":{
     deps: ["jquery"]
  },
  "bar":{
     deps:['jquery']
  },
  "city":{
     deps:['jquery']
  }
 }
})

后面就一样了

恩，差不多就这样了。