去哪儿前端一面

谈谈你对mvvm的理解

MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)

1、 M:模型层,主要负责业务数据相关;

2、 V:视图层,顾名思义,负视图相关,细分下来就是html+css层;

3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;

MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦;

13.png

要实现一个mvvm的库,我们首先要理解清楚其实现的整体思路。先看看下图的流程:

14.png

1.实现compile,进行模板的编译,包括编译元素(指令)、编译文本等,达到初始化视图的目的,并且还需要绑定好更新函数;

2.实现Observe,监听所有的数据,并对变化数据发布通知;

3.实现watcher,作为一个中枢,接收到observe发来的通知,并执行compile中相应的更新方法。

4.结合上述方法,向外暴露mvvm方法

谈一谈对单页面应用的理解

一、定义
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。

二、优缺点

单页Web程序的出现是富客户端发展的必然结果,但是该技术也是有些局限性,所以采用之前需要了解清楚它的优缺点。

1、优点:

1).良好的交互体验

用户不需要重新刷新页面,获取数据也是通过Ajax异步获取,页面显示流畅。

2).良好的前后端工作分离模式

单页Web应用可以和RESTful规约一起使用,通过REST API提供接口数据,并使用Ajax异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分。

3).减轻服务器压力

服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;

4).共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端;
2、缺点:

1).SEO难度较高

由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧。

2).前进、后退管理

由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理,当然此问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/8488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构学习——二叉树

1. 树概念及结构 1.1 树的概念 树是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。 有一个特殊的结点&…

用户下单操作

一:用户下单需求分析和设计: 用户下单业务说明: 在电商系统中,用户是通过下单的方式通知商家,用户已经购买了商品,需要商家进行备货和发货。 用户下单后会产生订单相关数据,订单数据需要能够体…

如何使用多协议视频汇聚/视频安防系统EasyCVR搭建智慧园区视频管理平台?

智慧园区作为现代化城市发展的重要组成部分,不仅承载着产业升级的使命,更是智慧城市建设的重要体现。随着产业园区竞争的逐渐白热化,将项目打造成完善的智慧园区是越来越多用户关注的内容。 然而我们往往在规划前期就开始面临众多难题&#…

保护公司机密:避免员工带着数据说拜拜

公司的核心资产之一就是数据。无论是客户信息、研发代码、内部决议、财务报告、商业合同、设计图纸等都是公司的重要资产。如果这些数据在员工离职时被带走,或在员工在职期间不当行为导致数据泄露,将给公司带来重大损失。 然而,保护这些数据…

软考143-下午题-【试题二】:E-R图、关系模式

一、分值与目标 15分,目标10 二、题目形式 示例: 三、E-R图的基本图形元素 示例: 3-1、实体 1、弱实体 在现实世界中有一种特殊的联系,这种联系代表实体间的所有 (Ownership) 关系,例如:职工与家属的联系…

STC8增强型单片机开发 【第一个程序 - 点亮第一盏灯】

目录 一、创建项目 1. 创建一个新的项目 ​编辑 2. 配置开发板信息 ​编辑 3. 取消汇编配置 4. 项目结构 二、编码实现 1. 项目准备 2. 代码实现 点灯: 熄灯: 3. 编译烧录运行 配置编译输出 保存和编译代码 ​编辑 烧录 一、创建项目 1. …

【Arduino IDE 2】Windows平台安装ESP8266 NodeMCU LittleFS Uploader(文件上传插件)

在Arduino IDE 2(2.2.1或更高版本)上,如何安装基于ESP8266 NodeMCU的LittleFS文件系统上传插件,以及如何将文件上传到ESP8266 NodeMCU板文件系统。 一、LittleFS简介 LittleFS是一个为微控制器创建的轻量级文件系统,可…

实验五 Spark Structured Streaming编程实践

一、编写程序 (1). 按照tag分组统计生成的日志数。 在新开的终端内输入 vi spark_exercise_testsyslog1.py ,贴入如下代码并运行。运行之前需要关闭“tail终端”内的tail命令并重新运行tail命令,否则多次运行测试可能导致没有新数据生成。 #!/usr/bin…

onlyoffice容器打包成镜像

书接上篇,onlyoffice容器已经更改在本地docker环境中了,之后需要部署到测试环境的docker中,采用容器打包成本地镜像 1、本地docker 查看容器:docker ps 生成镜像:docker commit -p blissful_lichterman 重命名镜像&a…

【大学物理】双语合集听课笔记

7.5 angular momentu(角动量)_哔哩哔哩_bilibili 6.4Energy in Rotation Motion 有质量有速度的物体有动能,是不是很有道理 international system(from French systeme international,acronym,SI)of ineria kg*m^2 转…

pycharm中导入rospy(ModuleNotFoundError: No module named ‘rospy‘)

1. ubuntu安装对应版本ros ubuntu20.04可参考: https://wiki.ros.org/cn/noetic/Installation/Ubuntuhttps://zhuanlan.zhihu.com/p/515361781 2. 安装python3-roslib sudo apt-get install python3-roslib3.在conda环境中安装rospy pip install rospkg pip in…

【Git】Git学习-17:git rebase,且解决合并冲突

学习视频链接:【GeekHour】一小时Git教程_哔哩哔哩_bilibili​编辑https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780 理论 git rebase 目标分支:把当前分支的提交,从与目标分支的共同主祖先处断开…

js如何控制一次只加载一张图片,加载完成后再加载下一张

公众号:程序员白特,欢迎一起交流学习~ 原文:https://juejin.cn/post/7340167256267391012 今天看到一个面试题,是关于img图片加载方面的,有必要记录一下。其实关于这个问题,只要知道图片什么时候加载完成就…

分割模型Maskformer系列

maskformer:Per-Pixel Classification is Not All You Need for Semantic Segmentation 论文地址:https://arxiv.org/pdf/2107.06278 1.概述 传统的语义分割方法通常采用逐像素分类(per-pixel classification),而实…

linux安装Redis 7.2.4笔记

一.保姆级安装 1.下载Redis 7.2.4安装包 sudo wget https://download.redis.io/releases/redis-7.2.4.tar.gz2.解压,可以指定 sudo tar -zvxf redis-7.2.4.tar.gz 3.检测并安装 GCC 编译器: yum 是基于 Red Hat 的 Linux 发行版(如 CentOS、…

CSRF漏洞简介

csrf简介 CSRF 全称为跨站请求伪造( Cross-site request forgery ),是一种网络攻击方式,在 CSRF 的攻击场景中攻击者会伪造一个请求(这个请求一般是一个链接),然后欺骗目标用户进行点击&#xf…

Lora基础炼丹学习笔记

1、收集数据集 20-30张人物各个角度、各个姿势的图片 2、图片预处理 裁剪 打标签 裁剪必须也要512 * 512 ,因为sd1.5就是用这个尺寸训练的,可以使用后期处理 打标可以勾选这个,Deepbooru对二次元画风更友好 打标也可以使用wb14-tagger的…

Flink checkpoint 源码分析- Checkpoint snapshot 处理流程

背景 在上一篇博客中我们分析了代码中barrier的是如何流动改的。Flink checkpoint 源码分析- Checkpoint barrier 传递源码分析-CSDN博客 最后跟踪到了代码org.apache.flink.streaming.runtime.io.checkpointing.CheckpointedInputGate#handleEvent 现在我们接着跟踪相应代…

FTTR(光猫)ITMS注册NCE纳管

ITMS注册 TR069交互过程: 1.1. TR069交互—主动连接机制 主动连接机制是指CPE主动发出请求连接事件(事件可以为: 0 BOOTSTRAP; 1 BOOT; PERIODIC等等)给ACS。在连接建立之后才能进行业务处理(通过调用RPC方法实现)。 备注:政企…

2024.5.8

聊天框完善 #include "mywidget.h" #include "ui_mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent), ui(new Ui::MyWidget) {ui->setupUi(this);//设置窗口大小this->resize(400,560);//设置窗口图标和标题this->setWindowTit…