如何在我的node.js Web应用程序中包含jQuery代码？

Question

因此，我一直在使用node.js开发一个（非常简单的）RESTful应用程序，并且我已经做到了最后一步，现在唯一缺少的是使用jQuery操作html页面，以便我可以编辑内容的html-这让我非常生气。

我学习了try.jquery.com教程，它非常顺利。 我绝不会称自己是jquery的高手，但是我为基本的html操作编写代码几乎没有什么麻烦，除非我从未真正考虑过jquery代码的去向。 我尝试了很多不同的方法，但只有一种（确实很不方便）有效，所以我想知道是否可以澄清一下。

（注意：所有js文件都位于根文件夹中，而index.html位于根目录/公共目录中；我基本上只是通过npm / package.json运行app.js）

我已经尝试在主app.js文件中包含jQuery代码：

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文件中的代码）：

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>
        $(document).ready(function () {
        $(' button ').on( 'click', $('h1').text("I'm here") );
        console.log('kpa'); 
    });
</script>

我还尝试了不同的变体（即在函数中包括（或不包括）ready函数的第二部分，使用dom.ready函数中的onClick事件，等等。），但是唯一起作用的是最后一个方法

理想情况下，我希望能够在app.js中使用jQuery代码，但不太理想的情况是在其自己的文件中； 或者，如果出于某种原因我必须将其包含在html文件中，则至少需要能够与脚本块中的代码进行通信，以便可以从数据库中获取信息，依此类推。

Answer 1

请记住，jQuery需要一个窗口对象才能工作。 jQuery的第一个功能是dom查询，dom在窗口对象中。 结果，您必须加载jquery并将其附加到window对象。

作为节点应用程序，您将有一个浏览器窗口作为您应用程序的视图。 尝试从CDN将jquery添加到该窗口中，在其中添加您的需求，瞧瞧现在包含jquery的包含范围（窗口），因为全局也将它传递到了新需要的文件中。

错误：jQuery需要带有文档的窗口

index.html

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

现在，var UI（在我的情况下是一个模块）包含