2012-04-05

Yepnope.js 和 CoffeeScript 拆檔

Yepnope.js 和 CoffeeScript 拆檔其實是兩回事。
Yepnope.js 和 RequireJS 提供類似的功能, 都是用來載入外部的 *.js 或 *.css。Yepnope.js 可以依條件而決定是否載入, 同時也可以確保我們要的執行順序, 感覺還不錯。
但 Yepnope.js 和 coffee-script.js 搭配時, 無法直接透過 Yepnope.js 載入 *.coffee 並執行; 而是在載入 coffee-script.js 後, 以 CoffeeScript.load() 分別載入 *.coffee 檔。
以下的範例又搭配 Backbone.js, 為了讓類別定義可以自由取用, 將類別名放在 window.myproj 物件下當做屬性。

<<< t03_yepnope.html ----------------------------------->>>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 </head>
 <body>
  <div id="buttons" mydata="shinder">
   <button id="b1"> Button 1 </button>
   <button> Button 2 </button>
   <button> Button 3 </button>
  </div>
  <script type="text/javascript" src="js/yepnope.1.5.3-min.js"></script>
  <script type="text/javascript">
   var coffees = ['t03_yepnope2', 't03_yepnope1', 't03_yepnope3'];

   yepnope([
    { load: "js/jquery-1.7.1.js" },
    { load: "js/underscore-1.3.1.js" },
    { test: !JSON, yep:"js/json2_min.js" },
    { load: "js/backbone.js" },
    {
     load: "js/coffee-script.js",
     complete: function(){
      for(var i=0; i<coffees.length; i++) {
       CoffeeScript.load( coffees[i] + ".coffee"); 
      }
     }
    }
    ]);
  </script>
 </body>
</html> 

<<< t03_yepnope1.coffee ----------------------------------->>>
$ = jQuery
window.myproj ||= {}
$ ->
 class myproj.MainView extends Backbone.View
  el: 'body'
  initialize: ->
   buttons = new myproj.ButtonsView
   console.log buttons.$el.attr('mydata')

<<< t03_yepnope2.coffee ----------------------------------->>>
$ = jQuery
window.myproj ||= {}
$ ->
 class myproj.ButtonsView extends Backbone.View
  el: '#buttons'
  events:
   'click': 'onClick'
   'click #b1': 'b1Click'
   'click button:eq(1)': 'b2Click'
   'click button:nth-child(odd)': 'oddClick'
  onClick: (event)->
   # console.log event  # jQuery.Event
   console.log $(event.target).html()
  b1Click: ->
   console.log 'b1'
  b2Click: ->
   console.log 'b2'
  oddClick: ->
   console.log 'odd'

<<< t03_yepnope3.coffee ----------------------------------->>>
$ = jQuery
window.myproj ||= {}
$ ->
 mainView = new myproj.MainView;

相關文章: Yepnope.js 和 CoffeeScript 拆檔 (續)

1 則留言:

Shinder 提到...

看了 browser.coffee 的原始碼, CoffeeScript.load 走的是非同步模式(asynchronous)

https://github.com/jashkenas/coffee-script/blob/master/src/browser.coffee

FB 留言