jQuery和MVVM类框架的编程区别点

本文说的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来实现数据的双向绑定!!!十分简单

时间: 2024-11-05 14:57:23

jQuery和MVVM类框架的编程区别点的相关文章

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

jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下:

Jquery学习---Easy UI 框架

1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源码 themes 样式文件 easyloader.js  框架核心加载器 (加载其它plugin) jquery-1.8.0.min.js  jQuery类库 jquery.easyui.min.js  框架类库 (等价于 easyloader.js + plugins 所有插件 ) 1.2. 在项目中引入 EasyUI 必须

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

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

jquery easyui+layer后台框架

最近使用jquery easyui搭建了一个后台框架,以方便以后使用 上图先: 下载地址:CSDN下载 jquery easyui+layer后台框架,布布扣,bubuko.com

jquery widget开发——核心框架

框架代码: $.widget( "myns.myplugin", { //默认参数 options: { clear: null }, //初始化,控件生命周期内只运行一次 _init:function(){ ,} //创建控件,控件生命周期内会运行多次 _create: function() { }, //设置参数 _setOption: function( key, value ) { // In jQuery UI 1.8及以前用法 $.Widget.prototype._set

OpenCV SVM多类分类问题编程示例

2014年4月,北京--TechExcel喜签网目信息技术(上海)有限公司(以下简称"网目信息"),采用TechExcel公司CustomerWise产品助力其建立全球用户统一门户,统一各分公司的服务标准和服务流程,为用户提供全球标准化的服务. ICONZ-Webvisions公司(网目信息)总部设在新加坡,拥有20多年的IT运维及外包服务经验历史,是唯一以亚洲为中心,为亚洲.澳大利亚和全球市场提供"云"和托管服务的供应商.ICONZ-Webvisions可以利用其

从jQuery谈库与框架的设计之优劣

jQuery是业内知名的javascript框架,它的实现和设计可以说代表了javascript界最高的水平,本文试从四个方面来以jQuery为例总结库与框架设计的原则和优劣判断. 解决问题 首先请看一个我实现的框架,我把这个库称为四则运算. function add(a,b) { return a+b; } function mul(a,b) { return a*b; } function minus(a,b) { return a-b; } function div(a,b) { retu

用jQuery的Ajax调用WCF服务编程心得

这两天在写基于WCF服务的后台框架,过程中遇到了一些挫折,经过努力全部解决了,在此分享给大家,使用的工具是Visual Studio 2013. 该后台需要支持通过json来传递和接收数据. 首先,说说搭建过程. 第一步:创建WCF服务应用程序项目WCF. 第二步,创建服务使用的数据类 using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Sch

会jQuery,该如何用AngularJS编程思想?

我可以熟练使用jQuery进行客户端应用的开发,但是现在我希望开始使用Angular.js.哪位能描述一下这个过程中必要的模式变化吗?希望您的答案能够围绕下面这些具体的问题: 1. 我如何对客户端web应用进行不同方式的架构和设计?它们之间最大的区别是什么?(译者注:指jQuery和Angular.js) 2. 有什么是我不该做或者不该使用的:而又有什么是我应该做或者应该使用的呢? 3. 有没有一些服务端的考量/约束呢? 我在寻找的就是一个关于jQuery和Angular.js之间的详细的比较.