jQuery가 CoffeeScript를 만났을 때 Sharing_jquery를 사용하세요.

몇 년 전 처음 jQuery를 접했을 때 나는 마치 프로그래머의 천국에 있는 것 같은 느낌을 받았습니다. DOM 조작을 크게 단순화합니다. 함수형 프로그래밍이 너무 쉬워졌습니다. 최근 몇 년간 RIA 개발에 적합한 프레임워크가 많이 등장했지만, jQuery 없이 프로그램을 산다는 것이 얼마나 죄스러운 일인지는 아직도 상상이 안 가네요~
제가 찾아왔습니다. CoffeeScript World, 똑같은 놀라운 이야기가 다시 일어나고 있습니다. 몇 줄의 코드를 작성하고 나면 더 이상 기본 Javascript를 놓치지 않을 것이라고 확신합니다. CoffeeScript에는 많은 새로운 기능이 포함되어 있으며 이를 jQuery와 결합하면 새로운 세계를 발견하게 될 것입니다.
이 글의 목적은 CoffeeScript와 jQuery가 함께 작동하는 멋진 장면을 보여주는 것입니다.
상사처럼 코드 명령
CoffeeScript는 다양한 멋진 배열 반복 방법을 제공합니다. 가장 좋은 점은 이것이 배열뿐만 아니라 jQuery 객체에서도 작동한다는 것입니다. 시적인 코드를 작성해 보겠습니다.
formValues ​​​​= (elem.value for elem in $('.input'))
이 코드 줄은 다음 Javascript로 변환됩니다.

코드 복사 코드는 다음과 같습니다.

var elem, formValues ​​
formValues ​​​​= (function() {
var _i, _len, _ref, _results;
_ref = $('.input')
_results = []
for (_i = 0, _len = _ref.length; elem = _ref[_i];
_results.push(elem.value)
return _results;

솔직히 이런 코드를 작성하는 것은 처음에는 정말 무섭지만 일단 CoffeeScript의 마법을 받아들이기 시작하면 사랑에 빠지게 될 것입니다.
일반 메서드 바인딩

jQuery 콜백에서 "=>"를 사용하면 개체에 메서드를 수동으로 바인딩하는 수고를 크게 줄일 수 있습니다. 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다. object = func: -> $ ('#div').click => @element.css color: 'red'

다음은 컴파일된 출력 Javascript입니다:

코드 복사 코드는 다음과 같습니다. var object;

var __bind = function(fn, me){ return function(){ return fn.apply(me, 인수 ) };

object = {
func: function() {
return $('#div').click(__bind(function() {
return this.element.css({
색상: 'red'
})
})
}
}; >코드의 @element는 object.element = $('#some_div')와 같이 다른 곳에 지정된 jQuery 객체를 가리킵니다.
"=>"를 사용하여 지정된 모든 콜백 함수는 자동으로 바인딩됩니다. 원래의 객체 측면에서는 그렇습니다. 멋지네요.
2011년에 함수가 호출된 방식은 다음과 같습니다.
이것을 살펴보세요:

코드 복사

코드 다음과 같습니다: $.post( "/posts/update_title" new_title: input.val() id: Something

-> Alert( 'done')

'json'
)


CoffeeScript를 사용하면 여러 매개변수를 여러 줄로 작성하여 호출할 수 있으며, 이로 인해 일부 메서드가 더 길어질 수 있습니다. $ .post() 및 $.animate() 등과 같은 jQuery의 서명이 더 읽기 쉽습니다. 다음은 또 다른 예입니다.

코드 복사

코드는 다음과 같습니다. $('# thing' ).animate width: ' 20px' opacity: '0.5' 2000

'easeOutQuad'

맛있는 커피죠? 첫 번째 매개변수는 익명 개체이며 함수 호출에서 메타 대괄호를 생략할 수도 있습니다.
초기화를 더 섹시하게 만들기
처음 jQuery를 사용하기 시작했을 때 페이지를 다음과 같이 초기화했습니다.

코드 복사

코드 $(document).ready(function() { some(); init(); calls();

})

CoffeeScript와 새 버전의 jQuery는 위의 코드를 더욱 매력적으로 만듭니다.

코드 복사

코드는 다음과 같습니다: $-> some() init() calls()

CoffeeScript의 함수 정의 구문은 이미 매우 훌륭하며 이러한 상황에서 사용할 수 있다는 점은 더욱 멋집니다. 콜백이 필요한 모든 함수 호출은 CoffeeScript에서 매우 간단하다는 것을 알게 될 것입니다.
CoffeeScript에 대한 자세한 내용은 공식 홈페이지를 참조하세요

참고: jQuery에 대한 전체 장을 포함하는 CoffeeScript에 관한 책이 7월에 이미 출시되었습니다.