再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结 (5)

不可以。只要是在页面中,就不能直接调用原生的 JS 方法,因为这些并不存在于与页面对应的 Controller 的 $scope 中。除非在 $scope 中添加了这个函数:

$scope.parseInt = function(x){     return parseInt(x); } {{now | 'yyyy-MM-dd'}}这种表达式里面,竖线和后面的参数通过什么方式可以自定义?

定义方式:

app.filter('过滤器名称',function(){     return function(需要过滤的对象, 过滤器参数1, 过滤器参数2, ...){         //...做一些事情         return 处理后的对象;     } });

使用方式有两种,一种是直接在页面里:

<p>{{now | date : 'yyyy-MM-dd'}}</p>

一种是在 js 里面用:

// $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...) $filter('date')(now, 'yyyy-MM-dd hh:mm:ss');  factory和service,provider是什么关系?

factory 把 service 的方法和数据放在一个对象里,并返回这个对象;service 通过构造函数方式创建 service,返回一个实例化对象;provider 创建一个可通过 config 配置的 service。从底层实现上来看,service 调用了 factory,返回其实例;factory 调用了 provider,将其定义的内容放在 $get 中返回。factory 和 service 功能类似,只不过 factory 是普通 function,可以返回任何东西(return 的都可以被访问,所以那些私有变量怎么写你懂的);service 是构造器,可以不返回(绑定到 this 的都可以被访问);provider 是加强版 factory,返回一个可配置的 factory。

详述angular的“依赖注入”

AngularJS 是通过构造函数的参数名字来推断依赖服务名称的,通过 toString() 来找到这个定义的 function 对应的字符串,然后用正则解析出其中的参数(依赖项),再去依赖映射中取到对应的依赖,实例化之后传入。因为 AngularJS 的 injector 是假设函数的参数名就是依赖的名字,然后去查找依赖项,那如果像下面这样简单注入依赖,代码压缩后(参数被重命名了),就无法查找到依赖项了。

function myCtrl = ($scope, $http){     ...}

所以,通常会使用下面两种方式注入依赖(对依赖添加的顺序有要求)。

数组注释法:

myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http){     ... }])

显式 $inject :

myApp.controller('myCtrl', myCtrl); function myCtrl = ($scope, $http){     ... } myCtrl.$inject = ['$scope', '$http'];

对于一个 DI 容器,必须具备三个要素:依赖项的注册,依赖关系的声明和对象的获取。在 AngularJS 中,module 和 $provide 都可以提供依赖项的注册;内置的 injector 可以获取对象(自动完成依赖注入);依赖关系的声明,就是上面的那两种方式。

html: {{currentDate()}} js: $scope.currentDate = function(){return new Date();} 这种写法有没有问题

有问题,时间是实时变化的,然后会一直更新数据,效率低,脏数据检查到10次之后不再继续检查;

解决方案:可以使用一个变量来接收函数调用

controller as 和controller 有什么区别,能解决什么问题?

在使用controller的时候,为控制器注入$window与$scope,这个时候controller中的属性与方法是属于$scope的,而使用controllerAS的时候,可以将controller定义为Javascript的原型类,在html中直接绑定原型类的属性和方法

优点:

可以使用 Javascript 的原型类, 我们可以使用更加高级的 ES6 或者 TypeScript 来编写 Controller ;

指代清晰。在嵌套scope时,子scope如果想使用父scope的属性,只需简单的使用父scope的别名引用父scope即可。

避开了所谓的 child scope 原型继承带来的一些问题(原来别名ctrl就是定义在$scope上的一个对象,这就是controller的一个实例,所有在JS中定义controller时绑定到this上的model其实都是绑定到$scope.ctrl上的。使用controller as的一大好处就是原型链继承给scope带来的问题都不复存在了,即有效避免了在嵌套scope的情况下子scope的属性隐藏掉父scope属性的情况。)

controller的定义不依赖$scope。

定义controller时不用显式的依赖$scope,这有什么好处呢?仔细看定义,这不就是一个普通的函数定义嘛,对!这就是好处!例子中的ScopeController就是所谓的POJO(Plain Old Javascript Object,Java里偷来的概念),这样的Object与框架无关,里面只有逻辑。所以即便有一天你的项目不再使用AngularJS了,依然可以很方便的重用和移植这些逻辑。另外,从测试的角度看,这样的Object也是单元测试友好的。单元测试强调的就是孤立其他依赖元素,而POJO恰恰满足这个条件,可以单纯的去测试这个函数的输入输出,而不用费劲的去模拟一个假的$scope。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywzxj.html