面试题
通过动态创建script,利用src不受同源协议的属性进行跨域
session:session是网站用户登陆的会话
session是存储在服务器上的,并且存活时间较短
session主要作用于大型网站,银行,金融,支付类等
session需要占用大量的服务器的资源
session的应用范围:会话劫持
cookie:cookie是网站用户登陆的凭据(浏览器的记住密码的功能就是通过与浏览器中保存的cookie进行验证后进行登录的)
cookie是存储在本地的,并且cookie存活时间有长有短
cookie主要作用于小型网站
cookie的拓展手法有:cookie盗取,cookie修改,cookie欺骗
cookie的应用范围:越权漏洞,cookie伪造登陆等
cookie的安全性没有session高,但cookie不需要占用服务器的资源
15版本:
分为三个阶段 初始化 运行中 销毁
初始化阶段
getDefaultProps
:获取实例的默认属性
getInitialState
:获取每个实例的初始化状态
componentWillMount
:组件即将被装载、渲染到页面上 (组件更新时不会再调用)
组件被挂载到页面之前调用,整个生命周期中只会调用一次。
注意:在这里可修改state 在这里请求异步数据,render可能不会渲染到,因为componentWillMount执行后,render立马执行
render
:组件在这里生成虚拟DOM节点
componentDidMount
:组件真正在被装载之后
建议:在这里可以异步请求数据。在这里设置状态会触发重新渲染。但是不推荐在这里使用setState函数,它会触发一次额外的渲染,而且是在浏览器刷新屏幕之前执行,用户看不到这个状态。在这里使用setState函数会导致性能问题
运行中状态
componentWillReceiveProps
:组件将要接收到属性的时候调用 (组件初始化时候不调用)
**注意:可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用**
shouldComponentUpdate(nextprops,nextstate)
: 组件更新之前调用(组件接受新的props或者state)。函数会返回一个布尔值,true才会更新组件。
**注意:最好判断一下新旧两个props/state是否相同,相同则返回false不要触发更新。这样就不用生成新的dom树和旧的进行diff算法对比,从而优化性能。(因为父组件render()调用会使得子组件render()也被执行,引起性能问题)**
componentWillUpdate
:组件即将更新不能修改属性和状态 组件更新之前(componentshouldupdate返回true)时调用,组件初始化时不调用
**注意:在这里可以更改state,nextstate.xxx = xxx,但是在这里不能调用setState函数,这会导致函数调用componentshouldupdate从而进入死循环。**
render:组件重新描绘
componentDidUpdate
:组件已经更新
销毁阶段
componentWillUnmount
:组件即将销毁
注意:在这里清除一些不需要的监听和计时器
项目中我经常如何使用
url监听事件 hashchange
localhost:2000/#a
localhost:2000/#b
共同点:
gulp 和 webpack 是当下最为流行两个前端工程化工具,
都可以实现 文件的打包压缩和项目的自动化构建
不同点:
gulp 注重 流的操作
4.0中的gulp 多个 并行和串行
webpack中注重的是 解决 模块之间的相互依赖关系
bootstrap <=3. 0 (12栅格)
媒体查询media + 百分比
@media (min-width= number ){
.container{
width: 1200
}
}
number
1200 992 768 320
bootstrap 4. 0
flex
justify-content: center;
align-items: center
都是循环遍历。只能遍历数组
map可以返回一个新的数组,foreach没有
设置子元素: position:absolute;left50%;top50%;transform:translate(-50%,-50%)
设置子元素: position:absolute;left 0;top 0;bottom 0; right:0; margin:auto;
设置一个空的span width:0;height:100%;display:inline-block;vertica-align:center
当前元素 diplay:inline- block;vertical-align:center
Flex:设置父元素为:dislplay:flex;justify-content:center;align-items:center;
设置父元素为: :table
子元素为cell-table
,就可以使用vertical-align:center;
父组件可以通过props可以向子组件传递信息,子组件可以通过$emit事件传递信息
jsonp
反向代理 webpack 自带 http-proxy-middleware
让后端给咱一个请求头
php \ java header
node
cros中间件
app.use(cros({options}))
window.open
iframe
https://www.cnblogs.com/widget90/p/7650890.html
function add(){
var a = 1
function num(){
a++
}
return num
}
var n = add()
n()
n()
flex-grow:1;
flex: 1
flex: 60
flex: 220
flex: 120
媒体查询,flex布局,rem
flex + rem
DPR 2 2.5 3 (一像素线的问题)
1px线
在iOS中,当你点击比如 input 准备输入时,虚拟键盘弹出,整个视窗的 高度 就会变为 减去键盘 的高度,加入你在底部有fixed的元素比如btn,这个元素就会跑上来,一般都不会太美观。我是当focus时就把它设为absolute,视情况而定
部分安装手机 a 标签用作按钮的时候,页面显示空白 解决办法:用 button 标签替换 a 标签
移动端 click 事件,使屏幕产生 200-300ms 的延迟响应
解决办法:
前端 iphonex 适配问题
给html标签添加 font-size: 100px;
使用js
function font(){
document.documementElement.style.fontSize = document.documentElment.clientWidth / 7.5 + 'px'
}
font()
window.onresize = font
块级作用域const和let
箭头函数
Promise
generator
默认参数
function aa (n=1,m){} aa(2,3)
Es6的多行字符串 ``
解构赋值
class
模块化
Hash模式、History模式、abstract模式
Hash: 使用URL的hash值来作为路由。支持所有浏览器。
History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。
企业对客户 企业对企业
let声明的变量可以改变,值和类型都可以改变,没有限制。
const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
ES6新增了let命令,用来声明变量。let所声明的变量,只在let命令所在的代码块内有效。
只要块级作用域内存在let命令,它所声明的变量就"绑定"这个区域,不再受外部的影响。
不存在变量提升
let不允许在相同作用域内,重复声明同一个变量。
const声明一个只读的常量。一旦声明,就必须立即初始化,不能留到以后赋值,常量的值就不能改变。
const声明的常量,也与let一样不可重复声明。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
核心面试题:var 和 let const的区别
package.json:
主要用来定义项目中需要依赖的包
package-lock.json:
在运行命令 "npm install / i " 的时候自动生成的文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
Ajax
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR(XMLHTTPREQUEST)开发,XHR本身的架构不清晰。
3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
4.不符合关注分离(Separation of Concerns)的原则
5.配置和调用方式非常混乱,而且基于事件的异步模型不友好。
6. 不支持跨域
Axios
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
Fetch
1.符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
3.原生提供的
问题:
html
1. h5新的标签无法使用, 比如: video audio canvas
css样式
1. css3的选择器 和 效果 , 比如: border-radius 渐变 透明度
2. 图片间隙问题 双边距问题(浮动元素的边距 需要给浮动元素加上display:inline;这样的CSS属性就可以了) li标签间隙问题(浮动,行内块元素等) 块元素默认高度问题 ( div默认存在3个像素高,由font-size引起的。1、设置font-size:0px;2、设置overflow:hidden;)
js
DOM 事件对象 事件监听 获取浏览器尺寸
解决方法
html解决:
提供下载链接
css 样式
PIE.htc
js 封装兼容性函数
addEventListener
attachEvent
function addEvent({obj,eventType,fn,bl}){
if(document.getElementsByClass){
//现代浏览器
obj.addEventListener(eventType,fn,bl)
}else{
//ie低版本
obj.attachEvent('on'+eventType,fn)
}
}
父子组件通信
props
自定义事件
//fn是父组件中定义的方法
子组件:
template
export default {
methods: {
childHandler(){
this.$emit('yyb')
}
}
}
非父子组件通信
ref
this.$refs.xxx
多层组件通信
bus event 事件总线
var bus = new Vue()
bus.$on('yyb',function(){})
bus.$emit('yyb') (可以在子组件的生命周期钩子函数中调用)
任意组件(多组件)通信
vuex
父子组件
属性绑定
父组件:
子组件:
this.props.name
ef
1. // 和vue一致的
2. this.child = el }> 推荐的
上下文: context
**事件总线 ** (借助node才能实现)
const events = require(‘events’)
const EventEmitter = events.EventEmitter
const bus = {
…EventEmitter.prototype
}
redux / mobx
什么是状态管理
我们使用一条数据管理一个视图中某一个部分, 那么我们将这种行为称之为 ‘状态管理’ , 那么这条数据我们称之为 ‘ 状态 ’
vuex是什么
vuex是vue中一个插件, 目的是进行状态管理, 它类似于一个集中式的存储仓库, 用来存储和操作数据
vuex组成部分
4.vuex 数据 分片
给store添加一个 modules配置项
const store = new Vuex.Store({
modules: {
comingStore: comingModule
}
})
vuex使用流程
组件 — dispatch —> actions ----commit ----> mutaions(修改数据) --> state <–getters <-- 组件
组件 ----commit ----> mutaions(修改数据) --> state <–getters <-- 组件
import store from './store'
new Vue({
store
})
vuex辅助工具 /调节工具
mapState
mapActions
mapMutaions
mapGetters
注意:
mapActions 和 mapMutaions 给组件的 methods配置项中写
methods: {
...mapActions([fn1,fn2])
...mapMutaions([])
}
maGetters 往 computed 中写
computed: {
...mapGetters([])
}
vuex异步交互
actions
架构思维 react只不过充当了这个架构中的 视图 一种可预测的状态容器
store 数据的存储库
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
actionCreators 动作(用户发起)的创建者
let action = {
type: 'ADD_CAR',
payload
}
reducers 动作的执行者
reducers是一个纯函数, 里面有一个返回值, 返回值时什么, store里面的数据就是什么
使用流程
组件 — 引入–> actionCreators ----dispacth(action) --> reducers (previousState,action) new State --> store
main.js
import store from './store'
import {Provider} from 'react-redux'
ReactDOM.render(
)
数据分片
reducer分片
combineReducers redux
异步交互
redux-thunk 中间件 第三方包
bindActionCreators redux
如果我们一次性渲染刷新几万条数据,页面会卡顿,因此只能分批渲染,既然知道原理我们就可以使用setInterval和setTimeout、requestAnimationFrame来实现定时分批渲染,实现每16 ms 刷新一次
延迟加载,通过js将第二屏出现的图片设置延迟加载,优先加载第一屏的图片。
尽可能压缩图片大小
利用gzip压缩
将JS放到HTML最后的地方,能最后加载,优先保证基础信息阅读 把css放到顶部
使用CDN
按照页面或者组件分块懒加载
1.对象键值对的唯一性
2. 遍历循环, 利用indexOf 来进行多次判断
3. es6中 的 set 方法
利用浮动将所有所有照片依次排成一行,给这一长串图片添加一个父级的遮罩,每次只显示一张图,其余的都隐藏起来。对图片添加绝对定位,通过控制left属性,实现照片的移动
jsx
vue webpack .vue vue loader
cli2
cli3 vue.config.js
react
create-react-app
webpack
DOM
和DIFF
算法vue
响应式原理 data发生改变视图会对应发生改变,用到了es5的object.defineProperty
setter 被调用时用watch来监听变化
使用 Object.assign()来解决变化检测问题
异步的更新队列
它所运用是es5中的object.defineprototype属性,在这个属性中有2个存储器,分别是get和set。当我们获取数据的时候,我们会触发其中get这个存储器,他会相应的对数据进行接收和设置,当我们的数据发生改变时,间接的又会触发到set这个存储器,set存储器会将我们的数据进行更新,
数据更新后,简介的我们又会造成视图的更新。
vue
双向数据绑定原理vue的双向数据绑定是运用v-model的指令,而v-model这个指令又默认绑定了当前的vlue值,当前vlue也是一个对象的属性,当对象的属性值发生改变的时候,
他会相应的触发object.defineprototype这个属性中的set存储器,当set触发,那么set中相对应的watcher会监听到属性值的改变,然后他会向上返回,重新生成新的vdom,
最后render函数会重新进行视图的渲染。
vue
组件内钩子(答题方式为分为几个阶段,每个阶段有哪些钩子,每个钩子在项目中的应用)
答题得分点1:(2分)
生命周期分为三个阶段:初始化、运行中和销毁
答题得分点2:(2分+5分=7分)
这三个阶段一共有8个钩子函数
初始化阶段有4个钩子:
beforeCreate 创建前
created 创建完成
beforeMount 装载前
mounted 装载完成
运行中有2个钩子:
beforeUpdate 更新前
updated 更新
销毁也有2个钩子:
beforeDestroy
destroyed
答题得分点3:(2分+5分+3分=10分)
在我们的实际项目中,这些钩子我们
1. 数据获取 => 一般在 created 钩子里面进行
2. dom操作 => 一般在mounted 钩子里面进行
3. 更新data及更新dom之后的dom操作 => 一般在 updated 钩子里面进行
4.对于一些善后工作,如,清除定时器,移除一些事件,删除没必要存在的变量,清除没必要进行的重复的函数工作。 => 我们可以在 beforeDestroy或者 destroyed 钩子里面进行
`组件的生命周期只会执行初始化的四个钩子,并且四个钩子在beforeCreate这个钩子中无法获取并修改数据,在其后的三个钩子中可以获取并修改数据。
在 create 和 beforeMount 中修改数据没有什么差异
mounted 钩子中修改数据,
在初始化阶段 组件装载完成后 对数据进行修改会 触发 运行阶段的两个钩子。
生命周期初始化的钩子只执行一次,不会执行第二次
后面经过我的测试,运行阶段的两个更新钩子可以多次执行`
vue
路由钩子(导航守卫)详细
一.全局守卫
全局前置守卫 router.beforeEach((to,from,next)=>{})
to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。
这样就可实现,用户在未登录状态下,展示的一直是登录界面。
router.beforeEach((to,from,next)=>{
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert('您还没有登录,请先登录');
next('/login');
}
})
全局解析守卫
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
全局后置钩子router.afterEach((to,from)=>{})
只有两个参数,to:进入到哪个路由去,from:从哪个路由离。
如下,每次切换路由时,都会弹出alert,点击确定后,展示当前页面。
router.afterEach((to,from)=>{
alert("after each");
})
二.组件内的守卫
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
1. 到达这个组件时,beforeRouteEnter:(to,from,next)=>{}
在Admin.vue文件中,点击转到admin路由时,执行beforeRouteEnter函数
to,from参数与上面使用方法一致。next回调函数略有不同。
如下例,data 组件内守卫有特殊情况,如果我们直接以
beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面,会发现alert输出hello undefined。这是因为,现在访问不到我们的data属性,执行顺序是不一致,这与的声明周期有关。在执行完之前,data数据还未渲染。所以这里,next()会给一个对应的回调,帮助完成。
2. 离开这个组件时,beforeRouteLeave:(to,from,next)=>{}
点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。
beforeRouteLeave:(to,from,next)=>{
if(confirm("确定离开此页面吗?") == true){
next();
}else{
next(false);
}
}
(一) 清除当前组件中的定时器
(二) 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转
如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转
(三) 保存相关内容到Vuex中或Session中
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
三.路由独享的守卫
你可以在路由配置上直接定义 beforeEnter 守卫:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些守卫与全局前置守卫的方法参数是一样的。
vue
指令(自定义指令)的钩子bind
inserted
updated
componentUpdated
unbind
nextTick(callback)
DOM下一次渲染完成之后执行vue
懒加载vue
路由懒加载结合 Vue
的异步组件和Webpack
的代码分割功能,轻
载。
1. 将异步组件定义为返回一个 Promise 的工厂函数
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
2. 在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):
import('./Foo.vue') // 返回 Promise
方案一:
const Foo = () => import('./Foo.vue')
方案二:
const Foo = () => new Promise((resolve, reject)=>{
return resolve({
component: import './Foo.vue
})
})
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
better-scroller
滚动加载(分页加载)vue
几个指令1.v-for
2.v-clock:对闪现进行解决
3.v-once:实现一次的渲染
4.v-html:实现输出的转义
5.v-text:文本的输出
6.v-if/v-else-fi/v-else:条件进行判断,然后输出
7.v-show:真假判断输出(值为布尔值)
8.v-bind
9.v-model
vue
组件怎么定义vue
组件(插件)封装目录结构
loading
components
Loading.vue
index.js
index.js
import Vue from 'vue'
import Loading from './components/Loading.vue'
export default {
install: () => {
Vue.component('Loading',Loading)
}
}
main.js
import Loading from './plugin/loading'
Vue.use(Loading)
.vue
Vue Loader
{
template: ''
}
Vue.set || this.$set Object.assign
**需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。****key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,
methods 存放的是事件处理函数
computed 放的也是函数
(computed: {...mapGetters([])})
watch
监听: 当数据改变, 就会自动触发watch中 监听函数执行
watch: {
a: function(){}
b: {//深度监听
handler: function(){},
deep: true
},
c: []
}
this.$router.push()/replace()
一共有三类: 全局路由钩子 、 路由独享守卫 、 组件内守卫
全局路由钩子
路由独享守卫
组件内钩子
beforeRouteEnter
访问不到实例
如果想访问到实例, 并且做数据预载
next(vm => {
// 通过 `vm` 访问组件实例
vm.msg = 'yyb'
})
beforeRouteUpdate
(2.2 新增)
beforeRouteLeave
1 需求分析
2 设计开发
2.1 UI设计评
2.2 概要设计
2.3 单元测试
3 功能测试
3.1 Alpha测试 (内测,用户在开发环境下进行的测试,也可以是公司内部的用户在模拟实际操作环境下进行的测试)
3.2 Beta测试 (公测,即针对所有用户公开的测试版本)
4 发布上线
4.1 发布审核
4.2 上线验收
https://blog.csdn.net/qwfys200/article/details/82811057
人员配置
设计 前端 后端 2 2 5
职能分配
FE.那些模块
互动沟通
FE小组
git 操作
先拉取, 在上传
git pull
遇到的困哪沟通一下
富文本编辑器选择(pc 后端管理系统)
wangEditor
数据分组
借助第三方工具: loadsh immutable
10万条数据, 一次加载, 不能页面卡死
分批渲染
n万条请求,
export 是批量导出
形式1:
export const a = 1
export const b = 2
形式2:
const a = 1;
cosnt b = 2
export {
a,b
}
使用:
import {} from xxx || import * as type from xxx
export default 默认是导出一个
export 和export default 都可以导出 函数 字符 对象 number
https://segmentfault.com/a/1190000016617400
import React, { Component } from 'react'
export default class NewReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps:接收初始props
// getInitialState:初始化state
}
state = {
}
static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候,包括在组件构建之后(虚拟dom之后,实际dom挂载之前),每次获取新的props或state之后;;每次接收新的props之后都会返回一个对象作为新的state,返回null则说明不需要更新state
return state
}
componentDidCatch(error, info) { // 获取到javascript错误
}
render() {
return (
New React.Component
)
}
componentDidMount() { // 挂载后
}
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发,true:更新,false:不更新
return true
}
render()
getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发
}
componentDidUpdate() { // 组件更新后触发
}
componentWillUnmount() { // 组件卸载时触发
}
}
函数式编程
withRouter(高阶组件) —》 普通组件变成一个伪路由组件
import {withRouter} from 'react-router-dom'
withRouter(App)
witherRouter( getApp(App) )
然后在componentWillReceiveProps 这个钩子中可以做路由监听
react没有路由表, 但是他有路由辅助工具 Route
优:性格乐观开朗,与同事相处十分融洽,自己的学习能力还是不错的,每次新出一些东西的话,我会优先去关注并且去学习 ,有较强的动手能力跟学习能力。
缺:
https://www.cnblogs.com/yalong/p/10556665.html?tdsourcetag=s_pcqq_aiomsg
https://www.jianshu.com/p/9d97d199992f
https://blog.csdn.net/Uookic/article/details/81165259
es6代码的输入---》babelon进行解析---》得到AST--》plugin用babel-traverse对AST树进行遍历 ---》得到新的AST树 ---》使用babel-genertor通过AST树生成es5代码。
1. this.setState({},fn)
2. this.setState(()=>{})
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
在闭包的作用域链中引用了html元素未释放内存
由于本身html元素是不会被回收的,所以闭包中占用的内存也无法被回收,如:
function A(){
var a = document.getElementById("aid");
a.onclick = function(){
//事件处理代码
出现了循环引用
闭包中的循环引用会导致内存永远都不能被释放,如果是A->B,A指向B,当A被释放之后,已经没有指针指向B了,这是B占用的内存也能被释放;
但是,如果是A->B, B->A,形成了循环之后,A,B占用的内存将一直存在。
https://blog.csdn.net/shunfa888/article/details/80013170
https://www.jianshu.com/p/74131432191e?tdsourcetag=s_pcqq_aiomsg
https://www.jianshu.com/p/08859e5651fc?tdsourcetag=s_pcqq_aiomsg
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS) Access-Control-Allow-Origin:*
7、 nginx代理跨域
8、 nodejs中间件代理跨域 cros
9、 WebSocket协议跨域
10、反向代理
https://blog.csdn.net/sinat_17775997/article/details/83376452
echarts three.js charts highCharts
https://blog.csdn.net/wanshaobo888/article/details/79868993
一,函数对象
所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)
所有函数拥有prototype属性(显式原型)(仅限函数)
原型对象:拥有prototype属性的对象,在定义函数时就被创建
二,构造函数
先复习下构造函数
//创建构造函数
function Word(words){
this.words = words;
}
Word.prototype = {
alert(){
alert(this.words);
}
}
//创建实例
var w = new Word(“hello world”);
w.print = function(){
console.log(this.words);
console.log(this); //Person对象
}
w.print(); //hello world
w.alert(); //hello world
print()方法是w实例本身具有的方法,所以w.print()打印hello world;alert()不属于w实例的方法,属于构造函数的方法,w.alert()也会打印hello world,因为实例继承构造函数的方法。
实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于
w.__proto__ === Word.prototype
当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性:
w本身没有alert()方法,所以会去Word()的显式原型中调用alert(),即实例继承构造函数的方法。
三,原型和原型链
Function.prototype.a = "a";
Object.prototype.b = "b";
function Person(){}
console.log(Person); //function Person()
let p = new Person();
console.log(p); //Person {} 对象
console.log(p.a); //undefined
console.log(p.b); //b
想一想p.a打印结果为undefined,p.b结果为b
解析:
p是Person()的实例,是一个Person对象,它拥有一个属性值__proto__,并且__proto__是一个对象,包含两个属性值constructor和__proto__
console.log(p.__proto__.constructor); //function Person(){}
console.log(p.__proto__.__proto__); //对象{},拥有很多属性值
我们会发现p.__proto__.constructor返回的结果为构造函数本身,p.__proto__.__proto__有很多参数
我们调用constructor属性,p.___proto__.__proto__.constructor得到拥有多个参数的Object()函数,Person.prototype的隐式原型的constructor指向Object(),即Person.prototype.__proto__.constructor == Object()
从p.__proto__.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p.___proto__.__proto__== Object.prototype
所以p.b打印结果为b,p没有b属性,会一直通过__proto__向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是原型链,通过__proto__向上进行查找,最终到null结束
console.log(p.__proto__.__proto__.__proto__); //null
console.log(Object.prototype.__proto__); //null
大家理解刚才的过程,相信下面这些应该也都明白
//Function
function Function(){}
console.log(Function); //Function()
console.log(Function.prototype.constructor); //Function()
console.log(Function.prototype.__proto__); //Object.prototype
console.log(Function.prototype.__proto__.__proto__); //NULL
console.log(Function.prototype.__proto__.constructor); //Object()
console.log(Function.prototype.__proto__ === Object.prototype); //true
**总结**
**总结**
1.查找属性,如果本身没有,则会去__proto__中查找,也就是构造函数的显式原型中查找,如果构造函数中也没有该属性,因为构造函数也是对象,也有__proto__,那么会去它的显式原型中查找,一直到null,如果没有则返回undefined
2.p.__proto__.constructor == function Person(){}
3.p.___proto__.__proto__== Object.prototype
4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null
5.通过__proto__形成原型链而非protrotype
最后附上一张图,大家阅读完之后,看图应该可以很容易理解
答:微信小程序项目结构主要有四个文件类型,如下:
.WXML (WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件。
.WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,
.js 逻辑处理,网络请求
.json 小程序设置,如页面注册,页面标题及tabBar。
app.json
必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。
app.js
必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss
全局样式
答:
一、将所有的接口放在统一的js文件中并导出
二、在app.js中创建封装请求数据的方法
三、在子页面中调用封装的方法请求数据
答:
一、给HTML元素添加data-*属性来传递我们需要的值,然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象
二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值
三、在navigator中添加参数传值
答:
一、提高页面加载速度
二、用户行为预测
三、减少默认data的大小
四、组件化方案
答: 小程序除 了拥有公众号的低开发成本、获客成本低以及无需下载等优势,在服务请求延时与用户使用体验是都得到了较大幅度 的提升,使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。
答:微信小程序采用JavaScript、WXML、WXSS三种技术进行开发,从技术讲和现有的前端开发差不多,但深入挖掘的话却又有所不同。
JavaScript:首先JavaScript的代码是运行在微信App中的,并不是运行在浏览器中,因此一些H5技术的应用,需要微信App提供对应的API支持,而这限制住了H5技术的应用,且其不能称为严格的H5,可以称其为伪H5,同理,微信提供的独有的某些API,H5也不支持或支持的不是特别好。
WXML:WXML微信自己基于XML语法开发的,因此开发时,只能使用微信提供的现有标签,HTML的标签是无法使用的。
WXSS:WXSS具有CSS的大部分特性,但并不是所有的都支持,而且支持哪些,不支持哪些并没有详细的文档。
微信的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现。
小程序分为两个部分webview和appService。其中webview主要用来展现UI,appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行,通过系统层JSBridge实现通信,实现UI的渲染、事件的处理
答:
优势:
1、无需下载,通过搜索和扫一扫就可以打开。
2、良好的用户体验:打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面,与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布,微信拥有一套严格的审查流程, 不能通过审查的小程序是无法发布到线上的。
劣势:
1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
2、样式单一。小程序的部分组件已经是成型的了,样式不可以修改。例如:幻灯片、导航。
3、推广面窄,不能分享朋友圈,只能通过分享给朋友,附近小程序推广。其中附近小程序也受到微信的限制。
4、依托于微信,无法开发后台管理功能。
答:
第一条是运行环境的不同
传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。
第二条是开发成本的不同
只在微信中运行,所以不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG
第三条是获取系统级权限的不同
系统级权限都可以和微信小程序无缝衔接
第四条便是应用在生产环境的运行流畅度
长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验总是不尽人意,需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立
答:
在回调函数中调用下一个组件的函数:
app.js
index.js
答:
小程序直接this.data的属性是不可以同步到视图的,必须调用:
https://www.jianshu.com/p/f871c4c0663d?tdsourcetag=s_pcqq_aiomsg
· componentWillReceiveProps(object nextProps) :当挂载的组件接收到新的props时被调用。此方法应该被用于比较this.props 和 nextProps以用于使用this.setState()执行状态转换。(组件内部数据有变化,使用state,但是在更新阶段又要在props改变的时候改变state,则在这个生命周期里面)
· shouldComponentUpdate(object nextProps, object nextState) : -boolean 当组件决定任何改变是否要更新到DOM时被调用。作为一个 优化 实现比较this.props 和 nextProps 、this.state 和 nextState ,如果React应该跳过更新,返回false。
· componentWillUpdate(object nextProps, object nextState) :在更新发生前被立即调用。你不能在此调用 this.setState() 。
· componentDidUpdate(object prevProps, object prevState) : 在更新发生后被立即调用。(可以在DOM更新完之后,做一些收尾的工作)
从组件获取真实 DOM 的节点,这时就要用到 ref 属性。
例如:一个文本输入框,用于获取用户的输入。文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。通过为组件指定 Click 事件的回调函数,除了 Click 事件以外,还有 KeyDown 、Copy、Scroll 。
父组件到子组件,用到props。
state 与 props :如果顶层组件初始化 props,那么 React 会向下遍历整棵组件树,重新尝试渲染所有相关的子组件。这条原则让组件之间的关系变得见得且可预测。state 只关心每个组件自己内部的状态,这些状态只能在组件内变化。把组件看成一个函数,那么它接收了 props 作为参数,内部由 state 作为函数的内部参数,返回一个 真实 DOM。
state
state 是组件内部状态,修改 state 的值修改需要通过 setState 方法,禁止直接修改 state,setState 是一个异步方法,修改完成会有一个回调方法,一个生命周期内所有 setState 方法会合并统一操作。
不推荐过多的使用 state,当数据更新同时需要更新界面的时候,才使用 state,并且尽量将 state 推到系统边缘,统一管理 state。过多的内部状态会让数据流混乱,程序变得难以维护。
props
props 是 React 用来让组件之间相互联系的一种机制。
React 的单向数据流,主要的流动管道就是 props,props 本身是不可变的。
注意:父组件传递的 props,作为子组件的 state,会产生引用对象影响问题,也就是赋值是一个浅复制,会导致 state 改变进而导致父组件的 props 改变。
难易程度 等级(!,!!,!!!)
1.js的垃圾回收机制是什么原理(js)!!
2.经常遇到的解决js兼容性问题列举至少三个(js)!
滚动条、网页可视区域、事件对象兼容、阻止事件冒泡兼容、阻止默认行为兼容、事件监听兼容、事件目标对象兼容。
1) 滚动条:
document.documentElement.scrollTop||document.body.scrollTop
window.innerHeight || document.documentElement.clientHeight
window.innerWidth || document.documentElement.clientWidt
4) 事件对象兼容
evt = evt || window.event;
5) 阻止事件冒泡兼容
event.stopPropagation?event.stopPropagation():event.cancelBubble=true;
6)阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
7)事件监听兼容
if(document.all){
dom.attactEvent(“onclick”, fn);
} else {
dom.addEventListener(“click”, fn);
}
8)事件目标对象兼容
var t = event.target || event.srcElement;
3.不设置寛高的div,用至少两种方法,让它相对于页面水平垂直居中。(css)!
1.margin:0 auto;固定宽
2. 父元素设置为:position: relative; 子元素设置为:position: absolute; 距上50%,据左50%,然后减去元素自身宽度的距离就可以实现:margin: -50px 0 0 -50px;
3. 元素未知宽度:上一个中的margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%);
4.flex布局:父:display: flex;//flex布局justify-content: center;//使子项目水平居中align-items: center;//使子项目垂直居中
4.react-redux的实现原理(react框架)!!
Redux作为一个通用模块,主要还是用来处理应用中state的变更,而展示层不一定是React。
Redux是怎样运作的:首先需要注册一个全局唯一的store对象,用来维护整个应用的state;当要变更state时,我们会dispatch一个action,reducer根据action更新相应的state。
react-redux是一个轻量级的封装库,核心方法只有两个:Provider、connect。
使用了react-redux后,我们导出的对象不再是原先定义的xxxComponent,而是通过connect包裹后的新React.Component对象。
connect执行后返回一个函数(wrapWithConnect),那么其内部形成了闭包。而wrapWithConnect执行后,必须要返回一个ReactComponent对象,才能保证原代码逻辑可以正常运行,而这个ReactComponent对象通过render原组件,形成对原组件的封装。
2、渲染页面需要store tree中的state片段,变更state需要dispatch一个action,而这两部分,都是从this.props获取。故在我们调用connect时,作为参数传入的state和action,便在connect内部进行合并,通过props的方式传递给包裹后的ReactComponent。
Provider模块的功能有两点:
1、在原应用组件上包裹一层,使原来整个应用成为Provider的子组件
2、接收Redux的store作为props,通过context对象传递给子孙组件上的connect
Provider初始化时,获取到props中的store对象;将外部的store对象放入context对象中,使子孙组件上的connect可以直接访问到context对象中的store。
1、context可以使子孙组件直接获取父级组件中的数据或方法,而无需一层一层通过props向下传递。context对象相当于一个独立的空间,父组件通过getChildContext()向该空间内写值;定义了contextTypes验证的子孙组件可以通过this.context.xxx,从context对象中读取xxx字段的值。
connect模块是连接了React和Redux。
5.git经常用到的命令,至少五个,并且要说出每个命令是干什么的。(git add .)(git commit -m “”)(git push origin **)(git clone)(git branch)(git checkout)!
6.react-router的实现原理 !
7.react的生命周期(必须知道并且知道每个的作用)!
8.数组的方法(至少说出6个)(js)!
9.闭包的原理(js)!
10.伪数组转成真数组的方法(至少两种方法) (js)!!
var arr = [];
for(var i =0; i
11.rgba和opacity的区别(css)!
12.link和@i没import的区别 (js)!
13.哪些操作会造成内存泄露(至少三个)(js)!!!
1、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。
2、对于纯粹的 ECMAScript 对象而言,只要没有其他对象引用对象 a、b,也就是说它们只是相互之间的引用,那么仍然会被垃圾收集系统识别并处理。但是,在 Internet Explorer 中,如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象,垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。最终它们将被保留在内存中,直到浏览器关闭。
3、闭包可以维持函数内局部变量,使其得不到释放。
4、
a = {p: {x: 1}};b = a.p;delete a.p; | |
---|---|
执行这段代码之后b.x的值依然是1.由于已经删除的属性引用依然存在,因此在JavaScript的某些实现中,可能因为这种不严谨的代码而造成内存泄露。所以在销毁对象的时候,要遍历属性中属性,依次删除。
5、一些DOM操作:IE系列的特有问题 简单的来说就是在向不在DOM树上的DOM元素appendChild;IE7中,貌似为了改善内存泄露,IE7采用了极端的解决方案:离开页面时回收所有DOM树上的元素,其它一概不管。
14.react虚拟DOM实现原理 !!
15.call,apply,bind的区别(js)!!!
**call和apply方法都是在调用之后立即执行的。而bind****调用之后是返回原函数,需要再调用一次才行,**有点像闭包的味道。
16.ES6有哪些新特性 !
17.H5新特性(canvas,video,webstorage,语义化标签,表单控件 等) !
18.HTTP请求返回状态码(至少说出常见的200,304,404)!
200状态码:表示请求已成功,请求所希望的响应头或数据体将随此响应返回
304自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过,您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
404状态码:请求失败,请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话,应当使用410状态码来告知旧资源因为某些内部的配置机制问题,已经永久的不可用,而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
19.关系型数据库和非关系型数据库的区别和好处 !!!
20.web网络请求的过程 !!!
闭包,原型作用域链,继承,面向对象,
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念。
1.函数嵌套函数
==props:==一般用于父组件向子组件通信,在组件之间通信使用。
==state:==一般用于组件内部的状态维护,更新组建内部的数据,状态,更新子组件的props等。
一、【父组件】向【子组件】传值
初步使用
这个是相当容易的,在使用 React 开发的过程中经常会使用到,主要是利用 props 来进行交流
二、【子组件】向【父组件】传值
接下来,我们介绍【子组件】控制自己的 state 然后告诉【父组件】的点击状态,然后在【父组件】中展示出来。因此,我们添加一个 change 事件来做交互。
三、没有任何嵌套关系的组件之间传值(flux,reaux)
11.你项目中是否用ES6的语法?如果是,请说出你经常用到的es6
12.css3的定位?让一个容器水平垂直居中?
. · [方法二: diaplay:table-cell](http://www.cnblogs.com/xianyulaodi/p/5863305.html_label1http:/www.tuicool.com/articles/_blank)
. · [方法三:position加 transform](http://www.cnblogs.com/xianyulaodi/p/5863305.html_label2http:/www.tuicool.com/articles/_blank)
. · [方法四:flex;align-items: center;justify-content: center](http://www.cnblogs.com/xianyulaodi/p/5863305.html_label3http:/www.tuicool.com/articles/_blank)
. · [方法五:display:flex;margin:auto](http://www.cnblogs.com/xianyulaodi/p/5863305.html_label4http:/www.tuicool.com/articles/_blank)
. · [方法六:纯position](http://www.cnblogs.com/xianyulaodi/p/5863305.html_label5http:/www.tuicool.com/articles/_blank)
. · [方法七:兼容低版本浏览器,不固定宽高](http://www.cnblogs.com/xianyulaodi/p/5863305.html_label6http:/www.tuicool.com/articles/_blank)
13.如何跨域?
1、通过jsonp跨域2、通过修改document.domain来跨子域3、使用window.name来进行跨域
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据(但是缺点是IE6、IE7不支持)
后端:网站的逻辑部分,主要涉及数据库,动态语言如PHP、ASP、JSP等
后台:管理员操作模块,包括对网站内容的更新、注册会员管理等等,是网站的一个子模块
· !DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
· **标准模式与兼容模式各有什么区别:标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,**模拟老式浏览器的行为以防止站点无法工作。
盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含: 外边距、边框、内边距、内容区,这就是盒模型。
从外到内:margin border padding content(width height)
在react项目中使用Echarts的时候,在componentDidMount中执行绘制图表的函数echarts。Init(#id),提示获取不到宽高,因此,绘制出来的图标呈现出压扁的状态或者没有绘制
解决办法:给compoentDidMount中的drawCharts方法加上一个延时器
render函数是发生在哪个生命周期
1、 正确答案应该是在willMount和didMount之间
2、 升云面试题总结
3、 数据为什么一定要在DidMount里获取更新
4、 总结一下不建议在constructor和componentWillMount里写的原因是会阻碍组件的实例化,阻碍组件的渲染,如果用setState,在componentWillMount里面触发setState不会重新渲染
5、 是请讲一下 后端给的数据是列表 前端实现的过程描述一下
6、 请讲一下 实际应用中 Set的使用场景
7、 mobx的使用 (因为我用的mobx 也可能问redux的使用)
8、 路由都是怎么配置 怎么实现的
9、 如果要获取路由中的参数 你是怎么实现的
10、 路由如何实现异步加载
11、 1.react-router 如何获取路由参数;
12、 2.react生命周期,redux单向数据流;
13、 3.实际项目中遇到的棘手问题,如何解决;
14、 4.面向对象的理解;
15、 5.类组件和函数组件;
16、 6.ajax在哪个生命周期进行,为什么;
17、 8.然后主要想让你从实际项目出发 谈一下技术 或者 遇到的困难 以及如何解决的;
18、 1.箭头函数,普通函数(this)
19、 2.项目技术栈
20、 3.React按需加载
21、 4.React生命钩子
22、 5.Redux的理解及数据流
23、 6.项目组人员分布(前端、后端、测试)
24、 7.遇到的问题及解决方法(2个左右)
25、 8.网络安全及解决方法
26、 9.fetch和axios的区别 用fetch时有啥缺点
27、 10.vue和react的区别
28、 11.项目中遇到的难点怎么解决的
29、 12.es6用到过啥
30、 13.继承用过什么方法
31、 14.移动端布局
32、 15.vue的SPA开发性能优化
33、
----------总结
react生命周期, 改变this的方法, redux流程, flex相关的,输入网址到呈现网页,发生的过程,http 状态码,
东淮罗童总结:笔试:第一个是flex布局的,用flex布局实现一个轮播图效果,只写css样式,
第二个是react父子组件传值的,比较简单
----------总结:
\1. 一个需求一个分支进行开发的时候,一个新的紧急需求加入进来,当前编辑的需求不想提交,如何进行下一个分支的编辑又不会造成污染?
\2. React性能优化
\3. 如何看待react?
\4. Git命令
\5. 如何做一个项目?
1,js常用语东西,promise,跨域,数组。react问的也不深
2,生命周期钩子和他们的作用
3,闭包,变量提升
4,es6新增
蚂蚁保险项目王超总结
蚂蚁前端问题
1.redux原理
2.thunk原理
3.provider原理
4.antd使用遇到什么问题
5.函数式组件和容器组件的使用
6.常用的生命周期钩子函数
1.怎么设置border设置四种颜色
Border-color: red green blue pink;
事件捕获阶段—处于目标阶段 — 事件的冒泡阶段---- 事件的默认阶段
-----总结题库
1、 CORS 跨域
2、 Css3 过度
3、 Css3动画
4、 事件委托
5、 On绑定时间和delegate绑定时间的区别
6、 Axios请求数据的过程
7、 Axios和ajax的区别
8、 Git命令
9、 Promise
10、 React生命周期
11、 少量vue
12、 弹性盒
35、 请编写一个 js 函数,传入如上对象后将返回的数组中的对象 pagen 升序排序
36、
37、 2. 用 reactjs 编写一个应用 组件并挂载到 id 为 root 的 div 结点上,
38、 包含两个子组件 (请一并实现),
39、 点击哪个 时当前 的背景颜色变为红色,其他取消(不要直接操作dom)
40、
41、 答:
42、
43、 蚂蚁金服-------总结
44、 1.webpack配置项
45、 2.css3动画(实现进度条,背景图从白色变为蓝色)
46、 3.移动端优化(网络条件不同wifi 4g等)
47、 4.项目里遇到问题
48、 5.让一个div垂直居中
49、 6.创建一个对象方式(5种)
50、 7.项目里用px还是rem,px和rem对比,用rem比较爽的地方
51、 8.pc端和移动端需要注意的地方对比
-------总结----------
开发时是一个人还是多个人协作
协作是多少个人一块协作
主要负责哪些东西
React-redux在项目中怎样使用它,它的原理是什么
React相关的框架,除了redux之外还用过其余的数据处理的东西吗
React组件之间的通信
具体说一下非父子之间的不用redux的话怎么通信
es6里面的promise,promise的静态方法,promise的catch,什么时候 什么情况下会用到promise的catch
箭头函数和常规函数的区别
作用域的理解
闭包的概念
看过别人的一些代码吗?他们写的代码里面会有什么问题吗?
看过一些公共的组件库什么的代码吗?
有尝试过自己去写一些组件吗?
React用到过的工具,比如说一些插件和中间件之类的
Antd-mobile,ant design 推荐使用的中间件是saga来处理异步
Webpack配置项
Sass中的minxi用法
高阶函数的概念
es6的处理异步的两个方法promise和generator
MVC,MVVM等几个比较流行的前端框架
与后台交互时会遇到的错误htpp请求时的错误
跨域问题
项目架构:
es6中的继承会转为es5中什么类型的继承
---------总结---------
1, 事件代理,不冒泡的情况怎么实现事件代理
2,自己写过什么组件?是业务还是什么组件
3,react用过哪些技术栈
4,react这些技术栈怎么实现的
5,项目的目录结构
---------总结-------
1.jsonp后端怎么处理
2.fetch怎么携带cookie
3.React非法路径路由怎么设置,弹出提示非法路径框
4.事件代理,哪些事件没有冒泡
5.vue react底层原理,差异
6.持久登录怎么做的?
---------项目:前端面试问题
---------组面试题:
1:es6新特性
2:异步编程和生成器函数的区别
3:什么是原型链
4:继承的方式有哪些
5:什么是中间件(react)
6:redux流程
7:状态改变后调用哪些钩子函数(react)
8:div页面居中的方式
9:盒模型
10:元素边界
11:cookie 本地存储的区别
12:虚拟dom的原理,注!不要只说diff比对,要明白具体怎么比对。
13:react性能优化
14:promise原理