[JavaScript] CoffeeScript 基本介紹

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

内容简介:[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 應該不會太難上手

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

网络营销

网络营销

拉菲·默罕默德 / 王刊良 / 中国财政经济出版社 / 2004-10 / 65.00元

本书提供了一个将网络营销与传统营销进行整合的分析和设计框架,称之为“市场空间矩阵”,该框架贯穿本书。利用该框架可以对网络营销战略、营销手段等进行系统的分析、设计和评价。 本书还有一条脉络,即客户关系的四个阶段,这一线索是市场空间矩阵的一个维度。在客户关系的框架下对营销手段(产品、价格、渠道、促销、社区、传播、品牌)进行分析和设计,旨在将客户从认知阶段经过探索/扩展阶段快速推进到承诺阶段。 ......一起来看看 《网络营销》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具