requireJs

RequireJS是一个JavaScript文件和模块加载器。

• RequireJS包含三个重要的函数：require,define和requirejs。
• 其中require和requirejs其实是同一个函数。

命名空间

模块定义

创建一个项目规划

QQ截图20171103183828.png

1. 在html中

  
    
    
  
  
    

    

    

      
小逗比__PS
      
小逗比__HTML
      
小逗比__CSS
      
小逗比__JavaScript
    
      // 你可以使用本地的--也可以使用cdn
      // data-main = "js/main"  这是入口文件 
    
    
  

2. 创建一个main.js
   这是写入require配置的，也是总文件，引入多个子文件

 // 配置文件
require.config({
  baseUrl: "./js",
    paths:{   // 配置路径
        'mobile' : "https://assets.alicdn.com/apps/top/c/sdk-mobile",
        'jquery': "https://cdn.bootcss.com/jquery/3.2.1/jquery.min",
        // 'zepto': "https://g.alicdn.com/sj/lib/zepto/zepto.min",
        "sui" : "https://g.alicdn.com/msui/sm/0.5.6/js/sm.min",
        'index': 'index',
        'index2': 'index2',
    },
    //require.config()的配置对象
    shim:{
        'index':{  //这里引入的第一个js文件
            // deps: ['zepto','mobile'],  // deps 定义依赖 依赖于jquery
            deps: ['jquery','mobile'],  // deps 定义依赖 依赖于jquery
            exports: 'writeIndex'
        },
        'index2':{  //这里引入的第二个js文件
          deps: ['jquery','mobile'],
            exports: 'writeIndex2'
        }
    }
})
//导入模块
require(['jquery','index','index2'], function ($,index,index2) {
    //这里是指所有的js执行完，执行这里的代码
});

3. 在 index.js 中使用jquery

define(function(){  //定义函数
    $('#div').html("require模块化");
    $('#ul').on("click","li a",function(){
      $(this).css({color:'red'}).parent().siblings("li").children().css({color:"#00e"})
      console.log(($(this).html()+"(你以为这就完事了？？我特么还可以再弹一次，有时候装逼就是这么简单！)"));
    });
});

4. 在index2中使用jquery

define(function(){
  function writeIndex2(){
    $("#div2").html("hello world")
  }
return writeIndex2();
});