文章目录
- 一、vue3.0篇
- 二、vue2.0篇
- 1. vue生命周期？
- 2. vuex是什么？以及组件传值？
- 3.vue中自定义指令如何使用？
- 4. 自定义指令的生命周期
- 5. vue中的过滤器如何使用？
- 6.组件通信？
- 7. 请解释一下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. 虚拟doms
- 30. Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
- 31. 路由守卫
- 32. vue如何引入第三方库，比如jquery？
- 33. vue要做权限管理该怎么做，如果控制到按钮级别的权限该怎么做？
- 34. vue和jQuery的区别
- 35. 引进组件的步骤
- 36. slot
- 37. MVVM模式和MVM模式
- 38. Vue监听键盘事件
- 39.Watch怎么深度监听对象变化
- 40.Vue路由实现的原理？
- 41.Vue的路由如何传参？以及params和query的区别？
- 42.关于Vue的优缺点，你知道哪些？
- 43.vue中使用mixins
- 44.组件化和模块化的区别？
- 45.vue数据丢失的4中情况&解决方法
- 三、axios请求
- 四、AJAX
- 四、ES5
- 五、ES6
- 六、ES7
- 七、ES8
- 八、移动端
- 九、CSS
- 十、C3
- 十一、H5
- 十二、跨域
- 十三、算法
- 十四、JavaScript
- 十五、Jquery
- 十六、前端安全问题
- 十七、浏览器
- 十八、手写代码
- 十九、react篇
一、vue3.0篇
https://blog.csdn.net/weixin_44700978/article/details/109301851
二、vue2.0篇
1. vue生命周期？
vue生命周期分为八个阶段：创建前后，挂载前后，更新前后，销毁前后
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
2. 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文件：
<template>
<div class="home">
输入框：<input v-focus>
</div>
</template>
<script>
export default {
data() {
return {
}
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
},
created() {},
methods:{}
};
</script>
- 全局注册
- 新建一个文件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}
- main.js引入
import directive from './components/global/directives';
- 页面使用
<el-input v-model="input" placeholder="" v-focus></el-input>
如果指令需要传值或者多个值
<body id="example">
<div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value.color); //white
console.info(value.text) // hello!
})
var demo = new Vue({
el : '#demo'
})
</script>
----------
参考地址:https://www.gxlcms.com/JavaScript-53105.html
4. 自定义指令的生命周期
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. 父子组件之间传值（六种方式）
- 子组件$emit触发，父组件on监听
- 父组件设置属性传，子组件通过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/758d9780dab8
https://juejin.cn/post/7009854993284988941
2. 非父子组件(两种方式)
- Vuex，commit进仓库，然后使用getters获取
- 公共bus
7. 请解释一下vue中的单向数据流的理解？
单向数据流就是：数据总是【向下传递】从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据，当尝试在子组件内部修改父组件的数据，vue将报错。主要是为了组件解耦。（假如子组件可以修改父组件数据，那么一个子组件变化将会引发所有依赖这个数据的子组件发生变化，发生连锁反应，所以vue不推荐子组件修改父组件数据，直接修改props会抛出警告
如果要改变父组件的值
8. 请说什么是动态组件，如何使用，以及keep-alive的作用
动态组件：让多个组件使用同一个挂载点，并动态切换。通过使用保留的 元素，动态地绑定到它的 :is 特性，根据:is="组件名"去自动匹配组件，如果匹配不到则不显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>点击显示子组件</button>
<component :is="show"></component>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
data:{
show:'first'
},
methods:{
toShow:function(){
var arr = ["first","second","third"];
var index = arr.indexOf(this.show);
if(index<2){
this.show = arr[index+1];
}else{
this.show = arr[0];
}
}
},
components:{
first:{
template:'<div>这是子组件1<div>'
},
second:{
template:'<div>这是子组件2<div>'
},
third:{
template:'<div>这是子组件3<div>'
},
}
})
</script>
</body>
</html>
**keep-alive：**是一个抽象组件，它自身不会渲染一个DOM元素。缓存组件内部状态，避免重新渲染，造成性能消耗
keep-alive属性：
- include - 字符串或正则表达式。只有匹配的组件会被缓存。
- exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
- max - 数字。最多可以缓存多少组件实例。
keep-alive有两个生命周期：
activated:页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
keep-alive的用法：
<keep-alive>
<component>
<!-- 该组件将被缓存！ -->
</component>
</keep-alive>
9. 第一次页面加载会触发哪几个钩子?
beforeCreate, created, beforeMount, mounted
10.简述每个周期具体适合哪些场景
* beforecreate : 可以在这加个loading事件，在加载实例时触发
* created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
* mounted : 挂载元素，获取到DOM节点
* updated : 如果对数据统一处理，在这里写上相应函数
* beforeDestroy : 可以做一个确认停止事件的确认框
* nextTick : 更新数据后立即操作dom
11.$nextTick的使用
vue中数据和dom渲染由于是异步的，当你修改了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/93333207
3.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中怎么添加一个超链接？
<a :href="'https://www.baidu.com'">My site</a>
<a :href="'https://www.baidu.com?p='+id">一个Vue table问题</a>
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
真实的dom节点上有很多的属性，所以原生的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模式
- MVVM
MVVM就是模型-视图-视图模型层。这个模式实现视图和视图模型层的双向绑定。
典型的情况是，View Model通过使用obsever模式（观察者模式）来将View Model的变化通知给model。
关键点：
1、用户和View交互。
2、View和ViewModel是一对一关系，也就意味着一个View只能映射到一个ViewModel。
3、View持有ViewModel的引用，但是View没有任何Model的信息。
4、View 和ViewModel之间有双向数据绑定关系。 - MVC
MVC就是模型-视图-控制。通信是单向的。
1、View传送指令到Controller
2、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中情况&解决方法
<template>
<div>
<div>{{ colors }}</div>
<div>{{ obj }}</div>
<div>{{ intro }}</div>
</div>
</template>
<script>
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";
},
};
</script>
解决方法：
第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和padEnd
4.Object.getOwnPropertyDescriptors()
返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的
八、移动端
1、移动端怎么做不同机型的适配
1.设置Meta
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
- 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,000
2.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和click
4、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()
}
2、在main.js中引入rem.js
import './utils/rem'
3、配置 postcss-pxtorem 自动转换px为rem
$ npm install postcss-pxtorem -D
4、修改根目录 .postcssrc.js 文件
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"],
// 注意：如果有使用第三方UI如VUX，则需要配置下忽略选择器不转换。
// 规则是class中包含的字符串，如vux中所有的class前缀都是weui-。也可以是正则。
"selectorBlackList": ["weui-"]
}
九、CSS
1.垂直水平居中
1.知道宽高，父元素relative，子元素absolute，top&left是50%，margin-top和margin-left再拉回自身高宽的一半
2.不知道宽高，子元素absolute + transform
/* 定位代码 */
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.子元素设为行内元素display: inline-block;vertical-align: middle水平居中;liine-height: initial;垂直居中
4.flex布局(无语，千万别记反)
父元素设置
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
2.display的相关
3.清除浮动
1.浮动元素之后加一个空元素< div class=“clear”>< /div>,在css写.clear{clear:both;}
2. 浮动元素加overflow:hidden;或overflow:auto;
3. 给浮动的元素的容器添加浮动
4. 浮动元素后面的元素添加clear属性。
5. 浮动元素添加:after伪元素，然后设置隐藏visibility: hidden;
4. 用纯CSS创建一个三角形的原理是什么？
宽度和高度设置为0，border设置为transparent，再设置border-top的高度颜色样式
5.为什么要初始化CSS样式
浏览器有兼容性问题
6. absolute、fixed、relative
- absolute相对于父元素
- relative相对于原来的位置
- fixed相对于浏览器窗口
7. flex布局
8.圣杯模式
左右俩边宽固定，中间自适应，中间要先渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style>
#container{
padding: 0 100px;
overflow: hidden;
}
.div {
height: 100px;
float: left;
}
.middle{
width: 100%;
background-color: sandybrown;
}
.left{
width: 100px;
background-color: plum;
margin-left: -100%;
position: relative;
left: -100px;
}
.right{
width: 100px;
background-color: aqua;
margin-left: -100px;
position: relative;
right: -100px
}
</style>
</head>
<body>
<div id="container">
<div class="div middle">middle</div>
<div class="div left">left</div>
<div class="div right">right</div>
</div>
</body>
</html>
9.双飞翼模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
html,body{
margin:0;
padding:0;
}
.container{
border:1px solid;
width:500px;
}
.container:after{
content:'';
display: block;
clear:both;
height: 0;
}
.middle{
width:100%;
height:300px;
float:left;
}
.middle .wrap{
background:pink;
height:300px;
margin-left: 100px;
margin-right: 100px;
}
.left{
width:100px;
height:100px;
background:blue;
float:left;
margin-left:-100%;
}
.right{
width:100px;
height:100px;
float:left;
background:yellow;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">
<div class="wrap"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
10.CSS浏览器前缀兼容写法
| 前缀 | 浏览器 |
|---|---|
| -webkit- | 谷歌或者safari |
| moz | 火狐 |
| ms | IE |
| o | Opera |
11.上下两个盒子的margin一个是20，一个是30，他们两的间距是多少？
间距是30，因为塌陷。
12.什么是BFC?
BFC是块级格式化上下文，是为了解决塌陷问题。上下两个盒子的Margin，会塌陷的。
如何触发BFC?
- float: right; float: left; (浮动本身就触发了bfc)
- position: absolute/fixed;
- display: table/table-cell;(每个其实都是一个独立的区域，执行效率比较慢)
- overflow: 非visible; => hidden / auto（自动）/ scorll（溢出滚动）;
13.IE盒子模型和标准子模型的区别？
两者的区别在于content的不同，IE盒模型的content包括border、padding
十、C3
2.优雅降级和渐进增强的区别？
- 优雅降级
保持现在的版本，向下兼容低版本浏览器 - 渐进增强
保持现在的版本，向上优化
十一、H5
十二、跨域
协议域名端口不一致就会造成跨域
1. vue中的proxy
2. jsonp跨域(只能get请求)
3. CORS(后端设置)
4.nginx
https://blog.csdn.net/weixin_44700978/article/details/108649493
十三、算法
1.数组去重
这个有单独写，很清楚了
https://blog.csdn.net/weixin_44700978/article/details/119466153
十四、JavaScript
1.闭包
1什么是闭包？
闭包是一个可以获取其他函数内部变量的函数
2. 闭包的作用？
避免全局变量的污染
希望变量长期驻扎在内存当中（一般函数执行完毕，变量和参数会被销毁）
2. 构造函数、原型、原型链
每一个构造函数都有原型对象
prototype指向它的原型对象
constructor指向构造函数
__proto是实例对象指向原型对象
proto从原型上找属性和方法的过程就叫做原型链
2.继承
https://www.cnblogs.com/ranyonsue/p/11201730.html
3.事件冒泡、事件委托、事件捕获
- 事件冒泡
从里面最精确的元素，一层层一层的向外执行 - 事件捕获
从最外层的元素一层一层的向里执行，直到找到最精确的元素 - 事件委托
子元素的事件委托给父元素执行
stopPropagation()阻止默认事件
3. 什么是面向对象？什么是面向过程？
3.1面向对象编程：
面向对象是一种编程思想，当解决一个问题的时候，面向对象会把事物抽象成对象的概念，就是说这个问题里面有哪些对象，然后给对象赋一些属性和方法，然后让每个对像去执行自己的方法，问题得到解决
var divList = getEle('div');
var pList = getEle('p');
setColor(divList,'10px solid green');
setColor(pList,'10px solid yellow');
function getEle(eleName) {
return document.getElementsByTagName(eleName);
}
function setColor(eles,value) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.border = value;
}
}
好处:解决了代码冗余,利于维护
弊端:全局变量污染(所有的变量都是全局变量，就有可能别人的变量名和你的重复导致一些bug）
面向对象的三大特征:
封装:将功能代码封装到对象中,只暴露外部接口(API),使用者无需关系内部实现
继承:一个对象拥有另外一个对象所有的成员变量(属性和方法)
多态:一个对象在不同的情况下的多种状态(js从语法的角度上来说没有多态,因为js是基于对象的语言)
3.2面向过程编程：
字面意思理解就是注重过程的，当解决一个问题的时候，面向过程会把事情拆分成：一个个函数和数据(用于方法的参数)。然后按照一定的顺序，执行完这些方法(每个方法看作一个过程)
var divList = document.getElementsByTagName('div');
var pList = document.getElementsByTagName('p');
for (var i = 0; i < divList.length; i++) {
divList[i].style.border = '10px solid green'
}
for (var i = 0; i < pList.length; i++) {
pList[i].style.border = '10px solid yellow'
}
弊端:(1):代码冗余 (2):不利于维护
3.3 解决办法:使用对象：解决全局变量污染的问题(工作中最常用的方式)
弊端:每声明一个构造函数,就要声明一个对象,非常的麻烦
var obj = {
getEle : function (eleName) {
return document.getElementsByTagName(eleName);
},
setColor : function (eles,value) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.border = value;
}
}
}
var divList = obj.getEle('div');
var pList = obj.getEle('p');
obj.setColor(divList,'10px solid green');
obj.setColor(pList,'10px solid yellow');
3.4使用原型可以同时解决上面三个弊端
①:代码冗余,不利于维护弊端
②:全局变量污染问题
③:解决每声明一个构造函数就要声明一个对象问题
4.js异步宏任务和微任务
十五、Jquery
11.1为什么使用jquery，有什么优点?
1、轻量级框架，大小不到30KB
2、强大的选择器，出色的DOM操作的封装
3、完善的ajax(原生的太麻烦)
5、兼容性好
6、支持链式操作
11.2 jQuery中的选择器
元素选择器(.calss #id)、属性选择器()、css选择器($("p").css(设置颜色))
单独写一下属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
11.3 jQuery的美元符号$有什么作用？
jQuery的选择器，也可以写成jQuery
11.4 window.onload和$(document).ready()
- $(document).ready()是dom加载完就可以操作了
- window.onload是加载完所有的资源
11.5使用jQuery中的动画
隐藏: hide()
显示: show()
淡入淡出:fadeIn()==淡入(显示) fadeOut() == 淡出(消失)
滑动:slideUp() ===向上滑动 slideDown() ==向下滑动
11.6jQuery中使用过哪些插入节点的方法，他们的区别是什么
在元素内部添加
append：向每个匹配的元素内部追加内容
<p>我想说：</p>
$("p").append("<b>你好</b>")
<p>我想说：<b>你好</b></p>
appendTo：将所有匹配的元素追加到指定的元素中
<p>我想说：</p>
$("<b>你好</b>").appendTo("p")
<p>我想说：<b>你好</b></p>
prepend：向每个匹配的元素内部前置添加内容
<p>我想说：</p>
$("p").prepend("<b>你好</b>")
<p><b>你好</b>我想说：</p>
prependTo：将所有匹配的元素前置到指定的元素中
<p>我想说：</p>
$("<b>你好</b>").prependTo("p")
<p><b>你好</b>我想说：</p>
在元素外部添加
after：在每个匹配元素之后插入内容
<p>我想说：</p>
$("p").after("<b>你好</b>")
<p>我想说：</p><b>你好</b>
insertAfter：将所有配的元素插入到指定元素的后面
<p>我想说：</p>
$("<b>你好</b>").insertAfter("p")
<p>我想说：</p><b>你好</b>
before：在每个匹配的元素之前插入内容
<p>我想说：</p>
$("p").before("<b>你好</b>")
<b>你好</b><p>我想说：</p>
insertBefore：将所有匹配的元素插入到指定的元素的前面
<p>我想说：</p>
$("<b>你好</b>").insertBefore("p")
<b>你好</b><p>我想说：</p>
11.7jQuery中如何来获取和设置属性
可以用attr()获取和设置元素属性
removeAttr()方法来删除元素属性
11.8如何来设置和获取HTML和文本的值？
获取HTMl：$("选择器").html()
获取文本的值：$("选择器").text()
11.9jQuery中有哪些方法可以遍历节点？
children():获取匹配元素的子元素集合，不考虑后代元素 $(function(){$("div").children()})
next()获取匹配元素后面紧邻的同级元素
prev()获取匹配元素前紧邻的同级元素
siblings()获取匹配元素前后的所有同辈元素
11.10说出jQuery中常见的几种函数以及他们的含义是什么?
jQuery中常见的函数如下:
1)get()取得所有匹配的DOM元素集合.
2)get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素.
3)append(content)向每个匹配的元素内部追加内容.
4)after(content)在每个匹配的元素之后插入内容.
5)html()/html(var)取得或设置匹配元素的html内容.
6)find(expr)搜索所有与指定表达式匹配的元素.
7)bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数.
8)empty()删除匹配的元素集合中所有的子节点.
9)hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.
10)attr(name)取得第一个匹配元素的属性值.
11)addClass(class)和removeClass(class)为指定的元素添加或移除样式.
12)css(name)访问第一个匹配元素的样式属性.
13)ajax([options])通过HTTP请求加载远程数据.
14)get(url,[data],[callback],[type])通过远程HTTP GET请求载入信息.
15)post(url,[data],[callback],[type])通过远程HTTP POST请求载入信息.
16)load(url,[data],[callback])载入远程HTML文件代码并插入至DOM中.
11.11jQuery使用ajax
$.ajax({
url:"demo_test.txt",
data: {name: '温小鹿'},
type: 'get/post'
success:function(data){
console.log(data)
}});
十六、前端安全问题
- xxs跨站脚本攻击（恶意注入html代码）
- CSRF攻击(跨站请求伪造)
- SQL注入攻击
没有太了解过，好像大多都是发生在cookie，恶意获取cookie盗取信息。
用token就行了
十七、浏览器
1cookie、seesion、token的异同点
解决Http无状态(每一次请求都是新的请求)，无用户认证
1.1 cookie
用法：
import Cookies from 'js-cookie';
Cookies.set("key","value"); // 存
Cookies.get("key"); // 取
Cookies.remove('key'); // 删除
1、cookie存放在客户端，所以是不安全的，人为可以清除。
2、cookie有过期时间设定。如果不设置过期时间，说明这个cookie就是当前浏览器的会话时间，浏览器关了，cookie就不存在了。如果有过期时间，cookie就会存储到硬盘上，浏览器关闭不影响cookie。下次打开浏览器，cookie还存在
3、cookie有大小的限制，4KB。
不安全 会被攻击
1.2 seesion
1、session数据保存在服务器端
2、比cookie安全一点吧
3、会占用服务器性能
1.3 token
1、更安全
2.前端本地缓存的三种方式
2.1 sessionStorage
sessionStorage.setItem("key","value"); // 存
sessionStorage.getItem("key"); // 取
sessionStorage.removeItem("key"); // 删除
2.2 localStorage
localStorage.setItem("key","value"); // 存
localStorage.getItem("key"); // 取
localStorage.removeItem("key"); // 删除
2.3 Cookies
import Cookies from 'js-cookie';
Cookies.set("key","value"); // 存
Cookies.get("key"); // 取
Cookies.remove('key'); // 删除
十八、手写代码
https://blog.csdn.net/weixin_44700978/article/details/119395100
6.继承
https://www.cnblogs.com/ranyonsue/p/11201730.html
十九、react篇
1. 什么是React？
2.React有什么特点？
3. React有哪些限制？
4. 什么是JSX?
5. 你了解 Virtual DOM 吗？解释一下它的工作原理。
6. 为什么浏览器无法读取JSX?
7. 与ES5相比，React的ES6语法有何不同？
有的太懒总结了，很厉害的前辈，参考地址：
https://www.cnblogs.com/clicklin/p/9389892.html
https://www.it610.com/article/1294802420932616192.htm
https://juejin.im/post/5a0ea4ec6fb9a0450407725c
px转rem:https://juejin.cn/post/6844903557930418189
5880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
