JS的MVVM库和原生DOM的区别

最新推荐文章于 2022-04-14 08:57:27 发布
置顶 最新推荐文章于 2022-04-14 08:57:27 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songsong189/article/details/70256646
版权

     这段时间接连的小程序项目、vue的学习和切图制作网站的项目，很少有总结的时间，这次的项目刚刚结束想着是时候跟大家分享我的心得了。

    我一个学习Java的哥们最近跟我说vue是后端吧，因为他换完工作入职以后做的东西全是vue，他觉得vue是后端的东西，确实是，我们常见的JS的组件都是基于所谓的组件开发的，跟传统的DOM操作不一样的是我们更多地是进行了对于数据的处理，以前我们写一个tab栏的时候就是利用jquery的排他思想，跟数据神马的都没有关系，而我们vue跟多的是跟数据打交道，包括通过异步请求过来的东西也是通过数据list直接push到原数组然后改变原数组的值的从而对页面进行变化。

   还有我们有过计算机基础的都知道观察者模式，每次都会有一个监听者和数据绑定者，这在学习vue等JS框架的时候我们要注意的地方，因为我们所觉得的数据双向绑定的原因就是这个!

u013035477
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
什么是MVVM？一个MVVM框架和jQuery操作DOM相比有什么区别？
2301_76484015的博客
04-20 326
如果要针对不同的用户显示不同的页面，显然不可能给成千上万的用户准备好成千上万的不同的html文件，所以，服务器就需要针对不同的用户，动态生成不同的html文件。于是，人们又发现，其实拼字符串的时候，大多数字符串都是HTML片段，是不变的，变化的只有少数和用户相关的数据，所以，又出现了新的创建动态HTML的方式：ASP、JSP和PHP——分别由微软、SUN和开源社区开发。由于前端开发混合了HTML、CSS和JavaScript，而且页面众多，所以，代码的组织和维护难度其实更加复杂，这就是MVVM出现的原因。
NactiveCode:回归原生, 不依赖任何框架和js库
04-18
3. **开发效率**：框架和库提供了一些便利的功能，如自动化绑定、生命周期管理等，完全使用原生JavaScript可能需要更多手动工作。 4. **社区支持**：相比于成熟的框架，原生JavaScript的解决方案可能社区资源较少，...
原生JS实现MVVM模式
diankan7855的博客
06-22 182
欢迎大家指导与讨论 : ） 　　前言 　　　　关于MVVM的原理大家可以参考这篇文章。《【翻译】Object.observe()带来的数据绑定变革》http://www.tuicool.com/articles/ZVVNBv。 　　　　文章中的代码为笔者实践时写的小demo，可以运行。 　　代码 <!DOCTYPE html> <html lang="...
用原生 JS 实现 MVVM 框架1——观察者模式和数据监控
weixin_33935777的博客
09-01 148
在前端页面中，把 Model 用纯 JS 对象表示，View 负责显示，两者做到了最大化的分离 把 Model 和 View 关联起来的就是 ViewModel。ViewModel 负责把 Model 的数据同步到 View 中显示出来，还负责把 View 的修改同步回 Model。 MVVM 的设计思想：关注 Model 的变化，让 M...
利用 JavaScript 数据绑定实现一个简单的 MVVM 库
weixin_33904756的博客
04-01 130
MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon , angular 等，这些框架各有千秋，但是实现的思想大致上是相同的：数据绑定 + 视图刷新。出于好奇和一颗愿意折腾的心，我自己也沿着这个方向写了一个最简...
vue 的简介 MVVM和虚拟DOM
qq_37152533的博客
10-13 1276
1、渐进式框架Vue Vue是构建用户界面的渐进式框架，只关注视图层（view）； 2、vue中两个核心点 响应的数据绑定(双向绑定):当数据发生改变，自动更新视图。内部利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作。由于Object.definedProperty不兼容IE8浏览器，所以Vue不兼容IE8及以下浏览器。 组合的视图组件：...
[removed]JavaScript库和实践库
03-12
JavaScript库和实践库是开发Web应用时不可或缺的资源，它们为开发者提供了丰富的功能和便捷的工具，极大地提高了开发效率和代码质量。JavaScript是一种广泛应用于浏览器端的脚本语言，它在网页动态化、交互设计以及...
Chameleon滴滴开源的让一套代码运行多端的MVVM开发框架
08-10
这主要得益于其独特的编译机制，Chameleon能够将源代码编译为目标平台的原生代码，确保在各个平台上的性能表现和用户体验都能达到最佳。 **核心特性** 1. **组件化开发**：Chameleon 提供了一套丰富的组件库，涵盖...
浅谈mvvm-simple双向绑定简单实现
01-19
mvvm模式解放DOM枷锁 mvvm原理分析 JavaScript在浏览器中操作HTML经历了几个不同阶段 第一阶段 直接用浏览器提供的原生API操作DOM元素 var dom = document.getElementById('id'); dom[removed] = 'hello mvvm'; ...
EasyWebApp.js：基于HTML 5，CSS 3，ECMAScript 5，AMD规范和jQuery API的声明式MVVM Web引擎
02-03
声明式MVVM引擎-EasyWebApp v4基于AMD规范加载器，jQuery v3.2 +构建，兼容IE 9 +，ECMAScript 5 +，HTML 5+【原生态模板】 EWA模板语法完全沿用各种Web前端原生技术的标准语义- UI结构：HTML 5+标准标签， data-*...
mvvm与virtual dom算法的实践——“hoz”
weixin_33979363的博客
05-24 132
最近笔者打算自己造一个轮子，写一个mvvm的库，锻炼自己的能力，毕竟用库谁都可以，但是开发库的能力不是谁都有，不过笔者不是什么大神，所以更多的是希望在这个过程中学到东西，然后这个库不只是实现一个响应式数据绑定这么简单，那么这个库有什么特点呢？请往下看。当然这个库还处在刚刚开始阶段，功能实现的比较简单，在此发表出来，欢迎大家借此为基础一起去...
超简易的mvvm，一看就明白数据是如何跟dom打交道
mengtoumingren的博客
09-29 305
之前面试过几个前端，问到vue数据绑定的原理时几乎都说了 拦截get set,但是数据怎么跟dom打交道却是说不清楚。 心血来潮 ，写个小demo,使用的是遍历数据的方式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...
MVVM框架和jQuery的区别
WarrenLee的博客
09-29 4966
1 一个MVVM框架和jQuery操作DOM节点有什么区别？ JQ操作DOM节点是要用$符号对dom节点进行属性改变，事件注册，事件触发，例如， Hello, BatMan! var name = 'Homer'; $('#name').text(name); 而，MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象：...
Java原生和JavaScript的mvvm开发
weixin_45032957的博客
09-17 164
这个结构和小程序差不多，我们在index.js中定义一个属性 export default { data: { todolist: [{ title: ‘刷leetcode’, date: ‘2020-06-25 10:00:00’, }, { title: ‘看电影’, date: ‘2020-06-27 20:00:00’, }], } } 在index.html中使用它 {{$item.title}} {{$item.dat
前端MVVM是什么？和jQuery的区别是什么？
Larry的博客
04-14 1427
定义： MVVM 分为三部分： M（Model，模型层）主要负责业务数据相关，后台 V（View，视图层）负责视图相关，前端 VM（ViewModel，V 与 M 连接的桥梁，也可以看作为控制器）V 与 M 沟通的桥梁，负责监听 M 或者 V 的修改，实现MVVM的双向绑定 区别： vue： 通过对数据的操作就可以完成对页面视图的渲染 jquery： 操作DOM，对其进行赋值、取值、事件绑定等 操作 优势： 开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，提高加载速度。 ..
jquery框架和mvvm框架的类名操作性对比
weixin_30480075的博客
12-08 199
操作元素选取的是img元素 mvvm选取的是avalon框架 操作类名上感觉还是jquery有着很强的优势，毕竟有着toggle方法 mvvm上实现相同效果还得做逻辑判断，比较麻烦，代码行数就多了几行。 点击看效果demo <!DOCTYPE html> <html lang="en"> <head> <meta charset...
react不是mvvm架构
u010227042的博客
03-06 915
首先搞明白mvvm是啥意思。vm是view mode的意思。所以mvvm框架是要有一个vm对象，来映射view。也就是vm对象的属性发生改变的时候，对应的视图部分会相对应更新。比较经典的有knockoutjs，里面比较关键的概念就是view model，compute，view模板等。对的，vue中其实是有不少它的影子。 然后来看看react，它没有纯粹意义上的vm对象，它有的是属性和状态。用属性和状态去映射视图。那么属性和状态和vm有什么区别呢？个人认为，vm对象不管你值是从外部传进来的还是自己内部定义
JSView MVVM数据绑定库学习
dazer的专栏
01-03 2249
MVVM js 库JsRender/JsViews和knockoutjs介绍 http://www.oschina.net/p/jsrender
jquery框架和mvvm框架的元素插入对比
weixin_30587927的博客
12-06 301
这里的mvvm框架选用的是avalon. 元素插入用的是img做例子。 点击看效果demo 核心代码： 　　 //jq way var picHref = $("<a></a>").attr("class","zxx_image_list"); var picSrc = $("<img</img>").attr("src",$img[c...
Vue.js实战：Weex内置模块与DOM操作
本文将重点讨论其中的`dom`模块和与Vue.js相关的知识。 `dom`模块是Weex提供的一种对虚拟DOM（virtual DOM）进行操作的工具。与传统的Web开发中直接操作浏览器的`document`对象不同，Weex的`dom`模块通过API将对...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值