去哪儿前端一面

谈谈你对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)个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。 有一个特殊的结点&…

用户下单操作

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

第Ⅶ章-Ⅱ Pinia详解

第Ⅶ章-Ⅱ Pinia详解 简介安装 Pinia配置Pinia定义Store组件中使用处理异步操作模块化Store使用持久化插件 简介 Pinia 是 Vue 3 官方推荐的状态管理库,也是 Vuex 的替代方案之一。它更轻量、更现代化,并提供更好的 TypeScript 支持。 安装 Pinia 首先…

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

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

2405C++,C++取计算机序列号及CCoInitialize

#include <windows.h> #include <wrl/client.h> #include <wrl/wrappers/corewrappers.h> #include <windows.system.profile.systemmanufacturers.h> #include <roapi.h> #include <stdio.h> // 恐怖!混合C和C! namespace WRL Microsoft…

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

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

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

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

mybatis调用数据库存储过程

mybatis调用数据库存储过程及常见属性详解 调用mapper String visitCode mapper.getVisitCode(objectMap);Dao层&#xff0c;xml文件代码编写 <select id"getVisitCode" parameterType"map" resultType"string" statementType"CALLAB…

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

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

前端每日一题day1

用JS写出两个数组合并成一个数组排序返回&#xff08;输入&#xff1a; [5,2,10] [9,1] 输出&#xff1a; [1,2,5,9,10]&#xff09; function mergeAndSort(arr1, arr2) {// 合并两个数组var mergedArray arr1.concat(arr2);// 对合并后的数组进行排序mergedArray.sort(func…

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

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

实验五 Spark Structured Streaming编程实践

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

onlyoffice容器打包成镜像

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

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

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

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

1. ubuntu安装对应版本ros ubuntu20.04可参考&#xff1a; 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,且解决合并冲突

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

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

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

数据库选择小结

第一次测试 1. (单选题, 2分)【单选题】在E-R模型中&#xff0c;实体间的联系用&#xff08; C&#xff09;图标来表示。 A. 矩形B. 直线C. 菱形D. 椭圆 2. (单选题, 2分)【单选题】设R是一个关系模式&#xff0c;如果R中的每个属性都是不可分解的&#xff0c;则称R属于&…

分割模型Maskformer系列

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

linux安装Redis 7.2.4笔记

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