requirejs 筆記

時間 2019-11-08

原文原文鏈接

index.htmlhtml

<!doctype html>
<html>
    <head>
        <title>requirejs</title>
        <meta charset="utf-8">
        <script data-main="js/main" src="js/require.js"></script>
    </head>
    <body>

    </body>
</html>

main.js 合併js功能jquery

require.config({
    // baseUrl: 'js/lib', 若是加載的這三個js不和main在一個目錄下，就這樣配置這個參數，或者直接寫網址路徑
    paths: {
        underscore: 'underscore.min',
        backbone:'backbone.min',
        jquery: 'jquery-1.9.1.min',
        math :'math'
    },
    /*
        shim屬性，專門用來配置不兼容的模塊。具體來講，每一個模塊要定義（1）exports值（輸
        出的變量名），代表這個模塊外部調用時的名稱；（2）deps數組，代表該模塊的依賴性。
    */
    shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}

　　　　}
/*jQuery的插件能夠這樣定義
    shim: {

　　　　'jquery.scroll': {

　　　　　　deps: ['jquery'],

　　　　　　exports: 'jQuery.fn.scroll'

　　　　}

　　}
*/

});
 
// require(['jquery'], function($) {
//     alert($().jquery);
// });

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　// some code here
    alert($().jquery);
});
// 若是不依賴其餘模塊
require(['math'],function(math){
    alert(math.add(1,2))
})
// domready插件，能夠讓回調函數在頁面DOM結構加載完成後再運行。
require(['domready!'], function (doc){

　　　　// called once the DOM is ready

});

/*
    require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，
    上例就是['moduleA', 'moduleB', 'moduleC']，即主模塊依賴這三個模塊；第二個參數是一個回調函數，
    當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就
    能夠使用這些模塊。
*/
/* 
    require()異步加載moduleA，moduleB和moduleC，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊
    都加載成功後，纔會運行，解決了依賴性的問題。
 */
/*
    一、data-main屬性
    二、require.config方法
    三、require函數 
*/

View Code

math.js 自定的js數組

// 這種定義 是不依賴其餘模塊
define(function(){
    var add = function( x , y){
        return x+y ;
    }
    return{
        add : add
    }
});

// 不然 這樣定義

// define(['mylib'],function(mylib){
//     function foo(){
// 　　　mylib.doSomething();
// 　}

// return {

// 　　foo : foo

// 　};
// })

View Code

1. requirejs筆記
2. RequireJS配置項筆記
3. JS模塊化工具requireJS學習筆記（一）初識requirejs
4. 【AngularJs學習筆記四】Grunt+Bower+Requirejs+Angular
5. requirejs
6. requireJS
7. RequireJS
8. requireJS介紹
9. RequireJS（一）
10. 【RequireJS】requireJS的基礎知識
更多相關文章...
• ASP.NET Razor - 標記 - ASP.NET 教程
• ADO 添加記錄 - ADO 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• Docker容器實戰(六) - 容器的隔離與限制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。