Question

Someone had a problem with their code on a different site and I noticed the use of @ a lot in their code and I was merely curious to what it is and why he is using it.

Here is his code:

# 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)

Answer 1

That is not jQuery or JavaScript. It is CoffeeScript and will eventually get converted to JavaScript.

@ is used to refer to properties on the current context (this). So CoffeeScript’s,

@something

is equivalent to JavaScript’s

this.something