Javascript——依赖注入
本人才学疏浅,本文只为抛砖引玉,欢迎各路大牛前来斧正,不胜感激!
如今各个框架都在模块化,连前端的javascript也不例外。每个模块负责一定的功能,模块与模块之间又有相互依赖,那么问题来了:javascript的依赖注入如何实现?(javascript的依赖注入,各大框架都有相应的实现,这里只学习实现思路)
如下需求:
假设已经有定义好的服务模块Key-Value集合,func为添加的新服务,参数列表为服务依赖项。
var services = { abc : 123, def : 456, ghi : 789 }; // 假设已定义好某些Service
function Service(abc, ghi){
this.write = function(){
console.log(abc);
console.log(ghi);
}
}
function Activitor(func){
var obj;
// 实现
return obj;
}
解决思路:
通过某种机制(反射?),取出该func定义的参数列表,并一一赋值。然后再通过某种机制(Activitor?),实例化该func。
解决方案:
一、获取func的参数列表:
如何获取参数列表呢?我首先想到的是反射机制。那javascript里面有没有反射呢?应该有吧,我目前只知道使用eval(str)函数,但貌似并没有获取参数列表的相关实现。再看func.arguments定义,此属性只在调用func并传递参数时才有效,也不能满足需求。
那能不能通过处理func.toString()后的字符串获取参数列表呢?
上手试试吧:
function getFuncParams(func) {
var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);
if (matches && matches.length > 1)
return matches[1].replace(/\s*/, '').split(',');
return [];
};
至此获得func参数列表数组。
二、根据参数列表寻找依赖:
得到了参数列表,即得到了依赖列表,将依赖项作为参数传入也就很简单了。
var params = getFuncParams(func);
for (var i in params) {
params[i] = services[params[i]];
}
三、传递依赖项参数并实例化:
我们知道,javascript里面有func.constructor有call(thisArg,[arg[,arg,[arg,[…]]]])和apply(thisArg,args…)两个函数,都可以实现实例化func操作。其中call函数第一个参数为this指针,剩余为参数列表,这个适合在已知func参数列表的情况下使用,不能满足我的需求。再看第二个apply函数,第一个参数也为this指针,第二个参数为参数数组,其在调用时会自动为func的参数列表一一赋值,正好满足我的需求。
代码大概如下:
function Activitor(func){
var obj = {};
func.apply(obj, params);
return obj;
}
至此我们能够创建该func的实例,并传递该func需要的参数。
四、打印测试一下吧:
完整代码:
var
// 假设已定义好某些Service
services = { abc: 123, def: 456, ghi: 789 }, // 获取func的参数列表(依赖列表)
getFuncParams = function (func) {
var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m);
if (matches && matches.length > 1)
return matches[1].replace(/\s+/, '').split(',');
return [];
}, // 根据参数列表(依赖列表)填充参数(依赖项)
setFuncParams = function (params) {
for (var i in params) {
params[i] = services[params[i]];
}
return params;
}; // 激活器
function Activitor(func) {
var obj = {};
func.apply(obj, setFuncParams(getFuncParams(func)));
return obj;
} // 定义新Service
function Service(abc, ghi) {
this.write = function () {
console.log(abc);
console.log(ghi);
}
} // 实例化Service并调用方法
var service = Activitor(Service);
service.write();
控制台成功打印!
Javascript——依赖注入的更多相关文章
- JavaScript依赖注入的实现思路
JavaScript依赖注入的实现思路 如今各个框架都在模块化,连前端的javascript也不例外.每个模块负责一定的功能,模块与模块之间又有相互依赖,那么问题来了:javascript的依赖注入如 ...
- 细数Javascript技术栈中的四种依赖注入
作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...
- JavaScript中依赖注入详细解析
计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的 ...
- JavaScript里的依赖注入
JavaScript里的依赖注入 我喜欢引用这句话,“程序是对复杂性的管理”.计算机世界是一个巨大的抽象建筑群.我们简单的包装一些东西然后发布新工具,周而复始.现在思考下,你所使用的语言包括的一些内建 ...
- [译]javascript中的依赖注入
前言 在上文介绍过控制反转之后,本来打算写篇文章介绍下控制反转的常见模式-依赖注入.在翻看资料的时候,发现了一篇好文Dependency injection in JavaScript,就不自己折腾了 ...
- Javascript中的依赖注入
首先通过带参函数来定义一个Javascript函数,相当于C#中的一个类. var Person = function(firstname, lastname){ this.firstname = f ...
- typedi 强大的javascript以及typescript 依赖注入框架
typedi 是typestack团队提供的依赖注入解决方案,对于typescript 我们可以使用注解的开发方式,官方的文档也比较详细 javascript 使用 基于函数的服务注入 var Ser ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- AngularJs:Service、Factory、Provider依赖注入使用与区别
本教程使用AngularJS版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ ...
随机推荐
- ubuntu 笔记一
注:ubuntu14.04 64位 1.刚安装的ubuntu无法在终端使用su 原因:root没有默认密码,需要手动设定. 解决方法:以具有sudo权限的用户登录 给root用户设置密码:打开一个te ...
- jquery 高级 学习笔记
--jquery 和 原生js可以共存,但不能混用.jquery 可以通过get()方法 转换为原生js. $("#div1").get(0).innerHTML; get() 需 ...
- <C++Primer>第四版 阅读笔记 第二部分 “容器和算法”
泛型算法中,所谓"泛型(generic)"指的是两个方面:这些算法可作用于各种不同的容器类型,而这些容器又可以容纳多种不同类型的元素. 第九章 顺序容器 顺序容器的元素排列次序与元 ...
- java_XML_DOM1
一.Java DOM 的 API: 1.解析器工厂类:DocumentBuilderFactory 创建的方法:DocumentBuilderFactory dbf = DocumentBuilder ...
- mybatis入门-新手注意问题
参数问题 在映射文件中通过parameterType指定输入参数的类型:在映射文件中通过resultType指定输出结果的类型. 占位符和拼接符问题 #{}表示一个占位符号,#{}接收输入参数,类型可 ...
- CSS3知识点整理(五)----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
- 做一个项目前搭建一个tabBar(一)框架
前言 通常做一个项目前,不算开始讨论需求,分析产品等等,一开始会给我们搭建一个框架,今天简单说一下搭建框架. github网址:https://github.com/Moonths/iWatch.gi ...
- Hbase数据库安装
一.环境准备 1.Ubuntu14.04-server 2.ssh 3.jdk1.6 4.hbase-0.98.19-hadoop2-bin.tar.gz(下载地址http://www.apache. ...
- esri-leaflet部分瓦片缺失问题及解决办法
esri-leaflet加载TileLayer的时候,有时候由于数据的原因,造成部分瓦片缺失的问题,网页加载TileLayer的时候,当地图范围正好拖动到缺失的范围的时候,会一直请求 http://d ...
- git clone 远程仓库报错error setting certificate verify locations
系统:windows10 今天从github上克隆项目时报错: 原因: 1.git配置没有修改 之前配置的是公司gitlab账号的信息,和我当前要克隆的github的配置信息不同,没有注意修改 2.执 ...