2020前端面试 - JavaScript2.0篇

前言:

个人觉得面试其实是一个自我学习的过程,如果说短时间内找不到工作,那一定是你面的还不够多,不要气馁,不要放弃,在心底告诉自己,下一次面试,再下一次面试,一定能够拿到OFFER。

平常开发过程中,可能疏于学习,但是面试的时候,就逼得你不得不去学习一些新的东西,巩固一些基础的知识。

在面试中进取,你会发现不懂的东西还有那么多,对于未来发展方向和把控也有一定的认知和理解,所以,我觉得这是一件好事,一个自我充电的过程。

希望总结的知识,能够帮到更多的人,有些东西,我也还在摸索中,一起学习吧!少年~~

1. 钩子函数和回调函数的区别
  • 很明显的差别就是:钩子函数在捕获消息的第一时间就执行,而回调函数是捕获结束时,最后一个被执行的。

  • 回调函数其实是调用者将回调函数的指针传递给了调用函数,当调用函数执行完毕后,通过函数指针来调用回调函数。而钩子函数在消息刚发出,没到达目的窗口前就先捕获了该消息,先得到控制权执行钩子函数,所以他可以加工改变该消息,当然也可以不作为,还可以强行结束该消息。

2. MVC模式
  • 所有通信都是单向的。

  • MVC模式的意思是,软件可以分成三个部分
    1.视图(View):用户界面。
    2.控制器(Controller):业务逻辑
    3.模型(Model):数据保存

  • 各部分之间的通信方式如下
    1.View 传送指令到 Controller
    2.Controller 完成业务逻辑后,要求 Model 改变状态
    3.Model 将新的数据发送到 View,用户得到反馈

  • 互动模式 - 接受用户指令时,MVC 可以分成两种方式
    1.一种是通过 View 接受指令,传递给 Controller
    2.另外一种是直接通过Controller接受指令。

  • 实例:Backbone 实际项目往往采用更灵活的方式
    1.用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。
    2.用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View
    3.Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。所以,Backbone 索性取消了 Controller,只保留一个 Router(路由器) 。

3. MVP模式
  • MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
    1.各部分之间的通信,都是双向的。
    2.ViewModel 不发生联系,都通过 Presenter 传递。
    3.View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
4. MVVM模式
  • MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。
  • 唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。
  • 相比前两种模式,更加的高效,简洁,操作性和复用性也搞
5. 关于MVVM的优缺点
  • 优点

  • 方便测试
    MVC下,Controller基本是无法测试的,里面混杂了个各种逻辑,而且分散在不同的地方。有了MVVM我们就可以测试里面的ViewModel,来验证我们的处理结果对不对(Xcode7的测试已经越来越完善了)。

  • 便于代码的移植
    比如iOS里面有iPhone版本和iPad版本,除了交互展示不一样外,业务逻辑的Model是一致的。这样,我们就可以以很小的代价去开发另一个App。(以前做公司iPad的时候就深深感觉到,全部在VC里面是多么的痛苦和重新开发一个没有啥区别)。

  • 兼容MVC
    MVVMMVC的一个升级版,目前的MVC也可以很快的转换到MVVM这个模式。VC可以省去一大部分展示逻辑。

  • 缺点
    类会增多,每个VC都附带一个ViewModel,类的数量*2

  • ViewModel会越来越庞大
    我们把逻辑给了ViewModel,那势必Model也会变得很复杂,里面的属性和方法越来越多。可能重写的方法比较多,因为涉及到一些数据的转换以及和Controller之间的通信。

  • 调用复杂度增加
    由于数据都是从ViewModel来,想想突然来了一个新人,一看代码,不知道真实的模型是谁。比如常用Tableview的数据源,一般都是一个数组,如果不断的通过ViewModel去取,沟通上没有那么直接。况且每封一层,意味着要写很多代码去融合他们的转换。

6. 如何理解大前端时代
  • 简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。

  • 由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次,但是面向用户的产品可能有很多,例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样,代码无法复用,非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢?大前端应运而生,其实大前端的主要核心就是跨平台技术,有了跨平台技术,各个平台的差异性就抹平了,开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。

  • 目前的主流跨平台方案:Cordova/phoneGap、React Native、Weex、微信小程序、PWA和Flutter等,根据其原理性,可以分为三大类。
    1.H5+原生(Cordova、Ionic、微信小程序)
    2.JavaScript开发+原生渲染 (React Native、Weex、快应用)
    3.自绘UI+原生(Flutter)
    4.增强版Web App(PWA)
    5.接下来简单介绍这三种跨平台方案。

  • H5+原生混合开发
    这种模式又称为Hybrid开发,现在很多App都用这种模式去开发,常见的有微信、淘宝、美团、爱奇艺等知名移动应用等。国内也有很多公司使用Hybrid模式去开发平台,供开发者使用,像Dcloud、AppCan、Inoic等,基本上都是参考Cordova衍生出的混合开发框架。

  • JavaScript开发+原生渲染

  • 这类开源框架的代表主要是Facebook的React Native、阿里的Weex,当然也有未开源的美团的Picasso,以及最新推出的快应用。

  • JavaScript开发+原生渲染的方式主要优点如下:
    1.采用Web开发技术栈,社区庞大、上手快、开发成本相对较低。
    2.原生渲染,性能相比H5提高很多。
    3.动态化较好,支持热更新。

  • 当然也有缺点如下:
    1.渲染时需要JavaScript和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿。
    2.JavaScript为脚本语言,执行时需要JIT,执行效率和AOT代码仍有差距。
    3.由于渲染依赖原生控件,不同平台的控件需要单独维护,并且当系统更新时,社区控件可能会滞后;除此之外,其控件系统也会受到原生UI系统限制,例如,在Android中,手势冲突消歧规则是固定的,这在使用不同人写的控件嵌套时,手势冲突问题将会变得非常棘手。

7. React Native
  • React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和Android两个平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

  • React Native的原理和React设计一致,React中虚拟DOM最终会映射为浏览器DOM树,而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。

  • JavaScriptCore 是一个JavaScript解释器,它在React Native中主要有两个作用:
    1.为JavaScript提供运行环境。
    2.是JavaScript与原生应用之间通信的桥梁,作用和JsBridge一样,事实上,在iOS中,很多3.JsBridge的实现都是基于 JavaScriptCore 。

  • 而RN中将虚拟DOM映射为原生控件的过程中分两步:
    1.布局消息传递; 将虚拟DOM布局信息传递给原生
    2.原生根据布局信息通过对应的原生控件渲染控件树
    3.由于React Native是原生控件渲染,所以性能会比混合应用中H5好很多,同时React Native是Web开发技术栈,只需维护一份代码,即可在多个平台上使用。

8. TypeScript
  • TypeScript是 JavaScript 的一个超集,主要提供了类型系统对 ES6 的支持,它由 Microsoft 开发。

  • TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

  • TypeScript 增加了代码的可读性和可维护性
    1.类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了
    2.可以在编译阶段就发现大部分错误,这总比在运行时候出错好
    3.增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等

  • TypeScript 非常包容
    1.TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可
    2.即使不显式的定义类型,也能够自动做出类型推论
    3.可以定义从简单到复杂的几乎一切类型
    4.即使 TypeScript 编译报错,也可以生成 JavaScript 文件
    5.兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取

  • TypeScript 拥有活跃的社区
    1.大部分第三方库都有提供给 TypeScript 的类型定义文件。
    2.Google 开发的 Angular2 就是使用 TypeScript 编写的。
    3.TypeScript 拥抱了 ES6 规范,也支持部分 ESNext 草案的规范。

  • TypeScript 的缺点
    1.有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念。
    2.短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本。
    3.集成到构建流程需要一些工作量。
    4.可能和一些库结合的不是很完美。

最后编辑于:2024-10-01 17:42:11


喜欢的朋友记得点赞、收藏、关注哦!!!

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

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

相关文章

基于Matlab使用蚁群算法寻找最优路径

基于Matlab使用蚁群算法寻找最优路径 与Dijkstra算法使用相同的地图。 每只蚂蚁都从起点出发,直到抵达终点。这与Example5_1.m 中解决旅行商问题不一样,旅行商问题中每一代的蚂蚁都是随机从一个节点出发。 文件说明 Example5_1.m 简单对参考资料2中的…

路由器原理和静态路由配置

一、路由器的工作原理 根据路由表转发数据 接收数据包→查看目的地址→与路由表进行匹配找到转发端口→转发到该端口 二、路由表的形成 它是路由器中维护的路由条目的集合,路由器根据路由表做路径选择,里面记录了网段ip地址和对应下一跳接口的接口号。…

uniapp学习(004-2 组件 Part.2生命周期)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第31p-第p35的内容 文章目录 组件生命周期我们主要使用的三种生命周期setup(创建组件时执行)不可以操作dom节点…

最新CSS入门总结

CSS(层叠样式表)是一种用于网页样式设计的语言,它通过为 HTML 标签添加样式来控制网页的外观和布局。CSS 可以设置元素的颜色、字体、间距、对齐方式等,还可以用于创建响应式设计,以适应不同设备的屏幕尺寸。CSS 是前端…

再给我两分钟,我能教会你使用 nvm 一键搞定node 和 npm

1. nvm简介 NVM(Node Version Manager)是Node.js的版本管理工具,它允许用户在同一台机器上安装和管理多个Node.js版本。这对于需要在不同项目之间切换Node.js版本的开发者来说非常有用,因为不同的项目可能依赖于不同版本的Node.js…

CAN总线通信协议

目录 一、CAN总线的介绍 二、主流通信协议对比 1.CAN硬件电路 三、CAN电平标准 四、CAN总线帧格式 1.CAN总线的5种类型帧 2.CAN总线的帧介绍 1.CAN总线的两种数据格式(标准格式与扩展格式) 2.遥控帧 3.错误帧 4.过载帧 5.帧间隔 3.位填充 4…

golang必备项目管理机制:工作区

在 Go 1.18 及以后的版本中,工作区(Workspace)是一种新的项目管理方式,可以让多个项目共享同一个模块缓存和依赖。这意味着你不需要在每个项目中单独安装依赖,而是可以共享依赖,这样可以节省空间和时间。 假…

CUDA 运行时GPU信息查询

cuda 官网文档名&#xff1a;CUDA_Runtime_API 运行时API查询GPU信息 调用 cudaDeviceProp prop; cudaGetDeviceProperties(&prop, device_id) 定义 由此可见&#xff0c;只能在主机上调用。 #include <cuda_runtime.h>#include <iostream> #include <…

ConditionVideo: 无训练的条件引导视频生成 | AAAI 2024

作者&#xff1a;彭博&#xff0c;上海人工智能实验室与上海交大2023级联培博士。 最近的工作已经成功地将大规模文本到图像模型扩展到视频领域&#xff0c;产生了令人印象深刻的结果&#xff0c;但计算成本高&#xff0c;需要大量的视频数据。在这项工作中&#xff0c;我们介…

游戏如何应对薅羊毛问题

在大众眼里&#xff0c;“薅羊毛”是指在电商领域&#xff0c;“羊毛党”利用平台、商家的促销规则&#xff0c;低价获取商品和服务的行为。如前不久“小天鹅被一夜薅走7000万”的案例震惊全网。 然而实际上&#xff0c;“薅羊毛”现象不仅存在于电商场景&#xff0c;在游戏中…

设计模式之适配器模式(通俗易懂--代码辅助理解【Java版】)

文章目录 设计模式概述1、适配器模式2、适配器模式的使用场景3、优点4、缺点5、主要角色6、代码示例1&#xff09;UML图2&#xff09;源代码&#xff08;1&#xff09;定义一部手机&#xff0c;它有个typec口。&#xff08;2&#xff09;定义一个vga接口。&#xff08;3&#x…

docker入门-快速学会docker

死记硬背一张图 镜像类似于我们是使用的虚拟机&#xff0c;创建虚拟机前需要下载的系统镜像文件&#xff0c;比如iso文件&#xff0c;img文件等等这样一些镜像文件。 容器可以比作正在运行中的一个虚拟机。 tar文件&#xff0c;tar文件类似于vm使用时的vmdk文件。通过load指…

在 Docker容器中安装 ROS-Melodic 并使用 rviz 进行图形化显示

文章目录 写在前面1. 背景描述2. 安装步骤2.1 允许本地机器上的用户或进程连接到 X server2.2 拉取 docker 镜像2.3 使用镜像osrf/ros:melodic-desktop-full创建并运行容器2.4 运行 roscore2.5 运行 rviz 参考链接 写在前面 自己的测试环境&#xff1a; Ubuntu20.04&#xff0…

面网易后台开发居然遇到了一个困难难度算法题

在提供面经的同学中&#xff0c;竟然有同学在面试网易后台研发的时候遇到了一道困难难度的算法题。 一般来说&#xff0c;大多数面试的算法题都是以中等难度为主&#xff0c;遇到困难难度的算法题也许是公司现在不缺人、也许是在选拔人才、当然也很可能是面试官其实并不想要你…

在三维可视化项目中,B/S和C/S架构该如何选择?

一、什么是B/S和C/S 在3D数据可视化中&#xff0c;有两种常见的架构模式&#xff1a;BS&#xff08;Browser/Server&#xff09;和CS&#xff08;Client/Server&#xff09; B/S模式 B/S模式是指将3D数据可视化的逻辑和处理放在服务器端&#xff0c;而在客户端使用浏览器进行…

前端新机部署

编辑器&#xff1a;vscode 下载地址 vscode常用插件 显示代码修改历史、作者等信息 GitLens Nodejs版本 Node版本管理工具 Nvm下载地址 nvm常用命令&#xff1a; nvm ls // 查看安装的所有node.js的版本nvm list available //查看可以安装的所有node.js版本nvm install 版本…

Linux:Ubuntu系统开启SSH服务

在Ubuntu上开启SSH服务&#xff0c;可以按照以下步骤进行&#xff1a; 1.安装OpenSSH服务 如果你还没有安装OpenSSH服务&#xff0c;可以使用以下命令安装&#xff1a; sudo apt update sudo apt install openssh-server2. 启动SSH服务 安装完成后&#xff0c;启动SSH服务&a…

Docker在linux系统中的下载与使用

Docker在linux系统中的下载与使用 一、docker作用,下载及安装二、docker镜像三、创建容器四、容器数据卷 一、docker作用,下载及安装 ubuntu下载安装docker 命令&#xff1a;在ubuntu上面执行这个命令 Docker version:查看docker是否安装成功 配置阿里云镜像加速:进入阿里云网站…

【WEB应用安全测试指南–蓝队安全测试2】--超详细-可直接进行实战!!!亲测-可进行安全及渗透测试

安全基础理论入门知识参考上一篇《WEB应用安全测试指南蓝队安全测试1》 WEB应用安全测试指南2 一、文件 I/O 类1.1、任意文件上传1.2、任意文件下载1.3、文件包含 二、接口安全类2.1、短信炸弹2.2、邮件炸弹2.3、短信内容可控2.4、邮件内容可控 三、逻辑流程类3.1、越权3.2、未…

k8s部署jenkins集群,配置集群kubernetes plugin的pod模板

先安装jenkins插件&#xff0c;对应的源码地址是kubernetes-plugin&#xff0c;以供参考。 进入节点管理&#xff0c;开始配置。 点击 “ configure clouds” 一、配置集群 填写k8s地址&#xff1a;https://kubernetes.default.svc.cluster.local 命名空间&#xff1a;kuberne…