本文说的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. Flink--Streaming Connectors

    原网址:https://ci.apache.org/projects/flink/flink-docs-release-1.7/dev/connectors/ Predefined Sources a ...

  2. iOS开发~制作同时支持armv7,armv7s,arm64,i386,x86_64的静态库.a以及 FrameWork 的创建

    armv7,armv7s,arm64,i386,x86_64 详解 一.概要 平时项目开发中,可能使用第三方提供的静态库.a,如果.a提供方技术不成熟,使用的时候就会出现问题,例如: 在真机上编译报错 ...

  3. python3.6的request

    request实例1: import requests payload = {'key1':'value','key2':'value2'} url = "http://httpbin.or ...

  4. [原创] PHP 使用Redis实现锁

    目录 锁实现的注意点 加锁 connect 与 pconnect 解锁 Redis 中使用 Lua 脚本的注意点 Redis集群分布式锁 RedLock 算法 锁实现的注意点 互斥: 任意时刻, 只能 ...

  5. Developer Friendly | 基础设施即代码的事实标准Terraform已支持京东云!

    Developer Friendly | 基础设施即代码的事实标准Terraform已支持京东云! Chef.Puppet.Ansible.SaltStack 都可以称为配置管理工具,这些工具的主要目 ...

  6. 任务调度SpringTask

    一.什么是任务调度 在企业级应用中,经常会制定一些“计划任务”,即在某个时间点做某件事情,核心是以时间为关注点,即在一个特定的时间点,系统执行指定的一个操作.常见的任务调度框架有Quartz和Spri ...

  7. Cpython 支持的线程

    因为Python解释器帮你自动定期进行内存回收,你可以理解为python解释器里有一个独立的线程,每过一段时间它起wake up做一次全局轮询看看哪些内存数据是可以被清空的,此时你自己的程序 里的线程 ...

  8. Couchbase进阶-集群与版本升级

    最近在负责公司Couchbase版本升级工作,之前只有一台Cache服务器,使用Couchbase Enterprise Edition 1.8,为避免单点故障现在需要新增加一台Cache服务器做负载 ...

  9. Mac版sublime text右键open in browser 不能识别中文名解决办法

    问题描述: Mac下sublime text下打开中文命名的html文件,右键open in browser,浏览器无反应. 解决思路: 要么适应软件,要么改进软件来适应. 1.  将中文名的html ...

  10. 使用Thumbnailator处理gif图片时遇到java.lang.ArrayIndexOutOfBoundsException: 4096异常处理

    环境 1.7.0_80 在使用Thumbnailator处理gif图片时,遇到问题: Exception in thread "main" java.lang.ArrayIndex ...