blocks|key|351212|text|我将尝试这样做，但在没有看到任何实际代码的情况下，这将是一件有点困难的事情。就我个人而言，我从来没有见过任何人在(M)VC上用JavaScript或IoC做过如此具体的尝试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|351213|首先，您将使用什么进行测试？如果您还没有，请查看YUI+Test+video，其中有一些关于使用javascript进行单元测试的有用信息。|offset|length|351214|其次，当您说“连接聚合的最佳方式”时，我可能只会将其作为setter和/或控制器|351215|//+Production
var+cont+=+new+NotebookController();
cont.setView(+new+NotebookView()+);

//+Testing+the+View
var+cont+=+new+NotebookController();
cont.setView(+new+MockNotebookView()+);

//+Testing+the+Controller
var+cont+=+new+MockNotebookController();
cont.setView(+new+NotebookView()+);

//+Testing+both
var+cont+=+new+MockNotebookController();
cont.setView(+new+MockNotebookView()+);|code-block|syntax|javascript|351216|但是这对你已经设计好的控制器和视图对象做了一些很大的假设。|351217|entityMap|0|LINK|mutability|MUTABLE|url|http://video.yahoo.com/watch/3737228/10267335^0|0|O|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I'll try to take a stab at this, but it will be a little difficult without seeing any actual code. Personally, I've never seen anybody do such a specific attempt at (M)VC with JavaScript or IoC for that matter.

First of all, what are you going to test with? If you haven't already, check out the <a href="http://video.yahoo.com/watch/3737228/10267335" rel="nofollow noreferrer">YUI Test video</a> which has some good info on unit testing with javascript.

Secondly, when you say "the best way to wire up that aggregation" I would probably just do it as a setter w/the controller

<pre><code>// Production
var cont = new NotebookController();
cont.setView( new NotebookView() );

// Testing the View
var cont = new NotebookController();
cont.setView( new MockNotebookView() );

// Testing the Controller
var cont = new MockNotebookController();
cont.setView( new NotebookView() );

// Testing both
var cont = new MockNotebookController();
cont.setView( new MockNotebookView() );
</code></pre>

But this makes some big assumption on how you've designed your controller and view objects already.

blocks|key|3125270|text|我会说，把它们连在一起就行了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3125271|function+wireTogether()+{
++var+v+=+new+View();
++var+c+=+new+Controller();
++c.setView(v);
}|code-block|syntax|javascript|3125272|当然，接下来会出现另一个问题--如何测试wireTogether()函数？|3125273|幸运的是，JavaScript是一种真正的动态语言，因此您只需为视图和控制器分配新的值：|3125274|var+ok+=+false;

View.prototype.isOurMock+=+true;
Controller.prototype.setView+=+function(v)+{
++ok+=+v.isOurMock;
}

wireTogether();

alert(+ok+?+"Test+passed"+:+"Test+failed"+);|3125275|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I would say, just wire them together:

<pre><code>function wireTogether() {
 var v = new View();
 var c = new Controller();
 c.setView(v);
}
</code></pre>

But then of course another question raises - how do you test the wireTogether() function?

Luckily, JavaScript is a really dynamic language, so you can just assign new values to View and Controller:

<pre><code>var ok = false;

View.prototype.isOurMock = true;
Controller.prototype.setView = function(v) {
 ok = v.isOurMock;
}

wireTogether();

alert( ok ? "Test passed" : "Test failed" );
</code></pre>

blocks|key|348538|text|依赖注入可能是你最好的选择。与Java语言相比，在JS代码中更容易做到这一点，因为您可以将一个充满回调的对象传递到NotebookController中。其他方面比较困难，因为您没有静态代码分析来形式化它们之间的接口。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348539|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Dependency injection is probably your best bet. Compared to Java, some aspects of this are easier to do in JS code, since you can pass an object full of callbacks into your NotebookController. Other aspects are harder, because you don't have the static code analysis to formalize the interface between them.

blocks|key|3125323|text|谢谢你的见解。我最终编写了一个简单的JavaScript依赖注入实用程序。经过一段时间的辩论和你的评论，我发现DI确实是正确的答案，因为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3125324|3125325|它将连接的关注点从业务逻辑中完全分离出来，同时将连接逻辑保持在与被连接的事物相近的位置。|ordered-list-item|3125326|它允许我在我的对象上提供一个通用的“you+all+wire+up”回调，这样我就可以完成3个阶段的初始化:实例化所有内容，连接所有内容，调用每个人的回调，并告诉他们它们已经连接。|3125327|很容易检查依赖项缺失问题。|3125328|3125329|下面是DI实用程序：|3125330|var+Dependency+=+function(_name,+_instance,+_dependencyMap)+{
++++this.name+=+_name;
++++this.instance+=+_instance;
++++this.dependencyMap+=+_dependencyMap;
}

Dependency.prototype.toString+=+function()+{
++++return+this.name;
}

CONCORD.dependencyinjection+=+{};

CONCORD.dependencyinjection.Context+=+function()+{
++++this.registry+=+{};
}

CONCORD.dependencyinjection.Context.prototype+=+{
++++register+:+function(name,+instance,+dependencyMap)+{
++++++++this.registry[name]+=+new+Dependency(name,+instance,+dependencyMap);
++++},+
++++get+:+function(name)+{
++++++++var+dependency+=+this.registry[name];
++++++++return+dependency+!=+null+?+dependency.instance+:+null;
++++},

++++init+:+function()+{
++++++++YAHOO.log("Initializing+Dependency+Injection","info","CONCORD.dependencyinjection.Context");
++++++++var+registryKey;
++++++++var+dependencyKey;
++++++++var+dependency;
++++++++var+afterDependenciesSet+=+[];
++++++++for+(registryKey+in+this.registry)+{
++++++++++++dependency+=+this.registry[registryKey];
++++++++++++YAHOO.log("Initializing+"+%2B+dependency.name,"debug","CONCORD.dependencyinjection.Context");

++++++++++++for(dependencyKey+in+dependency.dependencyMap)+{
++++++++++++++++var+name+=+dependency.dependencyMap[dependencyKey];
++++++++++++++++var+instance+=+this.get(name);
++++++++++++++++if(instance+==+null)+{
++++++++++++++++++++throw+"Unsatisfied+Dependency:+"%2Bdependency%2B"."%2BdependencyKey%2B"+could+not+find+instance+for+"%2Bname;
++++++++++++++++}
++++++++++++++++dependency.instance[dependencyKey]+=+instance;+
++++++++++++}

++++++++++++if(typeof+dependency.instance['afterDependenciesSet']+!=+'undefined')+{
++++++++++++++++afterDependenciesSet.push(dependency);
++++++++++++}
++++++++}

++++++++var+i;
++++++++for(i+=+0;+i+<+afterDependenciesSet.length;+i%2B%2B)+{
++++++++++++afterDependenciesSet[i].instance.afterDependenciesSet();
++++++++}
++++}

}|code-block|syntax|javascript|3125331|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|10|8|@]|9|@]|A|$P|Q]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

Thanks for the insight. I ended up writing a simple JavaScript dependency injection utility. After debating for a while and your comments, it occured to me that DI was really the right answer because:

<ol>
<li>It totally separated the concerns of wiring from the business logic while keeping the wiring logic close to the things being wired.</li>
<li>It allowed me to generically provide a "you're all wired up" callback on my objects so that I could do a 3 phase initialization: instantiate everything, wire it all up, call everyone's callbacks and tell them they're wired.</li>
<li>It was easy to check for dependency missing problems.</li>
</ol>

So here's the DI utility: 

<pre><code>var Dependency = function(_name, _instance, _dependencyMap) {
 this.name = _name;
 this.instance = _instance;
 this.dependencyMap = _dependencyMap;
}

Dependency.prototype.toString = function() {
 return this.name;
}

CONCORD.dependencyinjection = {};

CONCORD.dependencyinjection.Context = function() {
 this.registry = {};
}

CONCORD.dependencyinjection.Context.prototype = {
 register : function(name, instance, dependencyMap) {
 this.registry[name] = new Dependency(name, instance, dependencyMap);
 }, 
 get : function(name) {
 var dependency = this.registry[name];
 return dependency != null ? dependency.instance : null;
 },

 init : function() {
 YAHOO.log("Initializing Dependency Injection","info","CONCORD.dependencyinjection.Context");
 var registryKey;
 var dependencyKey;
 var dependency;
 var afterDependenciesSet = [];
 for (registryKey in this.registry) {
 dependency = this.registry[registryKey];
 YAHOO.log("Initializing " + dependency.name,"debug","CONCORD.dependencyinjection.Context");

 for(dependencyKey in dependency.dependencyMap) {
 var name = dependency.dependencyMap[dependencyKey];
 var instance = this.get(name);
 if(instance == null) {
 throw "Unsatisfied Dependency: "+dependency+"."+dependencyKey+" could not find instance for "+name;
 }
 dependency.instance[dependencyKey] = instance; 
 }

 if(typeof dependency.instance['afterDependenciesSet'] != 'undefined') {
 afterDependenciesSet.push(dependency);
 }
 }

 var i;
 for(i = 0; i &lt; afterDependenciesSet.length; i++) {
 afterDependenciesSet[i].instance.afterDependenciesSet();
 }
 }

}
</code></pre>

blocks|key|351285|text|我有一个javascript的反转控制库，我对它很满意。https://github.com/fschwiet/jsfioc。它还支持事件，所以如果你想有一个启动事件，这是很好的。它可以使用更多的文档...|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|351286|http://github.com/fschwiet/jsfioc|351287|另一个(更新？)选项是requireJS+(http://requirejs.org/)，它有更好的文档和支持。|351288|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/fschwiet/jsfioc|1|2|http://requirejs.org/^0|S|Y|0|0|0|X|1|0|M|L|2|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|H|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|E]]|Q|$5|K|L|M|C|$N|R]]]]

I have a inversion of control library for javascript, I'm pretty happy with it. <a href="https://github.com/fschwiet/jsfioc" rel="nofollow">https://github.com/fschwiet/jsfioc</a>. It also supports events, so if you want to have a startup event thats fine. It could use more documentation...

<a href="http://github.com/fschwiet/jsfioc" rel="nofollow">http://github.com/fschwiet/jsfioc</a>

Another (newer?) option, which has better documentation and support, is requireJS (http://requirejs.org/).

blocks|key|347798|text|还有一个用于JavaScript的依赖注入框架：https://github.com/briancavalier/wire|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|347799|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/briancavalier/wire^0|O|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is also a framework for dependency injection for JavaScript: <a href="https://github.com/briancavalier/wire" rel="nofollow">https://github.com/briancavalier/wire</a>

I'm currently facing a conundrum: What is the right way to wire together 2 javascript objects? 

Imagine an application like a text editor with several different files. I have some HTML page that represents the view for the notebook. I have a file notebook.js that contains class definitions for NotebookController and Notebook View.

NotebookControler object responsible for performing business logic on the Notebook like "Save Notebook," "Load Notebook," "New Notebook." NotebookView is responsible for managing the HTML that is used for presentation. It does low level stuff like "get/set notebook body" "get/set notebook name." It also listens for DOM events (onClick) and fires business events (saveNotebook). This is my attempt at the Passive View pattern. 

I want my javascript client-side code to be object-oriented, separated concerns, and unit-testable. I want to test NotebookController with a mock NotebookView and vice versa. This means that I can't just instantiate a NotebookView inside the NotebookController. So do I 

<ul>
<li>Put some logic in my notebook.js that wires the 2 together</li>
<li>Have a global function in my application that knows to instantiate one of each and wire them together</li>
<li>Use Dependency Injection, either a home-grown one or something like SquirrelIoc</li>
</ul>

In Java, the choice is a natural one: use Spring. But that doesn't seem very JavaScript-y. What's the right thing to do?

What is the right way to wire together 2 javascript objects?

静态代码分析

单元测试

Java

我现在面临一个难题:怎样才是将两个javascript对象连接在一起的正确方法？想象一个像文本编辑器这样的应用程序，它有几个不同的文件。我有一些表示notebook视图的HTML页面。我有一个包含NotebookController和Notebook View类定义的notebook.js文件。负责在笔记本上执行业务逻...

问将两个javascript对象连接在一起的正确方式是什么？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将两个javascript对象连接在一起的正确方式是什么？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将两个javascript对象连接在一起的正确方式是什么？
EN