2011-09-10 14 views
2

誰かが別のサイトで自分のコードに問題がありました。私は@というコードを使用していることに気がつきました。私は単にそれが何で、なぜ彼がそれを使用しているのか不思議でした。 jQueryのまたはJavaScriptではありませんjQuery @ variable?

# check if supports css3 
supports = (-> 
    div = document.createElement("div") 
    vendors = "Khtml Ms O Moz Webkit".split(" ") 
    len = vendors.length 
    (prop) -> 
    return true if prop of div.style 
    prop = prop.replace(/^[a-z]/, (val) -> 
     val.toUpperCase() 
    ) 
    while len-- 
     return true if vendors[len] + prop of div.style 
    false 
)() 

class HandleCarousel 
    constructor: (wrapper, block_number) -> 
    @block_number = block_number 
    @wrapper = wrapper 

    wrapper = null 
    counter: 0 
    block_number: 0 
    loopTimeout = 5000 
    loopTimer = null 

    handleBlur: => 
    helpers.windowState = 'blur' 
    window.clearTimeout(@loopTimer) 
    @counter = 0 
    # reset all 
    target = @wrapper.find('ul') 
    target.css({left: 0}) 
    target.clearQueue() 
    target.find('ul').stop() 
    handleFocus: => 
    if helpers.windowState == 'blur' 
     helpers.windowState = 'focus' 
     @start(5000) 

    handleWindowState: -> 
    $(window).blur(@handleBlur) 
    $(window).focus(@handleFocus) 

    loop: -> 
    @counter++ 
    slider = @wrapper.find('ul') 
    block = @wrapper.find('ul li') 
    delta = parseInt(block.css('width'), 10) * @counter * (-1) 
    if (@counter < @block_number) 
     # check css3 support 
     if slider.hasClass 'css3' 
     slider.css({'left': delta}) 
     else 
     slider.animate({'left': delta},{duration: 500, easing: 'easeInSine'}) 
    else 
     @counter = 0 
     @wrapper.find('ul').css({left: 0}) 

    if (@counter is 0 || @counter is @block_number-1) 
     if @counter is 0 
     slider.removeClass 'css3' 
     @loopTimeout = 2500 
     #/ 
    else 
     slider.addClass 'css3' 
     @loopTimeout = 5000 

    @start(@loopTimeout) #if helpers.windowState isnt 'blur' 

    # start loop slider 
    start: (time) -> 
    console.log 'start' 
    @loopTimer = window.setTimeout(=> 
     @loop() 
    , time) 



helpers = { 
    windowState: 'focus' 
    iDevice: /iphone|ipad/i.test(navigator.userAgent.toLowerCase()) 
    updateOrientation: -> 
    location.reload() 
    hasTouch : /android|iphone|ipad/i.test(navigator.userAgent.toLowerCase()) 
    supportsTouch: -> # "'createTouch' in document" will return true in Apple's Mobile Safari. Otherwise detect Android directly. 
    android = navigator.userAgent.indexOf('Android') != -1 
    return android || !!('createTouch' in document) 

}# /helpers 


jQuery -> 
    window.console ?= 
    log:-> #patch so console.log() never causes error even in IE. 

    if $('.carousel').length>0 
    target = $('.carousel') 
    if supports('textShadow') 
     target.find('ul').addClass 'css3' 
    firstImg = target.find('ul li:first').html() 
    console.log firstImg 
    target.find('ul').append('<li>'+firstImg+'</li>') 
    carousel_items = target.find('li').length 
    if carousel_items > 2 
     carousel = new HandleCarousel(target, carousel_items) 
     carousel.handleWindowState() 
     carousel.start(carousel.loopTimeout) 

答えて

8

は、ここで彼のコードです。それはCoffeeScriptであり、最終的にJavaScriptに変換されます。

@は、現在のコンテキスト(this)のプロパティを参照するために使用されます。だから、CoffeeScriptのの、

@something 

は、私が見たJavaScriptの

this.something 
+0

ああと同じですが、CoffeeScriptのを使用してのポイントは何でしょう、そこに多くのメリットがありますか? – daryl

+0

はい。 http://jashkenas.github.com/coffee-script/ –

関連する問題