本文说的mvvm框架以react为列,其他应该也是类似的;

react实际上仅仅是帮助我们再View层简化,让我们仅仅需要专注数据,只要数据改变,所有的视图就会自己跟随着改变,

本人自己做react项目目前大概一个多月,然而,好几次都仍然想着使用jQuery的方式,经过同事的指点,发现了此jQuery之所有被我们所弃用,并不是盲目的想要摒弃以前的东西,而是真的使用它远没用不用他效率高!,

以今天自己写的项目的一个小点来说:


handleSave(e) {
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类框架的编程区别点的更多相关文章

  1. 如何构建Android MVVM 应用框架

    概述 说到Android MVVM,相信大家都会想到Google 2015年推出的DataBinding框架.然而两者的概念是不一样的,不能混为一谈.MVVM是一种架构模式,而DataBinding是 ...

  2. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

  3. 使用反射机制实现jQuery调用ashx类中的指定方法

    使用反射机制实现jQuery调用ashx类中的指定方法   近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...

  4. Android 框架式编程 —— 起篇

    一般的,在开发的时候,写过的代码在需求变更后,发现需要改动非常多的地方,那么说明之前的代码的架构肯定是存在问题的. 下面我们结合面向对象的六大基本原则谈Android 框架式编程.首先先介绍一下面向对 ...

  5. Jquery学习---Easy UI 框架

    Jquery的easyui 1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源 ...

  6. jQuery Mobile与QUI框架的异曲同工之处

    最近一直在研究jQuery Mobile框架,这是jQuery的官方移动版UI框架,专门用来开发手机与平板电脑方面的应用.结果越来越觉得它和我的QUI框架的开发思路非常相似,很多地方都有异曲同工之妙. ...

  7. 分享一个手机端好用的jquery ajax分页类

    分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...

  8. 基于jquery开发的UI框架整理分析

    根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...

  9. JavaScript 实现一个简单的MVVM前端框架(ES6语法)

    前言 随着前端各大框架的崛起,为我们平时的开发带来了相当的便利,我们不能一直停留在应用层面,今天就自己动手实现一个乞丐版的MVVM小框架 完整代码github地址 效果 html代码 <div ...

随机推荐

  1. Es6 类class的关键 super、static、constructor、new.target

    ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对 ...

  2. 架构师养成记--23.sigar使用实例

    作用是检测机器的硬件环境 注意在jdk的bin目录下加上sigar的lib目录中的文件 import java.net.InetAddress; import java.net.UnknownHost ...

  3. jpetStore 学习总结(1)

    最近学习了Springmvc4,对官方的例子jpetStore进行了分析研究,在官方网站下载spring-framework-2.5.6.SEC03,其中samples文件夹里就有jpetstore的 ...

  4. Learn to See in the Dark(论文阅读笔记)

    最近做项目看了一篇论文<Learn to See in the Dark>下面是一些论文笔记 概括: 这篇论文主要介绍的是在低光照的环境下用两个标准的FCN网络,通过控制变量法来对比不同的 ...

  5. linux下不同颜色文件的性质

    绿色文件: 可执行文件,可执行的程序 红色文件:压缩文件或者包文件 蓝色文件:目录 白色文件:一般性文件,如文本文件,配置文件,源码文件等 浅蓝色文件:链接文件,主要是使用ln命令建立的文件 红色闪烁 ...

  6. [ZJOI2019]语言[树链的并、线段树合并]

    题意 题目链接 分析 考虑枚举每个点的答案,最后除以 2 即可. 可以与 \(u\) 构成合法点对 的集合 为所有经过了 \(u\) 的链的并.因为这些链两两有交,根据结论 "树上两条相交的 ...

  7. 那些H5用到的技术(6)——屏幕适配

    前言长屏适配单页适配参考 前言 曾经屏幕适配一直是个头疼的问题,各种坑,各种浏览器&设备兼容问题,好在的是,随着技术&标准的不断发展,这个问题得到了极大程度的解决,这篇文章主要对之前开 ...

  8. (转)Mysql主从复制搭建及详解

    http://www.cnblogs.com/kevingrace/p/6256603.html---------Mysql主从同步(1)-主从/主主环境部署梳理 原文:http://blog.csd ...

  9. spring boot快速入门 7: 使用aop处理请求

    样例:登陆拦截(aop简单样例) 第一步:在pom 文件中加入aop依赖 <!-- spring aop --> <dependency> <groupId>org ...

  10. 【文档】三、Mysql Binlog事件类文件和类型

    在内部,服务器使用C++类文件来表示binlog事件.标准在log_event.h文件中,这些类的方法代码在log_event.cc中. log_event是基础类.其他的详细的事件子类都是来源于他. ...