fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

InversifyJS
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://inversify.io/
GitHub:https://github.com/inversify/InversifyJS
网站描述:一个强大的和轻量级控制反转容器,支持JavaScript和Node.js

nversifyJS是一个强大的轻量级( 4kb ) ( IoC ) 反转控制容器,用于app和JavaScript应用。 pico容器使用类构造函数来标识和注入它的依赖项。 InversifyJS拥有友好的api,并鼓励使用最好的OOP和IoC实践。 

InversifyJS被设计为允许JavaScript开发人员编写符合实体原则的代码。InversifyJS已经开发了 3个主要目标:

允许JavaScript开发人员编写符合实体原则的代码。
促进并鼓励遵守最佳OOP和IoC实践。
尽可能增加运行时开销。 

WebIDE 是函数计算团队研发的一款产品,为了解决函数计算本地环境差异和配置繁琐的问题。WebIDE 前端是 monorepo 风格的项目,即插件化构建 WebIDE 前端。插件之间存在依赖关系。构建、扩展和以及使用一个插件将是一个复杂的问题,而且对使用插件的开发人员不透明。通过使用 inversify 就能很简单的实现。通过 inversify 能很容的实现插件的构建、扩展和使用。

  • 创建。将服务类注入到容器中
  • 替换。通过 rebind api 可以在其他模块中从新绑定某个服务
  • 使用。在类中通过装饰器注入需要使用的服务,服务的具体实现不需要关心,容器为我们管理


安装

由于 InversifyJS 用到了反射来获取装饰器的相关元数据,所以需要额外安装库 reflect-metadata

npm install inversify reflect-metadata --save

另外,InversifyJS 要求 Typescript >= 2.0 并且需要配置如下编译参数:

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


使用

步骤 1:定义接口

// file interfaces.ts

// 定义服务对象标识
export const Warrior = Symbol.for('Warrior');
export const Weapon = Symbol.for('Weapon');
export const ThrowableWeapon = Symbol.for('ThrowableWeapon');

export interface Warrior {
    fight(): string;
    sneak(): string;
}

export interface Weapon {
    hit(): string;
}

export interface ThrowableWeapon {
    throw(): string;
}

步骤 2:定义依赖

// file entities.ts

import { injectable, inject } from 'inversify';
import 'reflect-metadata';
import { Weapon, ThrowableWeapon, Warrior } from './interfaces';

@injectable()
export class Katana implements Weapon {
    public hit() {
        return "cut!";
    }
}

@injectable()
export class Shuriken implements ThrowableWeapon {
    public throw() {
        return "hit!";
    }
}

@injectable()
export class Ninja implements Warrior {

    public constructor(
        @inject(Weapon) protected katana: Weapon,
        @inject(ThrowableWeapon) protected shuriken: ThrowableWeapon
    ) {}

    public fight() { return this.katana.hit(); }
    public sneak() { return this.shuriken.throw(); }

}

步骤 3:创建并配置 IOC 容器

// file inversify.config.ts

import { Container } from "inversify";
import { Warrior, Weapon, ThrowableWeapon } from "./interfaces";
import { Ninja, Katana, Shuriken } from "./entities";

const myContainer = new Container();
myContainer.bind<Warrior>(Warrior).to(Ninja);
myContainer.bind<Weapon>(Weapon).to(Katana);
myContainer.bind<ThrowableWeapon>ThrowableWeapon).to(Shuriken);

export { myContainer };

步骤4:依赖解析

import { myContainer } from "./inversify.config";
import { Warrior } from "./interfaces";

const ninja = myContainer.get<Warrior>(Warrior);

expect(ninja.fight()).eql("cut!"); // true
expect(ninja.sneak()).eql("hit!"); // true

小结

如果你熟悉 Spring,Spring 很多特性在 Inversify 中可以找到,如果你的项目规模比较大,可以采用 monorepo 多包结构来构建项目。每一个包(模块)包含一个 ContainerModule 容器管理本模块依赖,然后在项目入口对所有的模块容器进行统一加载。

链接: https://fly63.com/nav/2117

more>>
相关栏目
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网GitHub
jquery
一个快速、简洁的JavaScript代码库
官网GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网GitHub
nw.js
轻量级桌面应用开发的捷径
官网GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网GitHub
nuxt.js
基于 Vue.js 的轻量级、服务端渲染 (SSR) 应用框架
官网GitHub
Next.js
实现react的服务端渲染的框架
官网GitHub
Electron
基于Chromium 和 Node.js, 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
官网GitHub
htmx
无需JavaScript的动态HTML
官网GitHub
Nerv
一款由京东凹凸实验室打造的类React前端框架
官网GitHub
lodash
一致性、模块化、高性能的 JavaScript 实用工具库
官网GitHub
ocLazyLoad
AngularJS 的延迟加载(惰性加载)模块和组件
点击进入GitHub
weui.js
WeUI 的轻量级 js 封装
点击进入GitHub

手机预览