本文说的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. HDU-1260-Tickets(线性DP,DP入门)

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  2. 网络编程-echo服务器

    代码: #coding="utf-8" #name=echo服务器 from socket import * #1.创建套接字 udpSocket = socket(AF_INET ...

  3. Java NIO学习与记录(七): Reactor单线程模型的实现

    Reactor单线程模型的实现 一.Selector&Channel 写这个模型需要提前了解Selector以及Channel,之前记录过FileChannel,除此之外还有以下几种Chann ...

  4. 关于npm run dev报错npm ERR! missing script: dev

    出现这个问题应当重新使用 vue init webpack 来初始化工程. 在执行 npm run dev 就可以执行了.

  5. h5 html5 模拟时钟 页面

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  6. 五、 OpenERP 输出日志

    import logging from openerp.osv import orm _logger = logging.getLogger(__name__) class project_task_ ...

  7. Mac拷贝/复制文件夹路径快捷键

    快捷键:Option+Command+C 显示路径在Finder: defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES ...

  8. redis 远程 访问 安全配置

    朋友总结很好,就转载了-> 站长博客 假设两台redis服务器,ip分别为:192.168.1.101和192.168.1.103,如果在101上通过redis-cli访问103上的redis呢 ...

  9. WPF中设置Border的BorderThickness属性会让背景图片产生模糊感

    <!--设置BorderThickness会让border的Background图片看起来有模糊感--> <Border x:Name="border" Bord ...

  10. 【angular5 项目积累总结】项目公共样式

    main.css @font-face { font-family: 'wf_segoe-ui_normal'; src: local('Segoe UI'),url('../fonts/segoe- ...