使用 JavaScript 进行依赖注入 |有用还是没用？答案

【问题标题】：Dependency Injection w/ JavaScript | Useful or Not Useful?使用 JavaScript 进行依赖注入 |有用还是没用？
【发布时间】：2012-08-02 21:39:01
【问题描述】：

我在 PHP 中使用依赖注入（标记为 b.c. 用作比较），因为这似乎是最佳实践。 PHP 有更多面向 OO 编程的结构，但在 JavaScript 中使用 DI 以及解耦代码似乎也是可行的。

在我的例子中，公元前有点复杂。我的对象包含对象属性（函数对象），每个对象都有自己的依赖项。

这是有问题的代码，它具有我在顶级对象中创建的 3 个依赖项，但正在考虑注入。

当它们在单个对象 MC.MATweet 中用于不同的函数对象时，我究竟应该在哪里注入它们？

这 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';
        }
    },
};

【问题讨论】：

标签： php javascript dependency-injection

【解决方案1】：

您是对的，示例代码很脆弱，并且依赖于系统的许多其他部分。

但是这个类不会因为添加依赖注入而变得更简单——它只会更难阅读和修改。问题不在于它命名了它调用的外部功能，而在于它首先调用了如此多的外部代码。

现在，此代码处理用户输入推文、推文发送到服务器以及显示推文的所有编码和交互。难怪这是一个毛球。将它们分解为单独的类，每个类只负责一件事，并且通过事件而不是相互调用来进行通信。

因此，您的推文输入视图类只负责发出“new_tweet”消息，其中包含带有推文文本的单个字符串。

您的推文显示窗格类会侦听推文列表的更改并自行重绘。

您创建推文输入视图的控制器代码还为它附加了一个“new_tweet”事件的侦听器，然后将这些新推文发送到服务器。

通过这种方式，您的代码可以最小程度地交织在一起，从而提高理解性、可重用性和美观性。

【讨论】：

【解决方案2】：

我们发现传统意义上的依赖注入在 JavaScript 中很有用。以下是我之前关于该主题的一些答案，每个答案都有一些不错的示例代码：

【讨论】：

没有真正涉及任何库，即使 RequireJS 只是在模块系统的上下文中，你可以这样编写裸模块。