奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 笔经面经 >

什么是单向数据绑定和双向数据绑定?AngularJS是

时间:2017-10-31 21:23来源: 作者:
单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HT

单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。
793502331-54c65c6db9efd_articlex
单向数据绑定缺点:HTML代码一旦生成完以后,就没有办法再变了,如果有新的数据来了,那就必须把之前的HTML代码去掉,再重新把新的数据和模板一起整合后插入到文档流中。

双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。
3288558088-54c65d6937a28_articlex
用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去。

双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD(Create,Retrieve,Update,Delete)操作

双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了。

目前。实现双向数据绑定的前端框架主要有AngularJS,VueJS等

AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定,当事件发生时会调用scope中的所有watch方法进行脏值检查

  • $watch:$scope提供$watch方法来监听数据对象的改变。ng-model等指令会自动创建一个$watch,以保证对数据对象属性的监听。这些$watch会形成一个列表,等待通知执行。
  • $apply:$scope提供$apply方法传播数据对象的改变。不在angularjs执行上下文中对数据模型进行赋值的时候(例如在setTimeout方法中赋值),将无法监听到数据模型的变化,这时候就需要$apply方法将数据变化语句包裹起来:

setTimeout(function(){

$scope.$apply(function(){

$scope.attr=’change’;

});

},1000);

这时候,数据模型改变的时候将会触发对应的$watch。在$apply执行后会触发一个$scope.$digest(),这个方法会依次检查被监听的属性,发现数据改变的时候会调用$watch中的回调。

myModule.directive(‘namespaceDirectiveName’, function factory(injectables) {

var directiveDefinitionObject = {

restrict: string,//指令的使用方式,包括标签,属性,类,注释

priority: number,//指令执行的优先级

template: string,//指令使用的模板,用HTML字符串的形式表示

templateUrl: string,//从指定的url地址加载模板

replace: bool,//是否用模板替换当前元素,若为false,则append在当前元素上

transclude: bool,//是否将当前元素的内容转移到模板中

scope: bool or object,//指定指令的作用域

require:”^$http”

//定义与其他指令进行交互的接口函数

controller: function controllerConstructor($scope, $element, $attrs, $transclude,$http){…},

require: string,//指定需要依赖的其他指令

link: function postLink(scope, iElement, iAttrs) {…},//以编程的方式操作DOM,包括添加监听器等

compile: function compile(tElement, tAttrs, transclude){

return: {

pre: function preLink(scope, iElement, iAttrs, controller){…},

post: function postLink(scope, iElement, iAttrs, controller){…}

}

}//编程的方式修改DOM模板的副本,可以返回链接函数

};

return directiveDefinitionObject;

});

(责任编辑:admin)
顶一下
(2)
50%
踩一下
(2)
50%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-07-15 11:07
栏目列表
推荐内容

关注奔三路小程序,方便你我他