RequireJs入門實例

時間 2019-11-30

標籤 requirejs 入門實例欄目 JavaScript 简体版

原文原文鏈接

*css

參考文章：requireJs簡要介紹和完整例子html

按照這篇文章本身動手寫了一個例子，作了小修改jquery

一：目錄框架

二：源碼函數

0，index.htmlui

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Home</title>

    <style type="text/css">  
*{font-family:"微軟雅黑","microsoft Yahei",verdana;}  
.text01{line-height:20px;font-size:13px;font-family:verdana;}  
pre{margin:0px;padding:2px 0px;font-size:13px;font-family:verdana;}  
.div01{border:1px solid red;text-align:left;padding:5px;  
}  
</style>  
</head>
<body>
<h4>requireJS 例子 example 01</h4>  
<div id="loadMsgCon" class="div01"></div>  
<script data-main="scripts/main" src="scripts/require.js"></script> <!--注意 requireJS 文件對應便可,同時data-main屬性值寫對便可-->  
</body>
</html>

1，main.jsthis

//1，about require js config//配置信息  
;  
require.config({  
    //define all js file path base on this base path  
    //actually this can setting same to data-main attribute in script tag  
    //定義全部JS文件的基本路徑,實際這可跟script標籤的data-main有相同的根路徑  
    baseUrl:"./scripts"   
  
    //define each js frame path, not need to add .js suffix name  
    //定義各個JS框架路徑名,不用加後綴 .js  
    ,paths:{   
        "jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "lib/jquery/jquery.min"] //把對應的 jquery 這裏寫對便可  
        ,"workjs01":"work/workjs01"   
        ,"workjs02":"work/workjs02"  
        ,"underscore":"" //路徑未提供，可網上搜索而後加上便可  
    }  
      
    //include NOT AMD specification js frame code  
    //包含其它非AMD規範的JS框架  
    ,shim:{   
        "underscore":{  
            "exports":"_"  
        }  
    }  
      
});  
  
//2，about load each js code basing on different dependency  
//按不一樣前後的依賴關係加載各個JS文件  
require(["jquery","workjs01"],function($,w1){  
    require(['workjs02']);  
});

2，workjs01.jsspa

define(['jquery'],function($){  //注意模塊的寫法  
    //1,define intenal variable area//變量定義區  
    var myModule = {}; //推薦方式  
    
    var moduleName = "work module 01";  
    var version = "1.0.0";  
      
    //2,define intenal funciton area//函數定義區  
    var loadTip = function(tipMsg, refConId){  
        var tipMsg = tipMsg || "module is loaded finish.";  
        if(undefined === refConId || null === refConId || "" === refConId+""){  
            alert(tipMsg);  
        }else{  
            $('#' + (refConId+"")).html(tipMsg);  
        }  
    };  
      
    //3,should be return/output a object[exports/API] if other module need  
    //若有須要暴露(返回)本模塊API(相關定義的變量和函數)給外部其它模塊使用  
    myModule.moduleName = moduleName;  
    myModule.version = version;  
    myModule.loadTip = loadTip;   
    return myModule;  
      
    /* 
    //this is same to four line code upper//跟上面四行同樣 
    return { 
        "moduleName":"work module 01" 
        ,"version":"1.0.0" 
        ,loadTip:loadTip 
    }; 
    */  
      
});

3, workjs02.js.net

define(['workjs01'],function(w01){  
    //1,define intenal variable area//變量定義區  
    var moduleName = "work module 02";  
    var moduleVersion = "1.0.0";  
      
    //2,define intenal funciton area//函數定義區  
    var setHtml = function(refId,strHtml){  
        if(undefined === refConId || null === refConId || "" === refConId+""){  
            return;  
        }else{  
            $('#' + (refId + "")).html(strHtml+"");  
        }  
    };  
      
    //3,auto run when js file is loaded finish  
    //在JS加載完,可在本模塊尾部[return以前]運行某函數,即完成自動運行  
    w01.loadTip("本頁文件都加載完成，本頁設計 workjs01.js 文件依賴jquery, workjs02.js 依賴 workjs01.js","loadMsgCon");  
      
    //4,should be return/output a object[exports/API]  
    //若有須要暴露(返回)本模塊API(相關定義的變量和函數)給外部其它模塊使用  
    return {  
        "moduleName":moduleName  
        ,"version": moduleVersion  
    }  
      
});

三：運行頁面設計

1. RequireJS入門（三） RequireJS入門（三）
2. RequireJS 入門
3. RequireJS入門（三）
4. RequireJS入門（二）
5. RequireJS入門（一）
6. requirejs入門
7. RequireJS入門（一）轉
8. requireJS入門學習
9. RequireJs整理入門
10. requirejs 入門【連接】
更多相關文章...
• Memcached入門教程 - NoSQL教程
• XML DOM 實例 - XML DOM 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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