使用 CoffeeScript 創建類似 iOS 的主屏幕
今天我們將使用 CoffeeScript（一種基於 JavaScript 的新語言）和 jQuery 庫創建一個類似 iOS 的主屏幕。 CoffeScript 的語法簡潔，介於 Ruby 和 Python 之間。如果您還沒有使用過它們中的任何一個，請不要擔心 - 這不是必需的。但是，您需要熟悉 JavaScript，以便更好地理解該語言背後的概念。
我們還將使用 Touchable 插件，因此我們可以監聽基於觸摸的事件。
首先，什麼是 CoffeeScript？
CoffeeScript 是一種簡潔的編程語言，旨在增強 JavaScript 的優點，同時解決不太好的部分。它使 OOP 變得簡單，並引入了許多有用的附加功能，例如理解、新的函數語法和範圍處理，以及許多小的改進。
CoffeeScript 可以在所有瀏覽器中運行，並且與您現有的所有 JavaScript 代碼（包括 jQuery 和插件等庫）兼容。但是，如果它是一種不同的語言，這將如何工作？簡單 - CoffeeScript 編譯為 JavaScript ，因此它可以在任何支持它的瀏覽器中運行。
在開始學習本教程之前，我建議您通讀 CoffeeScript 網站上的示例（請務必查看“Try CoffeeScript " tab) 和 The Little Book on CoffeeScript 介紹該語言。
HTML
讓我們從類似 iOS 的主屏幕的 HTML 標記開始。像往常一樣，這是一個在 head 中帶有 stylehseets 的常規 HTML5 文檔 並且 JS 在結束 body 之前包含 標記。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iOS Home Screen with CoffeeScript | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="homeScreen">
<div id="mask">
<div id="allScreens">
<!-- The .screen divs will go here -->
</div>
</div>
<ul id="indicators">
<!-- A LI element for every screen -->
</ul>
<div id="dock">
<!-- The three dock icons will go here -->
</div>
</section>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="assets/js/touchable.js"></script>
<script src="assets/js/coffee-script.js"></script>
<script type="text/coffeescript">
# Our Code Goes Here
</script>
</body>
</html>
我們有 #homeScreen 部分，這是我們實驗的主要容器。裡面是 #mask , 它使用 overflow:hidden 一次只顯示一個屏幕。 #allScreens 裡面的div，顧名思義，包含了所有動態生成的.screen div，帶有圖標。
以下是#indicators UL，用當前顯示的屏幕顯示小點，以及 #dock 分區。
如前所述，CoffeeScript 需要一個額外的編譯步驟，它將源代碼轉換為 JavaScript。您可以使用 node.js 的 coffeescript 包（如他們網站上的說明）或 windows 的 coffeescript.exe 執行此操作，它是獨立的並且可以使用可執行文件。對於小型腳本，您還可以將編譯器直接包含在您的頁面中，並將您的代碼內嵌在
