如何在CoffeeScript中創建一個jQuery插件？

在How to Create a Basic Plugin有一個標題爲保護$別名和添加範圍。如何在CoffeeScript中創建一個jQuery插件？

的$變量是JavaScript庫中很受歡迎，如果你使用jQuery的另一個庫，你將不得不作出的jQuery 不jQuery.noConflict使用$（）。但是，這會破壞我們的插件，因爲它是在假設$是jQuery函數的的別名的情況下編寫的。爲了與其他插件很好地工作，並且仍然使用 jQuery的$別名，我們需要把我們的所有代碼立即調用函數表達式裏面，然後通過功能 jQuery和命名參數$：

在JavaScript中，這種包裝是這樣的：

(function ($) { 
    // do stuff 
    return this; 
})(jQuery)

怎麼可以這樣翻譯成CoffeeScript的？

來源

2013-08-06 FakeRainBrigand

這CoffeeScript的：

$ = jQuery 
### do stuff ###

編譯爲：

// Generated by CoffeeScript 1.6.3 
(function() { 
    var $; 
    $ = jQuery; 
    /* do stuff*/ 
}).call(this);

我覺得效果是一樣的，保證$點jQuery不管是什麼$是在調用環境。

這就是CoffeeScript中筆者建議Writing a jquery plugin in coffeescript - how to get "(function($)" and "(jQuery)"?

爲了更接近原始模式（do仍然是一個黑箱的東西對我來說）

do ($=jQuery) -> 
    ### do stuff ### 
    @

「裸」編譯爲：

// Generated by CoffeeScript 1.6.3 
(function($) { 
    /* do stuff*/ 

    return this; 
})(jQuery);

來源

2013-08-07 01:55:58 hpaulj

好點。這更簡潔:-) – FakeRainBrigand

起初它並不明顯。這是骨架。

$.fn.ourFunction = do ($=jQuery) -> (opts) -> 
    # do stuff 
    @

它編譯成這樣：

$.fn.ourFunction = (function($) { 
    return function(opts) { 
    return this; 
    }; 
})(jQuery);

我們還可以分成好幾行清晰這一點。

$.fn.ourFunction = do ($=jQuery) -> 
    (opts) -> 
    # do stuff 
    @

我們的第一行使用do語法，其初始運行的功能。我們還可以指定參數（例如$）及其值（例如jQuery）。

$.fn.ourFunction = do ($=jQuery) ->

我們的第二行創建一個返回的函數。請記住，CoffeeScript中的所有內容都是表達式，所以我們不需要說return (opts) ->（但可以）。

(opts) ->

然後，當然，我們的代碼的主體，實際工作發生的地方。我忽略了最初代碼中的一個技巧是使用=>運算符來維護範圍。在我們的滾動處理程序中，我們可以強制this保持我們的目標對象。我們可以撥打$('#something').ourFunction()，我們有效地在我們的滾動處理程序中調用$('#something').something()。

$.fn.ourFunction = do ($=jQuery) -> 
    (opts) -> 
    $(window).scroll => 
     this.something() 
     @something() 
    @

我們的最後一行是簡單的@字符。這允許鏈接，因爲我們正在返回this。或者，如果我們的最後一行在this上調用另一個可鏈接方法，我們不需要明確說明。

$.fn.flash = do ($=jQuery) -> (opts) -> 
    @animate(opacity: 0).delay() 
    .animate({opacity: 1})

來源

2013-08-06 06:33:43 FakeRainBrigand

如何在CoffeeScript中創建一個jQuery插件？

回答

相關問題