如何将 jquery-ui 与 nodejs 一起使用？
Posted
技术标签:
【中文标题】如何将 jquery-ui 与 nodejs 一起使用？【英文标题】：how to use jquery-ui with nodejs? 【发布时间】：2021-07-24 16:48:02 【问题描述】：我正在尝试在 nodejs 中使用 jquery-ui draggable() 函数，在 JSdom 的帮助下，我能够让 jquery 与 jsdom 一起工作，但 jquery-ui 无法正常工作。 不知道如何链接两个库或使其工作
const JSDOM = require('jsdom');
const fs = require('fs');
const path = require('path');
const htmlPage = fs.readFileSync(path.resolve(__dirname,'../views/search.ejs'));
const window = new JSDOM(htmlPage);
const $ = require('jquery-ui-dist/jquery-ui')(window);
exports.getSearch = (req, res) =>
res.render('search', pageTitle: 'Search');
$('.item').draggable();
// console.log($('.main-head'));
执行npm start后出现错误
/home/jquery/node_modules/jquery-ui-dist/jquery-ui.js:14
factory( jQuery );
^
ReferenceError: jQuery is not defined
at /home/jquery/node_modules/jquery-ui-dist/jquery-ui.js:14:12
at Object.<anonymous> (/home/jquery/node_modules/jquery-ui-dist/jquery-ui.js:16:2)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/Nodejs/jquery/controller/search-controller.js:9:11)
[nodemon] app crashed - waiting for file changes before starting...
搜索.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main-head">
<div class="item">
<h1>item1</h1>
</div>
<div class="item">
<h1>item2</h1>
</div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：这周我必须自己解决这个问题。我无法以任何似乎可行的方式在 JSDOM 窗口上初始化 jquery-ui（我尝试通过内联和 cdn 脚本以及 npm 模块包含它）。我得出的结论是，最好简单地模拟与测试相关的 jquery-ui 方法。
在我的setupTests.ts 文件中，我有以下代码，通过在jquery-ui.js 的第 14 行中使 jQuery 可访问来解决您共享的错误：
(global as any).$ = require('jquery');
(global as any).jQuery = (global as any).$; // first setup global.jQuery...
require('jquery-ui'); // then initialize jquery-ui
我正在使用 jest，所以这被设置为我在 jest.config.js 中的 setupFile。您应该只需要在使用 jquery-ui 之前执行这些行。
module.exports =
...
"setupFiles": [
"<rootDir>/tests/setupTests.ts"
],
但是，虽然以这种方式加载 jquery-ui 确实让我们克服了您共享的特定错误，但我发现它无法按预期与 JSDOM 一起工作。当我尝试在 JSDOM 中的元素上调用 jquery-ui 方法时，它们仍然是 undefined。
所以，我像这样嘲笑我的测试所需的方法。 :)
const dom = new JSDOM('<html> ... </html>');
const $ = require('jquery')(dom.window.document);
const tooltip = jest.fn(() => );
$.__proto__.tooltip = tooltip; // mocks a jquery-ui method
testThatUsesJQuery($); // executes the code under test
expect(tooltip).toHaveBeenCalledTimes(4); // expects the method to have been called
【讨论】：
以上是关于如何将 jquery-ui 与 nodejs 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章
在哪里以及如何将 nodejs 与 angularjs 一起使用
一个承诺的 mysql 模块将如何与 NodeJS 一起工作？
需要有关如何将 Postman 的 Newman 与 Nodejs 一起使用的示例吗？