阅读 1035

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

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

本人的 MobX 文章

为什么要学习inversify呢?因为我们在写项目的时候要时刻考虑项目的稳定性,尽量遵循设计原则,在这里我们要遵循依赖倒置原则,如果有不懂依赖倒置原则的朋友可以点击下方链接。

依赖倒置原则

inversify 网站

开发环境

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

下载 babel

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

配置.babelrc

你们可以做一下对比,在这里为presets添加了一项@babel/preset-env

{
    "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-metadata

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

配置 tsconfig.json

官方的配置

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

在这里你们可以和你们自己的tsconfig.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;
复制代码

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