2022前端面试总结及答案 |
您所在的位置：网站首页 › vue前端面试题2022及答案 › 2022前端面试总结及答案 |
2022前端面试总结及答案
|
文章目录一、vue3.0篇二、vue2.0篇1. vue生命周期？2. vuex是什么？以及组件传值？3.vue中自定义指令如何使用？4. 自定义指令的生命周期5. vue中的过滤器如何使用？6.组件通信？1. 父子组件之间传值（五种方式）- 父组件设置属性传，子组件通过props接收- this.p a r e n t 和 t h i s . parent和this.parent和this.children也可以获取到子组件的值- 父组件provide提供变量 子组件inject注入需要的数据- $ attrs、$listeners- slot插值传值2. 非父子组件(三种方式)- 子组件$emit触发，父组件on监听- Vuex，commit进仓库，然后使用getters获取- 公共bus7. 请解释一下vue中的单向数据流的理解？8. 请说什么是动态组件，如何使用，以及keep-alive的作用9. 第一次页面加载会触发哪几个钩子?10.简述每个周期具体适合哪些场景11.$nextTick的使用12.assets和static的区别？13.vue常用的修饰符14.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？15. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？16.Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？17.你知道vue中key的作用和工作原理吗？说说你对它的理解。18.你怎么理解vue中的diff算法？19. 谈一谈对vue组件化的理解？20. 谈一谈对vue设计原则的理解？21. 你了解哪些Vue性能优化方法？22. 单页面应用和多页面应用区别及优缺点23. 父子组件之间的生命周期顺序24. vue中组件创建的方式有哪些？25. 在Vue中怎么添加一个超链接？26. Vue中EventBus的实现27. vue组件的全局注册和局部注册28.vue数据双向绑定的原理(2.0和3.0)29. 虚拟doms30. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？31. 路由守卫- 全局钩子有beforeEach、beforeResolve(2.5后新增)、afterEach- 单个路由独享beforeEnter- 组件路由守卫:beforeRouteEnter,beforeRouteUpdata,beforeRouteLeave32. vue如何引入第三方库，比如jquery？33. vue要做权限管理该怎么做，如果控制到按钮级别的权限该怎么做？34. vue和jQuery的区别35. 引进组件的步骤36. slot37. MVVM模式和MVM模式38. Vue监听键盘事件39.Watch怎么深度监听对象变化40.Vue路由实现的原理？2.history41.Vue的路由如何传参？以及params和query的区别？42.关于Vue的优缺点，你知道哪些？43.vue中使用mixins44.组件化和模块化的区别？45.vue数据丢失的4中情况&解决方法三、axios请求1.axios的特点有哪些？2. axios有哪些常用方法？3. 封装axios四、AJAX1.什么是ajax？2.ajax轮询？四、ES5五、ES6六、ES7- Array.prototype.includes()- 求幂运算Math.pow(3, 2)七、ES81.async await2.Object.entries()和Object.values()- Object.entries()- Object.values()返回键值中的值3.字符串填充：padStart和padEnd4.Object.getOwnPropertyDescriptors()八、移动端1、移动端怎么做不同机型的适配1.设置Meta2.css3媒介查询3.设置rem第二种lib-flexible + px2rem-loader2、移动端项目如何解决300ms延迟问题？3、点击穿透4、px,em,rem,vw,vh代表什么？5、如何把px转为rem？九、CSS1.垂直水平居中1.知道宽高，父元素relative，子元素absolute，top&left是50%，margin-top和margin-left再拉回自身高宽的一半2.不知道宽高，子元素absolute + transform3.子元素设为行内元素display: inline-block;vertical-align: middle水平居中;liine-height: initial;垂直居中4.flex布局(无语，千万别记反)2.display的相关3.清除浮动4. 用纯CSS创建一个三角形的原理是什么？5.为什么要初始化CSS样式6. absolute、fixed、relative7. flex布局8.圣杯模式9.双飞翼模式10.CSS浏览器前缀兼容写法11.上下两个盒子的margin一个是20，一个是30，他们两的间距是多少？12.什么是BFC?13.IE盒子模型和标准子模型的区别？十、C32.优雅降级和渐进增强的区别？十一、H5十二、跨域1. vue中的proxy2. jsonp跨域(只能get请求)3. CORS(后端设置)4.nginx十三、算法1.数组去重十四、JavaScript1.闭包2. 构造函数、原型、原型链2.继承3.事件冒泡、事件委托、事件捕获3. 什么是面向对象？什么是面向过程？3.1面向对象编程：3.2面向过程编程：3.3 解决办法:使用对象：解决全局变量污染的问题(工作中最常用的方式)3.4使用原型可以同时解决上面三个弊端4.js异步宏任务和微任务十五、Jquery11.1为什么使用jquery，有什么优点?11.2 jQuery中的选择器11.3 jQuery的美元符号$有什么作用？11.4 window.onload和$(document).ready()11.5使用jQuery中的动画11.6jQuery中使用过哪些插入节点的方法，他们的区别是什么11.7jQuery中如何来获取和设置属性11.8如何来设置和获取HTML和文本的值？11.9jQuery中有哪些方法可以遍历节点？11.10说出jQuery中常见的几种函数以及他们的含义是什么?11.11jQuery使用ajax十六、前端安全问题- xxs跨站脚本攻击（恶意注入html代码）- CSRF攻击(跨站请求伪造)- SQL注入攻击十七、浏览器1cookie、seesion、token的异同点1.1 cookie1.2 seesion1.3 token2.前端本地缓存的三种方式2.1 sessionStorage2.2 localStorage2.3 Cookies十八、手写代码6.继承十九、react篇1. 什么是React？2.React有什么特点？3. React有哪些限制？4. 什么是JSX?5. 你了解 Virtual DOM 吗？解释一下它的工作原理。6. 为什么浏览器无法读取JSX?7. 与ES5相比，React的ES6语法有何不同？ 一、vue3.0篇 https://blog.csdn.net/weixin_44700978/article/details/109301851 二、vue2.0篇 1. vue生命周期？vue生命周期分为八个阶段：创建前后，挂载前后，更新前后，销毁前后 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed2. vuex是什么？以及组件传值？vue的状态管理框架，数据持久化。this.s t o r e . c o m m i t ( ) 进 仓 库 t h i s . store.commit()进仓库 this.store.commit()进仓库this.store.state()取值具体看:https://blog.csdn.net/weixin_44700978/article/details/109193214 3.vue中自定义指令如何使用？两种使用方式: 局部注册 //VUE文件： 输入框： export default { data() { return { } }, directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }, created() {}, methods:{} };全局注册 1. 新建一个文件directive/directives.js利用Vue.directive()并暴露 import Vue from 'vue'; Vue.directive('focus',{ //当绑定元素插入到DOM中 inserted: function(el){ el.focus(); //元素聚焦 el.setAttribute('placeholder','自定义内容'); } }) Vue.directive('***',{ inserted: function(el){ //.... } }) export {Vue}
2. main.js引入 import directive from './components/global/directives';
3. 页面使用
4. 如果指令需要传值或者多个值 Vue.directive('demo',function(value){ console.info(value.color); //white console.info(value.text) // hello! }) var demo = new Vue({ el : '#demo' }) ---------- 参考地址:https://www.gxlcms.com/JavaScript-53105.html4. 自定义指令的生命周期 bind,inserted,update,componentUpdated,unbind 1>bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。 2>inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。 3>update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。 4>componentUpdated:被绑定元素所在模板完成一次更新周期时调用。 5>unbind:只调用一次，指令与元素解绑时调用。5. vue中的过滤器如何使用？ 使用在双花括号插值和 v-bind 表达式局部过滤器权重大于全局过滤器 局部过滤器:filters var vm = new Vue({ el: '#app', data: { msg: '温小鹿' }, methods: {}, //定义私用局部过滤器。只能在当前 vue 对象中使用 filters: { dataFormat(msg) { return msg+'xxxxx'; } } });全局过滤器：创建 Vue 实例之前全局定义过滤器： Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) new Vue({ // ... })
6.组件通信？1. 父子组件之间传值（五种方式）- 父组件设置属性传，子组件通过props接收- this.p a r e n t 和 t h i s . parent和this.parent和this.children也可以获取到子组件的值- 父组件provide提供变量 子组件inject注入需要的数据
// 父级组件提供 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // 子组件注入 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... } 官网文档写的很清楚了：https://cn.vuejs.org/v2/api/#provide-inject - $ attrs、$listeners https://zhuanlan.zhihu.com/p/388016979 - slot插值传值 子组件slot通过属性传递 父组件v-slot="slotProps" 或者slot-scope="slotProps"（2.6+废弃）
参考：https://www.jianshu.com/p/758d9780dab8https://juejin.cn/post/7009854993284988941 2. 非父子组件(三种方式) - 子组件$emit触发，父组件on监听 - Vuex，commit进仓库，然后使用getters获取 - 公共bus 7. 请解释一下vue中的单向数据流的理解？ 单向数据流就是：数据总是【向下传递】从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据，当尝试在子组件内部修改父组件的数据，vue将报错。主要是为了组件解耦。（假如子组件可以修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，发生连锁反应，所以vue不推荐子组件修改父组件数据，直接修改props会抛出警告如果要改变父组件的值
8. 请说什么是动态组件，如何使用，以及keep-alive的作用 动态组件：让多个组件使用同一个挂载点，并动态切换。通过使用保留的 元素，动态地绑定到它的 :is 特性，根据:is="组件名"去自动匹配组件，如果匹配不到则不显示。 Vue 测试实例 - 动态组件 点击显示子组件 // 创建根实例 new Vue({ el: '#app', data:{ show:'first' }, methods:{ toShow:function(){ var arr = ["first","second","third"]; var index = arr.indexOf(this.show); if(indexmounted->activated deactivated：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activatedkeep-alive的用法： 9. 第一次页面加载会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 10.简述每个周期具体适合哪些场景 * beforecreate : 可以在这加个loading事件，在加载实例时触发 * created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 * mounted : 挂载元素，获取到DOM节点 * updated : 如果对数据统一处理，在这里写上相应函数 * beforeDestroy : 可以做一个确认停止事件的确认框 * nextTick : 更新数据后立即操作dom11.$nextTick的使用 当你修改了data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值， 你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。什么时候需要 $nextTick？ Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 更改数据后想立即使用js操作新的视图 12.assets和static的区别？都是存放静态资源文件的，assets打包的时候会编译，static不会编译。assets可以放一些Js会进行编译，static可以放一些第三方文件，比如字体图标 13.vue常用的修饰符 stop：等同于Js中的event.stopPropagation()，防止事件冒泡 .prevent:等同于js中的event.preventDefault()，阻止默认事件 .capture:与事件冒泡的方向相反，事件捕获由外到内 .self:只会触发自己范围内的事件，不包含子元素 once: 只会触发一次14.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？ Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。 15. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？v-for比v-if的优先级更高一些，如果同时出现，每次渲染都会执行循环再判断条件，无论如何循环都不可避免，浪费性能。解决办法就是： 外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环 如果条件出现在循环的内部，可通过计算属性提前过滤掉不需要的项 16.Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？如果使用对象，内存地址是一样的，会污染其他实例的状态。根实例只有一个，就不用担心污染，所以是对象。组件可能存在多个实例，给组件实例创建自己的私有数据空间。 17.你知道vue中key的作用和工作原理吗？说说你对它的理解。为了高效的更新DOM，通过key可以判断出两个dom节点是否相同，减少dom操作，提高性能 18.你怎么理解vue中的diff算法？对比新旧节点当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。 19. 谈一谈对vue组件化的理解？组件化可复用，高内聚、低耦合的；-遵循单向数据流的原则。 20. 谈一谈对vue设计原则的理解？ 渐进式JavaScript框架 易用、灵活和高效 21. 你了解哪些Vue性能优化方法？1.路由懒加载
2.keep-alive缓存https://blog.csdn.net/weixin_42646130/article/details/933332073.Webpack优化1.修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，并且在生成环境是可以通过map去查看到源码的，这样会造成源码泄漏，这里建议大家设置为false。productionGzip设置为true可以开启gzip压缩，使打包过后体积变小。
2.使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件,在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式引入需要的插件。
4.按需加载 22. 单页面应用和多页面应用区别及优缺点优点：快。内容改变不需要改变整个页面，局部刷新就行，减少服务器的压力；缺点：不利于seo搜索. 第一次加载比较慢（不要生成。map文件，这个文件是用来查看样式和结构的，懒加载：异步引入路由页面）
23. 父子组件之间的生命周期顺序 加载渲染过程 ->父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 子组件更新过程 ->父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 父组件更新过程 父beforeUpdate -> 父updated 销毁过程 -> 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed 24. vue中组件创建的方式有哪些？ 有三种方式，如下： 1.使用Vue,extend来创建 2.直接使用Vue.component创建 3.在被控制的#app外面，使用template元素，定义组件的HTML模板结构 25. 在Vue中怎么添加一个超链接？ My site 一个Vue table问题26. Vue中EventBus的实现 main.js中挂载到原型上 Vue.prototype.$EventBus = new Vue();触发： this.$EventBus.$emit('eventName', param1,param2,...)监听： this.$EventBus.$on('eventName', (param1,param2,...)=>{ //需要执行的代码 })移除监听 this.$EventBus.$off('eventName');27. vue组件的全局注册和局部注册 全局注册在main.js里注册 Vue.component(组件名称，为组件创建时定义的变量) import goTo from '../component/goTo' Vue.conponent('goTo', goTo) 局部注册组件局部注册：只有注册了该组件的页面才可以使用 import User from './components/User' export default { name: 'App', components: { HelloWorld, User } }28.vue数据双向绑定的原理(2.0和3.0) 2.0 1.difineProperty挟持各个属性的getter，setter，在数据变动时发布消息给订阅者，触发响应的监听回调 2.observe(观察者)对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。 3.watch(订阅者)订阅observe并通知compile 4.compile初始化模板并更新视图 3.0 利用proxy代理整个对象 29. 虚拟doms原生的js去描述一个DOM节点，速度快，不操作真实的dom，代码不会冗杂虚拟dom原理流程:模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM 30. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？都行，但是vuex里的store是一个全局变量，性能上尽量不使用全局变量，而且vuex是状态管理框架，尽量简而又简单。请求代码放api.js里就可。 31. 路由守卫- 全局钩子有beforeEach、beforeResolve(2.5后新增)、afterEach router.beforeEach((to, from, next) => { console.log(to) => // 到哪个页面去？ console.log(from) => // 从哪个页面来？ next() => // 一个回调函数 } router.afterEach（to，from） = {}- 单个路由独享beforeEnter export default new VueRouter({ routes: [ { path: '/', name: 'home', component: 'Home', beforeEnter: (to, from, next) => { // ... } } ] }) - 组件路由守卫:beforeRouteEnter,beforeRouteUpdata,beforeRouteLeave // 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫 beforeRouteEnter (to, from, next) { // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例 next(vm => {}) } beforeRouteUpdate (to, from, next) { // 同一页面，刷新不同数据时调用， } beforeRouteLeave (to, from, next) { // 离开当前路由页面时调用 }
32. vue如何引入第三方库，比如jquery？很多方式：webpack中配置 alias，import 引入webpack 中配置 plugins，无需 import 全局可用 33. vue要做权限管理该怎么做，如果控制到按钮级别的权限该怎么做？按钮权限管理获取权限表，判断用户是否有权限，然后再if判断可选不可选34. vue和jQuery的区别vue是框架，jquery是js库。框架是项目的核心，对项目入侵较大，中途想换，不好操作，jquery对项目入侵较小。 35. 引进组件的步骤Vue.component（）注册 再引进 36. slot不具名插槽父组件引入子组件，子组件使用封装的返回顶部公共的包裹router-view
具名插槽
37. MVVM模式和MVM模式 MVVMMVVM就是模型-视图-视图模型层。这个模式实现视图和视图模型层的双向绑定。典型的情况是，View Model通过使用obsever模式（观察者模式）来将View Model的变化通知给model。 
关键点：1、用户和View交互。2、View和ViewModel是一对一关系，也就意味着一个View只能映射到一个ViewModel。3、View持有ViewModel的引用，但是View没有任何Model的信息。4、View 和ViewModel之间有双向数据绑定关系。MVCMVC就是模型-视图-控制。通信是单向的。
1、View传送指令到Controller2、Controller完成业务逻辑后，要求Model改变状态3、Model将新的数据发送到View，用户得到反馈 38. Vue监听键盘事件 别名 含义 .enter 鼠标进入 .tab Tab .delete 捕获“删除”和“退格”键
39.Watch怎么深度监听对象变化 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。） 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。 40.Vue路由实现的原理？ 两种方式: Hash — 默认值，利用 URL 中的hash("#"),刷新不会请求数据 history-- 利用URL中的路径（/home），刷新会请求数据2.history 前端路由改成history，部署之后，nginx配置try_files指令
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 41.Vue的路由如何传参？以及params和query的区别？ - router-link 的to去传参 - this.$router.push() 接收的时候this.$route.params或者this.$route.query > params和query的区别 > 1、params传参必须配置路由表，name引入路径，请求不会显示在地址栏 > 传参: this.$router.push({ name:'xxx' params:{ id:id } }) > 2、query要用path来引入，请求会显示在地址栏 > this.$router.push({ path:'/xxx' query:{ id:id } })42.关于Vue的优缺点，你知道哪些？ 优点：组件化，数据双向绑定，轻便、高效、易上手，中文文档；缺点：兼容性差，不利于SEO 优化，第一次加载白屏时间长，容易造成数据丢失。 43.vue中使用mixins 局部引入写js文件，暴露出去，引入mixins:[名字]，用的时候和当前组件用的一样，{{}}和this.(方法名) 全局混入 Vue.mixin({ created() { console.log('全局混入的钩子函数'); } });
还有注册引入，这个博主写的很清晰了，就懒了懒了。https://www.cnblogs.com/fengyuexuan/p/10918011.html 44.组件化和模块化的区别？组件化和模块化的区别 组件:就是把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用） 模块化开发:分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，独立管理，每个模块有很多接口，可供调用45.vue数据丢失的4中情况&解决方法 {{ colors }} {{ obj }} {{ intro }} export default { data() { return { colors: ["red", "green", "blue"], obj: {}, }; }, mounted() { // 1 数组中的值类型修改 this.colors[1] = "pink"; // 2 数组中的新成员 this.colors[3] = "gold"; // 3 对象中的新属性 this.obj.size = 200; // 4 未初始化的数据 this.intro = "111111"; }, }; 解决方法：第1,2种情况 使用新数组替换之前的老数组 this.colors = ["red", "pink", "blue","gold"]
第3种情况 使用新对象替换之前的老对象 this.obj = {siz: 200}
第4种情况 初始化这类数据即可 data() { return { colors: ["red", "green", "blue"], obj: {}, intro: '' // 初始化info }; },
除此之外，还可以使用vue提供的$set方法 this.$set(this.colors, 1, pink) // 修改数组的数据 this.$set(this.obj, 'size', 200) // 修改对象的数据三、axios请求 1.axios的特点有哪些？ 1、axios是一个基于promise的HTTP库，支持promise的所有API；2、它可以拦截请求和响应；3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；4、它安全性更高，客户端支持防御XSRF 2. axios有哪些常用方法？
3. 封装axios 大概说一些流程吧，后期再补 > 1. 设置开发和生产的请求地址 > 2.设置默认的信息:超时时间、post默认请求头、引入Qs > 3.设置请求拦截器(携带token或者加loding) > 4.设置响应拦截器(根据后端返code跳转页面，做出响应) > 5. `封装get,post请求，统一Api管理四、AJAX 1.什么是ajax？ 异步的JavaScript和XML(传输数据的可扩展标记语言) 2.ajax轮询？封装一个函数，用setInterval间隔时间去发起请求 setInterval("函数名()", 500); function 函数名(){ $.ajax({ url: '/new_window_url/', async:true, type: '', success: function (data) {} }) }async. 默认是 true，即为异步方式，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。 async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 四、ES5
五、ES6
六、ES7 - Array.prototype.includes() includes()的作用，是查找一个值在不在数组里，若在，则返回true，反之返回false indexOf()与includes()区别 检测数组或字符串中是否包含某一个元素 indexOf返回的是数值类型，而includes返回的是布尔类型 indexOf不能判断数组中是否含有NaN，而includes可以 let arr = [1,2,3,NaN] console.log(arr.indexOf(NaN))//-1 console.log(arr.includes(NaN))//true- 求幂运算Math.pow(3, 2) 七、ES8 1.async await 2.Object.entries()和Object.values() - Object.entries() 把键值按照二位数组返回。若目标对象是数组时，则会将数组的下标作为键值返回。 Object.values({ one: 1, two: 2 }) //[1, 2] Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']
- Object.values()返回键值中的值3.字符串填充：padStart和padEnd4.Object.getOwnPropertyDescriptors()返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的 八、移动端1、移动端怎么做不同机型的适配1.设置Meta - initial-scale：初始化缩放，- initial-scale=1.0：不缩放 - user-scalable：是否允许用户自行缩放，取值0或1，yes或no - name:viewport描述网页 - content:便于搜索引擎机器人查找信息和分类信息用的 - width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ） - height: viewport 的高度 （范围从 223 到 10,0002.css3媒介查询
3.设置rem 一种是创建rem.js引入main.js＋下载插件postcss-pxtorem自动把px转为rem 另一种是下面这种 第二种lib-flexible + px2rem-loader https://blog.csdn.net/weixin_44700978/article/details/119519699 2、移动端项目如何解决300ms延迟问题？FastClick 3、点击穿透 1.meta 标签设置 width=device-width 和 user-scalable=0 2. 阻止冒泡event.stopPropagation(); 3. 使用fastclick库 4.不要混用touch和click4、px,em,rem,vw,vh代表什么？ px是针对于显示屏屏幕分辨率而言的 em是相对于父元素字体大小 rem是相对于html元素的 vw、vh，直接根据视口宽高适配。 5、如何把px转为rem？ 1、创建rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }
引自： https://blog.csdn.net/weixin_44700978/article/details/108954892 https://blog.csdn.net/weixin_44700978/category_9544881.html |
【本文地址】