<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/#div1 {height: 200px;width: 200px;background: red;position: absolute;}
#div2 {height: 500px;width: 700px;background: gray;position:relative;}/
</style>
</head>
<body>
<!--<div id='div2'>1
<div id='div1'>2</div>
</div>-->
<canvas id='can' width="500" height="500" style="border:1px solid lightblue;"></canvas>
<!-- span實際寬高 0 坦辟，0 -->
<!--<div style="width: 400px;height:100%;">
<span style="float:left;width:auto;height:100%;">
<i style="position:absolute;float:left;width:100px;height: 50px;">1212121</i>
</span>
</div>-->
<script>
// for(var i=0;i<5;i++){
// setTimeout(function(){
// console.log(i+'') //答案 ：55555
// },100)
// }
// alert(undefined ==null ) //答案：true
// console.log(1+"2"+"2"); // 答案： 122
// console.log(1+ +"2"+"2"); // 32
// console.log("A"-"B"+"2"); // NaN2
// console.log("A"-"B"+2); // NaN
// console.log(typeof(1)) // number
// console.log(typeof(1.2)) // number
// console.log(typeof(undefined)) // undefined
// console.log(typeof({})) // object
// console.log(typeof('4299'-0)) // number
// console.log(typeof(null)) // object
// var obj = [name:'zhangsan',show:function(){alert(name)}]
// var obj = {name:'zhangsan',show:'alert(this.name)'}
// var obj = {name:'zhangsan',show:function(){alert(name)}}
// var obj = {name:'zhangsan',show:function(){alert(this.name)}} //正確為最后一個
// var a = new Array(2,3,4,5,6)
// var b = 0
// for(var i=0;i<a.length;i++)
// b += a[i]
// document.write(b) // 答案：20
// var a = parseInt('101和問起')
// document.write(a) // 答案：101
// 添加暴区、移除纯丸、移動、復(fù)制敏储、創(chuàng)建、查找節(jié)點:
// （1）創(chuàng)建新節(jié)點
// createDocumentFragment() //創(chuàng)建一個DOM片段
// createElement() //創(chuàng)建一個具體的元素
// createTextNode() //創(chuàng)建一個文本節(jié)點
// （2）添加朋鞍、移除已添、替換、插入
// appendChild()
// removeChild()
// replaceChild()
// insertBefore()
// （3）查找
// getElementsByTagName() //通過標(biāo)簽名稱
// getElementsByName() //通過元素的Name屬性的值
// getElementById() //通過元素Id滥酥，唯一性
// 如何讓div居中更舞，如何讓一個浮動元素居中，如何讓絕對定位的元素居中
// 1. text-alin:center;
// 2. margin:0 auto
// 3. position:relative|absolute; left:50%;
// 你有哪些性能優(yōu)化的方法坎吻？
// （1） 減少http請求次數(shù)：CSS Sprites, JS缆蝉、CSS源碼壓縮、圖片大小控制合適瘦真；網(wǎng)頁Gzip刊头，CDN托管，data緩存诸尽，圖片服務(wù)器原杂。
// （2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費弦讽，前端用變量保存AJAX請求結(jié)果污尉，每次操作本地變量膀哲，不用請求，減少請求次數(shù)
// （3） 用innerHTML代替DOM操作被碗，減少DOM操作次數(shù)某宪，優(yōu)化javascript性能。
// （4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style锐朴。
// （5） 少用全局變量兴喂、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作焚志。
// （6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamicproperties(動態(tài)屬性)衣迷。
// （7） 圖片預(yù)加載，將樣式表放在頂部酱酬，將腳本放在底部 加上時間戳壶谒。
// 前端工程師理解:
// 首先，你必須是一個合格的“頁面仔”膳沽，所有的頁面可以用css+html來實現(xiàn)汗菜。
// js和jquery也是必須會的，因為純靜態(tài)的頁面是沒辦法完全吸引一個用戶的挑社。
// 你的各種特效就需要使用js或者jquery啦陨界。
//
// jquery是一個框架它能實現(xiàn)js的一些效果，但是它的使用學(xué)習(xí)就更加簡單痛阻。
//
// 其次菌瘪，前端主要負(fù)責(zé)實現(xiàn)視覺和交互功能，以及與后端服務(wù)器通信阱当，完成業(yè)務(wù)邏輯俏扩。
// 懂一些設(shè)計方面的技能和基本素養(yǎng)，比如PS的一些基本操作斗这，切圖动猬，和顏色值。
// 而且后端的服務(wù)器知識和語言基礎(chǔ)還是要有的表箭，這樣在工作對接的時候
// 理解了才能更加利于團隊合作赁咙。
//
// 前端開發(fā)工程師，會熟練使用時下非常流行的HTML5免钻、CSS3技術(shù)彼水，架構(gòu)炫酷的頁面；
// 3D极舔、旋轉(zhuǎn)凤覆、粒子效果，頁面變得越來越炫拆魏，對人才的要求也越來越高盯桦。
// 前端開發(fā)工程師慈俯，會全面掌握PC、手機拥峦、iPad等多種設(shè)備的網(wǎng)頁呈遞解決方案贴膘，
// 響應(yīng)式技術(shù)那可是看家本領(lǐng)，不僅僅是使用略号，我們會更多的探討使用領(lǐng)域刑峡。
//
// 前端開發(fā)工程師，會掌握Ajax技術(shù)玄柠，頁面不刷新突梦，就能獲得后臺或是數(shù)據(jù)庫中的數(shù)據(jù)，
// 更好地呈遞給用戶羽利！多么棒的用戶體驗宫患！
//
// 前端開發(fā)工程師，會掌握高級面向?qū)ο笳饣 ⒃O(shè)計模式撮奏、MVC、Angular等高級程序書寫技術(shù)当宴。
// 做大項目的時候，這些技術(shù)泽疆，能夠讓你的項目結(jié)構(gòu)清晰户矢，易于維護(hù)！
//
// 前端開發(fā)工程師殉疼，還會大數(shù)據(jù)的前端可視化梯浪、借助Node.js完成全棧開發(fā)、集成測試瓢娜、
// 自動化工作流挂洛、版本控制系統(tǒng)、團隊協(xié)同眠砾、自動化部署等等
// function test(){
// var n = 666;
// function add(){
// n++;
// console.log(n)
// }
// return {n:n,add:add}
// }
// var a = test()
// var b = test()
// a.add(); // 答案： 667
// a.add(); // 668
// console.log(b.n); // 666
// b.add(); // 667
// 寫一個求和函數(shù)sum虏劲，達(dá)到求和：
// function sum(){
// var arr = Array.prototype.slice.call(arguments);
// var sum = 0;
// for(var i = 0; i < arr.length; i++){
// if(typeof(arr[i]) == "string" || typeof(arr[i]) == "number"){
// if(isNaN(Number(arr[i])) == false){
// sum += Number(arr[i]) * 100;
// }
// }
// }
// return sum/100;
// }
//
// console.log(sum(1, 2, 3, 4, 5));
// console.log(sum(5, null, -5));
// console.log(sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
//'E', 1, 'F', 1, 'G', 1));
// console.log(sum(0.1, 0.2));
// 拖拽：
// window.onclick = function(){
// var oDiv = document.getElementById("div1");
// var oDiv2 = document.getElementById("div2");
//
// oDiv.onmousedown = function(ev){
// var oEvent = ev || event;
//
// var disX = oEvent.clientX - oDiv.offsetLeft;
// var disY= oEvent.clientY - oDiv.offsetTop;
//
// //這里不能用oDiv，因為寬度小褒颈，當(dāng)鼠標(biāo)移出時就會失去效果
// document.onmousemove = function(ev){
// var oEvent = ev || event;
// var x = oEvent.clientX - disX;
// var y = oEvent.clientY - disY;
//
// //解決div跑出界面的情況
// if(x < 50){ //吸附原理
// x = 0;
// }
// else if(x > oDiv2.offsetWidth - oDiv.offsetWidth - 50){
// x = oDiv2.offsetWidth - oDiv.offsetWidth;
// }
//
// if(y < 50){
// y = 0;
// }
// else if(y > oDiv2.offsetHeight - oDiv.offsetHeight - 50){
// y = oDiv2.offsetHeight - oDiv.offsetHeight;
// }
//
// oDiv.style.left = x + 'px';
// oDiv.style.top = y + 'px';
// }
//
//
// document.onmouseup = function(){
// document.onmousemove = null;
// document.onmouseup = null;
// }
//
// //解決FF問題
// return false;
// }
// }
// 用canvas畫矩形,點擊時改變矩形顏色
// var canvas = document.getElementById('can');
// var context = canvas.getContext('2d');
// context.beginPath();
// context.rect(100, 50, 100, 100);
// context.fillStyle = 'white';
// context.fill();
// context.lineWidth = 1;
// context.strokeStyle = 'red';
// context.stroke();
// 問:什么情況下使用vuex柒巫？
// 如果ajax請求的數(shù)據(jù)只是在當(dāng)前組件中使用，可以直接ajax請求谷丸，
// 不需要vuex堡掏，如果他的父組件或者其他組件需要使用這個ajax返回的數(shù)據(jù)，
// 可以使用vuex刨疼，在其他組件里面的computed監(jiān)聽這個state泉唁，
// 數(shù)據(jù)返回后會自動刷新其他組件的鹅龄。store是個容器，所有的共享數(shù)據(jù)掛在state下面亭畜。
// 生命周期：它可以總共分為8個階段：
// beforeCreate（創(chuàng)建前）,
// created（創(chuàng)建后）,
// beforeMount(載入前),
// mounted（載入后）,
// beforeUpdate（更新前）,
// updated（更新后）,
// beforeDestroy（銷毀前）,
// destroyed（銷毀后）
// beforecreated：el 和 data 并未初始化
// created:完成了 data 數(shù)據(jù)的初始化扮休，el沒有
// beforeMount：完成了 el 和 data 初始化
// mounted ：完成掛載
// beforecreate : 舉個栗子：可以在這加個loading事件
// created ：在這結(jié)束loading，還做一些初始化贱案，實現(xiàn)函數(shù)自執(zhí)行
// mounted ： 在這發(fā)起后端請求肛炮，拿回數(shù)據(jù)，配合路由鉤子做一些事情
// beforeDestroy： 你確認(rèn)刪除XX嗎宝踪？ destroyed ：當(dāng)前組件已被刪除侨糟，清空相關(guān)內(nèi)容
// axios也是基于XMLHttpRequest對象的一種請求數(shù)據(jù)的方式,
// 從瀏覽器中創(chuàng)建 XMLHttpRequest
// 從 node.js 發(fā)出 http 請求
// 支持 Promise API
// 攔截請求和響應(yīng)
// 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
// 取消請求
// 自動轉(zhuǎn)換JSON數(shù)據(jù)
// 客戶端支持防止 CSRF/XSRF
// javaScript鏈?zhǔn)秸{(diào)用原理以及加法實現(xiàn)
// function add (num) {
// var count = num;
// var _b = function(l){
// count += l;
// return _b
// }
// _b.valueOf = function(){
// return count
// }
// return _b
// }
// var c = add(1)(2)(3);
// console.log(c) //6
// 異步加載js文件
// 1. 使用回到函數(shù)在加載完成資源后調(diào)用該資源的方法 onload
// 2. require.js模塊化工具
</script>
</body>
</html>
