html5+es6

作者: wudongyu | 来源:发表于2018-11-15 11:12 被阅读0次

复习

函数作用域

全局作用域
局部作用域
块级作用域（es6-let，const）
优先级
- 局部变量（函数体内声明的变量）>参数变量（函数参数）>全局变量

函数种类

无参数无返回值

只是将代码封装起来，以供调用

有参数无返回值

在无参数无返回值的基础上优化，对传入参数进行操作

无参数有返回值

对函数处理结果进行接收

有参数有返回值
箭头函数--()=>{}

默认值
- es5 --需要手动设置传入参数的默认值
- es6 --function(a='1'){}当无参数传入时，括号内即为默认值

this指向

普通函数中的this 指向调用该函数的对象
构造函数中的this 指向new出来的实例化对象

构造函数的返回值如果是引用值，则new得到的是返回值，如果是原始值类型，则仍返回实例化对象，但是this指向不会改变 (一般情况下不会在构造函数内设置return)

事件函数中的this指向事件源
箭头函数的this指向会发生改变，所以：

事件函数不适合箭头函数--如使用将不再指向触发事件的对象
对象中的方法不适合使用箭头函数--将不再指向对应的对象
但：
可以在一些特定的this函数中，如果需要调用另外的匿名函数，可以使用箭头函数代替
函数表达式创建的函数可以使用箭头函数来缩减代码

函数this指向的修改方法--3种

call
- 调用函数时使用
- fn.call(this指向,参数1,参数2)
apply
- 调用函数时使用
- fn.applay(this指向,[参数1,参数2])
- call与apply的区别就在于参数的传递方式不同
- call视参数多少改变传参数量
- apply只有两个参数
bind
- 声明函数时使用
- bind时函数体的一种方法，调用该方法会得到一个新的函数体，更多情况使用函数表达式来配合bind
- var fn=function(){}.bind(this指向)--结合函数表达式，生成新的修改this指向后的函数体

arguments

函数内使用，接收传递的超出形参的参数，形成伪数组
es6中rest参数可以完成arguments的功能
rest参数会直接把所有的多余参数转换成一个数组
function fn (num,...a){console.log(a)}--...a将接收到的多余实参存入数组

js中的对象

Null->Object.prototype->其它对象
通过call/apply调用原型链上的方法实现对数据类型的判断
- Object.prototype.toString.call(数组)-->[Object,Array]
将类数组对象，转换成数组
- es6--Array.from()
- Array.prototype.slice.call()

类 class--es6新增

      const Demo = function (a, b) {
    this.a = a;
    this.b = b;
    return this;
    };

    Demo.prototype = {
        constructor: Demo,
        print: function () {
            console.log(this.a + ' ' + this.b);
        }
    };


    const demo = new Demo('hello', 'world').print();

将构造函数的属性与原型链上的方法分开

    class Demo {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        return this;
    }

    print() {
        console.log(this.a + ' ' + this.b);
    }
    }；
    const demo = new Demo('hello', 'world').print();
    console.log(typeof demo);

可以直接将方法写在构造函数内部
不需要逗号-会报错
super
1. super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。
2. super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类
3. super代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”
new.target
1. new是从构造函数生成实例的命令。ES6为new命令引入了一个new.target属性，（在构造函数中）返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。
2. Class内部调用new.target，返回当前Class。
静态方法
- 函数命前声明static，就为静态方法。该方法不会被实例继承，而是直接通过类来调用。

fetch

IE8+
到现在为止，fetch的支持性还不是很好，但是在谷歌浏览器中已经支持了fetch。fetch挂在在BOM中，可以直接在谷歌浏览器中使用。
Fetch基于Promise
- Promise
  - Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象
  - 一个Promise有以下几个状态
    - pending：初始状态，既不是成功，也不是失败状态
    - fulfilled：意味着操作成功完成
    - rejected:操作失败
  - 旧浏览器不支持需要使用polyfilles6-promise

使用

GET请求

  // 通过fetch获取百度的错误提示页面
  fetch('https://www.baidu.com/search/error.html', {
      method: 'GET'
    })
    .then((res)=>{
      return res.text()
    })
    .then((res)=>{
      console.log(res)
    })

GET请求传参

    // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中写上传递的参数
        method: 'GET'
      })
      .then((res)=>{
        return res.text()
      })
      .then((res)=>{
        console.log(res)
      })

POST请求

    // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/search/error.html', {
        method: 'POST' // 指定是POST请求
      })
      .then((res)=>{
        return res.text()
      })
      .then((res)=>{
        console.log(res)
      })

POST请求传参

    // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/search/error.html', {
        method: 'POST',
        body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
      })
      .then((res)=>{
        return res.text()
      })
      .then((res)=>{
        console.log(res)
      })

设置请求头
- 在POST提交的过程中，一般是表单提交，可是，经过查询，发现默认的提交方式是：Content-Type:text/plain;charset=UTF-8，这个显然是不合理的
- 请求方式content-type:application/x-www-form-urlencoded。

      // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/search/error.html', {
        method: 'POST',
        headers: new Headers({
          'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
        }),
        body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
      })
      .then((res)=>{
        return res.text()
      })
      .then((res)=>{
        console.log(res)
      })

通过接口得到JSON数据

    // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255', { // 在URL中写上传递的参数
        method: 'GET',
        headers: new Headers({
          'Accept': 'application/json' // 通过头指定，获取的数据类型是JSON
        })
      })
      .then((res)=>{
        return res.json() // 返回一个Promise，可以解析成JSON
      })
      .then((res)=>{
        console.log(res) // 获取JSON数据
      })

强制带Cookie
- 默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头).

    // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/search/error.html', {
        method: 'GET',
        credentials: 'include' // 强制加入凭据头
      })
      .then((res)=>{
        return res.text()
      })
      .then((res)=>{
        console.log(res)
      })

优点
- 语法简洁，更加语义化
- 基于标准 Promise 实现，支持 async/await
- 同构方便，使用 isomorphic-fetch
原生支持率并不高，幸运的是，引入下面这些 polyfill 后可以完美支持 IE8+
- 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
- 引入 Promise 的 polyfill: es6-promise
- 引入 fetch 探测库：fetch-detector
- 引入 fetch 的 polyfill: fetch-ie8
- 可选：如果你还使用了 jsonp，引入 fetch-jsonp
- 可选：开启 Babel 的 runtime 模式，现在就使用 async/await

过渡、动画

transition
- 一个状态过渡到另一个状态的动画效果
- 只有开始和结束两个关键帧
- 必须要认为触发才能执行
animation
- 可以设置多个关键帧
- 动画本身可以自动执行并且设置执行的次数，最多无限次infinite
- 可以实现transiton的效果，但相对而言代码更复杂
- 必须与@keyframes配合使用
- 过程
  - 通过@keyframes创建动画规则，然后使用animation和该动画规则进行绑定
  - animate.css

transform

translate
- translate
  - 2d平移
- translate3d
  - 3d平移-强制使用gpu(显卡)渲染，比2d平移的动画性能更好-即使不涉及z轴平移，为获取更好效果，仍然使用translate3d
rotate
- rotate
- rotatex
- rotatey
- rotate3d(x,y,z,角度)
  - 三个矢量确定一个方向，这个方向的轴，作为旋转轴，旋转对应的角度
skew
- 变形，填写角度是元素变形，一般用作果冻动画
轴心
- transform-origin
  - 改变原点的位置
3d效果
- transform-style:preserve-3d;给容器增加3d效果，name该容器内的元素就能展现3d效果
- perspective
  - 视距-加给所有的3d效果元素的最顶层元素即可
- perspection-origin 改变视角
- backface-visibility 背面是否可见

Vue组件通信

为啥会有组件通信
- 因为使用组件-组件通信
分类
- 父子通信
  - 通过props属性进行数据传递
  - 子组件配置对象中设置props为对应的名字
  - 父组件的组件模板中，为子组件标签添加prop
  - 不加v-bind传递静态数据，加则传递动态数据(除key外)
- 子父通信
  - 利用自定义事件实现
  - 子组件中通过原生事件触发对应函数，在其函数内触发自定义事件this.$emit("自定义事件","数据")
  - 父组件的组件模板中找到对应的子组件标签@自定义事件="函数"，然后在父组件methods中设置对应函数接收并处理数据即可
  - sync修饰符-通过修饰符sync实现类似v-model的效果
    - 子组件中通过原生事件触发自定义事件this.$emit("update:自定义事件名x","数据")
    - 父组件的组件模板中找到对应的子组件标签@自定义事件名x.sync="需要修改的数据"
- 非父子通信
  - 利用自定义事件实现，非父子通信需要借助一个vue实例去触发和监听自定义事件
  - bus.$emit("自定义事件","数据")，新建一个公共的vue，在触发组件中触发自定义事件
  - bus.$on("自定义事件",(数据)=>{处理数据})，对应组件中的created周期函数中监听自定义事件

Vuex

提供统一的状态管理
生成
- var store=new Vuex.Store({})
属性
- state
- getters
  - state、getters需放在组件的computed中this.$store.state.xx/this.$store.getters.xx
- mutations-提交
- actions-分发
  - mutations/actions需要放在methods中的某个函数中进行commit、dispatch
  - actions不能直接对state中的数据进行修改-在异步操作完成之后提交commit，通过mutations修改state中的数据

生命周期

create-创建
mount-挂载
update-更新
destroy-销毁-八个声明周期钩子函数
- 组件如果在页面结构中消失，那么正常情况下是被销毁了-触发destroy钩子函数
- 如果在组件外层添加keep-alive组件-缓存对应组件-不会触发destroy钩子函数
- 组件隐藏触发deactivated替换destroyed
- 当组件再次激活时，触发activated

errorCaptured

捕捉子孙组件的错误状态

nextTick

DOM更新完成后执行对应代码

自己上传npm包

www.npmjs.com

注册一个自己的npm账号

npm login // 在自己电脑上登录自己的npm账号
npm init 初始化自己的包的仓库
完成后

npm publish 上传报内容到npm仓库
更新
- 修改package.json中的版本号
- 在执行npm publish命令即可
删除npm仓库中的包
- npm unpublish 包名 --force
- 强制删除对应包

gulp

前端自动化构建工具

帮助处理前端需要手动重复完成的一些操作

    //基本流程-流水线
    gulp.task('任务名',[前置任务],function(){
      gulp.src('path')    //获取需要进行操作的原材料
          .pipe(sass())  //将sass/scss转为css
          .pipe(autoprefixer())  //将css自动添加前缀
          .pipe(gulp.dest('路径'))//将对应处理后的文件输出到指定位置
    })
    //还可设置监听-文件修改后，自动执行对应操作
    gulp.watch('path',['任务名'])
    //分生产环境，开发环境    不同的环境，执行不同的代码

获取DOM对象（六种方法）#

ID
name
ClassName
TagName
queryselector （兼容不好）
queryselectorAll （兼容不好）

事件流

捕获
- document -》-》事件源
冒泡
- 事件源 -》 -》 Document

绑定事件

零级事件
dom.onclick=function(){}
仅绑定对应事件，可能不会执行，当出现该事件时执行对应的函数
移除=》dom.onclick=null(dom零级事件只能绑定一个函数，再次绑定则会覆盖之前的)
二级事件
dom.addEventListener("click",fn,false)(第三个属性=》是否在捕获阶段执行对应函数，默认false)
dom.removeEventListener("click",fn,false)(移除时，三个属性都要相同，否则移除失败)
dom.attachEvent("onclick",fn)(添加事件监听，兼容模式（兼容更好）)
dom.detachEvent("onclick",fn)（移除，无第三属性，默认为起泡阶段执行对应事件）

事件委托

利用冒泡机制实现
不管事件绑定给谁，对应事件对象中的target肯定是交互上的目标元素
将事件绑定给父元素或祖先元素

兼容

e（事件对象）
- var e=e||window.event
target(事件目标)
- e.target||e.srcElement

阻止

阻止事件冒泡
- stopPropagation（）
- cancleBubble=true
组织事件的默认行为
- 表单的提交（伴随页面的刷新） / a标签的跳转（href="javascript:;"）
- preventDefault（）
- returnValue=false
- return false（只能写在最后，其后代码不再执行）

闭包

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁
使用闭包的注意点

（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
三大特点
- 函数嵌套函数
- 内部函数可以访问外部函数的变量
- 参数和变量不会被回收
闭包的作用在于，可以通过闭包，设计私有变量及方法

构造函数

new出来的实例对象中是没有对应的方法的，但可以调用
原型对象为什么叫原型对象（因为上一层的proto指向它）
继承-》当前对象拥有另外一个对象的属性和方法
继承=》将父对象的相关原型链嫁接到子对象上

IIFE（Immediately-invoked function expression）

创建块级（私有）作用域，避免了向全局作用域中添加变量和函数，因此也避免了多人开发中全局变量和函数的命名冲突
IIFE中定义的任何变量和函数，都会在执行结束时被销毁。这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了

跨域

CORS跨域（Cross-Origin Eesource Sharing 跨域资源共享）

html5规范定义的如何跨域访问资源
报错
- No 'Access-Control-Allow-Origin' header is present on the requested resource
原因
- 请求的url的协议，域名，端口，三者任意一个当前页面地址不同即为跨域
- 根本原因浏览器的安全措施：同源策略-域名、端口、协议
隐患
- CSRF（Cross-site request forgery）跨站请求伪造
  - 用户通过浏览器，访问正常网站A（例如某银行），通过用户的身份认证（比如用户名/密码）成功A网站。
  - 网站A产生Cookie信息并返回给用户的浏览器；
  - 用户保持A网站页面登录状态，在同一浏览器中，打开一个新的TAB页访问恶意网站B；
  - 网站B接收到用户请求后，返回一些攻击性代码，请求A网站的资源（例如转账请求）；
  - 浏览器执行恶意代码，在用户不知情的情况下携带Cookie信息，向网站A发出请求。
  - 网站A根据用户的Cookie信息核实用户身份（此时用户在A网站是已登录状态），A网站会处理该请求，导致来自网站B的恶意请求被执行。
实现方法
- CORS跨域请求

vue proxyTable-接口跨域请求调试（代理）

vue-route提供的结局跨域的方法
文件路径
- config-》index.js->dev(对象)->proxyTable(属性)=》'/apis': { // 测试环境 target: 'https://goods.footer.com', // 接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/apis': '' //需要rewrite重写的, } } }

JSONP

只能使用GET请求，并且要求返回JavaScript。利用浏览器允许跨域引用JavaScript资源
JSONP通常以函数调用的形式返回
将需要获取的数据，放在请求到的JavaScript返回函数中，作为参数传回
请求的方式
- GET、POST、HEAD、PUT、DELETE

html5+es6

复习

函数作用域

函数种类

this指向

函数this指向的修改方法--3种

arguments

js中的对象

类 class--es6新增

fetch

过渡、动画

transform

Vue组件通信

Vuex

生命周期

errorCaptured

nextTick

自己上传npm包

gulp

获取DOM对象（六种方法）#

事件流

绑定事件

事件委托

兼容

阻止

闭包

构造函数

IIFE（Immediately-invoked function expression）

跨域

CORS跨域（Cross-Origin Eesource Sharing 跨域资源共享）

vue proxyTable-接口跨域请求调试（代理）

JSONP

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

html5+es6

复习

函数作用域

函数种类

this指向

函数this指向的修改方法--3种

arguments

js中的对象

类 class--es6新增

fetch

过渡、动画

transform

Vue组件通信

Vuex

生命周期

errorCaptured

nextTick

自己上传npm包

gulp

获取DOM对象 （六种方法）#

事件流

绑定事件

事件委托

兼容

阻止

闭包

构造函数

IIFE（Immediately-invoked function expression）

跨域

CORS跨域（Cross-Origin Eesource Sharing 跨域资源共享）

vue proxyTable-接口跨域请求调试（代理）

JSONP

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

获取DOM对象（六种方法）#