CoffeeScript 服務端和客戶端的代碼重用

2022-06-29 15:22 更新

服務端和客戶端的代碼重用

問題

當你在CoffeeScript上創(chuàng)建了一個函數(shù)，并希望將它用在有網(wǎng)頁瀏覽器的客戶端和有Node.js的服務端時。

解決方案

以下列方法輸出函數(shù)：

# simpleMath.coffee

# these methods are private
add = (a, b) ->
    a + b

subtract = (a, b) ->
    a - b

square = (x) ->
    x * x

# create a namespace to export our public methods
SimpleMath = exports? and exports or @SimpleMath = {}

# items attached to our namespace are available in Node.js as well as client browsers
class SimpleMath.Calculator
    add: add
    subtract: subtract
    square: square

討論

在上面的例子中，我們創(chuàng)建了一個新的名為“SimpleMath”的命名空間。如果“export”是有效的，我們的類就會作為一個Node.js模塊輸出。如果“export”是無效的，那么“SimpleMath”就會被加入全局命名空間，這樣就可以被我們的網(wǎng)頁使用了。

在Node.js中，我們可以使用“require”命令包含我們的模塊。

$ node

> var SimpleMath = require('./simpleMath');
undefined
> var Calc = new SimpleMath.Calculator();
undefined
> console.log("5 + 6 = ", Calc.add(5, 6));
5 + 6 =  11
undefined
>

在網(wǎng)頁中，我們可以通過將模塊作為一個腳本嵌入其中。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>SimpleMath Module Example</title>
    <script src="https://atts.w3cschool.cn/attachments/image/wk/coffeescript/jquery.min.js"></script>
    <script src="simpleMath.js"></script>
    <script>
        jQuery(document).ready(function    (){
            var Calculator = new SimpleMath.Calculator();
            var result = $('<li>').html("5 + 6 = " + Calculator.add(5, 6));
            $('#SampleResults').append(result); 
        });
    </script>
</head>
<body>
    <h1>A SimpleMath Example</h1>
    <ul id="SampleResults"></ul>
</body>
</html>

輸出結果：

A SimpleMath Example

· 5 + 6 = 11

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號