编写模块化,独立的可测试代码确实很有意义 - 特别是对于大型项目.
但是在一个大型项目中使用require.js/ amdmake有什么区别呢？我还需要在构建时隐藏和缩小我的项目？
我只是试图包装我们的一个模块,这些模块通过<script>一些样板中的标签包含在内,以允许可选的AMD加载requirejs.
这是非常痛苦的,我能想到的最好的是:
(function(){
var exports, jQuery;
if (typeof window.define === 'function' && typeof window.requirejs === 'function') {
exports = {};
define(['jquery'], function (jq) {
jQuery = jq;
return thisModule();
});
} else {
exports = window;
jQuery = window.jQuery;
thisModule();
}
function thisModule() {
}
})();
请注意,这是
我主要关心的是第二点,因为当我超越包装我们的核心文件时,它将会变得很糟糕.我确定那里有一些整洁的(呃)包装器实现,但我找不到任何.
有人有任何提示吗？
这个问题的答案并没有回答我的问题.
我想使用Intern作为我的测试框架从项目根目录外部加载依赖项.我目前正在使用以下目录结构:
www/
project1/
app/
lib/
project2/
app/
lib/
intern-tests/
node_modules/
tests/
functional/
project1-tests/
project2-tests/
unit/
project1-tests/
project2-tests/
intern.js
Gruntfile.js
正如您所看到的,我正在制作intern-tests自己的项目,并希望此目录能够保存我所有项目的所有测试.我已经设置了我的Gruntfile来执行使用grunt exec库将命令转换为的测试.一切正常,但我的单元测试无法加载和目录中的依赖项.grunt projectNamegrunt test --project=projectNameproject1/project2/
例如,这是我的单元测试之一:
define([
'intern!object',
'intern/chai!assert',
'jquery',
'../../../../project2/lib/js/var/document',
'../../../../project2/lib/js/exports/file/functions/resizeInput'
], function(registerSuite, assert, $, document, resizeInput) {
registerSuite({
name: 'functions',
resizeInput: function() {
var $input = $(document.createElement('input'));
resizeInput($input, 8, 20, 450, 200);
assert.equal($input.width(), 450);
}
});
});
并运行该测试给我以下错误:
SUITE ERROR
Error: Failed to load module ../project2/lib/js/var/document from …我已经开始使用实习库在js中编写功能测试,我意识到我无法理解这种语法:
var assert = require('intern/chai!assert');
var registerSuite = require('intern!object');
方法!论证中字符的用途是什么require()？
有点抽象的问题,但我很惊讶我已经找不到了:
现在Dojo已经将所有AMD都用于1.7,它与RequireJS,Lab,Head等相比如何......
编辑:我意识到实验室和头部不是AMD加载器.澄清:
我喜欢Dojo如何将其核心分解为小巧,简洁,单一用途的模块.(我假设这些模块现在可以与任何AMD加载器一起使用,虽然我没有测试过)这使得dojo.js本身仅仅比AMD加载器更多.
所以问题是:作为AMD加载器,Dojo如何堆叠起来.就如何遵循规格,速度,大小,效率等而言如何.这似乎是一个非常激烈的话题中的新生儿,但我听到的惊喜却很少.
我正在使用带有AMD和require.js的Typescript,但我无法使用typescript编译器输出将在加载模块后执行的代码.
这是main.ts:
import { foo } from './bar';
foo('world');
这是bar.ts:
export function foo(name: string) {
alert('Hello ' + name);
}
我使用以下tsconfig.json文件编译它:
{
"compilerOptions": {
"alwaysStrict": true,
"module": "amd",
"outFile": "client.js",
"target": "es5"
},
"files": [
"main.ts"
]
}
并将其包含在我的HTML中,如下所示:
<script data-main="client/client.js" src="/static/require.js"></script>
但是,生成的JavaScript代码如下所示:
define("bar", ["require", "exports"], function (require, exports) {
"use strict";
function foo(name) {
alert('Hello ' + name);
}
exports.foo = foo;
});
define("main", ["require", "exports", "bar"], function (require, exports, bar) {
"use …换句话说,有什么情况我可能需要这个指令吗？
从英特尔说明手册中,这是指令的作用:
从DS加载(E)CX字节:[(E)SI]到AL.
在NASM中采用以下示例:
section .data
src: db 0, 1, 2, 3
section .code
mov esi, src
mov ecx, 4
rep lodsb ; mov al, byte[esi + ecx -1]; ecx++
在rep lodsb执行指令时,我无法控制加载的值al.我所能做的只是等待,直到指令终止以获取最后一个值al,当然我可以直接获得,没有循环.
同样的问题也适用于家庭的休息:REP LODS AX,REP LODS EAX和REP LODS RAX.
我真的是dojo的新手但是当我开始使用dojo版本1.7.2开发新的应用程序时,我也想使用新的AMD语法来实现功能.不幸的是我似乎没有得到它.:-(
让我最烦的是我不能简单地调用任何"require"-block中的函数.例如,我有一个页面,在开始时创建一个动态表,每行有几个小部件.然后我有一个按钮,每按一次就会添加一个空行.
没有AMD语法就很容易:
- 把我所有的"dojo.require()"放在HEAD中
- 然后创建一堆我自己的函数来创建表和小部件
- 添加行函数可以轻松访问任何全局变量我以前的功能填写了
但对于AMD来说,它是这样的:
初始函数创建表和小部件:
function fillReportTable(repId) {
require(["dojo/dom-construct", "dojo/dom-attr", "dijit/form/FilteringSelect",
"dojo/data/ItemFileReadStore", "dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/Select", "dojo/store/Memory"],
function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {
// a lot of code to create the table, consisting of SEVERAL functions
function createNewRow(tbl) { ...}
function function1 () {... }
function function2 () {... }
function function3 () {... }
}
现在,"添加空行"按钮调用自己的函数"addEmptyRow".
但是在这个函数中我必须:
- 再次为每个dojo模块做一个其他的需求
- 我不能使用任何"fillReportTable"函数"内部"的函数.例如"createNewRow"函数
function addEmptyRow() {
require(["dojo/dom-construct", "dojo/dom-attr", "dijit/form/FilteringSelect",
"dojo/data/ItemFileReadStore", "dijit/form/ComboBox", "dijit/form/DateTextBox", …我好像撞墙了,我无法分解.我正在使用angular + typescript,并希望使用requirejs.定义了多个角度应用程序,这些应用程序依赖于正文上的data-app-name属性进行加载.
文件夹结构(简化):
|- Libs
|- angular
|- some-plugin
|- angular-some-plugin // Exposes an angular.module("ngSomePlugin")
|- require.js
|- Common
|- Common.ts // Exposes an angular.module("common")
|- App1
|- Controllers
|- SomeController.ts
|- SomeOtherController.ts
|- Services
|- SomeService.ts
|- Main.ts
|- App.ts
|- App2
// same as above
|- AppX
// same as above
|- Index.html
|- Main.ts
内容:
index.html的:
// All these attributes are set dynamically server-side
<body id="ng-app-wrapper" data-directory="App1" data-app-name="MyApp">
<script src="Libs/require.js" data-main="Main"></script>
</body>
Main.ts:
console.log("Step 1: Main.js"); …我确信我在这里遗漏了一些完全无足轻重的东西,但是对于它的生命我无法弄明白.直到最近我才开始使用AMD(RequireJS).我的应用程序将(将)在浏览器中运行.
在打字稿1.8,这是可能的,以tsc采用AMD当外部模块组成成一个单一的输出文件的整个项目.
出于这个原因,我最终决定抛弃内部模块并将我的所有VS2015项目.ts和.tsx文件外部模块,然后使用以下编译器参数将它们编译为单个文件:
--module AMD --outFile main.js
该单如预期的那样创建输出main.js文件,列出了它是这是该项目组成部分的所有模块:
main.js
define("Project/MainModule", ["require", "exports" ...], function (require, exports ...) {
"use strict";
console.log("MainModule defined");
// ...
});
...
现在,我如何Project/MainModule运行 - 例如 - index.html(以便将"MainModule定义"记录到控制台中)？我加载了RequireJS来处理AMD语法,以及为立即加载指定的main.js文件:
的index.html
<script data-main="main" src="Require.js"></script>
这正确加载main.js,我通过console.log在该文件中的大量定义列表(外部模块)之后包含一个调用来确保.请原谅我,如果这是一个微不足道的问题,我找不到任何关于如何使用这种方法的编译应用程序(可能我没有使用正确的关键字？).
编辑:我尝试按名称要求模块:
的index.html
<script>
window.onload = function () {
require(["Project/MainModule"], function () {
// this
});
}
</script>
......但这并不好,RequireJS无法找到该模块.
amd ×10
javascript ×6
requirejs ×4
dojo ×3
typescript ×3
intern ×2
angular ×1
assembly ×1
boilerplate ×1
build ×1
commonjs ×1
html ×1
intel ×1
node-modules ×1
node.js ×1
unit-testing ×1
x86 ×1