JavaScript-知识总结-2（GitHub更新）

• 转载请著名出处
• GitHub-TYRMars
• 文章Github地址

04-06

BOM操作

• Browser Object Model

如何监测浏览器的类型

拆解url的各部分

知识点

• navigator & screen

//navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);
//screen
console.log(screen.width);
console.log(screen.height);

• location & history

//location
console.log(location.href);
console.log(location.protocel);
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);
//history
history.back();
history.forward();

05-01

编写一个通用的事件监听函数

描述事件冒泡流程

* DOM树形结构
* 事件冒泡
* 阻止冒泡
* 冒泡的应用

对于一个无线下拉加载图片的页面，如何给每个图片绑定事件

* 使用代理
* 知道代理的有点

通用事件绑定

var btn = document.getElementById('btn1');
btn.addEventListener('click',function (event) {
  console.log('clicked');
})

function bindEvent(elem,type,fn) {
  elem.addEventListener(type,fn);
}
var a = document.getElementById('link1')
bindEvent(a,'click',function(e){
  e.preventDefault(); //阻止默认行为
  alert('clicked');
});

• 关于IE低版本的兼容性
  • IE低版本使用attachEvent绑定事件，和W3C标准不一样
  • IE低版本使用量非常少，很多网站早已不支持
  • 建议对IE低版本的兼容性：了解即可，无需深究
  • 如果遇到对IE低版本要求苛刻的面试，果断放弃

事件冒泡

  

    
激活
    
取消
    
取消
    
取消
  
  

    
取消
    
取消
  

var p1 = document.getElementById('p1');
var body = document.body;
bindEvent(p1,'click',function (e) {
  e.stopPropatation();
  alert('激活');
});
bindEvent(body,'click',function(e){
  alert('取消');
})

代理

  a1
  a2
  a3
  a4
  

var div1 = document.getElementById('div1');
div1.addEventListener('click',function (e) {
  var target = e.target;
  if (target.nodeName === 'A') {
    alert(target.innerHTML);
  }
})

完善通用绑定事件的函数

//使用代理
var div1 = document.getElementById('div1');
bindEvent(div1,'click','a',function (e) {
  console.log(this.innerHTML);
})

function bindEvent(elem,type,selector,fn) {
  if (fn == null) {
    fn = selector;
  }
  elem.addEventListener(type,function (e) {
    var target;
    if (selector) {
      target = e.target;
      if (target.matches(selector)) {
        fn.call(target,e);
      }
    }else {
      fn(e);
    }
  })
}

05-02

Ajax-XMLHttpRequest

• 手动编写一个ajax，不依赖第三方库
• 跨域的几种实现方式

知识点

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("GET","/api",false)
xhr.onreadystatechange = function () {
  //这里的函数异步执行，可参考之前JS基础的异步模块
  if(xhr.readyState == 4){
    if (xhr.status == 200) {
      alert(xhr.responseText)
    }
  }
}
xhr.send(null);

* IE低版本使用ActiveXObject，和W3C标准不一样
* IE低版本使用量已经非常少，很多网站早已不支持IE低版本
* 建议对IE低版本的兼容性：了解即可，无需深究

状态码

xhr.onreadystatechange = function () {
  //这里的函数异步执行，可参考之前JS基础的异步模块
  if(xhr.readyState == 4){
    if (xhr.status == 200) {
      alert(xhr.responseText)
    }
  }
}

• readyState
  • 0-(未初始化)还没有调用send()方法
  • 1-(载入)已调用send()方法，正在发送请求
  • 2-(载入完成)send()方法执行完成，已经接收到全部响应内容
  • 3-(交互)正在解析响应内容
  • 4-(完成)响应内容解析完成，可以在客户端调用
• status
  • 2XX-表示成功处理请求。如200
  • 3XX-需要重定向，浏览器直接跳转
  • 4XX-客户端请求错误，如404
  • 5XX-服务端错误

跨域

• 什么时跨域
  • 浏览器有同源策略，不允许ajax访问其他域接口
  • http://www.yourname.com/page1.html
  • http://m.imooc.com/course/ajaxcourserecom?cid=459
  • 跨域条件：协议、域名、端口、有一个不同就算跨域
    • 但是有三个标签允许跨域加载资源
    • 
    • • 服务器端设置http header
        • 另外一个解决跨域的简洁方法，需要服务器来做
        • 但是作为交互方，我们必须知道这个方法
        • 是将来解决跨域问题的一个趋势

      //注意：不同后端语言的写法可能不一样
      
      //第二个参数填写允许跨域的域名称，不建议直接写 “*”
      response.setHeader("Access-Control-Allow-Origin","http://a.com, http://b.com");
      response.setHeader("Access-Control-Allow-Header","X-Requested-With");
      response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
      
      //接收跨域的cookie
      response.setHeader("Access-Control-Allow-Credentials","true");
      

      05-03

      存储

      • 请描述一下cookie,sessionStorage和localStorage的区别？

      cookie

      • 本身用于客户端和服务端通信
      • 但是它有本地存储的功能，于是就被借用
      • 使用document.cookie = ... 获取和修改即可

      cookie用于存储的缺点

      • 存储量小，只有4kb
      • 所有http请求都带着，会影响获取资源的效率
      • API简单，需要封装才能用document.cookie = ...

      localStorage和sessionStorage

      • HTML5专门为存储设计，最大容量5M
      • API简答易用：
      • localStorage.setItem(key,value);localStorage.getItem(key);
      • sessionStorage关闭浏览器会清理
      • iOS safari 隐藏模式下，localStorage.getItem会报错
      • 建议统一使用try-catch封装

      cookie sessionStorage localStorage 的区别

      • 容量
      • 是否会携带到ajax中
      • API易用性

      06-01

      模块化

      • 不使用模块化
      • 使用模块化
      • AMD
      • CommonJS

      不使用模块化

      • util getFormatDate函数
      • a-util.js aGetFormatDate函数 使用getFormatDate
      • a.js aGetFormatDate
      • 定义

      //util.js
      function getFormatDate(date,type) {
        //type === 1返回 2017-06-15
        //type === 2返回 2017年6月15日 格式
        //...
      }
      //a-util.js
      function aGetFormatDate(data) {
        //返回
        return getFormatDate(date,2);
      }
      // a.js
      var dt = new Date()
      console.log(aGetFormatDate(dt));
      

      • 使用

      使用模块化

      //util.js
      export{
        getFormatDate:function (data,type) {
          //type === 1 返回 2017-06-15
          //type === 2 返回 2017年6月15日 格式
        }
      }
      //a-util.js
      var getFormatDate = require('util.js');
      export{
        aGetFormatDate:function (date) {
          //要求返回 2017年6月15日 格式
          return getFormatDate(date,2);
        }
      }
      // a.js
      var aGetFormatDate = require('a-util.js')
      var dt = new Date();
      console.log(aGetFormatDate(dt));
      
      //直接‘’,其他的根据依赖关系自动引用
      //那两个函数，没必要做成全局变量，不会带来污染和覆盖
      

      06-02

      AMD

      • require.js requirejs.org/
      • 全局define函数
      • 全局require函数
      • 依赖JS会自动、异步加载

      //util.js
      define(function () {
        return{
          getFormatDate: function (date,type) {
            if (type === 1) {
              return '2017-06-15'
            }
            if (type === 2) {
              return '2017年6月15日'
            }
          }
        }
      });
      
      //a-util.js
      define(['./util.js'],function (util) {
        return{
          aGetFormatDate: function (date) {
            return util.getFormatDate(date,2);
          }
        }
      });
      
      // a.js
      define('[./a-util.js]',function (aUtil) {
        return{
          printDate:function (date) {
            console.log(aUtil.aGetFormatDate);
          }
        }
      });
      
      //main.js
      require('[./a.js]',function (a) {
        var date = new Date();
        a.printDate(date);
      });
      

      • 使用

      
      
      
        
        
      
      
        
      AMD test
        
      
      
      

      06-03

      CommonJS

      • nodejs模块化规范，现在被大量用于前端，原因：
        • 前端开发依赖的插件和库，都可以从npm中获取
        • 构建工具的高度自动化，是的使用npm的成本非常低
        • CommonJS不会异步加载JS，而是同步一次性加载出来

      module.exports = {
        getFormatDate:function (data,type) {
          if (type === 1) {
            return '2017-06-15';
          }
          if (type === 2) {
            return '2017年6月15日';
          }
        }
      }
      
      // a-util.js
      var util = require('util.js')
      module.exports = {
        aGetFormatDate:function (data) {
          return util.getFormatDate(data,2);
        }
      }
      

      AMD和CommonJS的使用场景

      • 需要异步加载JS，使用AMD
      • 使用了npm之后建议使用CommonJS

      06-04

      Git

      常用命令

      • git initgit初始化
      • git add .文件新增
      • git checkout XXX出错还原
      • git commit -m "XXX"commit提交到本地仓库 后面为注释
      • git push origin master 代码上传
      • git pull origin master 代码下载

      多人开发

      • git branch看当前分支
      • git checkout -b xxx/git checkout xxx创建一个分支/切换分支
      • git merge xxx分支更改的东西提交到master或者分支