Ringkasan cara menggunakan kemahiran coffeescript_javascript

Sebagai adik Javascript, Coffeescript benar-benar cemerlang Penggunaannya boleh meningkatkan kecekapan pembangunan, mengurangkan ralat kod, dan kuncinya adalah untuk meningkatkan keseronokan pembangunan. Semakin banyak, saya merasakan bahawa saya harus menggunakan kopi dalam projek saya apabila boleh.

Namun, mungkin anda seperti saya Setelah memahami sintaks coffeescript dan bersedia untuk mencubanya, anda bimbang tentang cara memperkenalkannya ke dalam projek.

Arahkan kod anda seperti bos

CoffeeScript menyediakan sekumpulan kaedah lelaran tatasusunan yang hebat. Perkara terbaik ialah ini bukan sahaja berfungsi dengan tatasusunan, tetapi juga dengan objek jQuery. Mari tulis kod puitis:

formValues = (elem.value for elem in $('.input')) 

Baris kod ini akan diterjemahkan ke dalam Javascript berikut:

var elem, formValues; 
formValues = (function() { 
 var _i, _len, _ref, _results; 
 _ref = $('.input'); 
 _results = []; 
 for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
  elem = _ref[_i]; 
  _results.push(elem.value); 
 } 
 return _results; 
})(); 

Sejujurnya, menulis kod seperti ini pada mulanya memang menakutkan, tetapi sebaik sahaja anda mula menerima keajaiban CoffeeScript, anda akan jatuh cinta dengannya.

Ikatan menggunakan kaedah biasa

Menggunakan "="" dalam panggilan balik jQuery akan menjimatkan masalah anda untuk mengikat kaedah secara manual pada objek. Mari lihat beberapa kod:

object = 
 func: -> $('#div').click => @element.css color: 'red' 

Berikut ialah output Javascript yang disusun:

var object; 
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 
object = { 
 func: function() { 
  return $('#div').click(__bind(function() { 
   return this.element.css({ 
    color: 'red' 
   }); 
  }, this)); 
 } 
}; 

elemen @ dalam kod menghala ke objek jQuery yang dinyatakan di tempat lain - seperti object.element = $('#some_div').

Sebarang fungsi panggil balik yang dinyatakan menggunakan "=>" akan diikat secara automatik pada objek asal, dan ya, itu bagus.

Beginilah fungsi dipanggil pada tahun 2011

Lihat ini:

$.post( 
 "/posts/update_title" 
 new_title: input.val() 
 id: something 
 -> alert('done') 
 'json' 
) 

Menggunakan CoffeeScript, berbilang parameter boleh ditulis dalam berbilang baris untuk dipanggil Koma dan pendakap adalah pilihan, yang menjadikan beberapa kaedah dengan tandatangan yang lebih panjang dalam jQuery seperti $.post() dan $.animate() lebih mudah dibaca. Berikut ialah contoh lain:

$('#thing').animate 
 width: '+20px' 
 opacity: '0.5' 
 2000 
 'easeOutQuad' 

Kopi yang lazat, bukan? Sila ambil perhatian bahawa parameter pertama ialah objek tanpa nama, malah anda boleh menghilangkan kurungan meta dalam panggilan fungsi.

Jadikan permulaan lebih seksi

Apabila saya mula menggunakan jQuery saya memulakan halaman seperti ini:

$(document).ready(function() { 
 some(); 
 init(); 
 calls(); 
}) 

CoffeeScript dan versi baharu jQuery menjadikan kod di atas berkembang begitu seksi:

$-> 
 some() 
 init() 
 calls() 

Sintaks definisi fungsi dalam CoffeeScript sudah sangat keren, dan dapat menggunakannya dalam situasi ini menjadikannya lebih sejuk. Anda akan mendapati bahawa semua panggilan fungsi yang memerlukan panggilan balik adalah sangat mudah dalam CoffeeScript.

Sebenarnya, coffeescript adalah bahasa yang sangat fleksibel untuk digunakan kerana ia boleh diterjemahkan ke dalam JavaScript satu-ke-satu. Terdapat juga lebih daripada satu cara untuk memperkenalkannya ke dalam projek. Di sini, saya mula-mula akan meringkaskan cara untuk memperkenalkan coffeescript ke dalam projek nod dan membandingkan kelebihan dan kekurangan setiap kaedah.

Gunakan arahan kopi secara langsung untuk menjalankan projek skrip kopi tulen

Secara umumnya, apabila coffeescript disebut, seseorang secara semula jadi akan menganggapnya sebagai adik javascript, yang tidak boleh lari dari bayang-bayang js. Malah, anda boleh menganggapnya sebagai bahasa bebas. Kita semua tahu bahawa selepas memasang pakej skrip kopi secara global pada platform nod, anda boleh memasukkan antara muka interaktif coffeescript melalui arahan kopi Anda juga boleh memanggilnya repl. Jika projek anda ditulis sepenuhnya dalam kopi, ianya mudah. ​​Hanya gunakan arahan kopi secara langsung pada skrip entri anda Contohnya, jika skrip entri anda dinamakan "app.coffee", kemudian laksanakan:

coffee app.coffee

注意，这里的扩展名coffee是不能省略的。

这个方式应该说是使用coffeescript最“官方”的方式。简单，直接！而且，一旦你以一个coffee文件作为项目的入口， 那整个项目就同时兼容coffee和js了。你在项目里可以任意require js或coffee文件及模块， 甚至可以在项目中的js文件中随便require coffee文件。并且在你引用无论是coffee还是js文件的时候都无需扩展名， 只要前面部分名称不冲突就行。

这个方式有个最大的问题就是，如果它作为一个模块，只能被用于coffee项目；如果他作为一个应用， 运行环境必须安装coffee-script。毕竟coffeescript现在还是一个小众语言，它作为模块时丧失了js用户实在可惜。

另一个也许存在的缺点是性能方面的，毕竟node里面只有js引擎，coffee代码需要先编译为js再运行， 这个过程是要消耗一点点时间的，尽管coffee到js的编译速度其实挺快的。不过这应该不是什么大问题， 一般来说，require都是写在文件的顶部，也就是应用在启动的时候就一气儿把该require的文件都require了， require的时候coffee就被编译成了js放到了js引擎中，那么编译消耗的那点时间都集中在了应用启动时， 运行时几乎不会遇到require新的coffee的情况了。node最常见的使用场景是web服务器，这就更没问题了。

在javascript项目中引用coffeescript

npm中的coffee-script既可以全局安装，也可以作为项目的一个模块安装。那coffee-script作为项目的一个模块有啥意义呢？ 其实是给项目添加了一个coffeescript的编译器，这个项目就可以在运行时随时编译coffee文件。

你一定希望像第一种方式里那样随便引用coffee文件。没问题，只需要注册一下。假如你的项目入口文件是app.js， 那么只需要在这个文件最前面加上这么一句：

require('coffee-script/register');

然后你就可以在项目中随便require coffee文件了。

这个方式本质上和第一种方式没啥区别，只不过coffee-script没安装在全局，因此你的模块可以独立存在， 作为应用也不需要环境安装好coffee-script了。

缺点嘛，我觉得最大的问题就是容易让代码有些乱，一会儿js，一会儿coffee，当然第一种方式也可能会这样， 不过都用coffee启动了里面应该不会写js了吧……总之我觉得一个项目还是把语言统一起来比较好 （遗憾的是我主要用这种方式，在一个已经用js写出了大体结构的项目里，我就想用coffee肿么办……）

性能问题上跟第一种方式一样，不多说了。

正统的方式——编译

一说编译，就感觉回到了正儿八经的C或Java的时代。的确，作为一个编译型语言，编译后再运行才是正道。 c有gcc，java有javac，cofee有coffee -c。

要编译一个cofee文件很简单，比如要编辑app.coffee这个文件，就在文件的当前目录执行：

coffee -c app.coffee

一个名为app.js的文件就出现在当前目录下了。这个指令也可以应用于目录， 比如你把项目中所有的coffee源文件放到了src目录下，那就执行：

coffee -c src

src目录及其各级子目录下的所有coffee源文件都会编译成js文件，放到和源文件相同的目录中。

不过对于大型项目，把源文件和编译结果文件放到一起可不太好。指定一个输出目录就行了：

coffee -c -o outputs src

这个指令的参数顺序有点奇怪。在coffee的帮助里是这么定义的：

coffee [options] path/to/script.coffee -- [args]

注意，所有的选项（options）都在coffee和文件路径之间。而最后的args是把目标文件作为脚本执行时给传递的参数。 也就是说所有的选项都放在coffee和文件名之间就可以了。 而-c这个选项是单独的，没有自己的参数，它只表示要把指令最后面提供的那个文件给编译了，所以写成这样也行：

coffee -o outputs -c src

假如想再加个选项，让编译结果不被自执行函数体包围，就是：

coffee -o outputs -c -b src

再假如想把所有源文件编译成一个名为out.js的目标文件，就是：

coffee -o outputs -c -j out src

如果每次改点代码都要这么执行指令也挺烦人的。coffee指令有一个选项-w可以监视源文件的变动而自动编译：

coffee -o outputs -c -w src

Untuk projek berskala besar, sebaiknya tentukan kaedah penyusunan terlebih dahulu supaya semua pembangun dapat menyelesaikan semua urusan penyusunan dengan hanya satu arahan Ini memerlukan pembinaan automatik.

offee menyediakan alat binaan automatik, kek, yang seperti buatan di dunia c. Tetapi seperti yang dinyatakan di laman web rasmi, kek adalah sistem binaan yang sangat mudah. Sebenarnya, fungsi kek adalah untuk melaksanakan skrip bernama cakefile, dan skrip cakefile ditulis dalam coffeescript. Skrip ini hanya menyediakan fungsi terbina dalam yang sangat terhad, seperti tugas, yang digunakan untuk mengisytiharkan arahan dan perihalan dan fungsi pelaksanaan yang sepadan. Perkara lain ialah menulis projek nod tulen Untuk melengkapkan kompilasi, anda mesti sama ada menggunakan modul fs nod untuk mengeluarkan rentetan yang disusun oleh modul kopi, atau menggunakan modul child_process untuk melaksanakan arahan shell. Sebenarnya, sasaran pembinaan kek tidak semestinya kopi, kerana ia sebenarnya melaksanakan skrip nod dan boleh mengendalikan sebarang perkara automatik.

Selain itu, terdapat beberapa alat pembinaan automatik pihak ketiga yang lebih baik yang juga boleh melengkapkan kompilasi kopi automatik, seperti Grunt yang terkenal dan fekit domestik, dsb.

Kaedah kompilasi ortodoks ini mungkin yang paling boleh dipercayai dan harus disukai oleh pengaturcara yang berpengalaman. Ia membolehkan pasukan membentuk model pembangunan tetap. Di samping itu, projek yang disusun menjadi projek js tulen, dan tiada kebergantungan tambahan diperlukan sama ada ia dijalankan secara langsung sebagai aplikasi atau dirujuk oleh projek lain sebagai modul. Dan tidak ada keperluan untuk menyusun semasa runtime, jadi tidak ada masalah prestasi yang disebabkan oleh penyusunan.

Kelemahannya ialah ia terlalu menyusahkan. Jika anda melakukan projek kecil, ia akan mengambil masa setengah hari hanya untuk mencipta fail kek atau mengkonfigurasi grunt, yang tidak berbaloi.

Melalui pengenalan coffeescript dalam jQuery, node.js dan javascript, adakah anda telah mendapat pemahaman baharu tentang coffeescript?