本篇文章總結下require.js使用方法。

1.為什么使用require.js?

使用之前，我的頁面的js是這樣的

<script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/bootstrap.min.js"></script><script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script><script type="text/javascript" src="/js/plugins/layer/layer.min.js"></script><script src="/Scripts/common/zTree/js/jquery.ztree.core.js"></script><script src="/Scripts/common/zTree/js/jquery.ztree.excheck.js"></script><script type="text/javascript" src="/js/plugins/layer/laydate/laydate.js"></script><script type="text/javascript" src="/js/Bootstrap-Select/bootstrap-select.js"></script>

由于這些js代碼一般都寫在模板中，因此不管我的頁面如何簡單，用不用的到這么多js，這些js都會加載，而我們大家都知道，加載js時頁面會停止渲染，直到js加載完成后，才繼續渲染，因此造成頁面響應時間會很長，

而且你無法知曉這么多js的依賴關系，如果你移動了js的前后關系，就會出現一些錯誤。

require.js的作用就是為了解決這兩個問題：

1.實現js文件的異步加載，減少網頁響應的時間

2.管理js之間的依賴性，便于維護

2.使用方法講解

首先刪除掉模板頁中的這8個js引用，在自己的頁面引入require.js（沒有的可自行去官網下載）：

<script src="~/Scripts/common/require.js" data-main="/Scripts/main" data-entry="/Scripts/category/category.js"></script>

data-main配置的是主要的js，我這里配置的是網站根目錄下Scripts文件下的main.js，用于全局的配置。

data-entry是我擴展的屬性，用于加載該頁面獨有的js。

以下為main.js代碼：

require.config({  baseUrl: 'http;//www.cdnxxx.com/',  paths: {    "jquery": "hplus/js/jquery.min",    "bootstrap": "hplus/js/bootstrap.min",　　　　 "bootstrapselect": "/Content/Bootstrap-Select/bootstrap-select",　　   "laydate": "/Scripts/plugins/laydate/laydate",    "utility": "/Scripts/utility"  },  shim: {    'bootstrapselect': {      deps: ['jquery', 'bootstrap']    },    'bootstrap': {      deps: ['jquery']    },    'utility': {      deps: ['jquery'],      exports: 'Utility'    },'laydate': {      exports: 'laydate'    }  }});require(['jquery'], function ($) {  var entry = $('[data-entry]').data("entry");  require([entry]);});

其中require.config()方法配置js的路徑，baseUrl指的是基目錄，paths中配置的路徑默認會在前方加上baseUrl的值；

shim參數配置js的依賴項和輸出對象，如bootstrapselect依賴于jquery和bootstrap，laydate輸出/返回的對象為laydate。

當前頁面加載的category.js代碼如下：