jQuery和MVVM类框架的编程区别点
本文说的mvvm框架以react为列,其他应该也是类似的;
react实际上仅仅是帮助我们再View层简化,让我们仅仅需要专注数据,只要数据改变,所有的视图就会自己跟随着改变,
本人自己做react项目目前大概一个多月,然而,好几次都仍然想着使用jQuery的方式,经过同事的指点,发现了此jQuery之所有被我们所弃用,并不是盲目的想要摒弃以前的东西,而是真的使用它远没用不用他效率高!,
以今天自己写的项目的一个小点来说:
let textareaEles = document.querySelectorAll("textarea[data-id]");
let textareaDataArr = [];
for (let i = 0; i < textareaEles.length; i++) {
debugger;
let textareaEle = textareaEles[i];
textareaEle.dataId;
textareaDataArr.push({ id: textareaEle["data-id"], remark: textareaEle.innerHTML })
}
let json = JSON.stringify(textareaDataArr);//这个是获取的JSON
}
上面这个是仍然使用jQuery的编程模式, 1、先把获取到的数据,动态生成给元素并让它添加 data-id 属性,然后再一个一个循环获取!最后我再提交数据,十分低效
而使用react这类框架,思路其实更加简单, 1、先把获取到的数据,然后把textArea的value绑定为state.data;当textArea触发onChange的时候,直接改变state.data的值,textArea就会实时改变,而且最后要提交给后台的数据,也仍然是data。
整个过程就是通过state.data来实现数据的双向绑定!!!十分简单
jQuery和MVVM类框架的编程区别点的更多相关文章
- 如何构建Android MVVM 应用框架
概述 说到Android MVVM,相信大家都会想到Google 2015年推出的DataBinding框架.然而两者的概念是不一样的,不能混为一谈.MVVM是一种架构模式,而DataBinding是 ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
- 使用反射机制实现jQuery调用ashx类中的指定方法
使用反射机制实现jQuery调用ashx类中的指定方法 近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...
- Android 框架式编程 —— 起篇
一般的,在开发的时候,写过的代码在需求变更后,发现需要改动非常多的地方,那么说明之前的代码的架构肯定是存在问题的. 下面我们结合面向对象的六大基本原则谈Android 框架式编程.首先先介绍一下面向对 ...
- Jquery学习---Easy UI 框架
Jquery的easyui 1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源 ...
- jQuery Mobile与QUI框架的异曲同工之处
最近一直在研究jQuery Mobile框架,这是jQuery的官方移动版UI框架,专门用来开发手机与平板电脑方面的应用.结果越来越觉得它和我的QUI框架的开发思路非常相似,很多地方都有异曲同工之妙. ...
- 分享一个手机端好用的jquery ajax分页类
分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...
- 基于jquery开发的UI框架整理分析
根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...
- JavaScript 实现一个简单的MVVM前端框架(ES6语法)
前言 随着前端各大框架的崛起,为我们平时的开发带来了相当的便利,我们不能一直停留在应用层面,今天就自己动手实现一个乞丐版的MVVM小框架 完整代码github地址 效果 html代码 <div ...
随机推荐
- AssertJ断言系列-----------<数据库断言二>
那么,在实际的接口测试中,我们除了要断言响应的数据正确之外,可能有的还需要断言数据层是否数据真的有入库. assertj db是可以直接对数据库进行断言和操作的. 一.创建一个students表 CR ...
- iOS开发~制作同时支持armv7,armv7s,arm64,i386,x86_64的静态库.a以及 FrameWork 的创建
armv7,armv7s,arm64,i386,x86_64 详解 一.概要 平时项目开发中,可能使用第三方提供的静态库.a,如果.a提供方技术不成熟,使用的时候就会出现问题,例如: 在真机上编译报错 ...
- FileRecv VNCViewer 使用方法
版本 区别 一路点点点 . 就ok了 看到这个页面 点击 vnc viewer 输入 老师 会告诉你 IP地址 点击 就ok
- C#多线程学习一
一.概述:C#支持多线程并行执行程序,一个线程有他单独的执行路径,能够与其他线程同时执行,一个程序是由一个单线程开始,该单线程由CLR(公共语言运行时)和操作系统创建而成,并具有多线程创建额外线程的功 ...
- hibernate_SessionFactory_getCurrentSession_JTA简介
JTA:java transaction api java里所规定的一种管理事务的API 在另一篇播客我写到了,SessionFactory需要关注两个方法, 即: openSession ...
- JavaScript 缓动效果
Math.easeout = function (A, B, rate, callback) { if (A == B || typeof A != 'number') { return; } B = ...
- display:block、inline、inline-block的区别及应用案例
A.display:block就是将元素显示为块级元素. block元素的特点是: 1.总是在新行上开始: 2.高度,行高以及顶和底边距都可控制: 3.宽度缺省是它的容器的100%,除非设定一个宽度; ...
- python中的生成器(一)
我们先考虑一个场景: 有个情景需要循环输出1——10. 这里给两种方法: list1 = [1,2,3,4,5,6,7,8,9,10] for i in list1: print(i) for i i ...
- Linux下SSH工具 PAC Manager的安装
PAC Manager, Linux下类似SecureCRT Xshell的SSH工具,该工具功能上相当的不错,完全可以代替SecureCRT Xshell的功能. PAC (Perl Auto Co ...
- js动画实现(一)
requestAnimationFrame是什么? 在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来.如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在 ...