依赖项注入w/JavaScript|有用或不有用
Dependency Injection w/ JavaScript | Useful or Not Useful?
我在PHP中使用依赖项注入(标记b.c.用作比较),因为这似乎是最佳实践。PHP有更多用于OO编程的构造,但在JavaScript中使用DI以及去耦合代码似乎也是可行的。
在我的例子中,它有点复杂。我的对象包含对象属性(函数对象),每个属性都有自己的依赖项。
这是有问题的代码,它有3个依赖项,我在顶级对象中创建了这些依赖项,但正在考虑注入。
当它们在不同的函数对象中使用时,我将在哪里注入它们?
这3个对象分别是SText、SMessage和SUniversals。
/**
** MATweet - Text, Universal, Message - Inject?
*/
MC.MATweet = {
init: function() {
var tweet_button = document.getElementById( 'po_but' ),
tweet_input = document.getElementById( 'po_in' );
tweet_button.addEventListener( "click", function() {
MC.Controller( MC.o_p( 'MATweet' ) );
}, false );
tweet_input.addEventListener( "keypress", function( event ) {
if( event.keyCode === 13 ) {
MC.Controller( MC.o_p( 'MATweet' ) );
event.preventDefault();
}
}, false );
sStyle( [ "po_in","po_lab" ] );
},
pre : function( o_p ) {
var form_elements = document.getElementById( 'fo_po' ).elements,
text_object = new SText( form_elements ),
universal_object = new SUniversals();
if( universal_object.get('load') === '1' )
{
if( !text_object.checkEmpty() ) {
return MC.MATweet.message( 'empty', o_p );
}
if( !text_object.checkPattern( 'tweet' ) ) {
return MC.MATweet.message( 'tweet', o_p );
}
}
o_p.args.hash = localStorage.hash;
o_p.page = text_object.getArray();
return o_p;
},
post : function( o_p ) {
if( o_p.server.result === 'true' ) {
MC.C.resetView( 'po_in' );
vTPane( o_p.server.tweets );
}
},
message: function( type, o_p )
{
var response_element = document.getElementById( 'i_box_rr' ),
pane_element = document.getElementById( 'i_box_r_post' ),
message_object = new SMessage( response_element ),
cover_element = document.getElementById( 'po_but_cov' );
o_p.result = 'complete';
message_object.display( type );
cover_element.style.display = 'inline';
MC.MATweet.movePane( pane_element, 30, 'down' );
return o_p;
},
movePane: function( pane_element, pos, dir ) {
if( ( dir === 'down' ) && ( pos < 70 ) ) {
pos += 1;
pane_element.style.top = ( pos ) + 'px';
setTimeout( function( ){ MC.MATweet.movePane( pane_element, pos, dir ); }, 1 );
}
else if( ( dir === 'down' ) && pos === 70 ) {
dir = 'up';
setTimeout( function( ){ MC.MATweet.movePane( pane_element, pos, dir ); }, 2000 );
}
else if( ( dir === 'up' ) && ( pos > 30 ) ) {
pos -= 1;
pane_element.style.top = ( pos ) + 'px';
setTimeout( function( ){ MC.MATweet.movePane( pane_element, pos, dir ); }, 1 );
}
else if( ( dir === 'up' ) && ( pos === 30 ) ) {
document.getElementById( 'po_but_cov' ).style.display='none';
}
},
};
您是对的,示例代码很脆弱,并且依赖于系统的许多其他部分。
但是,通过添加依赖注入,这个类不会更简单——它只会更难读取和修改。问题不在于它命名了它调用的外部特性,而在于它一开始就调用了这么多外部代码。
现在,该代码处理用户输入推文、发送到服务器的推文以及显示的推文的所有编码和交互。难怪这是一个毛球。将这些划分为单独的类,每个类只负责一件事,并通过事件而不是通过相互调用进行通信。
因此,您的tweet输入视图类只负责发出包含tweet文本的单个字符串的"new_tweet"消息。
您的tweet显示窗格类侦听对tweet列表的更改并重新绘制自己。
创建tweet输入视图的控制器代码还为其附加了一个"new_tweet"事件的侦听器,然后将这些新tweet发送到服务器。
通过这种方式,您的代码变得最少地交织在一起,从而实现理解、可重用性和美观。
我们发现依赖注入在JavaScript中非常有用。以下是我之前关于这个主题的一些答案,每个答案中都有一些不错的示例代码:
- Node.js:将公共变量传递到单独模块的最佳方式
- 使用RequireJS的依赖项注入
相关文章:
- 使用ScriptObjectMirror将数组结果从JavaScript转换为有用的东西
- Javascript中的模块模式和揭示模块模式是否仅在创建API时有用;s
- 依赖项注入w/JavaScript|有用或不有用
- 我不;我没有用springmvc捕获我的javascript文件
- read完全没有用Java Nashorn Javascript引擎定义
- JavaScript 和 jQuery 只对某些页面有用
- 如何在使用迷你程序时收集有用的JavaScript异常
- 如何将这个javascript片段简化为更有用的内容
- 没有用python在网站上加载Javascript
- 使用Javascript添加“nofollow”没有用吗
- 在javascript中,这种函数赋值给变量是有用的
- 以在javascript中有用的格式检索所有本地存储数据
- JavaScript源加密对混淆有用吗?
- 错误url对于动态注入的javascript函数是没有用的.需要用户提供参考
- 在Struts2中,readOnly属性没有用JavaScript函数设置
- 是否有用JavaScript实现的RFC3987(IRI验证)
- firefox插件-eventListener没有用Javascript捕获按键事件
- 当前不会命中断点.没有用JavaScript为此文档加载任何符号
- ruby on rails-一个为web开发提供随机有用javascript片段的网站
- 有没有用JavaScript实现的图表