JavaScript里面的IOC（func-di介绍）

前言

IOC容器，相信后端的小伙伴都不会陌生，2202年了，基本上现在的后端开发都会使用上，比如java的spring，C#的Webapi原生框架自带（广告一下AutoFac YYDS），其实前端也是有IOC的，毕竟概念不分语言，写angular的小伙伴已经很熟悉了，那么在写前端时，没有用带IOC的框架怎么办？自己写？有没有现成的？有！下面小编推荐一款用TS实现的IOC库。

IOC的优劣

缺点：代码的引入势必会增加复杂度，特别是JS这种弱类型的语言想要合适的制定规则男上加男。
创建对象的步骤变复杂了，不直观，当然只对他的不熟悉的人来说
优点：资源集中管理，实现资源的可配置和易管理，降低了使用资源双方的依赖程度，也就是我们说的耦合度。（专门用个容器管理对象不香吗）

func-di作者介绍

A functional, immutable, type safe and simple dependency injection library inspired by angular.

安装func-di

npm install func-di # or other package manager

基础使用案例（JS案例）

1.定义抽象

import { token } from "func-di";
export const UserInterface = token("UserService", {
    get() {

    },
    post() {

    },
});//抽象

2.实现

import { factory } from  "func-di";
import { UserInterface } from '../token/token.js'
export const userService = factory(UserInterface, () => {
    return {
        get() {
            return '获取数据';
        },
        post() {
            return '修改数据';
        },
    };
});//实现

3.注入到容器

import { container, provide } from "func-di";
import { userService } from '../factory/factory.js'
export default container([
    provide.stateful(UserService),

]);//注入到容器

4.使用

        import iocContainer from '../container/container.js'
        import { provide } from  "func-di";
        import { UserInterface } from '../token/token.js'
        import { UserService } from '../factory/factory.js'

        const childContainer = iocContainer.fork([provide.stateful(UserService)]);//生成一个新的容器
        const userInterface = childContainer.request(UserInterface)

5.结果

TS案例

如果使用TS把抽象代码换成Interface，配合泛型使用后面代码一致

interface UserInterface {
    get() :object
}
const userInterface  = token<UserInterface >("UserService");

更多用法

可去GItHUb上看作者写的Readme fun-di库链接

结尾

作者描述框架还在开发中，框架还未成熟，不支持循环依赖等，喜欢的宝子们可以尝尝鲜