AngularJS中的DI

AngularJS中的DI
一直以为Angular中的DI是很高大上的东西,也自己写过一个DI的demo,知道其中的难点就是最后动态代码的执行:我现在知道了参数的值,也知道了我要执行的方法/创建对象的类,那么在参数个数是动态的情况下,怎么才能执行这个方法或者新建对象呢?在我的demo中我选择的是用eval
可是当我看到AngularJS源码中有如下的语句时:

 1 switch (self ? -1 : args.length) {
 2         case  0: return fn();
 3         case  1: return fn(args[0]);
 4         case  2: return fn(args[0], args[1]);
 5         case  3: return fn(args[0], args[1], args[2]);
 6         case  4: return fn(args[0], args[1], args[2], args[3]);
 7         case  5: return fn(args[0], args[1], args[2], args[3], args[4]);
 8         case  6: return fn(args[0], args[1], args[2], args[3], args[4], args[5]);
 9         case  7: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
10         case  8: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7]);
11         case  9: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
12         case 10: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8], args[9]);
13         default: return fn.apply(self, args);
14       }

瞬间醉了。AngularJS竟然枚举了11种情况,然后根据参数个数去选择相应的情况。我觉得这是最笨最傻大粗的方法了。可是我却不觉得会比谷歌那帮家伙还有经验,这么做肯定有理由。查阅资料发现:
1.在strict模式下eval根本用不了
2.无论是fn.apply()还是fn.call()都比fn()来的慢
那么我在javascript的DI中的getBean方法应该改为:

 1     //核心方法
 2     di.getBean=function(beanName){
 3         //查看缓存,有的话直接返回
 4         if(beans[beanName]!=undefined)
 5             return beans[beanName];
 6         console.log("haha"+beanName);
 7         var fn=this.config[beanName];
 8         if(fn==undefined) return;
 9         var args=getArguments(fn);
10         if(!args) args=[];
11         var argss=new Array();
12         var objstr="";
13         var index=0;
14         var obj;
15         for(var i in args){
16             argss[i]=(di.getBean(args[i]));
17             objstr+="argss["+index+"],";
18             index++;
19         }
20         objstr=objstr.substring(0, objstr.length-1);
21         objstr="obj=new (fn)("+objstr+"); ";
22         /*整个方法能够实现就靠这个eval方法了,
23          它接受一个String参数,并把String里面的内容按照Javasript的标准编译并执行
24          最牛叉的是eval里面的变量也遵循Javascript的函数作用域:也就是变量可以定义在eval外面*/
25         switch(args.length){
26             case 0:obj= new fn();break;
27             case 1:obj= new fn(argss[0]);break;
28             case 2:obj= new fn(argss[0],argss[1]);break;
29             case 3:obj= new fn(argss[0],argss[1],argss[2]);break;
30             default:
31                 eval(objstr);break;
32         }
33         beans[beanName]=obj;
34         return obj;
35     };
时间: 2024-11-05 19:35:16

AngularJS中的DI的相关文章

AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR? XHR是XMLHttpRequest的简称,XMLHttpRequest 用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下,对网页的某部分进行更新.简单说,浏览器中URL

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

AngularJs中的directives(指令)

一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 调用自定义指令的4种方式:元素.属性.样式类.注释. 常用的是前两种,实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

黄聪:AngularJS中的$resource使用与Restful资源交互(转)

原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Re

Spring Boot+AngularJS中因为跨域导致Session丢失

http://blog.csdn.net/dalangzhonghangxing/article/details/52446821 如果还在为跨域问题烦恼,请查看博主的 解决angular+spring boot的跨域问题 那篇文章. 博主在项目开发过程中,遇到了由于跨域而导致的Session丢失问题,非常的恶心,但是经过在网上查阅各种资料,发现解决方法十分简单. 在我们每一次的数据请求中,浏览器都会向后台发送一个JSession,后台会根据这个值自动查找Id为JSession的那个sessio

后端接收不到AngularJs中$http.post发送的数据的问题

1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

Angularjs中的事件广播-浅谈$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat

AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,

Javacript和AngularJS中的Promises

promise是Javascript异步编程很好的解决方案.对于一个异步方法,执行一个回调函数. 比如页面调用google地图的api时就使用到了promise. function success(position){ var cords = position.coords; console.log(coords.latitude + coords.longitude); } function error(err){ console.warn(err.code+err.message) } na