我正在寻找支持动态代码加载的AMD加载器,这非常小.
加载器将在移动/高延迟环境中使用,并且requirejs的大小过多.
我不需要:
-text插件
-CSS插件
-i18n插件
支持这些功能的最小AMD加载器是什么?我正在寻找一些理想情况下缩小时不超过5k的东西.Gzip不包含在此度量中.
我有一些代码支持编写微库并将其加载到Dojo AMD,NodeJS require()和浏览器普通窗口.[某事] ......但我想知道是否已经建立了这样做的方法和我只是重新发明了轮子或代码是否值得.我确实在互联网上做了很好的搜索.
我创建的代码是https://gist.github.com/forbesmyester/5293746,如果人们有评论,很好,但我更感兴趣的是找出是否有适当的方法来做到这一点.
我目前正在将Backbone视为一种组织我们的javascript文件并为我们的代码创建一个干净结构的方法.
我的问题主要是"最佳实践"问题.
该库运行良好,我已成功设置AMD和requirejs的结构.我的问题涉及我正在运行的几个实用程序文件.一个从XML文档获取数据并将其转换为json数据对象(因此可以对数据进行本地化).另一个是加载并连接到Facebook的实用程序.我已将这两个创建为"模型".
可以说这些模型应该是"控制器",因为它们连接到服务但是需要调用这些模型而不需要浏览到路由器(或控制器)文件中的hashbang.
我应该扩展这两个实用程序文件的主干模型,还是我应该做些什么来实现这样的实用程序文件?
我们第一次使用requirejs,而我在构建依赖项时遇到了麻烦.
我已将我的主app.js文件定义为index.html中的data-main属性:
<script data-main="src/app" src="/js/lib/require/require.js"></script>
Run Code Online (Sandbox Code Playgroud)
但是,我有一个文件定义了我所有需要的路径/填充程序配置,我希望它在app.js文件之前运行.我需要它运行,以便我可以在我的app.js中引用配置的路径作为依赖项.
我认为正确的方法是将我的config.js作为数据主.我尝试将config.js设置为依赖,如下所示:
<script type="text/javascript">
var require = {
baseUrl: "/",
deps: ["src/config"]
}
</script>
<!-- data-main is the main js file of the app -->
<script data-main="src/app" src="/js/lib/require/require.js"></script>
Run Code Online (Sandbox Code Playgroud)
但这没有帮助.
有什么建议?
我正在努力解决一个问题,试图只加载我的应用程序需要的模块.该模块列表将有所不同,如下所示.
此代码在动态页面中内联:
<script data-main="js/main" src="js/require.js"></script>
<script>
//APPROACH #1
(function(){
<% foreach(DashBoardItem item in AvailableItems){ %>
require('js/dashboard/<%= item.Name.ToLower() %>').init(<%= CurrentUser.ID %>);
<% } %>
}());
</script>
Run Code Online (Sandbox Code Playgroud)
这个想法是产生这样的东西:
<script>
//APPROACH #1
(function(){
require('js/dashboard/sales').init(123);
require('js/dashboard/inventory').init(123);
require('js/dashboard/deadlines').init(123);
}());
</script>
Run Code Online (Sandbox Code Playgroud)
我不确定这是否可行或是因为上述方法导致错误
尚未为上下文加载模块名称"js/dashboard/sales":_.使用require([])
我尝试生成这个:
<script>
//APPROACH #2
require(['js/dashboard/sales', 'js/dashboard/inventory', 'js/dashboard/deadlines' ],
function(sales, inventory, deadlines){
sales.init(123);
inventory.init(123);
deadlines.init(123);
});
</script>
Run Code Online (Sandbox Code Playgroud)
但这种失败,因为显然RequireJS不会等待模块加载和这三个参数的回调(sales,inventory,deadlines)会undefined在执行时.
我完全错了吗?如何从服务器端向客户端JS传递所需模块的变化列表?
更新 - 修复
我的问题是我的模块(销售,库存,截止日期)被错误地声明了.感谢下面的@anoopelias的评论,我意识到我已经使用了require(...)而不是define(...)在其中.所以他们就像:
//example of WRONG sales.js module
require(['jquery', 'other-module'], …Run Code Online (Sandbox Code Playgroud) 我们如何使用带有需要js的Phonegap?我尝试使用require()方法添加到phonegap.我的代码如下所示,所有.js文件都在正确的位置.请帮助我,它可以通过AMD加载phonegap,或使用普通的脚本方法
<script type="text/javascript" src="cordova.js"></script>
Run Code Online (Sandbox Code Playgroud)
这是我的require配置和方法
require.config({
baseUrl: 'js/lib',
paths: {
controller: '../controller/controller',
model: '../model/model',
view: '../view/view',
router:'../router/router'
},
/* map: {
'*': {
'tempName': 'actualName'
}
},*/
shim: {
'backbone': {
deps: ['underscore', 'jquery','cordova'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
}
}
});
require(['jquery', 'backbone', 'router', ], function ($, Backbone, Router) {
document.addEventListener('deviceready', function () {
alert('hi'); // working
navigator.notification.alert('hi'); // not working
}, false);
});
Run Code Online (Sandbox Code Playgroud) 我想知道在具有多个模块的项目中使用RequireJS的正确方法是什么,关于具有较少依赖性的多个require调用的性能与具有所有依赖性的单个require的性能.
让我们来看看,对于一个应用程序,我需要加载一些模块:gmaps, jquery, module1, module2, module3.某些模块的使用是相当独立的.因此,问题是建议使用以下哪种替代方法(假设此代码是加载到页面中的主要模块):
require(['gmaps'], function(gmaps){
gmaps.use();
});
require(['jquery','module1'], function(jquery, module1){
module1.use();
});
require(['jquery','module2'], function(jquery, module2){
module2.use();
});
require(['jquery','module3'], function(jquery, module3){
module3.use();
});
Run Code Online (Sandbox Code Playgroud)
VS
require(['jquery','module1','module1','module1','gmaps'], function(jquery, module1,module2,module3,gmaps){
module1.use();
module2.use();
module3.use();
gmaps.use();
});
Run Code Online (Sandbox Code Playgroud)
换句话说,什么是性能损失,require哪种是最佳实践.
我的理解是它不应该发生,但确实如此.这些库最合适的解决方法是什么?
笔记:
require.js手动(使用脚本标记)之后运行这些脚本应该可以工作,事实上它确实如此.但是,RequireJS文档明确警告该data-main脚本是异步运行的.虽然require.js应该已经正确定义了define定义多个命名模块的脚本所需的功能,但我还假设如果没有从data-main脚本加载适当的配置,可能会以不确定的方式发生不良事件.它是否正确?shim,map,bundles和paths配置属性可以在这种情况下帮助,但我希望我失去了它.澄清第一个注释:(我的不好,现在还不清楚)
我在这里描述的只是手动执行(使用HTML脚本标记)在 RequireJS和data-main脚本之后定义多个模块的脚本.知道后者运行异步,我的担忧应该变得更加明显(但请随时让我详细说明).其中很大一部分虽然我似乎可以成功地要求每个命名模块,但我不确定该行为是否具有确定性(同样,它不是很漂亮,我更愿意避免使用其他脚本标记并正确地异步加载所有内容) .
<script src="scripts/require.js" data-main="app/main.js"></script>
<script src="scripts/datajs-1.1.2.js"></script>
Run Code Online (Sandbox Code Playgroud)
这里,datajs-1.1.2.js定义了两个模块,如上面的链接所述,并在下面复制:
// AMD support
if (typeof define === 'function' && define.amd) {
define('datajs', datajs);
define('OData', odata);
} ...
Run Code Online (Sandbox Code Playgroud) 使用SystemJS,如何指定一个库依赖于另一个库?例如,Bootstrap JavaScript库依赖于jQuery.基于SytemJS文档,我假设我将使用System.config.meta属性指定此依赖项:
System.config({
baseUrl: './scripts',
defaultJSExtensions: true,
map: {
jquery: './lib/jquery-2.2.0.min.js',
bootstrap: './lib/bootstrap.min.js'
},
meta: {
bootstrap: {
deps: ['jquery']
}
}
});
System.import('./scripts/app.js');
Run Code Online (Sandbox Code Playgroud)
但这似乎没有效果.当我运行我的应用程序时,Bootstrap库会抛出一个Bootstrap's JavaScript requires jQuery错误 - 这意味着在jQuery之前加载了Bootstrap.
如何确保在Bootstrap之前始终加载jQuery?
在Intel和AMD x86_64处理器上,SIMD矢量化寄存器具有特定的融合乘法 - 加法功能,但通用(标量,整数)寄存器不具备 - 您基本上需要相乘,然后添加(除非您可以适应lea) .
这是为什么?我的意思是,它是否无用,以至于不值得开销?