AngularJS 依存関係注入の原理の詳細な分析-jsチュートリアル-php.cn

AngularJS 依存関係注入の原理の詳細な分析

零到壹度

リリース： 2018-03-28 15:06:35

オリジナル

3188 人が閲覧しました

この記事では主に AngularJS の依存関係注入原理の詳細な分析を共有します。これは優れた参考値であり、皆様のお役に立てれば幸いです。編集者をフォローして見てみましょう。

依存性注入: 依存性注入略語DI

例:

var xiaomi = new Xiaomi();     // 假设小米公司生产了一台xiaomi手机
createShipment(xiaomi);         //此方法能把货送给顾客，这叫做把小米手机注入到createShipment()方法

ログイン後にコピー

createpayment() メソッドには (携帯電話、速達会社、注文詳細）、次のものが必要です：

var xiaomi = new Xiaomi();     // 不仅要生产手机
var shipCompany = new ShipCompany();   // 还要自己建立个快递公司
var order = new Order();      // 还要自己建立线上线下平台做订单
createShipmentxiaomi,shipCompany,order);   // 虽然小米已经这么干了，但还是很累的

ログイン後にコピー

上記の例では、Xiaomiには自社ストアでの販売以外に他のチャネルはありませんか？携帯電話を作るだけでなく、仕事や急ぎの配達もやらなければならないので、疲れていませんか？ Xiaomi は独自に行うだけでなく、Taobao、JD.com、Suning などのプラットフォームで販売したり、Santong Yishun などの運送会社を利用して商品を配送したりすることもできます。これが依存関係注入で解決する必要がある問題です。 Taobao、JD.com、SF Expressなどの企業を利用するということは、販売サービス(sellService)、速達サービス(sendService)などをXiaomiに注入することです!

制御の反転: 制御の反転略語IOC

IOCは、依存関係の制御をコードの内部からコードの内部に移すことを指します。たとえば、Xiaomi は携帯電話を外部に販売および配送する権限を与えています。Taobao が販売するか、JD が販売するか、YTO が配送するか、SF Express が配送するかについては、Xiaomi が気にする必要はありません。携帯電話。専門的なことは専門家にお任せください。

IOCは疎結合モードであり、実装手段は依存性注入です。

インジェクター:

コンストラクター(privatesomeService : SomeService) {...}

この文は、このコンポーネントが someService の属性を宣言し、そのタイプが SomeService であることを示し、その後 angular がプロバイダーにアクセスして SomeService のインスタンスを検索することを意味します。そして、このインスタンスを someService に注入します。

提供器：

providers:[{provide:SomeService,useClass:SomeService}]

providers:[SomeService]//provide跟useClass相同可简写为这个

例：

app.module.ts

@NgModule({  
    providers:[{provide:SellService,useClass:ShunfengService}],             // 这个是淘宝，用的顺丰
      // providers: [{provide:SellService,useClass:YuantongService}]          // 这个是京东，用的圆通})
product.component.ts
@Component({  ...
})
     export class ProductComponent implements OnInit {  product: Product;  constructor(sellService: SellService) {
        this.product = this.sellService.sendProduct();
  }}

ログイン後にコピー

上面的代码怎么理解呢？

小米声明sellService对象（也是属性），叫sellService去卖手机，sellService呼叫售卖服务，这个服务是SellService类型的（线上销售），那么angular就会去提供器里面找谁在提供这个售卖服务，至于是淘宝还是京东那要看提供器里面的，用的哪个快递公司就更加不需要小米公司来管了。angular找到SellService之后会new一个ShunfengService的一个实例（找一家顺丰门店），找到之后把服务注入给小米公司的sellService。sellService就跑到那家顺丰门店填送货单(sendProduct方法)把手机送给客户了。

各位看官应该能想出更好的比喻，欢迎交流。如果有不妥之处欢迎指正。