[RequireJs] requirejs 初始範例 (載入 jQuery 共存)


\requirejs.html

<!DOCTYPE html>
<html>
    <head>
    <title>require.js範例</title>
    <!-- data-main attribute tells require.js to load
         scripts/main.js after require.js loads. -->
    <script data-main="js/app" src="js/require.js"></script>
    </head>
    <body>
        <h1>require.js範例</h1>
        <span id="jquery-tips"></span>
    </body>
</html>

\js\app.js
requirejs.config({
    baseUrl: 'js',
    paths: {
        app: 'app',
        
        //Example of using require.js to load jQuery from a CDN
        //使用require.js載入 jQuery(CDN來源 jquery-2.0.0.min.js)的範例
        //"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
        //使用require.js載入 jQuery(本地端 jquery-1.11.2.min.js)的範例
        "jquery": "jQuery/jquery-1.11.2.min"
    }
});

// Start loading the main app file. Put all of
// your application logic in there.
requirejs(['main']);


\js\main.js

define(["jquery"], function($) {
  //the jquery plugins have been loaded.
  $(function() {
    if (typeof jQuery != 'undefined') {
      // 檢查及顯示當前 jQuery 版本 (http://blog.webgolds.com/view/392)
      $('#jquery-tips').html('已經載入jQuery。當前jq版本: ' + jQuery.fn.jquery);
    }
  });
});


如果成功執行,可在螢幕上顯示:

require.js範例

已經載入jQuery。當前jq版本: 1.11.2

 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 777