gulp和webpack区别

  • gulp是一种工具,我们可以用它来优化前端的工作流程,比如自动刷新页面、combo、压缩css、js、编译less等等。具体体现为:在gulp的配置文件中书写一个个的task,webpack则是一种打包工具,或者说是一种模块化解决方案,实际上很大一部分人刚开始使用webpack的方式就是通过gulp-webpack这个插件,写好task来使用webpack对前端的一些文件进行打包;
  • gulp的处理任务需要自己去写,webpack则有现成的解决方案,只需要在webpack.config.js配置好即可;

防止重复发送Ajax请求

  • 用户点击之后按钮disabled;
  • 函数节流
  • abort掉上一个请求。

事件模型

  • 事件捕获阶段(capturing phase)。事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行。
  • 事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。
  • 事件冒泡阶段(bubbling phase)。事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行

Ajax的状态值与HTTP状态码

Ajax的状态值

  • (未初始化)还没有调用open()方法;
  • (载入)已经调用open()方法,正在派发请求,send()方法还未被调用;
  • (载入完成)send()已经调用,响应头和响应状态已经返回;
  • (交互)响应体下载中; responseText中已经获取了部分数据;
  • (完成)响应内容已经解析完成,用户可以调用。。

HTTP状态码

  • 200 & OK: 请求成功;
  • 204 & No Content: 请求处理成功,但没有资源可以返回;
  • 206 & Partial Content: 对资源某一部分进行请求(比如对于只加载了一般的图片剩余部分的请求);
  • 301 & Move Permanently: 永久性重定向;
  • 302 & Found: 临时性重定向;
  • 303 & See Other: 请求资源存在另一个URI,应使用get方法请求;
  • 304 & Not Modified: 服务器判断本地缓存未更新,可以直接使用本地的缓存;
  • 307 & Temporary Redirect: 临时重定向;
  • 400 & Bad Request: 请求报文存在语法错误;
  • 401 & Unauthorized: 请求需要通过HTTP认证;
  • 403 & Forbidden: 请求资源被服务器拒绝,访问权限的问题;
  • 404 & Not Found: 服务器上没有请求的资源;
  • 500 & Internal Server Error: 服务器执行请求时出现错误;
  • 502 & Bad Gateway: 错误的网关;
  • 503 & Service Unavailable: 服务器超载或正在维护,无法处理请求;
  • 504 & Gateway timeout: 网关超时;

什么是原型链

每一个对象都会在内部链接到另一个对象(该对象的原型对象),该对象有一个原型prototype,当访问对象的属性或是方法的时候,不仅仅会在原对象上查找,还会顺着原型链在原型对象的原型链上查找,直到查到null(所有原型链的顶层)为止。原型是JavaScript实现继承的基础,new关键字做的主要的事情就是将实例对象的__proto__属性指向原型对象的prototype。

什么是闭包

  • 闭包是javascript支持头等函数的一种方式,它是一个能够引用其内部作用域变量(在本作用域第一次声明的变量)的表达式,这个表达式可以赋值给某个变量,可以作为参数传递给函数,也可以作为一个函数返回值返回。
  • 闭包是函数开始执行的时候被分配的一个栈帧,在函数执行结束返回后仍不会被释放(就好像一个栈帧被分配在堆里而不是栈里!)
  • 闭包的应用:

    • 比如写柯里化函数的时候利用闭包,保存参数在内存中;

      var currying = function(fun) {

        //格式化arguments
      var args = Array.prototype.slice.call(arguments, 1);
        return function() {
            //收集所有的参数在同一个数组中,进行计算
            var _args = args.concat(Array.prototype.slice.call(arguments));
            return fun.apply(null, _args);
        };

      }​

    • 模拟私有变量或是私有方法;

      const people = (num) => {

        var num = num;
        return {
          increase: () => {
                num++;
          },
            get: () => {
                return num;
            }
      }

      }
      const man = people(4);
      man.increase();
      man.get();

    • 避免引用错误

      for (var i = 0; i < 4; i++) {

        (function(_i) {
            setTimeout(function() {
                console.log(_i)
          }, 1000)
        })(i)

      }​

图片懒加载与预加载

  • 图片懒加载的原理就是暂时不设置图片的src属性,而是将图片的url隐藏起来,比如先写在data-src里面,等某些事件触发的时候(比如滚动到底部,点击加载图片)再将图片真实的url放进src属性里面,从而实现图片的延迟加载
  • 图片预加载,是指在一些需要展示大量图片的网站,实现图片的提前加载。从而提升用户体验。常用的方式有两种,一种是隐藏在css的background的url属性里面,一种是通过javascript的Image对象设置实例对象的src属性实现图片的预加载。相关代码如下:
  • CSS预加载图片方式:

    #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
    #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
    #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

  • Javascript预加载图片的方式:
function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下来可以使用图片了
        //do something here
    } else {
        img.onload = function() {
            //接下来可以使用图片了
            //do something here
        };
    }
}

跨域

跨域的方式有很多种,最常用的是jsonp主要利用了script的开放策略:通过script标签引入一个js或者是一个其他后缀形式(如php,jsp等)的文件,此文件返回一个js函数的调用。缺点在于只支持get请求而且存在安全问题

CORS跨域,关键在于服务器,如果服务器实现了CORS跨域的接口,那么就可以使用ajax(请求路径为绝对路径)进行跨域请求。CORS请求分为两种,一种是简单请求,一种是非简单请求。简单请求是指请求方法在HEAD,GET,POST三者之间并且请求头信息局限在

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求请求头:
(1)Access-Control-Request-Method

该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法

(2)Access-Control-Request-Headers

该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段

执行简单请求的时候,浏览器会在请求头信息增加origin字段,服务器据此来判断请求域名是否在许可范围之内,来决定是否

返回Access-Control-Allow-Origin字段。

响应头有以下几种:

(1)Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

(2)Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许

可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。

(3)Access-Control-Expose-Headers

该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control

Content-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段,

就必须在Access-Control-Expose-Headers里面指定。

(4)Access-Control-Max-Age

Access-Control-Max-Age 首部字段指明了预检请求的响应的有效时间。

(5)Access-Control-Allow-Methods

Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。

(6)Access-Control-Allow-Headers

Access-Control-Allow-Headers首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

其他方法:document.domin,html5的postMessage,window.name

ES6常用特性

  • 变量定义(let和const,可变与不可变,const定义对象的特殊情况)
  • 解构赋值
  • 模板字符串
  • 数组新API(例:Array.from(),entries(),values(),keys())
  • 箭头函数(rest参数,扩展运算符,::绑定this)
  • Set和Map数据结构(set实例成员值唯一存储key值,map实例存储键值对(key-value))
  • Promise对象(前端异步解决方案进化史,generator函数,async函数)
  • Class语法糖(super关键字)
作者:Damonare 链接:https://juejin.im/post/591afe90128fe1005ce339f7 来源:掘金

扫描二维码,在手机上阅读!