JavaScript-知识总结-2(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低版本要求苛刻的面试,果断放弃

事件冒泡

<body>
  <div id="div1">
    <p id="p1">激活</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
    <p id="p4">取消</p>
  </div>
  <div id="div2">
    <p id="p5">取消</p>
    <p id="p6">取消</p>
  </div>
</body>
var p1 = document.getElementById('p1');
var body = document.body;
bindEvent(p1,'click',function (e) {
  e.stopPropatation();
  alert('激活');
});
bindEvent(body,'click',function(e){
  alert('取消');
})

代理

<div id="div1">
  <a href="#">a1</a>
  <a href="#">a2</a>
  <a href="#">a3</a>
  <a href="#">a4</a>
  <!-- 会随时新增更多a标签 -->
</div>
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
    • 跨域条件:协议、域名、端口、有一个不同就算跨域
      • 但是有三个标签允许跨域加载资源
      • <img src=XXX>
      • <link href=XXXX>
      • <script src=XXX>
    • 三个标签的场景
      • <img>用于打点统计,统计网站可能是其他域
      • <link><script>可以使用CDN,CDN的也是其他域
      • <script>可以用于JSONP
    • 跨域注意事项
      • 所有的跨域请求都必须经过信息提供方允许
      • 如果未经允许即可获得,那是浏览器同源策略出现漏洞
  • JSONP
    • 加载 http://coding.m.imooc.com/classindex.html

    • 不一定服务器端真正有一个classindex.html文件

    • 服务器可以根据请求,动态生成一个文件,返回

    • 同理与<script src="http://coding.m.imooc.com/api.js">

    • 假如你的网站要跨域访问慕课网的一个接口

    • 给你一个地址http://coding.m.imooc.com/api.js

    • 返回内容格式如callback({x:100,y:200})(可动态生成)

<script>
window.callback = function (data) {
  //这是我们跨域的到信息
  console.log(data);
}
</script>
<script src="http://coding.m.imooc.com/api.js"></script>
<!-- 以上将返回 callback({x:100,y:200}) -->
  • 服务器端设置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,sessionStoragelocalStorage的区别?

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));
  • 使用
<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>
<!-- 1.这些代码中的函数必须是全局变量,才能暴露给使用方。全局变量污染 -->
<!-- 2. a.js 知道要引用 a-util.js ,但是他知道还需要依赖于util.js吗? -->

使用模块化

//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));

//直接‘<script src="a.js"></script>’,其他的根据依赖关系自动引用
//那两个函数,没必要做成全局变量,不会带来污染和覆盖

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);
});
  • 使用
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
</head>
<body>
  <p>AMD test</p>
  <script src="/require.min.js" data-main="./main.js"></script>
</body>
</html>

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或者分支

推荐阅读更多精彩内容

  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 4,027评论 0 104
  • 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/...
    风起云帆阅读 95评论 0 0
  • 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/...
    还是那个西瓜阅读 110评论 0 1
  • 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/...
    AuthorJim阅读 58评论 0 0
  • 声明:这些题目是在某个前端群看到的,在这分享给大家,如有侵权,请私信。 1.一些开放性题目 position的值,...
    一岁一枯荣_阅读 5,763评论 0 32