CoffeeScrip을 사용하여 자바스크립트 코드를 아름다운 방식으로 작성하세요

JavaScript는 의심할 여지 없이 웹에서 가장 위대한 발명품 중 하나입니다. 웹 페이지의 거의 모든 동적 효과는 풍부한 컴퓨팅 성능을 기반으로 합니다. 그리고 그 기능은 Google Chrome에서 사용되는 V8 엔진과 같은 다양한 새로운 JavaScript 엔진에서 점점 더 강력해지고 있습니다.

그러나 너무 일찍 탄생했기 때문에 오늘날에는 많은 문법적 정의가 다소 비효율적입니다. 역사적 이유로 현재 JavaScript 언어에는 일부 고급 문법 형식을 추가할 수 없다는 점이 아쉽습니다.

전 세계의 많은 천재들이 더 나은 JavaScript를 구축하기 위해 열심히 노력하고 있습니다. 많은 시도가 있었고 그 중 가장 유망한 것은 CoffeeScript와 TypeScript입니다. CoffeeScript를 접하면서 첫눈에 오랜 친구처럼 느껴졌고 TypeScript도 큰 관심을 불러일으켰습니다. TypeScript와 마찬가지로 CoffeeScript는 JavaScript로 컴파일된 언어이며 둘 다 JavaScript의 표현 기능을 향상시킵니다. 이번 글은 CoffeeScript에 관한 글이고, TypeScript에 대해서는 다음 글에서 다루도록 하겠습니다.

소위 JavaScript 컴파일은 CoffeeScript와 TypeScript가 동일한 JavaScript 코드로 컴파일된 다음 JavaScript 인터프리터에서 실행된다는 의미입니다.

커피스크립트

단순함

CoffeeScript의 가장 큰 인상은 간결한 표현입니다. 다음 코드는 CoffeeScript 중국어에서 발췌한 것입니다:

# 赋值:
number  = 42
opposite = true
# 条件:
number = -42 if opposite
# 函数:
square = (x) -> x * x
# 数组:
list = [1, 2, 3, 4, 5]
# 对象:
math =
 root:  Math.sqrt
 square: square
 cube:  (x) -> x * square x
# Splats:
race = (winner, runners...) ->
 print winner, runners
# 存在性:
alert "I knew it!" if elvis&#63;
# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)

로그인 후 복사

위 코드는 동등한 JavaScript 코드로 컴파일됩니다.

var cubes, list, math, num, number, opposite, race, square,
 __slice = [].slice;
number = 42;
opposite = true;
if (opposite) {
 number = -42;
}
square = function(x) {
 return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
 root: Math.sqrt,
 square: square,
 cube: function(x) {
  return x * square(x);
 }
};
race = function() {
 var runners, winner;
 winner = arguments[0], runners = 2 <= arguments.length &#63; __slice.call(arguments, 1) : [];
 return print(winner, runners);
};
if (typeof elvis !== "undefined" && elvis !== null) {
 alert("I knew it!");
}
cubes = (function() {
 var _i, _len, _results;
 _results = [];
 for (_i = 0, _len = list.length; _i < _len; _i++) {
  num = list[_i];
  _results.push(math.cube(num));
 }
 return _results;
})();
run: cubes

로그인 후 복사

CoffeeScript는 단순성을 추구합니다. 그 단순성은 구문 제어에만 사용되는 일부 기호를 제거하는 데 처음으로 반영됩니다. 여기에는 다음이 포함됩니다.

세미콜론 취소

var 선언 취소

내부 코드를 둘러싼 중괄호를 취소하고 대신 들여쓰기를 사용하세요

함수 호출에서는 모호함이 없으면 괄호를 생략할 수 있습니다

var 선언에는 복잡하고 쓸모없는 JavaScript 변수 범위 메커니즘이 포함됩니다. 이 부분에 대해서는 지금은 이야기하지 않겠습니다. CoffeeScript는 var 선언 메커니즘을 완전히 제거하여 문제를 단순화합니다. 간단히 말해서, CoffeeScript 세계에서는 변수를 미리 선언할 필요가 없으며 직접 사용하면 됩니다. 그리고 이 사용법에는 기본적으로 위험이 없습니다.

CoffeeScript에서 들여쓰기는 코드를 아름답게 하기 위해 사용될 뿐만 아니라 코드 수준의 구성을 나타내기 때문에 특별한 의미를 갖습니다. 간단히 말하면, 내부 코드를 중괄호로 묶어서는 안 되며, 들여쓰기를 해야 합니다. 다른 들여쓰기는 다른 코드 수준을 나타냅니다. 형식과 내용이 일관됩니다.

들여쓰기 예:

#if缩进
if true
 'true'
else
 'false'
#while缩进
while true
 'true'
#函数缩进
(n) ->
 n * n
#对象字面量缩进
kids =
 brother:
  name: "Max"
  age: 11
 sister:
  name: "Ida"
  age: 9

로그인 후 복사

CoffeeScript 함수 호출에서는 모호함 없이 괄호를 생략할 수 있습니다. 예를 들어, console.log(객체)는 console.log 객체로 단순화될 수 있습니다. 소위 모호함의 예는 매개 변수가 없는 경우 console.log가 기능 속성 로그를 꺼낼지 아니면 함수 로그를 호출할지 알 수 없다는 것입니다.

CoffeeScript의 함수 표현식도 매우 간소화되고 간소화되었습니다. 한 줄짜리 함수 정의는 다음과 같습니다:

square = (x) -> x * x

로그인 후 복사

여러줄 기능도 들여쓰기를 통해 정리됩니다. 빈 함수는 다음과 같이 가장 간결합니다: ->.

이러한 함수의 간결한 표현은 콜백 함수 전달을 매우 편리하게 만듭니다. 배열 맵은 다음과 같이 충분할 수 있습니다.

list = [1, 2, 3]
list.map (e) -> e+1

로그인 후 복사

동등한 JavaScript 코드는 이렇게 엉성할 수 없습니다.

list = [1, 2, 3];
list.map(function(e) { return e + 1; });

로그인 후 복사

표현력 강화

CoffeeScript는 JavaScript에는 없는 몇 가지 강력한 표현식 구문(신택틱 슈거라고도 함)을 제공합니다. 제 생각에는 이러한 개선 사항이 많이 있다고 생각하는데, 대표적인 두 가지 예를 들어보겠습니다.

문자열 보간

목록 구문 분석

문자열 보간 방법은 기존 문자열 기능을 확장하고 문법적으로 단순화한 반면 목록 구문 분석에는 개념 변경이 포함됩니다. 전자는 개선이고 후자는 변화이다.

문자열 보간

CoffeeScript 문자열에서는 #{…}을 사용하여 표현식을 삽입할 수 있습니다. 예:

"#{ 22 / 7 }은 π"의 적절한 근사치입니다

은 다음과 같습니다:

""(22 / 7) "는 π"에 가까운 근사치입니다.

여기서 보간은 자리 표시자 역할을 하여 동적 콘텐츠에 대한 문자열을 더 쉽게 구성할 수 있도록 해줍니다. 이 표현은 누구나 받아들일 수 있을 것 같아요.

목록 구문 분석

List Comprehension은 CoffeeScript 세계에서 중요한 역할을 합니다. 그것은 주기에 대해 생각하는 방식을 변화시킵니다. CoffeeScript는 JavaScript와 같은 for 루프 구조를 제공하지 않지만 모두 목록 분석으로 변환됩니다. 다음과 같은 일반 JavaScript for 루프:

food_list = ['toast', 'cheese', 'wine'];
for (i = 0, len = food_list.length; i < len; i++) {
 food = food_list[i];
 eat(food);
}

로그인 후 복사

用CoffeeScript实现就是：

food_list = ['toast', 'cheese', 'wine']
eat food for food in food_list #做个小补充，for循环的单条语句的写法

单单是上面的例子不足以显示列表解析的强大（却看到它的简洁了）。在继续这个话题之前，我觉得我有必要补充一下另一个涉及到CoffeeScript理念的东西了：一切皆是表达式。

在CoffeeScript世界里，一切语句都是表达式语句，都会返回一个值。函数调用默认会返回最后一条语句的值。if条件结构也会返回值，其返回的是执行的最后一条语句的值。循环结构有些不同，其会将每次循环的结果都保存在一个数组里，作为此循环结构的值。例如下面代码的list结果就是[5, 4, 3, 2, 1]。

num = 6
list = while num -= 1
 num

로그인 후 복사

回到列表解析的主题。与while一样，for结构也是一种循环的表达，其结果也是一个数组。回到先前的例子，下面的小代码的list结果就是['t', 'c', 'w']。

food_list = ['toast', 'cheese', 'wine']
list = (food[0] for food in food_list)

로그인 후 복사

我们已经看到for循环的each形式

eat food for food in food_list

로그인 후 복사

以及它的map形式

(food[0] for food in food_list)

로그인 후 복사

下面给出它的filter形式

(food for food in food_list when food is 'wine')

로그인 후 복사

列表解析的特色的地方在于它改变了我们组织循环的方式和解析数组的模式。这是一种声明式的编程方法，告诉程序你想要什么而不去关心构建的过程。

类的支持

类是CoffeeScript对JavaScript的一个很重要的补充。JavaScript的原型功能很强大，写法上又恨别扭。正确地设置原型链以实现继承关系也是个很大的挑战。CoffeeScript从语法上直接支持类的定义，自然且隐藏细节。

class Animal
 constructor: (@name) ->
 move: (meters) ->
  alert @name + " moved #{meters}m."
class Snake extends Animal
 move: ->
  alert "Slithering..."
  super 5
class Horse extends Animal
 move: ->
  alert "Galloping..."
  super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()

로그인 후 복사

从实现上来说，CoffeeScript的类与JavaScript的构造函数和原型链那一套并无二致。所以，理解原型机制也是理解CoffeeScript类的基础。

关于JavaScript的糟粕

CoffeeScript的另一个目标是从语法层面上直接消除JavaScript的被人诟病的一些糟粕部分。前面已经说过关于分号的部分。关于var声明的部分。分号的机制暂且不去例会，总之CoffeeScript不用再去写分号了。

在JavaScript当中，最为人诟病的糟粕部分有两处，因为它们使用的情况最多而且容易出错。

全局变量

相等比较

全局变量

JavaScript的作用域规则很复杂，涉及到var声明机制和变量提升。在JavaScript里，构造一个全局变量是很容易的，有三种方式：

在全局的环境里用var声明

var name = 'name';

로그인 후 복사

在函数内用省略var的方式定义

function foo() {
  name = 'name';
}

로그인 후 복사

綁定到window的屬性

window.name = 'name';

其中第1種和第2種方式是最常見的錯誤用法。首先不建議直接在全域環境中編碼，而是應該用一個匿名函數包裹起來，將程式的作用域限制在這個匿名函數中。第二種用法完完全全就是忘了var聲明。而我在實際的JavaScript編碼中，忘記var聲明是常有的事（就像經常忘記行末補上分號一樣）。

而在CoffeeScript裡面就完全沒有這種擔心了。首先，編譯後的JavaScript程式碼不會暴露在全域環境裡，所有的程式碼都是自動包裹在一個匿名函數(function(){ ... })();內。然後，所有的變數都會自動加上var聲明。這就使得不小心污染全局的情況很難發生，除非使用賦值到window上。

相等比較

我們都知道JavaScript有兩種比較運算子：==和===。我們也知道==在使用的過程中會很坑，所以平常寧願多打一個字元而使用===。 CoffeeScript的只有一個比較運算子==，而它會編譯成JavaScript的===，從而很好地避過了這道坑。

是否該使用CoffeeScript

CoffeeScript簡化並增強了JavaScript的表達能力，盡可能地從語法層面上就能避免JavaScript的一些坑。用它寫程式碼，會讓人有更清晰舒適的感覺，而且不容易犯錯。 CoffeeScript的初衷就是提供更好的JavaScript。

然而，CoffeeScript與JavaScript是不相容的。它既不是JavaScript的子集，也不是超集，而是與JavaScript有著明顯不同想法的語言。用CoffeeScript程式設計就必然要轉換觀念，儘管這種觀念更好更自然，但卻是有些固步自封的人望而卻步的主要原因了。

CoffeeScript並不是適合每一個人的。有些人對於用縮排組織程式碼層次完全不能接受，也不能接受用箭頭函數來表達法。對他們來說，去掉function關鍵字和大括號的組織怎麼看都怎麼不順眼。

列表解析很強大，卻也顯得過於簡潔了。對於習慣了建構冗餘JavaScript程式的人來說，並不習慣這種表達方式。

總之，是不可強求別人去學習使用CoffeeScript。 JavaScript已經夠強大，只要夠小心，完全可以使用JavaScript好好完成工作。對於那些想要嘗試CoffeeScript，我們也要給予鼓勵的態度，他們是求新求變的勇士。 CoffeeScript真的值得一試，而且它真的很小巧，完全掌握它不是件困難的事。

對於在團隊中推廣CoffeeScript，我自己更是持保守的看法。如果團隊從一開始就使用CoffeeScript還好。如果是要從CoffeeScript轉為JavaScript，就要謹慎行之。一個可行的方式是先嘗試在一個小專案中使用CoffeeScrip，看看效果如何。

對個人來說，就沒有什麼限制了。如果真的喜歡，就去試試看。你可以使用CoffeeScript寫腳本，建立自己的網站，做一些小玩意。

以上內容是小編給大家介紹的使用CoffeeScrip優美方式寫javascript程式碼，希望大家喜歡。