inversify依赖注入入门教程(保证你一学就会)

时间 2019-11-07

标签 inversify 依赖注入入门教程保证就会栏目设计模式繁體版

原文原文链接

注意： 本篇文章时MobX和inversify的一个综合,若是朋友没有看过本人的MobX入门篇，请先看一下，这篇文章会用到上篇文章的环境。css

本人的MobX文章node

为何要学习inversify呢？由于咱们在写项目的时候要时刻考虑项目的稳定性，尽可能遵循设计原则，在这里咱们要遵循依赖倒置原则，若是有不懂依赖倒置原则的朋友能够点击下方连接。react

依赖倒置原则webpack

inversify网站git

开发环境

根据MobX的开发环境咱们继续配置.es6

下载babel

npm install --save-dev @babel/preset-env
复制代码

配置.babelrc

大家能够作一下对比，在这里为presets添加了一项@babel/preset-envgithub

{
    "plugins":[
        [
          "@babel/plugin-proposal-decorators",
          {
              "legacy":true
          }
        ],
        [
          "@babel/plugin-proposal-class-properties",
          {
              "loose":true
          }
          ]
          ],
    "presets":[
        "react-app",
        [
            "@babel/preset-env",
            {
              "useBuiltIns": "entry"
            }
          ]
        ]
    
}
复制代码

下载inversify所须要的包

除了下载inversify咱们还要下载reflect-metadataweb

npm install inversify reflect-metadata --save
复制代码

配置tsconfig.json

官方的配置npm

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es6"],
        "types": ["reflect-metadata"],
        "module": "commonjs",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}
复制代码

在这里大家能够和大家本身的tsconfig.json做对比，没有的配置要添加json

下面是个人tsconfig.json，由于这是最终的tsconfig.json文件，你先配置道这里后面有的配置尚未配。

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "types": ["reflect-metadata", "jest", "node"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}
复制代码

inversify的配置就完了，可是你如今要是运行的话会报错，由于App.test.tsx文件里的it报错了，没有测试框架。

下载jest测试框架

npm install --save-dev jest
复制代码

配置package.json文件

把"scripts"里的"test"改成jest官网的配置，也就是

"scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "jest",
    "eject": "react-scripts-ts eject"
  },
复制代码

配置tsconfig.json

给"compilerOptions"里面的"type"数组里在添加一项"jest"

"types": ["reflect-metadata", "jest"],
复制代码

jest配置完毕，你觉得到这里就结束了吗？不！你怕是想的有点多! 还有，你一运行仍是会报错，它说让你在tsconfig.json里的types里面在加上"node"

"types": ["reflect-metadata", "jest", "node"],
复制代码

这下也就对应了我上面tsconfig.json的总配置。

环境配置完毕

inversify入门

文件目录

在这里官网给的例子建立了4个文件，接口一个文件，type类型一个文件， inversify.config.ts文件，实现接口的类一个文件。在这里我把接口和实现类放在了一个文件中。

index.tsx

在这里要引入import "reflect-metadata"，没有则报错。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "reflect-metadata" // 引入文件
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App />,document.getElementById('root') as HTMLElement);
registerServiceWorker();
复制代码

TYPE.ts

const TYPE = {
    IStor: Symbol.for("IStor")
}
export default TYPE
复制代码

store.ts

import { injectable } from "inversify";
import { action, computed, observable } from "mobx"

export interface IStor {
    num: number;
    map: Map<string,object>;
    list: string[];
    obj: object;
    retunum:string;
    addNum:number;
    add:()=>void;

}

@injectable()
class Store implements IStor {

    @observable public num: number = 0;
    @observable public map: Map<string,object> = new Map();
    @observable public list: string[] = ["a","b"];
    @observable public obj: object = {name:"Mobx"};

    @computed
    public get retunum() {
        return `${this.num}~~~~~~~~`
    }
    @computed
    public get addNum() {
        return this.num + 10;
    }


    @action.bound
    public add() {
        this.num++;
    }
    

}
export default Store 
复制代码

inversify.config.ts

import { Container, ContainerModule } from "inversify";
// import { Container } from "inversify";
import Store, { IStor } from "./store"
import TYPE from "./TYPE"

const myContainer = new Container({defaultScope: "Singleton"})

const myStore = new ContainerModule(bind=>{
    // 把接口和实现类对应起来
    bind<IStor>(TYPE.IStor).to(Store)
})

const initilize = ():void => {
    // 初始化，将myStore和myContainer联系起来
    myContainer.load(myStore)
}
initilize();
// 常规写法
// const myContainer = new Container();
// myContainer.bind<IStor>(TYPE.IStor).to(Store);

export { myContainer, myStore }
复制代码

Casual.tsx

在这里我把两个代码都写出来了，大家能够对比一下。

import { observer } from 'mobx-react';
import * as React from "react"
// import Store from '../store/store';
import { myContainer } from "../store/inversify.config"
import { IStor } from "../store/store"
import TYPE from "../store/TYPE"




@observer
class Casual extends React.Component<{},{}> {
    // 将获得store的对象，
    private store: IStor = myContainer.get<IStor>(TYPE.IStor)



   public render() {
        return (
            <div>
                <h1>{this.store.num}</h1>
                <h2>{this.store.retunum}</h2>
                <h2>{this.store.addNum}</h2>
                <button onClick={this.onClickAdd}>增长num</button>
            </div>
        )
    }

    public onClickAdd=()=>{
        this.store.add()
    };


}




// interface IProps {
//     store?: Store;
//   }

// @inject("store")
// @observer
// class Casual extends React.Component<IProps,{}> {

//     constructor(props:IProps) {
//         super(props)
//     }


//    public render() {
//         return (
//             <div>
//                 <h1>{this.props.store!.num}</h1>
//                 <h2>{this.props.store!.retunum}</h2>
//                 <h2>{this.props.store!.addNum}</h2>
//                 <button onClick={this.onClickAdd}>增长num</button>
//             </div>
//         )
//     }

//     public onClickAdd=()=>{
//         this.props.store!.add()
//     };


// }
export default Casual
复制代码

App.tsx

再也不使用mobx-react的@inject()的引入方式，不在使用Provider

// import { Provider } from "mobx-react"
import * as React from 'react';
import './App.css';
import Casual from "./component/Casual"
// import Store  from './store/store';

// const store = {
//   store: new Store()
// }

class App extends React.Component {
  
  // public render() {
  //   return (
  //     <Provider {...store}>
  //     <div>
  //       <Casual  />
  //     </div>
  //     </Provider>
  //   );
  // }
  public render() {
    return (
      <div>
        <Casual  />
      </div>
    );
  }
}

export default App;
复制代码

在这里咱们的代码书写完毕。

任何人，未经本人赞成，不得转载本篇文章。