집 > 기사 > 웹 프론트엔드 > AngularJS 종속성 주입 원칙에 대한 심층 분석

AngularJS 종속성 주입 원칙에 대한 심층 분석

零到壹度원래의: 2018-03-28 15:06:353177검색

이 기사는 주로 AngularJS 종속성 주입 원리에 대한 심층 분석을 공유하며 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

종속성 주입: 종속성 주입 약어DI

예:

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

createShipment() 메소드에 (휴대폰)이 필요하다고 가정합니다. , 특급 배송 회사, 주문 세부 정보) 세 가지 매개 변수가 필요합니다.

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은 종속성 제어를 코드 내부에서 코드 내부로 전송하는 것을 의미합니다. 예를 들어, 샤오미는 외부인에게 휴대폰을 판매하고 배달할 수 있는 권한을 부여했습니다. 타오바오가 팔든, JD.com이 팔든, YTO가 배달하든, SF 익스프레스가 배달하든, 샤오미는 이것들만 걱정할 필요가 없습니다. 휴대폰. 전문적인 문제는 전문가에게 맡기세요.

IOC은 느슨한 결합 모드이며 구현 수단은 종속성 주입입니다.

인젝터:

constructor(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方法)把手机送给客户了。

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

AngularJS 종속성 주입 원칙에 대한 심층 분석

관련 기사