前端基础小白（收集中）

目录

Vue数据双向绑定原理

BFC

浏览器的渲染过程 

什么是文档流?

浏览器端的缓存?

http缓存,flash缓存

什么是插槽?

原型是什么?

面向过程编程POP 和 面向对象编程OOP

HTTP和HTTPS

常见的跨域方式

防抖和节流

闭包

宏任务与微任务

call apply bind

递归

浅拷贝和深拷贝

ES6类与继承 

ES5原型继承原型链

Jquery ajax请求

Axios 请求

vuex :

vue路由 hash 模式和 history 

常用DOM方法总结

cookie,localStorage,sessionStorage的区别

MVVM理解

 px、em、rem、vm、vh、vw的区别

打包之后dist目录过大

 Set [集合]

v-for中为什么要有key

keep-alive 

---

Vue数据双向绑定原理

        实现mvvm的数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调。

BFC

     块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display

浏览器的渲染过程 

        将获取的html解析成dom树,处理css，构成层叠样式表模型,将dom树和CSSOM合并为渲染树,将渲染树的节点布局计算,将样式绘制到页面上

什么是文档流?

      文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。

浏览器端的缓存?

• 客户端
  H5存储：
  　　　　　　本地存储：localStorage&SessionStorage
  　　　　　　离线存储：ApplicationCache
  　　　　　　本地数据库存储：indexedDB、webSQL
  H5之前：
  　　　　　　本地存储：Cookie、IE早期版本的专属userData
  二、服务端
  Session Cookie、MySQL

http缓存,flash缓存

什么是插槽?

        插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

原型是什么?

原型指的是两个原型属性：

    prototype: 显示原型属性

    _proto_： 隐式原型属性

所有函数都有显示原型属性。 它的值叫做原型对象，这个原型对象默认有两个属性：

    constructor 指向函数本身

    _proto_ 指向Object.prototype

        特殊: Object.prototype._proto_ === null 这个就是原型链尽头

        注意：箭头函数： 没有 显示原型 属性，不能被new调用 ，只有隐式原型。

所有对象都有隐式原型属性。

对象的隐式原型属性的值指向其构造函数显示原型属性的值

如果这个普通对象是你 new 的，构造函数就是你 new 的函数

    如果不是，就是 new Obejct 产生的，所以构造函数就是 Object

所有函数都是 new Function 产生的，包括它自己 Function

所有数组都是 new Array 产生的

面向过程编程POP​​​​​​​ 和 面向对象编程OOP

面向过程编程 POP(Process-oriented programming)

    面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。

面向对象编程 OOP (Object Oriented Programming)

        面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。

        面向对象是以对象功能来划分问题,而不是步骤。

        在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。

        面向对象的特性: 封装性  继承性   多态性

        ​​​​​​​封装：把一堆相关的数据封装到一起形成一个有机的类；
        继承：子类自动拥有父类的所有属性和方法，继承是程序复用性的体现。
        多态：解决同一个问题有不同的方法。

1、面向过程（函数）：

​  做小的项目时，会使用面向过程的思路完成

​  第一步：先思考项目的流程，流程中的每一步就是一个模块（功能：就是个函数）。

​  第二步：我们实现每个函数（定义每个函数），在定义函数时，就需要考虑到数据（形参或者变量）。

   在面向过程里，每个函数和变量没有所属。所以调用函数时，前面都没有对象。

​   所以，在面向过程里，描述时，没有主语，如：先干啥，再干啥

​   面向过程相当于： 单干（一个人做事情）

2、面向对象：

​  做大型项目时，会使用面向对象的思路完成。

​  第一步：要考虑的是项目中需要的类（属性和方法）。

​  第二步：实现流程（new出对象，调用对象的方法）

​  第一步做什么，第二步做什么。 

  在面向对象里，每个函数（方法）和变量（属性）都有所属，调用函数时，前面有对象。

​  所以，在面向对象里，描述时，有主语，如：谁先干啥，谁再干啥

​  面向对象相当于： 团队配合（多个人做事情）

HTTP和HTTPS​​​​​​​

    http:超文本传输协议,用于在浏览器和服务器之间传递信息的,是以明文的形式发送内容的,不适合传输敏感信息,比如身份证账号密码..

    https:安全套接字超文本传输协议 实在http的基础上增加了ssl协议, ssl是靠证书服对浏览器和服务器之间的通信进行加密

    https协议是由ssl+http构成的是可加密的,身份认证的网络协议,比http更安全

    区别:

        https是需要申请证书,证书需要费用http是明文传输,

        https加密传输连接方式不同,端口不同 http 80 https 443

        http是无状态连接, https由ssl+http构成的是可加密的,身份认证的网络协议

常见的跨域方式

什么是跨域?

只要 协议，域名，端口有任何一个的不同，就被当作是跨域常见方式:

1. jsophtml中的script src属性获取其他源的数据

<script>function getData(res)fconsole. Log(res)]</script>

<script src="http://www.baidu. com/news?callback=getData">

2 .cors跨域资源共享支持所有的主流浏览器ie9+XMLHttpRequest发送请求的时候,如果不同源,

 heatersf {Origin}  后台处理: Access-control-allow-origin:*

3. h5 window. postMessage跨域 主流浏览器 ie8+

window. postMessage ("字符","*")

注意: vue中跨域 :代理proxy 本质上cors跨域

vue. config.js

proxy:{

        target:

        changeorigin:

        pathRewrite:   

}

防抖和节流

防抖:用户触发事件过于频繁,只要最后一次事件的操作

节流:控制执行次数节流的 作用:控制高频时间执行次数

[未补全]

闭包

闭包:函数嵌套函数,内部函数就是闭包

正常情况下,函数执行完成,内部变量会销毁(销毁:释放内存空问)

闭包,内部函数没有执行完成,外部函数变量不会被销毁。

应用场景：封装

        function outerFun(){ 
            let b = 10;
            function innerFun(){ 
                console.log(b);
            }
            return innerFun;
        }
        let fun = outerFun() 
        fun();

宏任务与微任务

宏任务: 计时器、ajax、读取文件

微任务: promise.then

执行顺序：1.同步程序 2. process.nextTick 3.微任务 4.宏任务 5. setlmmediate

call apply bind

 call 可以调用函数,call可以改变函数中this指向

 区别:apply 第二个参数以数组的形式传参

 区别:bind 作为一个返回值返回一个函数,再调用

        let Aname = {
            name:"小明",
            sayName(){
                console.log(""+this.name);
            },
            eat(food,food2){
                console.log("喜欢吃"+food+food2);
            }
        }
        let Bname = {name:"小红"}
        Aname.eat.call(Bname,'奶茶','火锅')
        Aname.eat.apply(Bname,['奶茶','火锅'])
        let fun = Aname.eat.call(Bname,'奶茶','火锅')
        fun()

继承:子类可以使用父类的方法

        function Cnimal(){
            // this指向person
            this.eat = function(){
                console.log("吃饼干")
            }
        }
        function Amdin(){
            this.right = function(){
                console.log('超级管理员');
            }
        }
        function Person(){
            // this指向person
            Cnimal.call(this)
            Amdin.call(this)
        }
        let person = new Person();
        person.eat()
        person.right()

递归

    递归:自己调自己,计算累加

        function fun(n){
            if(n === 1){
                return 1;
            }else{
                return n + fun(n - 1)
            }
        }
        let result = fun(3)
        console.log(result);
        /* 
            fun(1) : 1
            fun(2) : 2+ 1= 3
            fun(3) : 3 + 2 + 1 = 6
         */

浅拷贝和深拷贝

        const student1 ={
            name:"小明",
            age:2,
            girlfriend:{
                fname: "小红"
            }
        }
        //浅拷贝 
        function copy(obj){
            let newobj = {};
            for(let i in obj){
                newobj[i] = obj[i]
            };
            return newobj;
        }
        // 深拷贝
        function copy(obj){
            let newobj = {};
            for(let i in obj){
                if (obj[i] instanceof Object) {
                    newobj[i] = copy(obj[i])
                }else{
                    newobj[i] = obj[i]
                } 
            };
            return newobj;
        }
        // 深度克隆
        function copy(obj){
            let str = JSON.stringify(obj);
            let newobj = JSON.parse(str);
            return newobj
        }
        const student2 = copy(student1);
        student1.girlfriend.name = "小花"
        console.log(student1);
        console.log(student2);
        const person = {...student1}//扩展运算符的浅拷贝
        console.log(person);

ES6类与继承 

 1.class声明类

 2.constructor定义构造函数初始化

 3.extends继承父类

 4.super调用父级构造方法

 5.static 定义静态方法和属性

 6.父类方法可以重写

        class User{
            constructor(username, password){
                this.username = username;
                this. password = password;
            }
            login(){
                console.log("登录")
            }
        }
        class Admin extends Userf{
            deletePerson(){
                console.log("删除一个人")
            }
        }
        let amdin = new Admin()
        admin.login()

ES5原型继承原型链

        function User(username, password){
            this.username = username;
            this.password = password;
            /* this.login = function(){
                console.log("登录")
            } */
        }
        Object.prototype.login = function(){
            console.log("Object原型上的登录方法")
        }
        function Admin(){
            this.deletePerson = function(){
                console.log("删除一个人")
            }
        }
        Admin.prototype = new User();
        let admin = new Admin();
        admin.login();

Jquery ajax请求

        $('button').eq(0).click(function () {
            $.ajax({
                // url
                url: 'http://127.0.0.1:9000/jquery-server',
                // 参数
                data:{a:100, b:200},
                // 请求类型
                type: 'GET',
                // 响应体结果
                dataType: 'json',
                // 成功回调
                success: function(data) {
                    console.log(data)
                },
                // 超时时间
                timeout: 2000,
                // 失败回调
                error: function() {
                    consloe.log('出错了')
                },
                // 头信息
                headers: {
                    c: 300,
                    d: 400
                }
            })
        }) 

Axios 请求

        btns[0].onclick = function () {
            axios({
                // 请求方式
                method: 'POST',
                url:'/jquery-server',
                // url参数
                params:{
                    vip:10,
                    level:30,
                },
                // 头信息
                headers:{
                    a:100,
                    b:200,
                },
                // 请求体参数
                data:{
                    username:'admin',
                    password:'admin',
                }, 
            }).then(response=>{
                console.log(response.data);
                console.log(response.status);
                console.log(response.statusText);
                console.log(response.headers);
            })
        }

vuex :

  vuex 存放数据的状态

  需要安装的 npm i vuex-persistedstate

  state : 公共数据,组件中.this.$store.state.变量名

  mutation :同步方法更新state中的数据的

  action :异步方法,组件通过this.$store.dispatch("方法名",参数)

  getter :读取state 中的数据

  commit :状态提交,对mutation进行提交

  vuex数据刷新页面消失,持久化

    localStorage

    vuex-persistedstate装 new Vuex.store添加配置 plugins:[createPersistedstate]

    persistedstate本质也是利用localStorage

vue路由 hash 模式和 history 

hash 模式：

        # 后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。

1. 地址中永远带着#号，不美观 。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。

history 模式：

        history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作

1. 地址干净，美观 。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

区别:

url 展示上，hash 模式有“#”，history 模式没有

        刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由

常用DOM方法总结

getElementById()	返回带有指定ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
getElementsByName('a')	通过name属性获取一组元素节点对象
document.querySelector('#a')	通过CSS选择器来获取一个元素节点对象
document.querySelectorAll('span')	通过CSS选择器来获取一组元素节点对象
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。
当前节点.paretNode	表示当前节点的父节点
当前节点.previousSibling	表示当前节点的前一个兄弟节点
当前节点.nextSibling	表示当前节点的后一个兄弟节点
父节点.firstchild	可以获取第一个子节点(包括空白文本节点)
父节点.firstElementchild	可以获取第一个子元素(不包括空白文本节点)
父节点.childNodes	表示当前节点的所有子节点

cookie,localStorage,sessionStorage的区别

生命周期：
         cookie: 可以设置失效时间，没有设置的话，默认是关闭浏览器后失效。
         localStorage:除非被手动清除，否则将永久保存。
         sessionStorage:仅在当前网页会话下有效，关闭页面或者浏览器后会被清除。

存放数据大小：
         1.cookie：4kb
         2.localStorage 和sessionStorage 可以保存5MB左右的信息

         cookie：每次会携带在HTTP头中，使用cookie保存过多信息会带来性能问题
         localStorage 和 sessionStorage 仅在浏览器中保存。

应该场景：每次http都会携带cookie信息，浪费带宽，cookie尽可能少的使用.

MVVM理解

    mvvm model-view-viewmodel mvc的改进版

    m model 模型:数据访问层

   view 视图层:结构布局外观 html css h5 c3响应式

    viewmodel公共属性和命令, mvvm没有控制器,有一个绑定起,试图和模型之间进行同行的

    结论:  将结构布局和业务罗辑分开, 通过viewmodel在结构布局和业务逻辑之间进行通信

    优势: 1.低耦合 2.可重用性高 3.分层开发,便士维护

 px、em、rem、vm、vh、vw的区别

px、em、rem、vm、vh、vw（除px都是百分比计算）

em：根据其父元素的font-size来计算，默认1em=16px

rem: 和em相同，只是rem是相对于根元素。如body font-size=10px/62.5%;

vm: 根据可视区宽度和高度最小的计算，1vm=1%可视区大小

vw: 是vm的具体，指可视区宽度

vh：可视区高度 

打包之后dist目录过大

npm run build

vue.config.js 需要配置的参数

    entry

    output

1> dist/会生成.mpa文件 在vue.config​​​​​​​配置文件中设置取消: productionSourceMap:false

2>组件和路由懒加载

3>常用插件最好使用<script src="http://www. baidu.com/echarts/.....">[不推荐]

4>对于文件和图片压缩一下 [看需求,调大小]

    需要安装组件:  npm install -s compression-webpack-plugin

    导入:最小化代码 minisize(true)

    分割代码: splitChunksl

    超过限定值的文件进行压缩

        threshold:文件大小(字节为单位)

 Set [集合]

let arr = [1, 2,3,4,5,4,3, 2,1];
//1.数组去重// 
let result = [...new Set(arr)];
console.log(result);
//2.交集
let arr2 = [4,5,6,5,6]; 
let result2 = [...new Set(arr)].filter(item => { 
    let s2 = new Set(arr2); // 4 5 6
    if(s2.has(item)){
        return true;
    }else{ 
        return false;
    }
})
console.log(result2);
let result3 = [...new Set(arr)].filter(item =>new Set(arr2).has(item));//简写
console.log(result3);
//3.并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);
//4.差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));console.log(diff);

v-for中为什么要有key

    key的作用让每个item（虚拟数据，虚拟dom）有一个唯一的识别身份，可以下标值index或者id, 主要是为了vue精准的追踪到每一个元素，高效的更新虚拟DOM。

    简写:[key可以提高虚拟DOM的更新效率]

    在vue中 默认“就地复用”策略,在DOM操作的时候,如果没有key会造成选项错乱

    key只能是字符串或num

keep-alive 

keep-alive 组件缓存 刷新的时候保持状态

    keep-alive 缓存组件,避免组件内的数据重复宣染,直接可以在页面中调用优点:组件切换过程中,组件被保存在内存中,防止重复宣染,减少加载时间,提高用户体验性

    keep-alive有三属性:

        include - 字符串或正则表达，只有匹配的组件会被缓存

        max-数字，最多可以缓存多少组件实例

        exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存​​​​​​​

    两个独有的生命周期钩子函数 这两个函数分别是:

        activated 在keep-alive组件激活之前也就是当显示组件时触发

        deactivated 在keep-alive组件激活之后当隐藏缓存组件时触发

组件传值

组件传值:
    父子组件:
        父:data(){ return{a:1}}
            <son :a="a">
        子:props:["a"] 
            <div>{{a}}</div>
子父组件:
    子:
        data(){ return{a:1}}
        methods:{
            btn(){
                this.$emit('方法名称',value)
            }
        }
    父:
        <子 @方法名称="方法名称">
        methods:{
            方法名称(sonData){

            }
        } 
兄弟组件:
    localstorage
    bus:
        定义bus.js 共享工具
    A组件:
        导入bus
        bus.$emit()
    B组件:
        导入bus
        bus.$on()
    vuex 状态管理 包括数据状态:
        state 存储数据 this.$stroe.state...
        mutation:同步,更新state数据
        actions: this.$store.dispatch("方法名",参数)
        getters: state数据读取commit:提交---》mutation
        vuex 刷新页面,数据会重置:
            数据持久化: localstorage
            persistedState 组件 利用localstorage实现持久化
            new viex.store 配置 plugins[createPersistedStatep]