- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试找出一种模式来加载常见库(如 Backbone、jQuery 和 Underscore)的具体版本,以便在任何旨在插入任何网站的 Javascript 应用程序中使用它们,而不会与这些库的现有版本发生冲突。我选择使我的代码模块化的库是 require.js。
该应用程序将被称为 Bobby :-)
如果我不将代码优化为单个文件,我的代码就可以正常工作。如果将 Bobby 作为单个 Javascript 文件提供服务,并且可以将其包含在网站 HTML 代码的任何位置,那就太好了。
我注意到了:我是 require.js 的新手。
文件的组织方式如下:
bobby
public
js
app -> My custom JS
bobby.js
core.js
lib -> 3rd party JS
backbone.js
jquery-1.9.1-min.js
require.js
underscore.js
bootstrap.js -> Main file for require.js
build.js -> To create js/bobby.js
index.html -> uses non-optimized version
index2.html -> uses optimized version (js/bobby.js)
在这里,我试图确保该网站的库不会被我自己的版本覆盖。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bobby</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script type="text/javascript" src="js/lib/require.js" data-main="js/bootstrap.js"></script>
<script type="text/javascript">
jQuery(function($){
console.log("Host's jQuery: " + $.fn.jquery); // Should be 1.7.2
console.log("Host's Underscore: " + _.VERSION); // Should be 1.4.3
console.log("Host's Backbone: " + Backbone.VERSION); // Should be 0.9.10
console.log("Host's Backbone's jQuery: " + Backbone.$.fn.jquery);
});
</script>
</head>
<body>
<p>HOLA!</p>
</body>
</html>
当我加载此文件时,控制台日志是正确的:
Host's jQuery: 1.7.2 index.html:23
Host's Underscore: 1.4.3 index.html:24
Host's Backbone: 0.9.10 index.html:25
Host's Backbone's jQuery: 1.7.2 index.html:26
Bobby's jQuery: 1.9.1 bobby.js:3
Bobby's Underscore: 1.4.4 bobby.js:4
Bobby's Backbone: 1.0.0 bobby.js:5
这是有问题的版本。该文件使用优化版本。而不是:
<script type="text/javascript" src="js/lib/require.js" data-main="js/bootstrap.js"></script>
它使用:
<script type="text/javascript" src="js/bobby.js"></script>
控制台日志不正确:
Host's jQuery: 1.9.1 index2.html:14
Host's Underscore: 1.4.4 index2.html:15
Host's Backbone: 1.0.0 index2.html:16
Host's Backbone's jQuery: 1.9.1 index2.html:17
Bobby's jQuery: 1.9.1 bobby.js:11
Bobby's Underscore: 1.4.4 bobby.js:11
Bobby's Backbone: 1.0.0 bobby.js:11
但是如果您在控制台中执行此操作:
$.fn.jquery => "1.7.2"
bobby.$.fn.jquery => "1.9.1"
没关系。与以下内容相同:
Backbone.VERSION => "0.9.10"
bobby.B.VERSION => "1.0.0"
和:
_.VERSION => "1.4.3"
bobby._.VERSION => "1.4.4"
只有在包含 js/bobby.js 后立即执行脚本时才会失败。该脚本使用了不正确版本的库(外部库而不是站点库)。
假设这是首先加载的内容,因此我在这里为所有第 3 方库调用 noConflict()。
require(['app/core', 'app/bobby'], function(core, bobby) {
core._.noConflict();
core.$.noConflict(true);
core.B.noConflict();
bobby.initialize();
});
define(['lib/underscore', 'lib/jquery-1.9.1.min', 'lib/backbone'], function(){
Backbone.$ = jQuery;
return {
_: _,
$: jQuery,
B: Backbone
};
});
define(['app/core'], function(core){
var initialize = function() {
console.log("Bobby's jQuery: " + core.$.fn.jquery);
console.log("Bobby's Underscore: " + core._.VERSION);
console.log("Bobby's Backbone: " + core.B.VERSION);
core.$('body').html('Bobby initialized!');
window.bobby = core._.extend(window.bobby || {options: {}}, core);
};
return {
'initialize': initialize
};
});
我使用通过 npm 全局安装的 r.js 和 build.js 文件:
cd bobby/public/js
r.js -o build.js
它给出:
Tracing dependencies for: /path/to/bobby/public/js/bobby.js
Uglifying file: /path/to/bobby/public/js/bobby.js
/path/to/bobby/public/js/bobby.js
----------------
/path/to/bobby/public/js/lib/require.js
/path/to/bobby/public/js/lib/underscore.js
/path/to/bobby/public/js/lib/jquery-1.9.1.min.js
/path/to/bobby/public/js/lib/backbone.js
/path/to/bobby/public/js/app/core.js
/path/to/bobby/public/js/app/bobby.js
/path/to/bobby/public/js/bootstrap.js
为了避免与现有的 require.js 库发生冲突,我已将其命名空间包含在 bob 中。
({
baseUrl: ".",
out: "bobby.js",
paths: {
requireLib: 'lib/require'
},
include: ["requireLib", "bootstrap"],
namespace: "bob"
})
虽然 bobby.js 在初始化后工作得很好,并且将全局变量返回到原始库,但当我们执行时它不起作用:
<script type="text/javascript">
jQuery(function($){
...
});
</script>
加载优化的 bobby.js 文件后。
这个想法并不是强制网站所有者将 bobby.js 文件放在具体的位置。
我能做什么?谢谢!
P.D.:如果您发现此模式有用,请随意使用...
最佳答案
睡了一觉后,今天早上醒来,我想起了 async
HTML 属性的存在,因此我测试了 Google 用于加载其跟踪代码的相同代码段,结果成功了!
<script type="text/javascript">
(function() {
var bb = document.createElement('script');
bb.src = 'js/bobby.js';
bb.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(bb);
})();
</script>
无论如何,我接受对拟议代码的建议和答案。
关于javascript - 用于使用 require.js 进行消费的自定义 Javascript 应用程序 : How to avoid conflicts with existing libs on optimization?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15862124/
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之,我想将我的应用程序实现为单独的层,其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
当我看到存储在我的数据库中的日期时。 这是 正常 。日期和时间就是这样。 但是当我运行 get 请求来获取数据时。 此格式与存储在数据库 中的格式不同。为什么会发生这种情况? 最佳答案 我认为您可以将
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在尝试使用backbone.js 实现一些代码 和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序,并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我尝试在 NodeJS 中加载数据,然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。 我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
在 node.js 中,我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时,会创建一个 app.js 文件作为生成应用的主要入口点。 通过 n
最近,我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。 我更喜欢客户端。在他的实现过程中,papa先生在客户端有类
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我是一个图形新手,需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么,而我没有从 Konva 等基于 Canvas 的库中得到什么? 我从 Konva
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
尝试查看 Express Passport 中所有登录用户的所有 session ,并希望能够查看当前登录的用户。最好和最快的方法是什么? 我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
我有一个 React 应用程序,但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载,运行与 DOM 交互的 js 的最佳方式是什么,例如 $('div').mixItUp() 。对
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器 客户端 // ... onFilePicked(file) { const url = 'upload/a
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好,所以我一定是在 Gulp 中做错了什么。 除脚本外,所有其他任务均有效。我现在厌倦了添加和注释部分。 我不断收到与意外
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。 最佳答案 您可以在 config/ 目录中创建任何文件,例如 config/app.js 包含如下内容: module.expor
经过多年的服务器端 PHP/MySQL 开发,我正在尝试探索用于构建现代 Web 应用程序的新技术。 我正在尝试对所有 JavaScript 内容进行排序,如果我理解得很好,一个有效的解决方案可以是服
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
我正在使用 angular-seed用于构建我的应用程序的模板。最初,我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和
我是一名优秀的程序员,十分优秀!