[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 應該不會太難上手

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


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

查看所有标签

猜你喜欢:

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

构建高性能Web站点

构建高性能Web站点

郭欣 / 电子工业出版社 / 2009-8 / 59.00元

本书围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,涵盖了Web站点性能优化的几乎所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、Web服务器缓存、反向代理缓存、脚本解释速度、页面组件分离、浏览器本地缓存、浏览器并发请求、文件的分发、数据库I/O优化、数据库访问、数据库分布式设计、负载均衡、分布式文件系统、性能监控等。......一起来看看 《构建高性能Web站点》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器