知识整理ajax步骤请求初始化建立连接连接已接受请求处理中请求已完成等待响应原型对象之间的关系子对象通过

ajax步骤

请求初始化
建立连接
连接已接受
请求处理中
请求已完成等待响应

// js
// 用户代理
 var xhr = new XHRHttpRequset（）
// 建立连接
 xhr.open('get','www.uaena.xyz')
// 发送请求
 xhr.send(null)
// 等待响应
 xhr.onreadystatechange = function(){
     if(this.readystate === 4 && this.status == 200){
         consol.log(JSON.parse(this.iu))
     }
 }

//jq
$.ajax({
   type:'get',
   url: 'www.uaena.xyz',
   data: {数据}，
   dataType: 'json',
   success:function (msg) { }, 
   error:function (error) { }
})

原型对象之间的关系

子对象通过__proto__属性获取原型子对象.proto == 原型
原型通过constructor获取构造函数原型.constructor == 构造函数
构造函数通过prototype来访问原型构造函数.prototype == 原型
new 构造函数创建对象 new 构造函数 == 对象

原型链：任意对象都会有一个原型原型也有原型重点就是null 在对象和prototype之间存在一个--proto--的属性串联起来

字面量--proto-- object.prototype
array -- Array.prototype -- object.prototype -- null
string -- String.prototype -- Object.prototype -- null
function -- function.prototype -- Object.prototype -- null
object -- 构造函数.prototypr -- Object.prototype -- null 原型链查找在自身查找没找到在原型查找没找到在往上一个原型查找直到null返回undefined

跨域

同源策略（协议域名端口一致）
http 明文传输 https ssr加密传输
json cors 处理跨域
jsonp 原理：通过script标签的src属性将函数名发送给后台函数名不重复

jq链式调用原理

jq是操作dom的
jq调用的方法都是返回jq对象本身

怎么解决回调地狱

promise

var iu = new promise((resolve,reject)=>{
    
})
iu.then(function(){
// 这里面then的值是接受成功返回的值
})

jq 淡入淡出动画函数

淡入/显示/切换 fadeout fadein fadetoggle
下拉上拉切换 slideup slidedown slidetoggle
隐藏显示切换 hide show toggle
自定义动画 animate（key：value）
停止动画 stop()

js 轮播封装

    ml(true);  //调用ml函数  注:传参是否需要左右指示  默认false
    function ml(indicator) {
        var oMlBox = document.getElementById('mlBox');  //获取id:mlBox
        var oMlImg = document.getElementById('mlImg');  //获取id:mlImg
        var oMlSpan = document.getElementById('mlSpan');  //获取id:mlSpan
        var aSpan = oMlSpan.getElementsByTagName('span');  //获取id:mlSpan里面的span标签
        var aImg = oMlImg.getElementsByTagName('img');  //获取id:mlImg里面的img标签
        var oMlLeft = document.getElementById('mlLeft');  //获取id:mlLeft
        var oMlRight = document.getElementById('mlRight');  //获取id:mlRight
        var u = 0;  //当前照片位置
        var shut = null;  //定时器的名字
        function f1() {
            for (var i = 0; i < aSpan.length; i++) {  //循环id:mlSpan里面的span标签
                aSpan[i].id = '';  //让span标签的id等于空
                aImg[i].id = '';  //让id:mlImg里面img标签id等空
            }
            aSpan[u].id = 'mlOn';  //当前位置的span标签id等于mlOn
            aImg[u].id = 'mlShow';  //当前位置的img标签id等于mlShow
        }
        for (var f = 0; f < aSpan.length; f++) {  //循环id:mlSpan里面的span标签
            aSpan[f].index = f;  //span标签第f个的index等于f
            aSpan[f].onclick = function () {  //点击span标签  注:照片下面的三个点
                u = this.index;  //当前位置等于当前span标签index的位置
                f1();  //调用f1函数
            }
        }
        oMlBox.onmousemove = function () {  //鼠标悬浮id:mlBox
            clearInterval(shut);  //关闭定时器
            if (indicator) {  //是否显示左右指示  注:调用ml函数传参
                oMlLeft.style.display = 'block';  //显示左指示
                oMlRight.style.display = 'block';  //显示右指示
                oMlRight.onclick = function () {  //点击右指示
                    u++;  //当前位置加一
                    if (u >= aImg.length) {  //当前位置大于照片的数量就等于0
                        u = 0;
                    }
                    f1();  //调用f1函数
                };
                oMlLeft.onclick = function () {  //点击左指示
                    u--;  //当前位置减一
                    if (u < 0) {  //当前位置小于0时就让当前位置等于照片数量减一
                        u = aImg.length - 1;  //注:因为计算机从零开始数所以要减一
                    }
                    f1();  //调用f1函数
                };
            }else{
                oMlLeft.style.display = 'none';  //左指示消失
                oMlRight.style.display = 'none';  //右指示消失
            }
        };
        oMlBox.onmouseout = function () {  //当鼠标移出id:mlBox
            f2();  //调用f2函数
            oMlLeft.style.display = 'none';  //左指示消失
            oMlRight.style.display = 'none';  //右指示消失
        };
        function f2(){
            shut = setInterval(function () {  //定时器
                u++;  //每3秒当前位置加一
                if (u >= aImg.length) {  //当前位置大于等于照片的数量当前位置等于0
                    u = 0;
                }
                f1();  //调用f1函数
            },3000);
        }
        f2();  //调用f2函数
    }

jq对象和原生对象相互转换

jq元素 -> dom元素 jq元素.get(index)转换为dom元素
dom -> jq $(dom)

什么是作用域

指的是变量作用的范围
全局作用域在整个js文件中生效页面关闭时销毁、
局部作用域调用函数时调用的作用域函数执行完毕立刻销毁

es6语法

class
aync/awit
模板字符串
箭头函数
解构
...扩展运算符
promise 8.let const

vue

vue是以数据驱动视图的渐进式mvvm框架
脚手架是帮助我们快速开发vue的 vue是指js文件

vue常用指令

v-on 绑定事件 @
v-bind 动态绑定属性：
v-if 控制元素加载与销毁
v-show 控制元素显示隐藏
v-model vue语法糖表单元素实现双向数据绑定
v-for for循环加key
v-once 保持初始值不变
v-html 渲染标签
v-text 渲染文本
v-alock 防止插槽写法闪烁
v-solt 插槽

key的作用

优化虚拟dom算法的虚拟dom就是用js计算出来的

内置组件

keep-alive 动态缓存组件当使用时会增加两个生命周期钩子 alivte 和 alivted component 中的is属性可以动态缓存

vuex 组成

state 状态存储
getter 计算属性
muntation 同步修改state状态 muntation（state，newstate）使用commit（‘mutation’，data） 4.actions 辅助函数 dispatch 异步
plugin 数据持久化插件 vuex-persist

在vue组件中通过dispatch来触发actions来提交修改state数据再通过action的commit来触发修改数据 mutations接受commit 的请求会自动通过mutate来修改state数据最后由store触发每一个调用它的组件

模块化开发

根据js文件功能就行分离根据需求引入不同的脚本