CoffeeScript-jQuery

jQueryは、2006年にJohn Resigによって作成されたJavaScriptを使用して構築された高速で簡潔なライブラリ/フレームワークです。

jQueryは、迅速なWeb開発のために、HTMLドキュメントのトラバース、イベント処理、アニメーション、およびAjax対話を簡素化します。 link：/jquery/index [jQuery]については、jQueryチュートリアルをご覧ください。

CoffeeScriptを使用して jQuery を操作することもできます。この章では、CoffeeScriptを使用してjQueryを操作する方法を説明します。

CoffeeScriptとjQueryの使用

jQueryはブラウザの問題を解決しますが、いくつかの悪い部分があるJavaScriptでjQueryを使用することは少し問題です。 JavaScriptの代わりにCoffeeScriptを使用することをお勧めします。

CoffeeScriptでjQueryを使用しているときに変換する際は、次の点に留意してください。

*$* 記号は、アプリケーションのjQueryコードを示します。 以下に示すように、これを使用してjQueryコードをスクリプト言語から分離します。

$(document).ready

CoffeeScriptで中括弧を使用する必要はありません。ただし、パラメーターを使用して関数を呼び出し、あいまいなコードを処理する場合を除き、関数定義* function（）*を下図のように矢印で置き換える必要があります。

$(document).ready ->

CoffeeScriptは関数の末尾のステートメントを暗黙的に返すため、不要なreturnステートメントを削除します。

例

以下は、クリックされた要素の直前に<div>要素が挿入されているJavaScriptコードです-

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>

      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>

   </body>

</html>

次のように、上記のコードをCoffeeScriptコードに変換できます。

 <html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>

      <script type="text/coffeescript">
        $(document).ready ->
          $('div').click ->
            $(this).before '<div class="div"></div>'
            return
          return
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>

      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>

   </body>

</html>

実行すると、次の出力が得られます。

コールバックとは何ですか？

コールバックは、関数の非同期同等物です。コールバック関数は、特定のタスクの完了時に呼び出されます。 Nodeはコールバックを多用します。 NodeのすべてのAPIは、コールバックをサポートするような方法で作成されます。

たとえば、ファイルを読み取る関数は、ファイルの読み取りを開始し、すぐに制御を実行環境に戻し、次の命令を実行できるようにします。ファイルI/Oが完了すると、コールバック関数を渡すときにコールバック関数を呼び出し、ファイルの内容をパラメーターとして渡します。そのため、ファイルI/Oのブロックや待機はありません。 Node.jsは、関数が結果を返すのを待たずに大量のリクエストを処理できるため、非常にスケーラブルです。

ブロッキングコードの例

次の内容を持つinput.txtという名前のテキストファイルを作成します。

Tutorials Point is giving self learning content
to teach the world in simple and easy way!!!!!

次のコードを持つmain.jsという名前のjsファイルを作成します-

var fs = require("fs");
var data = fs.readFileSync('input.txt');
console.log(data.toString());
console.log("Program Ended");

次に、main.jsを実行して結果を確認します-

$ node main.js

出力を確認します。

Tutorials Point is giving self learning content
to teach the world in simple and easy way!!!!!
Program Ended

ノンブロッキングコードの例

次の内容を持つinput.txtという名前のテキストファイルを作成します。

Tutorials Point is giving self learning content
to teach the world in simple and easy way!!!!!

main.jsファイルを更新して、次のコードを作成します-

var fs = require("fs");
fs.readFile('input.txt', function (err, data) {
  if (err) return console.error(err);
    console.log(data.toString());
});
console.log("Program Ended");