- 轉載請著名出處
- 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低版本要求苛刻的面試，果斷放棄
事件冒泡
<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
不一定服務器端真正有一個
classindex.html文件服務器可以根據請求，動態生成一個文件，返回
同理與<script src="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,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函數 使用getFormatDatea.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或者分支
