2020前端面试 - JavaScript2.0篇

news2024/10/21 20:03:35

前言:

个人觉得面试其实是一个自我学习的过程,如果说短时间内找不到工作,那一定是你面的还不够多,不要气馁,不要放弃,在心底告诉自己,下一次面试,再下一次面试,一定能够拿到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.coloradmin.cn/o/2213711.html

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

相关文章

为什么inet_ntoa会返回错误的IP地址?

目录 1、调用inet_addr和inet_ntoa实现整型IP与点式字符串之间的转换 1.1、调用inet_addr将点式字符串IP转换成整型IP 1.2、调用inet_ntoa将整型IP转换成点式字符串IP 2、调用inet_ntoa返回错误点式字符串IP的原因分析 3、解决多线程调用inet_ntoa返回错误点式字符串IP的办…

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

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

基于SSM的微信小程序博客管理系统(博客1)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM的微信小程序博客管理系统实现与设计,实现了管理员与用户,管理员实现了用户管理、博文信息管理、博文类型管理、我的博文管理、个人名片分享管理、签到管理…

SAP S/4 HANA 销售返利

目录 1 简介 2 后台配置 3 主数据 4 业务操作 4.1 场景 1 - 返利应计 4.2 场景 2 - 最终结算 1 简介 在过去 SAP ECC 把“返利”功能集成在了 SD 模块当中,而 SAP S/4 HANA 把“返利”集成在了结算管理功能模块当中。究其原因,主要是 ECC “返利”…

深度解析LMS(Least Mean Squares)算法

目录 一、引言二、LMS算法简介三、LMS算法的工作原理四、LMS算法的特点五、LMS算法的应用场景六、LMS算法的局限性七、总结八、进一步探讨 一、引言 自适应滤波器是一种动态调整其参数以适应变化环境的信号处理工具,广泛应用于噪声消除、信道均衡和系统识别等领域。…

算法工程师重生之第二十五天(加油站 分发糖果 柠檬水找零 根据身高重建队列 )

参考文献 代码随想录 一、加油站 在一条环路上有 n 个加油站,其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发,开始时油箱为空。…

Mysql的Innodb的RR隔离级别到底有没有解决幻读问题?

InnoDB中的repeatable read这种隔离级别通过间隙锁MVCC解决了大部分的幻读问题,但是并不是所有的幻读都能解读,想要彻底解决幻读,需要使用Serializable的隔离级别。 MVCC解决幻读 在RC中,每次读取都会重新生成一个快照&#xff…

EDM平台排行榜与工具推荐

本文总结了EDM平台排行榜,包括ZohoCampaigns、Mailchimp等。各平台在集成性、自动化、模板库等方面各具优势,适合不同规模和需求的企业。选择适合的EDM平台对营销活动成功至关重要。 1. Zoho Campaigns 简介 Zoho Campaigns是Zoho的edm平台&#xff0c…

[LeetCode] 515. 在每个树行中找最大值

题目描述: 给定一棵二叉树的根节点 root ,请找出该二叉树中每一层的最大值。 示例1: 输入: root [1,3,2,5,3,null,9] 输出: [1,3,9]示例2: 输入: root [1,2,3] 输出: [1,3]提示: 二叉树的节点个数的范围是 [0,10…

标准地图下载

官网,地图来源为中国地图出版社、国家基础地理信息中心 http://bzdt.ch.mnr.gov.cn/ 能够下载各个版本的中国地图 世界地图

python中的工具

一、Scapy Scapy是python语言编写的工具,也是一个强大的交付式数据包处理程序,能够伪造或者解码大量的网络协议数据包,能够发送、嗅探、剖析和伪造网络数据包,如端口扫描、路由跟踪、探测、攻击或网络发现等。 python3环境下&am…

2022年华为杯数学建模竞赛B题论文和代码

基于整数规划的方形件排样和组批优化问题研究 常见的板式产品如玻璃,PCB板,铝合金门窗等产品因其结构定制化程度高的特点,相关生产制造的企业往往采用“多品种小批量”的个性化生产模式。通过对客户订单的组批,预先规划好各个产品…

【2022统考真题】计算时间复杂度

目录 一、题目描述 二、思路分析 三、易错提醒 四、同级和嵌套的关系 一、题目描述 下列程序段的时间复杂度是&#xff08;&#xff09; int sum 0; for (int i 1; i < n; i * 2) for (int j 0; j < i; j) sum; A. O(logn) B. O(n) C. O(nlogn) D…

卡牌小程序开发,线上抽卡机的优势

今年以来&#xff0c;卡牌成为了一种新的潮玩方式&#xff0c;继盲盒后在度成为大众收藏娱乐的选择。卡牌的种类各异&#xff0c;以热门IP为原型&#xff0c;设计出了专属卡牌&#xff0c;具有较大的收藏价值&#xff0c;吸引了无数的消费者的关注。 随着互联网技术的发展&…

python常用的字符串方法

一、求字符串的长度 python最常用的内置函数 二、切片获取子串 获取前第5个字符 print(s[:5]) # wuzij 获取后6个字符 print(s[-6:]) # python 三、去掉多余空格 四、是否以某个串开头 五、是否包含某个子串 六、串联多串 七、分割多串 八、替换子串

施瓦辛格之女凯瑟琳和克里斯帕拉特的女儿养成了她们妈妈一个习惯

凯瑟琳施瓦辛格与克里斯帕拉特的长女莉拉和次女艾洛斯显然与其母亲极为相像&#xff0c;一张崭新且罕见的照片清晰地展露了这一情形&#xff01; 广告 10 月 13 日&#xff0c;施瓦辛格分享了一系列家人外出游玩的照片。她分享了这些甜蜜温馨的照片&#xff0c;并附上标题写道&…

链接伪类(:hover)CSS背景图片有闪动BUG的解决方法 vue3

现象&#xff1a; hover时候&#xff0c;图片还没加载出来&#xff0c;导致边框闪烁 在Vue 3中&#xff0c;如果你遇到了使用伪类(:hover)时背景图片出现闪烁的问题&#xff0c;可能是由于浏览器的渲染机制导致的。解决这个问题的方法可能包括&#xff1a; 使用background-pos…

【Go初阶】两万字快速入门Go语言

初见golang语法 package mainimport "fmt"func main() {/* 简单的程序 万能的hello world */fmt.Println("Hello Go")} 第一行代码package main定义了包名。你必须在源文件中非注释的第一行指明这个文件属于哪个包&#xff0c;如&#xff1a;package main…

中级课程RHCE

RHCE 一、复习RHCSA1.1 系统安装1.1.1 安装虚拟机1.1.2 第一个快照1.1.3 第二个快照vi编辑器1.1.4 看网关网卡 1.2 文件管理1.3 目录管理1.4 用户管理1.5 权限管理1.6 存储管理1.6.1 标准分区管理实验&#xff1a;1.6.2 逻辑卷管理实验&#xff1a;1.6.3 交换空间管理实验 …

MySQL-CRUD-基础-(详解) ┗( ▔, ▔ )┛

目录 ❄️一、新增&#xff08;Create&#xff09;&#xff1a; ☑ 1、单行数据 全列插入&#xff1a; ☑ 2、指定列插入&#xff1a; ☑ 3、多行插入&#xff1a; ❄️二、查询&#xff08;Retrieve&#xff09;&#xff1a; ☑ 1、全列查询&#xff1a; ☑ 2、指定列查询&a…