[JavaScript] CoffeeScript 基本介紹

栏目: CoffeeScript · 发布时间: 6年前

内容简介:[JavaScript] CoffeeScript 基本介紹

可能有些人還沒聽過 CoffeeScript 是什麼

(因為我也是幾天前才知道的XD)

其實 CoffeeScript 就是 Javascript

只是他的語法比較簡潔易懂

寫完 CoffeeScript 之後可以把它編譯成 Javascript

CoffeeScript 的幾個特性 :

  • 用縮排取代大括號 (Python)
  • List Comprehension 語法 (Python)
  • OOP

怎麼把 CoffeeScript 編譯成 Javascript

npm install -g coffee-script        # 安裝 CoffeeScript 編譯器
coffee -o index.js -c index.coffee  # 把 index.coffee 編譯成 index.js
coffee -o js/ -c coffee/            # 編譯整個資料夾 coffee 到 js

如果覺得安裝環境很麻煩

可以直接到 這裡 就可以開始寫了

它會自動幫你轉換成 Javascript

基本語法

宣告變數

CoffeeScript 不用分號也不用宣告變數

直接用就可以了

a = 10
b = 20

編譯後

var a, b;
a = 10;
b = 20;

插入字串

這是 Ruby 的用法

很方便

name = "Larry"
greet = "Hello, #{name}"

編譯後

var greet, name;
name = "Larry";
greet = "Hello, " + name;

Function

function 的語法也跟 Ruby 滿像的

bigger = (a, b) ->
    if a > b
        return true
    else
        return false

alert(bigger 1, 2)

編譯後

var bigger;

bigger = function(a, b) {
    if (a > b) {
        return true;
    } else {
        return false;
    }
};

alert(bigger(1, 2));    // false

交換及指定變數

[x, y] = [y, x]
[x, y, z] = [1, 2, 3]

編譯後

var ref, ref1, x, y, z;

ref = [y, x], x = ref[0], y = ref[1];

ref1 = [1, 2, 3], x = ref1[0], y = ref1[1], z = ref1[2];

Range

list = [1..5]
for i in list
    alert i

編譯後

var i, j, len, list;

list = [1, 2, 3, 4, 5];

for (j = 0, len = list.length; j < len; j++) {
    i = list[j];
    alert(i);
}

List Comprehension

alert i for i in [1..10]    # alert [1..10] 內的每個元素

編譯後

var i, j;

for (i = j = 1; j <= 10; i = ++j) {
    alert(i);
}   // 依序 alert 出 1 到 10

物件

larry = {name: "Larry", age: 19, career: "student"}

larry =
    name: "Larry"
    age: 19
    career: "student"

編譯後,兩種寫法會得到相同的結果

var larry;

larry = {
name: "Larry",
      age: 19,
      career: "student"
};

OOP

Javascipt 的 OOP 並不好寫

而且寫起來也不夠直覺

如果用 CoffeeScript 寫起來可以很清楚

class Student
    constructor: (name, age) ->
        this.name = name
        this.age = age
    
    say_hi: () ->
        str = "My name is #{this.name}, I am #{this.age}."
        alert(str)

larry = new Student("Larry", 19)
larry.say_hi()

編譯後

var Student, larry;

Student = (function() {
    function Student(name, age) {
        this.name = name;
        this.age = age;
    }

    Student.prototype.say_hi = function() {
        var str;
        str = "My name is " + this.name + ", I am " + this.age + ".";
        return alert(str);
    };

    return Student;

})();

larry = new Student("Larry", 19);

larry.say_hi();     // My name is Larry, I am 19.

用 CoffeeScript 寫真的簡單很多吧 ~

以上是基本的 CoffeeScript 介紹

CoffeeScript 有很多優點

不過缺點就是可能要再學一些新的語法

但如果是學過 Python 或是 Ruby 應該不會太難上手

要看更詳細的可以到 他們的網站


以上所述就是小编给大家介绍的《[JavaScript] CoffeeScript 基本介紹》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

信息论基础

信息论基础

Thomas M.Cover、Joy A.Thomas / 清华大学出版社 / 2003-11-1 / 65.00元

《国际知名大学原版教材•信息论基础》系统介绍了信息论基本原理及其在通信理论、统计学、计算机科学、概率论以及投资理论等领域的应用。作者以循序渐进的方式,介绍了信息量的基本定义、相对熵、互信息以及他们如何自然地用来解决数据压缩、信道容量、信息率失真、统计假设、网络信息流等问题。一起来看看 《信息论基础》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具