RequireJS简单介绍即使用

RequireJS介绍

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

兼容性

 

浏览器（browser） 是否兼容
IE 6+ 兼容 ✔
Firefox 2+ 兼容 ✔
Safari 3.2+ 兼容 ✔
Chrome 3+ 兼容 ✔
Opera 10+ 兼容 ✔

优点

实现js文件的异步加载，避免网页失去响应
管理模块之间的依赖性，便于代码的编写和维护

快速上手

  • step 1
    • 引入require.js
    • require()中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义
    • 第二个参数是回调函数（callback）,可以用来解决模块之间的依赖性
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require(["js/a"], function(){
                alert("load finished");
            });
        </script>
    </head>
    <body>
      body
    </body>
</html>
  • step 2
    • require.config是用来配置模块加载位置
    • 如果固定的位置比较长，可以使用 baseUrl : "js"，则paths中就不用写js了
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require.config({
                paths : {
                    "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
                    "a" : "js/a"                
                }
            });

            require(["jquery", "a"], function(){
                alert("load finished");
            });
        </script>
    </head>
    <body>
      body
    </body>
</html>

 

  • step 3
    • step 2中重复出现了require.config配置，如果每个页面中都加入配置，就显得不大好了，requirejs提供了一种叫"主数据"的功能
    • 创建一个main.js把step 2中require.config放到main.js中
<script data-main="js/main" src="js/require.js"></script>
  • step 4
    • 通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim
require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
});
require(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
});

 

链接

阮一峰关于js模块化编程说明：

posted @ 2016-06-20 20:56  Kuckboy_shan  阅读(2376)  评论(0)  编辑  收藏  举报