大厂前端开发笔试题 答题说明做题时间: 30分钟,能做多少做多少加分项:使用TypeScript/ES6编写函数有明确的输入输出类型定义明确合理边界情况处理完善注释清晰采用声明式编程一、函数限频已知一个分页加载的卡券列表页,只要页面滚动到底部就向服务器发起请求,加载下一页卡券数据。由于滚动事件非常频繁,过多的请求导致服务器压力很大。请编写一个函数,减少上述场景发起请求的频率/** * @param {Function} handler 逻辑函数 * @param {number} gap 间隔时
web前端面试题最全版总结 一、前端必备1、web前端性能优化1.1 性能评级工具PageSpeed 是由谷歌官方开发的一款可以分析页面载入的各个方面,包括资源、网络、DOM以及时间线等等信息的在线检测工具。(Google的插件)YSlow是Yahoo发布的一款基于FireFox(火狐浏览器)的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则进行优化。它可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意1.2 前端性能优化1、从DOM结
解决uniapp微信开发小程序背景本地图片渲染层网络层错误问题 一、首先看一下我们的源代码和报错原因1.1源代码是这个样子的1.2先来看下我们的页面1.2.1原设计图是这个样子的1.2.2而此时我们的页面1.3然后来看下我们的报错二、解决方法2.1先来看下我们的源代码把原有的background-image: url(../../static/img/hd2.png);剪切掉放到我们的template中的布局中2.2 然后再来看下我们的页面此方法是自己试出来的如果有效果的话请劳烦您的小手点个赞!!...
什么是RESTful API? 一. 定义Rest的全称是Representational State Transfer,2000年由Roy Fielding发表在他的博士论文中,首次提出了Restful的概念。Restful 做为一种接口的设计规则,基于HTTP协议 ,可以使用XML格式或JSON格式传输数据。对于使用restful这套规则定义开发的接口,我们称之为Restful API。关于Restful的具体表现形式,简单可以用一句话概括:URL定位资源,使用HTTP请求(GET、POST、PUT、DELETE等)对资源进行操作
web前端面试题必备 1、vue数据双向绑定原理vue.js 是采用数据劫持结合发布者-订阅者的模式的方法,通过Object.defineProperty()来劫持各个属性的Getter、setter,在数据变动时发送消息给订阅者。它实现的整个流程是先为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model就会添加一个订阅者,接着用input举例,为input添加监听事件,修改值就会为这个属性赋值
vue双向数据绑定原理(面试必备) 原理vue.js是采用数据劫持结合发布者-订阅者的模式的方法,通过Object.defineProperty()来劫持各个属性的Getter、setter,在数据变动时发送消息给订阅者。实现的整个流程首先为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model就会添加一个订阅者,接着为input添加监听事件,修改值就会为该属性赋值,触发该属性的set方法,在 set方法内
在微信开发程序中点击执行“构建npm“报错 一、官网给的文档写的不够充分,需要你充分理解npm的使用方法,才能明白的;二、开始步骤: 1、第一步:npm init 2、第二步:npm install --production 3、第三步: npm i vant-weapp -S --production三、还要注意一点就是微信开发者工具要更新到最新版本,不然点击工具没有构建npm这一栏,原文:https://blog.csdn.net/zfeng816/article/details/85095885...
Vue 项目性能优化 (图片优化) Webpack 对图片进行压缩在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理,对小于 limit 的图片转化为 base64 格式,其余的不做操作。所以对有些较大的图片资源,在请求资源的时候,加载会很慢,我们可以用 image-webpack-loader来压缩图片:首先,安装 image-webpack-loader :npm install image-webpack-loader --save-dev
vue 自定义指令如何使用和应用场景 作用:是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。自定义指令编写的方式有2种 1、全局自定义指令 全局的指令必须要在实例化之前进行定义 Vue.directive(参数1,参数2) 参数1: 指令的名称 参数2: 指令实现的函
vue组件封装 我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、
vue中的事件修饰符 常用的修饰符@事件.stop 阻止事件冒泡@事件.prevent 阻止事件默认行为@事件.capture 触发事件捕获@事件.self 当事件在该元素本身 触发回调@once 只执行一次@事件.passive 告诉浏览器你不想阻止事件的默认行为.使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。v-model的修饰符<1>
js的数据类型 存储 js数据类型JavaScript一共有8种数据类型:7种基本数据类型: Undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值) 和 BigInt(es10新增);1种引用数据类型: Object(Object本质上是由一组无序的名值对组成的)。里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制,而所有值最终都将是上述 8 种数据类型之一。如何存储基本数据类型:直接存储在栈(sta
vue常用指令 1、v-model多用于表单元素实现双向数据绑定2、v-for循环数组或json3、v-show显示/隐藏dom元素,通过display=block/none来控制元素显示/隐藏4、v-if判断显示/隐藏 dom元素5、v-else-if必须和v-if连用6、v-else必须和v-if连用 不能单独使用 否则报错 模板编译错误7、v-bind绑定属性v-bind:class 三种绑定方法1、对象型 ‘{red:isred}’2、三元型 ‘isred
vue中的11个生命周期 BeforeCreate(创建前)该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前,实例初始化之后被调用。在该阶段组件未创建,不能访问数据,组件中的 data,ref 均为 undefined。Created(创建后)在组件创建完成后立即调用在这一步 实例已经完成了数据观测 属性和方法的运算 watch、event事件回调但是还没有渲染成html模板 组件中的data已经存在 可以进行操作了 但是el仍然是undefiend 因为挂载
在vue中v-if和v-show的区别与使用场景 相同点都可以动态控制着dom元素的显示隐藏区别一、基于vue框架v-if:控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show:控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的二、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下;v-show适合频繁切换;...
vue中axios封装和api接口管理 vue中Axios的封装和API接口的管理我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。1. 安装npm install axios; // 安装axios2. 目录创建一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一
事件监听 1、事件监听的定义关于事件监听,W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。起初Netscape制定了JavaScript的一套事件驱动机制(即事件捕获)。随即IE也推出了自己的一套事件驱动机制(即事件冒泡)。最后W3C规范了两种事件机制,分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制(前端人员一直头痛的兼容性问题),IE9以后IE也支持了W3C规范。在Javascript中,浏览器一般分为两大类:① 基于IE内核的浏览器(版本号小于9的IE浏览器)
JS的23种设计模式 一、设计模式的分类总体来说设计模式分为三大类:创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行为型模式,共十一种:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。其实还有两类:并发型模式和线程池模式。用一个图片来整体描述一下:二、设计模式的六大原则总原则:开闭原则(Open Close
内存泄漏与垃圾回收机制 什么是内存泄漏?程序的运行需要内存,只要程序提出要求,操作系统或者运行是就必须供给内存。对于持续运行的服务进程,必须及时释放内存,否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。不再用到的内存,没有及时释放,就叫做内存泄漏。有些语言(比如c语言)必须手动释放内存,程序员负责内存管理。这很麻烦,所以大多数语言提供自动内存管理,减轻程序员的负担,这被称为"垃圾回收机制"。标题常见的内存泄漏的原因全局变量引起的内存泄漏 function leaks(){ leak = 'xxx