探索模拟angular的双向绑定

时间:2023-01-07 14:58:43

前言

本次探索的demo是基于jquery写的,毕竟jquery提供了强大的选择器,用惯了就离不开它了!本次探索只实现了文本的双向绑定。

View-Model

先看效果:文本框输入内容,model层数据也同步过来了探索模拟angular的双向绑定

Model-View

先看效果:js改变model层数据,视图也立即随之变化探索模拟angular的双向绑定

上我的demo

<!DOCTYPE html>
<html lang="en" id = 'app'>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="app1">
<input type="text" swq-model="name">
<input type="text" swq-model="age">
<div>name:<span swq-bind="name"></span></div>
<div>age:<span swq-bind="age"></span></div>
</div>
<div id="app2">
<input type="text" swq-model="name">
<input type="text" swq-model="age">
<div>name:<span swq-bind="name"></span></div>
<div>age:<span swq-bind="age"></span></div>
</div>
<script>
function Swq(obj){//obj为new一个实例时传入的参数对象
var that = this;
var app = $(obj.ele);
// _data是需要双向绑定的所有数据
var _data = obj.data;
// 遍历劫持,并初始化set值,并初始化绑定事件
init(_data);
// 劫持改写object的get和set方法
function changeObject(obj,attr){
Object.defineProperty(obj,attr,{
//劫持到set方法
set : function(newValue){
_data[attr] = newValue;
// 实现model-view的同步
var $target = app.find('[swq-bind = "'+attr+'"],[swq-model = "'+attr+'"]');
if($target){
$target.each(function(){
var tagName = $(this)[0].tagName.toLowerCase();
if(tagName == 'input' || tagName =='select' || tagName =='textarea'){
$(this).val(newValue)
}else{
$(this).text(newValue)
}
})
}
},
//劫持到get方法,因为get方法已经被劫持,所以比如我们劫持了swq.name,那么swq.name就没有值了,所以我们给它返回值,返回值是存在数据容器里面的
get : function(){
return _data[attr];
}
});
}
// 初始化
function init(obj){
for(var o in obj){
changeObject(that,o);
that[o] = that[o];
app.find('[swq-model]').on('input',function(){
var attr = $(this).attr('swq-model');
that[attr] = $(this).val();
})
}
}
}
var swq1 = new Swq({
ele : '#app1',
data : {
name : 'swq1',
age : 24
}
})
var swq2 = new Swq({
ele : '#app2',
data : {
name : 'swq2',
age : 25
}
})
</script>

demo解读

核心其实就是js原生的defineProperty。在这之前,我们需要知道,我们在给某个对象添加和获取属性和方法时其实它底层是调用了set和get方法,比如obj.name="名字",这里是调用了set方法,obj.name这里是调用了get方法。

因此,我们可以劫持js的这两个底层方法

Object.defineProperty(obj,attribute,{set:function(newVlaue){//dosomething},get:function(){//dosomething}})
obj是我们的model对象,attribute就是我们要劫持的需要双向绑定的name,set就是设置属性时底层调用的方法,get就是获取属性时底层调用的方法因为我们劫持了这两个底层方法,我们可以做我们想做的事,但是同时我们也破坏了它本身的设置和获取功能

结言

本人小菜对前端技术很感兴趣,有大神路过给点指点,我也可以关注下各位大神的博客,希望可以学到更多的东西!!!谢谢

探索模拟angular的双向绑定的更多相关文章

  1. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  2. angular 数据双向绑定的终极奥义

    1.ng-app: 是ng的入口,表示当前元素的所有指令都会被angular管理,让anguar认识这段代码,告诉angular要去管理下面的代码:同时angular执行这段代码的时候会在内部开辟一块 ...

  3. Angular js 双向绑定时字符串的转换成 数字类型的问题

    问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <scrip ...

  4. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&amp&semi;多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  5. MVVM 框架解析之双向绑定

    更好的阅读体验,点击 原文地址 MVVM 框架 近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移.在传统的 MVC 下,当前前端和后端发生数据交互后会刷新整个页面,从而 ...

  6. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

  7. 微信小程序双向绑定

    欢迎加入前端交流群交流知识获取视频资料:749539640 vue.angular的双向绑定如下示例: <div> <input type="text" [(ng ...

  8. js mvvm&colon;闲来无事,实现一个只具最基本数据双向绑定的mvvm

    近期项目内用knockoutjs. 想模拟实现数据双向绑定的基本功能. 只具有最基本的功能,且很多细节未曾考虑,也未优化精简. 能想到的缺少的模块 1事件监听,自定义访问器事件 2模版 3父子级 编码 ...

  9. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

随机推荐

  1. 初识SQL 执行顺序

    SQL不同于一般的程序代码,会按照一定的顺序进行执行,他的第一个执行始终从from开始执行,虽然Select出现在第一位置但是执行顺序 确不是在第一个.有时候可能大家写了很久的代码,不一定能够很好的理 ...

  2. C语言关键字、标识符和注释

    一.关键字 C语言提供的有特殊含义的符号,共32个. 在Xcode中关键字全部高亮显示,关键字全部都为小写.如return.int等. 二.标识符 定义:标识符是程序员在程序中自定义的一些符号和名称. ...

  3. 添加Distributor失败

    上周做了一个case,客户无法为SQL Server instance配置remote distributor. 下面分享一下排查问题的过程,希望对您排查类似的问题所有帮助. 客户的环境中的SQL S ...

  4. openstack做镜像

    virt-install --virt-type kvm --name windows2008 --ram 1024 --cdrom /opt/windows-2008-x86_64.iso --di ...

  5. 数据库学习(整理)----6--Oracle如何快速备份和多次备份数表数据

    1.说明:  这里假设一种应用场景! 假设,银行系统中有大量的数据需要及时备份,如何才能快速高效呢! 条件需求: (1).不能设置同步锁(设置的会影响银行正常业务进行!使得银行系统处于维护状态,这是不 ...

  6. Java 不定长度参数

    在调用某个方法时,若是方法的参数个数事先无法确定该如何处理?例如System.out.printf()方法中并没有办法事先决定要给的参数个数,像是: ? 1 2 3 System.out.printf ...

  7. POJ 1201 &amp&semi;amp&semi;&amp&semi;amp&semi; HDU 1384 Intervals&lpar;差动制动系统)

    职务地址:POJ 1201   HDU 1384 依据题目意思.能够列出不等式例如以下: Sj-Si>=c; Si-S(i-1)>=0; S(i-1)-Si>=-1; 然后用最短路s ...

  8. Ztorg木马分析: 从Android root木马演变到短信吸血鬼

    本月第二次,Google 从官方应用商店 Google Play 中移除了伪装成合法程序的恶意应用.被移除的应用都属于名叫 Ztorg 的 Android 恶意程序家族.目前为止,发现的几十个新的Zt ...

  9. 关于前端框架BootStrap和JQueryUI(以及相应的优秀模板)

    近期两个月因为须要升级公司产品的界面.所以不得不去学习了下原本并不熟悉的前端框架. 这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始非常easy,首先.须要得到所须要 ...

  10. Android-获取全局Context的技巧-android学习之旅&lpar;68&rpar;

    我们经常需要获取全局的Context ,比如弹出Toast,启动活动,服务,接收器,还有自定义控件,操作数据库,使用通知等 通常的方法是在调用的地方传入Context参数 ,有时候这种不会奏效,教给大 ...