npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

uioc

v1.2.1

Published

An IoC Framework

Downloads

19

Readme

uioc building status doc status

关于

uioc是用JavaScript写的一个轻量级IoC容器,为JavaScript应用提供了IoC功能。通过使用配置的方式管理模块依赖,最大程度的提高了模块的复用性。

在1.0版本中,增加了aop的支持,对应用从横向关注点上提供了复用支持。

安装

npm install uioc —save

基本使用

Step 1:定义模块

IoC最大的要求之一就是不要在模块中引入具体依赖的实现,对应在JavaScript中则是不要显示的引入依赖模块,仅在注入点面向依赖接口编程。

// List.js
export default class List {
    // 构造函数注入实现了ListModel接口的依赖
    constructor(listModel) {
        this.model = listModel;
    }

    // 属性/接口注入实现了ListView接口的依赖
    setView(listView) {
        this.view = listView;
    }

    enter() {
        let data = this.model.load();
        this.view.render(data);
    }
}

// MyListModel.js
export default class MyListModel {
    load() {
        return {data: 'data'};
    }
}

// MyListView.js
export default class MyListView {
    render(data) {
        console.log(data);
    }
}

上述代码中在List类有两个依赖view和model,分别实现了ListModel和ListView(隐式)接口, 而MyListModel和MyListView类则是ListModel与ListView接口的具体实现。

Step 2:定义IoC配置,实例化IoC容器

// ioc.js
import {IoC} from 'uioc';
import List from './List';
import MyListModel from './MyListModel';
import MyListView from './MyListView';

let config = {
    components: {
        list: {
            creator: List,
            args: [
                {$ref: 'listModel'}
            ],
            properties: {
                view: {
                    $ref: {'listView'}
                }
            },

            listModel: {
                creator: MyListModel
            },

            listView: {
                creator: MyListView
            }
        }
    }
};

let ioc = new IoC(config);

export default ioc;

上述代码中,声明了list, listModel, listView三个组件, 其中list通过$ref关键字声明了2个依赖:listModel是list的构造函数依赖, 会在实例化list的时候,将创建好的listModel依赖传入构造函数; listView是list的属性依赖,会在实例化list完成后,将创建好的listView赋值给list,赋值方式为有setter则调用setter,无setter则直接对象赋值。

Step 3: 定义入口文件,从ioc实例获取入口组件启动整个应用

// main.js
import ioc from 'ioc';

ioc.getComponent('list').then(list => list.enter());

上述代码中通过ioc容器实例获取了list组件,ioc容器将根据配置创建好list的相关依赖并注入给list,最终组装成完整的list实例传递给promise的resolve回调。

基础特性

高级特性

API

Changelog

0.3.x版本文档