如何在我的node.js網絡應用程序中包含jQuery代碼？

Question

所以我一直在使用node.js處理一個（相當簡單的）REST風格的應用程序，並且我已經把它變成了最後一位，現在唯一缺少的就是使用jQuery來操縱html頁面，這樣我就可以編輯了html的內容 - 這讓我非常生氣。

我參加了try.jquery.com教程，它非常流暢;我決不會稱自己爲jquery的主人，但我在編寫基本的html操作代碼時遇到了一些麻煩，除了我從未真正考慮jQuery代碼的去向。我嘗試了一堆不同的東西，只有一種（非常不方便）的方式起作用，所以我想知道是否可以得到一些解釋。

（注：所有的JS文件都在根文件夾和index.html是根/公;而我基本上只是貫穿NPM /的package.json app.js）

我已經試過包括jQuery代碼在主app.js文件：

app.js

//some imports/requires here 
var $ = require('jquery'); 
//more imports/requires here 

//error; document is undefined 
$(document).ready($('h1').text('Im Here'); 

app.get('/', function (req, res) { 

    res.sendFile(__dirname+'/public/index.html'); 

}); 

的index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <title>Inspiratorator</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script="../app.js"></script> 

我已經試過包括它自己的文件jQuery代碼（嘗試只是讓代碼坐在js文件，並試圖導出代碼的函數和app.js調用它 - 既什麼也沒做）：

jusQueryin.js

var $ = require('jQuery'); //tried with and without this 

$(document).ready(function() { 
    $(' button ').on('click', $('h1').text("I'm here")); 
    console.log('kpa'); 
}); 

的index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <title>Inspiratorator</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script="../jusQueryin.js"></script> 

我也試過（這個工作，但我不知道我會如何處理代碼這裏從其他.js文件，如果可能的話）：

指數。 html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <title>Inspiratorator</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script> 
     $(document).ready(function() { 
     $(' button ').on('click', $('h1').text("I'm here")); 
     console.log('kpa'); 
    }); 
</script> 

我也試過不同的變化（即包括功能（或不）功能的第二部分，使用dom.ready函數內的onClick事件等），但唯一有效的是最後一種方法

理想情況下， d喜歡能夠使用app.js中的jQuery代碼，理想情況下不會在它自己的文件中;或者如果由於某種原因必須將其包含在html文件中，我至少需要能夠與腳本塊中的代碼進行通信，以便我可以從數據庫中提供信息等等。

Answer 1

記住一件事jQuery需要一個窗口對象來工作。 jquery的第一個功能是作爲dom查詢，dom在窗口對象內。因此你必須加載jquery並將其附加到窗口對象。

作爲一個節點應用程序，您將有一個瀏覽器窗口作爲您的應用程序的視圖。嘗試從​​向該窗口中添加jquery，在那裏添加你的require，包含jquery的包含作用域（window），現在全局將它傳遞給新需要的文件。

Error: jQuery requires a window with a document

的index.html

<script> 
     window.$ = window.jQuery = require('./node_modules/jquery'); 
    </script> 
    <script> 
     var UI = require('./controllers/UI'); 
     UI.init(window); 
    </script> 

現在VAR UI，這是在我的情況下，模塊，包含