Nodejs bearcat - 让前端也流畅使用依赖注入

Nodejs bearcat - 让前端也流畅使用依赖注入

bearcat 0.3 版本在圣诞正式推出
bearcat 不再仅仅支持node.js环境,浏览器环境也完美支持
意味着 前端也可以编写基于自描述js对象的依赖注入
依赖关系基于js对象属性的自描述,无需使用require, define来进行模块管理
同时bearcat还内建了script脚本异步加载机制,无需打包,前端模块化开发所见即所得
10秒例子,car 依赖 engine,解析到car依赖后,engine就自动加载并注入到car中

var Car = function() {
    this.$id = "car";
    this.$engine = null;
}

Car.prototype.run = function() { 
    this.$engine.run(); 
    console.log('run car...');
}

bearcat.module(Car, typeof module !== 'undefined' ? module : {});
var Engine = function() {
this.$id = "engine";

}

Engine.prototype.run = function() { console.log(‘run engine…’); }

bearcat.module(Engine, typeof module !== ‘undefined’ ? module : {});

详情还请到官网 http://bearcatjs.org/
sweet例子 http://bearcatjs.org/examples/


17 回复

什么原理?


Nodejs bearcat - 让前端也流畅使用依赖注入

引言

bearcat 0.3 版本在圣诞正式推出。bearcat 不再仅仅支持 node.js 环境,浏览器环境也完美支持。这意味着前端也可以编写基于自描述 js 对象的依赖注入。依赖关系基于 js 对象属性的自描述,无需使用 requiredefine 进行模块管理。同时,bearcat 还内建了 script 脚本异步加载机制,无需打包,前端模块化开发所见即所得。

示例代码

以下是一个简单的示例,展示了如何使用 bearcat 实现依赖注入。在这个例子中,Car 依赖于 Engine,解析到 Car 依赖后,Engine 将自动加载并注入到 Car 中。

// 定义 Engine 类
var Engine = function() {
    this.$id = "engine"; // 自定义 id
}

Engine.prototype.run = function() {
    console.log('run engine...'); // 打印运行信息
}

// 注册 Engine 模块
bearcat.module(Engine, typeof module !== 'undefined' ? module : {});

// 定义 Car 类
var Car = function() {
    this.$id = "car"; // 自定义 id
    this.$engine = null; // 初始化 Engine 为 null
}

Car.prototype.run = function() { 
    this.$engine.run(); // 调用 Engine 的 run 方法
    console.log('run car...'); // 打印运行信息
}

// 注册 Car 模块,并将其依赖的 Engine 注入
bearcat.module(Car, typeof module !== 'undefined' ? module : {});

// 使用 bearcat 获取 Car 实例
var car = bearcat.getBean("car");

// 调用 Car 的 run 方法
car.run();

解释

  1. 定义类:我们首先定义了两个类 EngineCarEngine 类有一个 run 方法,Car 类也有一个 run 方法,它会调用 Enginerun 方法。
  2. 注册模块:通过 bearcat.module 方法将这两个类注册为模块。这里我们传递了一个布尔条件来判断当前环境是否为 node.js 环境。
  3. 获取实例:通过 bearcat.getBean 方法获取 Car 的实例。
  4. 调用方法:最后,调用 Carrun 方法,输出相应的信息。

总结

bearcat 提供了一种简单的方式来实现依赖注入,无需复杂的配置和模块管理。这种机制使得前端开发人员可以更专注于业务逻辑的实现,而无需关心模块之间的依赖关系。更多详细信息和示例可以访问 bearcat 官网

[@yakczh](/user/yakczh) 估计和angular是一样的,函数转字符串,然后正则,注入

[@i5ting](/user/i5ting) 恩,原理都是解析依赖关系,然后注入 bearcat 比 angular.js 的依赖注入,还多了异步加载script 这样子,开发者就不用自己管理script的加载
或者蛋疼的再用AMD这种模块加载器来描述依赖关系,再进行加载

应该打上一个网易出品,估计关注人就多了

这种严格依赖命名吧?我觉得还是没有require或者define显式申明来得直观

[@chemdemo](/user/chemdemo) 是基于 id 的,这样子可以实现松散耦合,require 这种就是与路径,文件名耦合了,依赖注入和模块系统(require)还是不一样的

[@yaochun](/user/yaochun) 哈哈,先靠项目和口碑,老外不一定吃网易的牌子

[@fantasyni](/user/fantasyni) 支持这种注入不? var Car = function() { this.$id = “car”; this["$engine"] = null;//这里不使用点域声明属性,使用[]括号 var engineName = “$engine”; this[engineName] = null;//这里不使字符串,使用变量 };

Car.prototype["$engine"] = null;//这里不使用点域声明属性,使用[]括号

[@hainee](/user/hainee) 哈哈,暂时不支持,因为还要考虑 放在参数列表里面的注入形式,所以目前的做法是 function.toString() 然后做正则匹配
你这种支持如果不考虑参数列表里面的话,可以直接先 new 一个对象出来,然后遍历一下属性就肯定没问题了
不过这个确实是有这么个问题哈

[@hainee](/user/hainee) 已经支持了,在最新版本,例子 bearcat 复杂注入,欢迎继续提出意见哈

赞一个!!!有了这两个特性,可以更愉快的玩耍了!!!辛苦了,楼主! 还有,可以不使用$前缀么?

[@hainee](/user/hainee) 这个当然可以啊,还没弄,可以考虑支持一下 自定义 前缀,比如想要 _$$ 这种开头的

[@fantasyni](/user/fantasyni) 或则没有$开头,不过无所谓了,已经很好了……^_^

有什么优势么?

bearcat是已经被放弃了吗,看到好久没有维护了

熊猫(Bearcat)是一个用于Node.js和浏览器环境的依赖注入框架。它允许开发者通过简单的JavaScript对象来定义依赖关系,而不需要手动进行模块管理。这使得前端开发人员也能享受到依赖注入带来的便利。

以下是一个简单的示例,展示了如何使用Bearcat来实现依赖注入。在这个示例中,我们有两个类:CarEngineCar 类依赖于 Engine 类,当 Car 被实例化时,Bearcat会自动管理 Engine 的加载和注入。

首先,我们需要安装Bearcat库。可以通过npm来安装:

npm install bearcat --save

然后,我们创建两个JavaScript文件,分别是Car.jsEngine.js,分别用来定义CarEngine类。

Engine.js

var Engine = function() {
    this.$id = "engine";
}

Engine.prototype.run = function() {
    console.log('run engine...');
}

module.exports = Engine;

Car.js

var Car = function() {
    this.$id = "car";
    this.$engine = null;
}

Car.prototype.run = function() {
    this.$engine.run();
    console.log('run car...');
}

module.exports = Car;

接下来,在主程序中使用Bearcat来管理和注入依赖。

main.js

const bearcat = require('bearcat');

// 注册模块
bearcat.module(require('./Engine'));
bearcat.module(require('./Car'));

// 获取Car实例
const car = bearcat.getBean('car');
car.run();  // 输出: run engine... 和 run car...

在这个示例中,我们首先导入Bearcat库,并注册了EngineCar这两个模块。之后,我们通过调用bearcat.getBean('car')方法获取到Car实例,并调用其run()方法。这将触发Engine的自动加载和注入,并最终输出run engine...run car...两条信息。

这种模式极大地简化了模块间的依赖关系管理,使得代码更加清晰和易于维护。

回到顶部