我对阿迪·奥斯马尼和托马斯·戴维斯非常感谢发表他们的例子和boilerplates(http://backbonetutorials.com/organizing-backbone-using-modules,https://github.com/addyosmani/backbone-aura).
他们帮我开始了很多.
我目前正在开发一个大型Web应用程序.所以我有很多组件,例如地址管理,日期管理,待办事项.每个组件都填充我的应用程序中的整个空间(菜单栏除外).菜单中每个新组件的选择都需要页面转换.
在开始的时候,我采用了上面教程使用的文件结构,样板文件(给出了'views'目录的所有视图).但随着更多组件的添加,将alle视图放入一个视图目录变得让我感到困惑.即使创建子目录也没有解决方案,因为在这个文件结构中我丢失了哪个视图与哪个模型相关的信息.
所以我搜索了另一个解决方案并找到了requirejs amd packages(http://requirejs.org/docs/api.html#packages).这帮助了我很多,因为属于同一组件(模型,集合,视图)的所有模块都进入了一个目录.因为使用"模型"(等等)后缀每个模型,对我来说足够干净的东西.
现在问题:我正处于前期制作阶段.我没有为构建生产部署而构建和连接的东西.但现在我想尝试requirejs优化器.我已经阅读了James Burke的" http://requirejs.org/docs/optimization.html " 页面.但并非一切都很清楚.
我想要的是以下内容:我有这些包目录.来自一个包目录的所有amd模块(视图,模型,集合)应连接到一个文件,但不应包含它们的依赖项,因为许多这些外部包依赖项在开始时单独加载.
是否有任何人具有相同或相似的要求,谁已采取这一步骤,并可以提供一些提示.
非常感谢
沃尔夫冈
首先是一段历史,我们有一个由许多javascript文件组成的引擎,这些文件本质上是模块.尽管在指定的命名空间下,这些模块返回分配给全局范围的单个类.
引擎本身用于显示电子教学内容,每个不同的电子教学课程需要稍微不同的需求,这是我们根据必要的功能将javascript文件包含到页面中的位置.(只有一个入口页面).
我一直试图权衡它是否值得改为AMD,require.js和r.js,或者如果最好继续使用我们当前的系统,其中包括页面上所需的所有内容并将其最小化为一个脚本.
去AMD的最大问题之一就是容易扩展课程似乎更难.例如,有时我们必须稍微调整原始类的行为.因此,我们通过复制原始原型在页面上添加另一个脚本include,扩展原始类,执行使用apply重写的原始函数,然后执行任何其他代码.
您是否可以在不调整原始文件的情况下扩展AMD模块？或者我错过了这一点,我们最好还是坚持我们现在正在做的事情？
我开始学习Backbone.js,我从这个样板开始,通过从磁盘上的静态文件加载JSON数据并在html表中显示它来做一个例子.
然后我尝试在一个按钮上绑定一个事件,该按钮应该从集合中删除一个元素,然后从DOM中删除.工作正常,点击触发destroy方法,remove事件在集合上触发,但没有任何东西来自success或error回调destroy
有人有线索吗？
该模型 :
define([
'underscore',
'backbone'
], function(_, Backbone) {
var memberModel = Backbone.Model.extend({
url: "/members.json",
defaults: {
email: "",
firstname: "",
lastname: "",
gender: "",
language: "",
consent: false,
guid: "",
creationDate: ""
},
initialize: function(){
}
});
return memberModel;
});
风景 :
define([
'jquery',
'underscore',
'backbone',
'mustache',
'collections/members',
'text!templates/members/page.html'
], function($, _, Backbone, Mustache, membersCollection, membersPageTemplate){
var membersPage = Backbone.View.extend({
el: '.page',
initialize: …我正在寻找支持动态代码加载的AMD加载器,这非常小.
加载器将在移动/高延迟环境中使用,并且requirejs的大小过多.
我不需要:
-text插件
-CSS插件
-i18n插件
支持这些功能的最小AMD加载器是什么？我正在寻找一些理想情况下缩小时不超过5k的东西.Gzip不包含在此度量中.
出于测试目的,我试图删除一些amd模块并从服务器重新加载更新版本 - 目的是不刷新浏览器.
我目前正在执行以下操作,但浏览器仍然无法从网络重新加载项目.
var scripts = document.getElementsByTagName('script');
var context = require.s.contexts['_'];
for (var key in context.defined) {
if(key.indexOf("tests")>-1){
requirejs.undef(key);
for (var i = scripts.length - 1; i >= 0; i--) {
var script = scripts[i];
var attr = script.getAttribute('data-requiremodule')
if (attr === key){
script.parentNode.removeChild(script);
}
}}
它从上下文中删除引用并成功删除脚本标记.可惜...
有谁知道清除requirejs的所有引用的机制？
任何帮助非常感谢
我有许多jQuery插件,我想在TypeScript中使用AMD模式加载.例如,我可能有这样的结构:
/lib/jquery.myplugin.js
/app.ts
该插件只是扩展了jQuery.它不提供新的顶级函数或变量.一个例子可能是:
// jquery.myplugin.js
jQuery.fn.myExample = function() { ... }
相应的jquery.myplugin.d.ts文件如下所示:
interface JQuery {
myExample();
}
所以现在在app.ts我可以调用类似的东西$('#my-element').myExample().请注意,这假设我已经加载了Microsoft的jquery.d.ts声明.
我的问题是如何异步加载此库并利用TypeScripts静态类型？我可以像这样使用它:
/// <reference path="lib/jquery.myplugin.d.ts"/>
但这需要我在<script>HTML中添加标签,并且不会异步加载库.我希望TypeScript生成此代码:
define(["require", "exports", "lib/jquery.myplugin"], function (require, exports, __jquery.myplugin__) {
...
// Use my plugin
$('#my-element').myExample();
}
但是由于.d.ts文件中没有导出,我无法编写import myplugin = module('lib/jquery.myplugin').
我最接近的是jquery.myplugin.d.ts使用接口声明引用另一个ts文件并包含至少一个导出.但是在这个库中没有什么可以导出的,为了获得所需的输出,我不仅需要添加导出,而且还必须调用它.
更新:我在typescript.codeplex.com上为此打开了一个工作项
我们有一个大型单页面应用程序,大约有200个模块 -
当我们使用优化器时 - 我们最终会将所有模块放在一个文件中,并使用uglified等.工作得非常好.
但是我们的应用程序是一种多租户应用程序,每个用户都不需要所有200个模块.
我们可以将模块大致划分为50个通用模块,如果用户类型为"A",则需要100个模块,对于用户类型"B"等,需要50个模块.
现在,如果用户类型为"B",则下载的单个优化文件包含100个从不使用的模块.不知何故,如果我们可以避免这些,文件大小将会小得多,这将真正提高性能.
总之,我正在寻找这个 - 我们有模块组 - 将模块组优化到它自己的文件中 - 根据用户的需要下载相应的文件.
是否可以使用requireJS进行这种优化？
谢谢,J.
我们如何使用带有需要js的Phonegap？我尝试使用require()方法添加到phonegap.我的代码如下所示,所有.js文件都在正确的位置.请帮助我,它可以通过AMD加载phonegap,或使用普通的脚本方法
<script type="text/javascript" src="cordova.js"></script>
这是我的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);
});
我有一些AMD/Require.js问题.我对模块化js和AMD都很陌生,所以如果有人能帮我解决这个问题会很棒.
假设我的系统上有2个不同的区域,定义为模块("define()"函数 - 我正在使用Backbone,顺便说一句)
我注意到,如果用户当前正在访问该站点的"Books"部分,则DVD部分中的文件也包含在Require.js中.我有以下问题:
任何想法都会很好.
我正在尝试使用移相器和打字稿制作游戏。我按照这里的说明进行操作，它最初有效。当我尝试使用 AMD 和 requirejs 模块化我的代码时出现了问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Resonate</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="phaser.js"></script>
<script src="http://requirejs.org/docs/release/2.1.20/minified/require.js" data-main="app"></script>
</head>
<body>
<h1>RESONATE</h1>
<div id="content"></div>
</body>
</html>
export class Player {
color: string;
constructor() {
this.color = "#0000ff";
}
}
import player = require("Player");
class PhaserDemo {
game: Phaser.Game;
constructor() {
this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content', { preload: this.preload, create: this.create });
}
preload() {
this.game.load.image('phaser_run', 'run.png');
}
create() …js-amd ×10
requirejs ×7
javascript ×4
amd ×3
backbone.js ×3
typescript ×2
cordova ×1
lazy-loading ×1
loader ×1
mustache ×1