練習範例1

test1.html

在HTML檔案中引入require.js並將data-main設為js資料夾中的common檔案，由於requireJS預設副檔名為js所以可以省略


                    <html>
            <head>
              <script data-main="js/common" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>

js(Folder)

common.js


                    require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone'
              }
          });
          require(['test1']);

test1.js


                    define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

1. JQuery版本:2.1.4
2. Backbone版本:1.2.1
3. underscore版本:1.8.3

練習範例2

test2.html

在HTML檔案中引入require.js並將data-main設為js資料夾中的test2檔案，由於requireJS預設副檔名為js所以可以省略


                    <html>
            <head>
              <script data-main="js/test2" src="js/require.js"></script>
            </head>
            <body>
              123
            </body>
          </html>

js(Folder)

common2.js


                    require.config({
              paths: {
                  jquery: 'jquery-2.1.4.min',
                  underscore: 'underscore',
                  backbone: 'backbone',
                  myTestFunc: 'myTestFunc'
              }
          });
          require(['test1']);

test2.js


                    require(['common2'], function (common){
            require(['myTestFunc']);
          });

myTestFunc.js


                    define(function (require) {
              var $ = require('jquery');
            var _ = require('underscore');
            var backbone = require('backbone');

              $(function(){
                  alert("a");
                  var JQv=$().jquery;
                  var BKv=Backbone.VERSION;
                  var Undv=_.VERSION;

                  var myView = Backbone.View.extend({
                      el: $("body"),
                      initialize: function () {
                          this.showLoadinfo(JQv,Undv,BKv);
                      },
                      showLoadinfo: function (JQv,BKv,Undv) {
                          var hStr="<h1>載入測試</h1><ul id='mylist'>";
                          hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                          hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                          hStr+="<li>3. underscore版本:"+BKv+"</li>";
                          hStr+="</ul>";
                          this.$el.html(hStr);
                      }
                  });
                  var myLoadinfoView = new myView();

              });
          });

結果:

載入測試

1. JQuery版本:2.1.4
2. Backbone版本:1.2.1
3. underscore版本:1.8.3

資深初心者

2015年8月4日星期二

我的requireJS初學練習筆記

練習範例1

結果:

載入測試

練習範例2

結果:

載入測試

沒有留言:

關於我自己

2015年8月4日 星期二

我的requireJS初學練習筆記

練習範例1

結果:

載入測試

練習範例2

結果:

載入測試

沒有留言:

2015年8月4日星期二