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 ...
随机推荐
- Linux之virtualbox中的ubuntu虚拟机linux系统共享文件夹
windows通过virtualbox软件与linux系统机型文件共享 1.第一步 在设置中找到共享文件夹选项,选择添加共享文件夹 2.第二步 选择需要与linux进行共享的文件夹,并选择固定分配 3 ...
- python中type、class、object的区别
type 一. type可以用来返回一个对象的类型 例如: 二. 由于Python中一切皆对象,也就是说Python中的任何变量类型都是可以被修改的,这也是Python等动态编程语言的特点.type的 ...
- UNIX基础概念
UNIX基本概念 进程 从用户观点来看:进程是程序的一个执行实例. 从UNIX系统内部来看,是为运行程序提供执行环境的实体,是系统进行资源分配和调度运行的一个单位. 进程有三个特点: 1)进程有一个控 ...
- whdxlib
1 数据库系统实现 实 验 指 导 书 齐心 彭彬 计算机工程与软件实验中心 2016 年 3 月2目 录实验一.JDBC 应用程序设计(2 学时) ......................... ...
- 01背包-记忆化搜索到成型的DP
记忆化搜索 #include<bits/stdc++.h> using namespace std; typedef long long ll; int n,W; int dp[105][ ...
- 20190415 OSX系统安装和配置maven
1.下载maven包[apache-maven-3.6.0-bin.zip] 2.解压到准备安装的目录,我的在:/Users/apple/Documents/javasource/apache-mav ...
- 我把双系统的win10抹除了现在开机只按option还是会出现双系统选择,怎么把那个win10给取消了或删除掉
找到解决方法了,按步骤来吧,准备:[打开Finder如果你在侧边设备一栏里看不到 Macintosh HD 就打开Finder设置>边栏>勾选硬盘,如果能看到请无视这一行]1. 打开终端执 ...
- Mac 10.12安装数据库管理工具MySQL Workbench
说明:跨平台的MySQL管理工具.别纠结是不是反人类的了,这款用熟了也很溜. 下载: (链接: https://pan.baidu.com/s/1b3VtmA 密码: 6hka)
- Sublime Text 3插件收集
0.Package Control 这个是必须装的,就不多解释了 1.ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件. 2.B ...
- RHCE 共享文件系统
9.1 共享文件系统 概述: 共享文件系统通常有两种方式: 基于文件共享,一种直接共享文件夹给client端,常见的技术有NFS(Network File System )和 SMB (Server ...