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 ...
随机推荐
- 44.oracle表空间的使用
要给下属充分的发挥空间,要允许下属犯错,下属犯错自己能顶下来就顶着,不要盯得让下属觉得“这不是我的事,我只是个小打工的”,团建要放在首位.不可在下属面前“装B”,别人也不傻. Oracle数据库开创性 ...
- MySQL与Redis实现二级缓存
redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库 Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化, ...
- [转] Nexus OSS 3.xx 体验
[From] https://blog.csdn.net/qq250782929/article/details/51605965 Nexus Manager OSS 3.0 —Maven Repos ...
- c# timer使用
C#里现在有3个Timer类: System.Windows.Forms.Timer System.Threading.Timer System.Timers.Timer 这三个Timer我想大家对S ...
- php7安装并apache
1.下载php7 选择THREAD SAFE版本,如果是64位系统要下载x64的,x86的不行 2.解压到想要安装的目录 3.apache配置 1) 添加PHP模块 查找“Dynamic Shared ...
- feignClient中修改ribbon的配置
1.使用@FeignClient注解发现服务 服务提供者的controller: @RestController public class StudentController { @Autowired ...
- TortoiseGit学习系列之TortoiseGit基本操作拉取项目(图文详解)
前面博客 TortoiseGit学习系列之TortoiseGit基本操作克隆项目(图文详解) TortoiseGit学习系列之TortoiseGit基本操作修改提交项目(图文详解) TortoiseG ...
- python-fifo管道文件通信
#!/usr/bin/python #coding=utf-8 import os,sys,multiprocessing,time try: os.mkfifo('file') except :pa ...
- logstash 启动报找不主类或无法加载 java
logstash 启动报无法找到主类解决方案 Zparkle 关注 2018.03.08 22:04* 字数 2051 阅读 1评论 0喜欢 0 当logstash启动时,首先要注意正确配置java ...
- C++11 并发(一道笔试题目)
题目:编写一个程序,开启3个线程,这3个线程的ID分别为A.B.C,每个线程将自己的ID在屏幕上打印10遍,要求输出结果必须按ABC的顺序显示:如:ABCABC….依次递推. #include < ...