angularjs的双向绑定原理实现

angularjs的双向绑定用js代码来实现

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>双向绑定的js实现</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head>
<body><input type="text" id="txt1" /><input type="text" id="txt2" /><script type="text/javascript">window.onload = function () {let a = '';let oTxt = document.getElementById('txt1');let oTxt2 = document.getElementById("txt2");function $interval(fn, time) {setInterval(function () {fn();apply();}, time);}function $http(url, success, error) {$.ajax({url,dataType: 'json',success(result) {success(result);apply();},error});}//数据->inputfunction apply() {oTxt.value = a;oTxt2.value = a;}//$interval(function () {//    a +='|';//}, 100);//$.ajax({//    url: 'Data/1.txt',//    dataType: 'json',//    success(res) {//        a = res;//        apply();//    },//    error() {//        alert("错了");//    }//});//$http('Data/1.txt', function (arr) {//    a = arr;//}, function () {//    alert('错了');//});//setInterval(function () {//    a += '|';//    apply();//}, 100);//input->数据
oTxt.oninput = function () {a = this.value;apply();}oTxt2.oninput = function () {a = this.value;apply();}setInterval(function () {console.log(a);}, 100);}</script></body>
</html>

升级版的(封装了一下)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>angularjs的双向绑定实现</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body><input type="text" ng-model="a" /><input type="text" ng-model="a" /><select ng-model="a"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select><br /><br /><br /><br />   <br /><br />   <br /><br /><input type="text" ng-model="b" /><select ng-model="b"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select><script type="text/javascript">window.onload = function () {let $scope = {};let aEle = document.getElementsByTagName('*');//数据->inputfunction apply() {Array.from(aEle).forEach(ele => {let model = ele.getAttribute('ng-model');if (model) {if ($scope[model]) {ele.value = $scope[model];}else {ele.value = '';}}});}//input->数据
Array.from(aEle).forEach(ele => {let model = ele.getAttribute('ng-model');if (model) {ele.oninput = function () {$scope[model] = this.value;apply();}}});}</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhumeiming/p/9820671.html

angularjs的双向绑定原理实现相关推荐

angular的双向绑定原理
http://sentsin.com/web/779.html AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM ...
v-model双向绑定原理_Vue数据绑定
这是一篇简单的学习笔记.在学习一段时间Vue后,尝试实现一下Vue的数据绑定. 相关源码:https://github.com/buchuitoudegou/Data-Binding-demo Vue ...
前端技巧|vue双向绑定原理，助你面试成功
在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了.今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦. ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
vue双向绑定原理及实现
vue双向绑定原理及实现一.MVC模式二.MVVM模式三.双向绑定原理 1.实现一个Observer 2.实现一个Watcher 3.实现一个Compile 4.实现一个MVVM 四.最后写一个 ...
记录vue的双向绑定原理及实现
这里写自定义目录标题思路分析实现过程 1.实现一个Observer 2.实现Watcher 此文章是学习以为大神____chen的 <vue的双向绑定原理及实现> vue数据双向绑定是 ...
vue 的双向绑定原理
目录一.一句话描述 vue 的双向绑定原理二.细说 vue 的双向绑定原理 1.vue 2.x 的双向绑定 2.vue 3.x 的双向绑定 3.一个完整的案例一.一句话描述 vue 的双向绑定原 ...
【vue双向绑定原理浅析】
vue双向绑定原理浅析 1.什么是双向绑定? 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.(数据变化更新视图,视图变 ...

angularjs的双向绑定原理实现

angularjs的双向绑定原理实现相关推荐

最新文章

热门文章