免費(fèi)AI編程助手
CoffeeScript安裝
安裝nodejs coffeescript
http://www.nodejs.org/ 下載 node-v0.8.6-x86.msi
安裝后PATH環(huán)境變量會(huì)增加[如下是我的windows 7 64系統(tǒng)的情況]
C:\Users\Administrator\AppData\Roaming\npm\
C:\Program Files (x86)\nodejs\
coffeescript安裝
進(jìn)入nodejs :
C:\Windows\SysWOW64\cmd.exe /k "C:\Program Files (x86)\nodejs\nodejsvars.bat"
https://github.com/jashkenas/coffee-script/tags 下載：jashkenas-coffee-script-1.3.3-0-g79492aa.tar.gz
npm install -g jashkenas-coffee-script-1.3.3-0-g79492aa.tar.gz
在 C:\Users\Administrator\AppData\Roaming\npm 下會(huì)安裝coffeescipt模塊
命令行下輸入：
coffee -v 可以查看是否輸入正常
編輯器IDE
CoffeeScriptRunnerVSPackage.vsix
CoffeeLite-0.1.4.vsix
WebEssentials.vsix
JsBuildTools.vsix
語(yǔ)法高亮運(yùn)行等支持如下
編譯
精簡(jiǎn)、壓縮Javascript代碼
CSS精簡(jiǎn)
Site.less.css
這個(gè)工具也支持在VS下用Mindscape.WebWorkbench.Integration.10.vsix
The Mindscape Web Workbench is a free plugin for Visual Studio 2010 + Visual Studio 2012 to provideCoffeeScript, Iced CoffeeScript, Sass and Less editing! It includes all the essentials for making modern web development pain free in Visual Studio.
http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a
Mindscape 使用說明【包括圖】
offeescript環(huán)境搭建
coffeescript的地址：http://coffee-script.org/
nodejs的安裝，我們?cè)谇懊嬉黄┛鸵呀?jīng)介紹到，地址：http://my.oschina.net/u/2352644/blog/487488
1.安裝（無環(huán)境，不編程）
我們看到介紹，coffee就是嘗試用簡(jiǎn)潔的方式展示 JavaScript 優(yōu)秀的部分，是一個(gè)實(shí)用的 Node.js 工具. 不過編譯器并不依賴 Node, 而是能運(yùn)行于任何 JavaScript 執(zhí)行環(huán)境，用過npm安裝。
我們開始安裝：我的是windows系統(tǒng)，nodejs通過上面咱們是要安裝好的
1.win鍵+r 輸入cmd 回車
2.我的nodejs安裝目錄 (d:nodejs ) 轉(zhuǎn)到d盤 nodejs目錄
d:
cd nodejs
3.node -v 確保nodejs安裝
node -v
4.npm -v 確保npm安裝，npm和nodejs已經(jīng)集成
npm -v
5.npm install coffee-script 安裝的coffee會(huì)在nodejs目錄的node_modules下
npm install -g coffee-script
-g 的g是global意思，表示全局安葬，輸入下面名利
coffee -v
輸出coffee版本，表示安裝成功！
我這里在nodejs的nodejs下已經(jīng)看見了coffee模塊了。我們下一步進(jìn)行coffee的測(cè)試輸出，類似hello world 的輸出！
2.用法（等同于hello world 的輸出）
我們?cè)谟梅ㄉ峡吹礁鞣N命令的介紹，好心煩，不看了，我們直接看給的例子，一個(gè)個(gè)命令行測(cè)試就好了！
我們?cè)陂_始就知道，coffee是用簡(jiǎn)單的語(yǔ)法編譯成js的，這一刻就可以這么理解
js 創(chuàng)建變量是 var aa=123;
coffee 創(chuàng)建變量可能這么寫 v aa=123
的寫法了，對(duì)js的語(yǔ)言進(jìn)行了映射似的精簡(jiǎn)。
我們?cè)诠倬W(wǎng)的概述看見了coffee的代碼寫法，我們復(fù)制下來，保存成 start.coffee 文件，為進(jìn)行的coffee實(shí)現(xiàn)！
我們?cè)趎odejs目錄下創(chuàng)建coffee文件夾，下面創(chuàng)建start.coffee 文件。
我們通過任何編輯器打開.coffee文件，里面代碼如下：
# 賦值: number = 42 opposite = true # 條件: number = -42 if opposite # 函數(shù): square = (x) -> x * x # 數(shù)組: list = # 對(duì)象: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # 存在性: alert "I knew it!" if elvis? # 數(shù)組 推導(dǎo)(comprehensions): cubes = (math.cube num for num in list)
什么東西？我們根據(jù)教程，對(duì)這個(gè)文件編譯處理。
我們轉(zhuǎn)到放coffee文件的目錄
cd coffee
執(zhí)行coffee的編譯命令
coffee -c start.coffee
-c表示編譯coffee文件，后面就是我們創(chuàng)建的coffee文件。
編譯后的代碼如下：
// Generated by CoffeeScript 1.9.3
(function() {
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 = ;
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
race = function() {
var runners, winner;
winner = arguments, runners = 2 <= arguments.length ? 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;
results.push(math.cube(num));
}
return results;
})();
}).call(this);對(duì)比概覽發(fā)現(xiàn)多了東西如下，
(function() {
}).call(this);我們測(cè)試一下這個(gè)作用嗎，我們創(chuàng)建一個(gè)html頁(yè)面，里面寫入如下的js代碼：
(function() {
alert("我的外層干什么的？")
}).call(this);html整個(gè)代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<script src="js/jquery.js"></script>
<title>coffee</title>
</head>
<body>
</body>
<script type="text/javascript">
(function() {
alert("我的外層干什么的？")
}).call(this);
</script>
</html>會(huì)執(zhí)行alert，看來這個(gè)外層包裹和
(function() {
})();同樣的作用，都是立即執(zhí)行的匿名函數(shù)，我們知道call是調(diào)用并且執(zhí)行方法，里面的this是js的指針，指向的是window全局對(duì)象
if(this==window){alert(this)}直接放在script下的this是指向window的，this作為上下文指針受環(huán)境影響作出不同指向。
coffee把編譯的代碼放在立即執(zhí)行函數(shù)就是為了防止污染。
更多建議：