够够够,is伐布雷

数组对象方法

push,unshift,pop,shift,reverse,sort,splice,join,concat,indexOf
is,keys,values,assage

节流和防抖

防抖:在事件被触发n秒后在执行回调,如果这n秒内又被触发就重新调用
节流:规定在一定事件内,只能触发一次函数,如果触发多次,只有一次生效

闭包

要了解闭包,就要先了解他的作用域,全局作用域,局部作用域,块级作用域
js函数内部可以访问函数外部的变量,函数外部无法访问函数内部的变量,闭包就是为了解决这一难题而产生的
闭包就是函数内部和外部连接起来,闭包有一个封闭性的特定,一旦形成闭包,尾部就无法访问闭包里面的数据了
优点:可以模仿块级作用域,有所有成员的存在,变量不会就行回收存储在内存中,防止变量污染
缺点:因为变量存储在内存中,使用不当会造成内存泄露,让使用过后的变量无法进行回收,一直站着内存
使用场景:节流,防抖,定时器

作用域

1.全局作用域(js最外层的作用域)
2.函数作用域(通过函数创建函数作用域,可以嵌套)
3.块级作用域(ES6提供) if{},for(){},while(){}

原型原型链

原型

1.每个实例对象都有__proto__属性,叫隐士原型,他指向自身构造函数的显示原型prototype
2.每个函数都有一个prototype属性,叫显示原型
3.每个prototype原型上都有一个constructor,指向他关联的构造函数

原型链

1.实例化对象的__proto__指向构造函数的prototype
2.构造函数prototype的__proto__指向Object.prototype
3.Object.prototype的__proto__指向null

继承

原型链继承

//吧父类的实例指向子类的实例
//缺点:不可传参
function Fu(){this.arr=['red','yellow']}
function Zi(){}
Zi.prototype=new Fu()
let a=new Zi
a.arr.push('green')
console.log(a.arr)

构造函数继承

//在子类里通过call或apply修改this指向
//可以传参
function Fu(){this.arr=['red','yellow']}
function Zi(){Fu.call(this)}
let a=new Zi()
a.arr.push('green')
console.log(a.arr)

组合式继承

//就是把原型链继承和构造函数继承组合起来用

class类继承

//通过extends来说明,super来继承
class Fu{
    constructor(){
        this.arr=['red','yellow']
    }
}
class Zi extends Fu{
    constructor(){
        super()
    }
}

深拷贝,浅拷贝

深拷贝

//深拷贝就是吧引用地址和对象都复制过来
let a=[1,2,3]
let b=JSON.stringify(a)
let c=JSON.parse(b)
a[0]=999
console.log(a,c)

浅拷贝

//浅拷贝只是复制一成引用地址
let a=[1,2,3]
let b=a
a[0]=999
console.log(a,b)

promise,async/await

promise

promise可以让异步同步化,按照期望的顺序执行,返回预期的效果,从语法上讲是一个对象,里面是返回的结果
目的就是解决地域回调问题,提供了简介的API,让操作异步更简单
有三个状态,正在进行,成功,失败,状态一旦更变就无法进行修改了
使用方式:new Promise(),有两个参数resolve,reject

async/await

async是在方法前面写,会返回一个promise对象,
await是在异步前面写,表示上一步操作完成之后在进行下一步,同步化
用了async和await之后就不需要用promise的API方法了,可以直接结构赋值到变量中

双向数据绑定

数据劫持订阅者和发布者,通过Object.defineProperty()劫持各个属性的setter,getter,当数据发生改变时通知订阅者,触发相应的监听回调

虚拟DOM,diff算法

虚拟DOM

就是把真实dom节点中的操作在虚拟dom中完成,比如添加,删除节点
虚拟dom的最终目的就是把节点插入到真实的dom中

diff算法

就是创建一个虚拟的DOM树,然后变成真实的dom树插入到节点中,当数据发生改变时,从新创建一个dom数,比较并保存两个的差异,通知视图进行更新

组件通信

父传子

1.在父组件中先通过import引入子组件,然后注册,在页面写入标签
2.在父组件的子组件标签中自定义属性,等于要传输的变量
3.在子组件中通过props来接收

子传父

1.在子组件中写方法通过this.$emit('方法',传的值)
2.在父组件中先通过import引入子组件,然后注册,在页面写入标签
3.在父组件的子组件标签中写在子组件中定义的方法

兄弟组件传值

1.创建一个Bus.js事件中心
2.使用时通过import引入
3.传递是通过this.$emit()传递,this.$on()接收
//还可以通过vuex传递

vuex

vuex有5个状态status,mutations,getters,actions,modules
1.status是保存数据的
2.mutations是可以直接操作status中的数据的
3.getters相当于计算属性,依赖于status
4.actions异步操作
5.modules模块分发

keep-alive

是vue提供给我们的一个组件,可以保存当前组件的状态
使用方式:
    1.在router要设置缓冲的路由里设置meta属性,里面写一个keep-alive为true
    2.在router-view通过if判断是否存在keep-alive,如何存在就可以缓冲

自定义组件

1.命名要用驼峰命名法
2.引入用i没import来引入,然后注册
3.页面写入标签

自定义指令

   很多时候我们需要直接操作 dom 元素,如果只是个别需要操作 dom 元素,我们可以通过 ref 获取当前 dom 元素,并对其进行操作,但是如果
特别多的时候,我们不可能每次都去写一遍 ref 还有方法,所以这时候自定义指令就可以帮你轻松解决这个问题
分为全局和局部;
钩子函数:
	bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
	inserted:被绑定元素插入父节点时调用
	update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
	componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
	unbind:只调用一次,指令与元素解绑时调用。
钩子函数的参数:
	**el**: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。
	**binding**: 一个对象,里面包含了几个属性:value:指令的绑定值,name:指令名等;
	**vnode**:Vue 编译生成的虚拟节点。
	**oldVnode**:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

路由守卫

1.全局守卫(前,后)
2.路由独享守卫
3.组件内守卫

生命周期

beforeCreate(创建前):这是数据创建完成之前,这个阶段实例的data,methods这些是都访问不到的
Created(创建后):数据加载完成,是最早能够获取数据的函数无法获取DOM节点,这个阶段已经完成了数据观测,属性和方法的运算,但是数据并没有在DOM元素上进行渲染;可以从服务器获取一些初始化的数据,还有通过ajax向服务器发送一些数据。
beforeMounted(挂载前):数据加载完成之后,DOM加载完成之前,只是模板和数据进行结合,但是没有挂载到页面上,可以在这里进行数据的最后修改
Mounted(挂载后):DOM节点挂载完成之后,最早可以操作DOM的函数;可以完成模板中的html渲染到页面上。这里面可以进行ajax交互。可以进行axios数据请求;而且mounted只会执行一次;
beforeUpdate(更新前):在数据更新之前调用;会更新当前组件数据,但不会在页面渲染出来;
Updated(更新后):data数据改变的时候,影响到DOM的时候;在这里可以获取到最新的DOM结构;
beforeDestroy(销毁前):在实例销毁之前调用,这个时候实例还可以使用,在这里可以清除一些组件中的定时器和监听dom事件
Destroy(销毁后):实例化销毁的时候触发;所有的事件监听器都会被清除,这个函数在服务器端渲染期间不被调用;
第一次加载页面只会触发前四个钩子函数;

跨域

1.jsonp
2.后台允许跨域
3.代理跨域

常见状态码

200:表示请求成功
400:请求错误
401:没权限
403:拒绝访问
404:为找到该资源
408:请求超时
500:服务端错误

输出url到页面发生了什么

1. 通过DNS服务器:url=>ip地址;
2. 到达ip地址对应的服务器;
3. 服务器接收用户的请求;
4. 把处理后的结果返回给客户端;
5. 客户端把结果渲染到浏览器即可,最后页面显示出来
输入了一个域名,域名要通过DNS解析找到这个域名对应的服务器地址(ip),通过TCP请求链接服务,通过
WEB服务器(apache)返回数据,浏览器根据返回数据构建DOM树,通过css渲染引擎及js解析引擎将页面渲
染出来,关闭tcp连接

异步加载图片

 function Create(url) {
        return new Promise((resolve, reject) => {
            let oimg = new Image();//创建img标签
            oimg.onload = () => {
                resolve(oimg)
            }
            oimg.onerror = () => {
                reject(`'${oimg}' is not find`)
            }
            oimg.src = url
        })
    }
    
    Create('./img/1.jpg').then(res => {
        document.body.append(res)
        console.log(res)
    })

20).项目开发流程

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值