標籤: JavaScript

深入了解 JavaScript (一)

因為正在深入了解 JavaScript這個語言,因為已經下定決心要先熟練這個語言了,應該要好好瞭解並熟悉一些更深入的概念和用法才是,並且把自己的筆記放在這,希望也能有些用處。

Continue reading

ES6 筆記 – Getters 和 Setters

簡單的方法:

let person = {
    firstName: 'Jimmy',
    lastName: 'Huan',
    get fullName(){
        return this.firstName + ' ' + this.lastName;
    },
    set fullName(name){
        let words = name.split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

官方的方法:

let person = {
    firstName: 'Jimmy',
    lastName: 'Huan'
}

Object.defineProperty(person, 'fullName', {
    get: function(){
        return this.firstName + ' ' + this.lastName;
    },
    set: function(name) {
        var words = name.split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
});

console.log(person.fullName);// 'Jimmy Huan'
person.fullName = "Kobe Bryant"; //'Kobe Bryant'
console.log(person.firstName); // 'Kobe'
console.log(person.lastName); // 'Bryant'

CoffeeScript 學習筆記:運算元 與 條件陳述

這次介紹的主題是很常用的if和switch,讓我們看看CoffeeScript如何呈現吧。

運算元

首先要介紹的是運算元,我們知道JavaScript有 == 和 === 的區別,但是基本上建議大家都使用 === 取代 == ,因為 === 會去判別變數類別,而 == 較不嚴謹,所以在某些情況會出現意想不到的錯誤,例如:數字1等於字串1等等。
而在CoffeeScript裡,一律都是編譯成 === ,以下將運算元列表給各位參考:

  • 左邊為CoffeeScript,右邊為JavaScript
    • ==    等於    ===
    • !=    等於    !==
    • not    等於    !
    • and    等於    &&
    • or    等於    ||
    • true, yes, on    等於    true
    • false, no, off   等於    false

Continue reading

CoffeeScript 學習筆記:變數、字串與函式

目前開始學習使用CoffeeScript,來自我筆記一下,歡迎討論指教喔!

簡單介紹

CoffeeScript是JavaScript的一個編譯語言,簡單來說明就是寫CoffeeScript,然後CoffeeScript的編譯器再轉換成JavaScript。

至於為什麼要用CoffeeScript?我想可讀性和便利性是最大的主因,一個好的程式語言要有三大條件:寫少做多、易於閱讀、方便維護,而CoffeeScript就是為了改善JavaScipt而誕生的,從以下的介紹便會開始了解CoffeeScript方便的地方。

CoffeeScript安裝與指令

安裝步驟

  1. 安裝 node.js
  2. 安裝 npm
  3. npm install -g coffee-script

CoffeeScript指令

  • coffee -h – 查看CoffeeScript指令
  • coffee -c foobar.coffee – 將foobar.coffee編譯成foobar.js
  • coffee -cw foobar.coffee – 當foobar.coffee有變更就會自動編譯成js檔
  • coffee -c src -o js – 將src內所有coffee檔編譯成js檔,存到js資料夾
  • coffee -cw src -o js – src內的檔案有變更時,就會自動轉換並編譯到js資料夾

變數宣告

在CoffeeScript裡面,我們不用去理會變數宣告,CoffeeScript會自動幫我們處理變數宣告這一塊,不用自己寫一堆var,並且確保我們的變數在想要的地方執行,我們只要在我們想要的時候使用變數就可以了,還有,CoffeeScript可以不用分號結尾,這點真是不錯。

感謝CrazyLion補充:JavaScript也沒有要求要分號結尾!只是在學習時都有分號結尾
查了之後才知道,原來是壓縮程式碼時,沒分號有時候會產生問題。

CoffeeScript

foo = "Coffee"
bar = "Script"
alert ( foo + bar ) #CoffeeScript

JavaScript

var bar, foo;
foo = "Coffee";
bar = "Script";
alert(foo + bar);

樣板字串

我們如果要用一堆變數串成一個字串,要放入一堆加號,什麼"Answer is " + ans +".",感覺就是非常地麻煩,coffee只要寫成 "Answer is #{ans}." 就完美解決了,注意!一定要用雙引號包起來,單引號只會顯示#{ans},而不會顯示ans內的數值!順便一提,ES6也趕緊加入了${foo}樣板字串的概念XD

CoffeeScript

ans = "Script"
alert ( "Coffee#{ans}" )

JavaScript

var ans;
ans = "Script";
alert ( "Coffee" + ans );

函式

JavaScript最重要的function,在CoffeeScript裡變得十分簡單,本來的匿名函式寫法是 function(){ … } ,在CoffeeScript裡面,只要 () -> … 就解決了。

  • 用縮排取代大括號
  • 函式沒有儲存參數時,可以省略小括號
foobar = () ->
	alert ( "foobar" )
#等於
foobar = ->
	alert ("foobar")
  • coffee永遠有個return value,會自動return該function的最末端

CoffeeScript

cookies = ->
	confirm "Do you want some cookies?";

JavaScript

var cookies;
cookies = function() {
	return confirm("Do you want some cookies?");
};

呼叫函式

學會怎麼定義函式後,當然也要知道該如何呼叫它,有以下幾種方式。

  • 不傳入參數
    • coffee()
  • 傳入參數(小括號是可以省略的)
    • coffee( “foo”, “bar” , true)
    • coffee “foo”, “bar” , true
  • 傳入的參數有函式時,即使該函式也要傳入參數,也可以忽略小括號(但建議除了最外面的小括號,其餘小括號不要省略)

CoffeeScript

confirm = (reallyWant) ->
	if reallyWant
		true
 
plus = (a , b, ifPlus ) ->
	if ifPlus
		result = a + b
	else
		result = a
	"Answer is #{result}"
 
alert plus 20, 10, confirm true

JavaScript

var confirm, plus;
 
confirm = function(reallyWant) {
	if (reallyWant) {
		return true;
	}
};
 
plus = function(a, b, ifPlus) {
	var result;
	if (ifPlus) {
		result = a + b;
	} else {
		result = a;
	}
	return "Answer is " + result;
};
 
alert(plus(20, 10, confirm(true)));

延伸閱讀:jQuery with CoffeeScript