2017年8月
1壤蚜，ES6 Map和Set
Map
ES6中新增的數(shù)據(jù)類型洲劣，類似PHP中的鍵值對形式結(jié)構(gòu)
var m = new Map([['a',1],['b',2],['c',3]]);
m.get('a'); //1
m.set('d',4); //新增
Set
ES6中新增了Set數(shù)據(jù)結(jié)構(gòu)，類似于數(shù)組濒憋，但是它的成員都是唯一的幌墓，其構(gòu)造函數(shù)可以接受一個數(shù)組作為參數(shù)
let array = Array.from(newSet([1,1,1,2,3,2,4]));
//Array.from函數(shù)可以實現(xiàn)set-->Array的轉(zhuǎn)化
console.log(array);// => [1, 2, 3, 4]
2回铛，MVVM
angular,js
臟檢查模式:在angular中當觸發(fā)某些執(zhí)行條件時(如change，input等)克锣，執(zhí)行一個檢測輪詢，來遍歷所有數(shù)據(jù)腔长，對比更改的地方袭祟，然后執(zhí)行變化，響應到DOM
因為此方法不科學捞附，有很多多余的遍歷巾乳，故稱為臟檢查
vue.js
數(shù)據(jù)劫持:在ES5中定義了一個名為"屬性描述符的對象"您没，可以通過Object.getPropertyDescriptor()來查詢，getPropertyDescriptor接收一個對象胆绊，和對象上的某個屬性兩個參數(shù)氨鹏，查詢該屬性的四個描述符狀態(tài)，如:
Object.getPropertyDescriptor({x:1},x);
//返回該屬性的值压状，可寫性仆抵，可枚舉性和可配置性
{
value:1,
writable:true,
enumeable:true,
configurable:true
}
而需要設(shè)置，修改這些特性時种冬，使用Object.defineProperty镣丑。在vue vm中通過Object.defineProperty()對需要監(jiān)聽的每個對象屬性設(shè)置getter和setter，每當對象屬性的數(shù)據(jù)發(fā)生變更時娱两，觸發(fā)setter的函數(shù)(劫持)莺匠，在setter中通知所有的訂閱者，watcher監(jiān)聽到變化之后更新視圖
函數(shù)節(jié)流
「函數(shù)節(jié)流讓一個函數(shù)只有在你不斷觸發(fā)后停下來歇會才開始執(zhí)行十兢，中間你操作得太快它直接無視你趣竣。」
為了節(jié)制某些函數(shù)的執(zhí)行頻率旱物，在觸發(fā)時設(shè)置setTimeout遥缕，如果短時間內(nèi)再次觸發(fā)，清除上一個定時器异袄，設(shè)置新的定時器通砍。
function throttle(method, context) {
clearTimeout(methor.tId);
method.tId = setTimeout(function(){
method.call(context);
}， 100);
}
//接收一個函數(shù)和一個上下文(函數(shù)執(zhí)行上下文為非必選參數(shù))烤蜕，將定時器設(shè)為該函數(shù)的一個屬性封孙，100ms內(nèi)再次調(diào)用這個函數(shù)將清除并重新設(shè)置定時器
//調(diào)用
window.onresize = function(){
throttle(myFunc);
}
//摘自js高程
2017年9月
1，獲取瀏覽器窗口大小
//PC
var pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
//移動設(shè)備中讽营，除了以上方法window.innerWidth || window.innerHeight都保存著可見視口信息
2虎忌，常見的POST數(shù)據(jù)提交方式
application/x-www-form-urlencoded：瀏覽器的原生表單提交，若不設(shè)置參數(shù)格式橱鹏，默認就為application/x-www-form-urlencoded膜蠢，后端可以方便讀取
multipart/form-data：常用于文件上傳，于表單和請求頭中設(shè)置
application/json：這種方案莉兰，可以方便的提交復雜的結(jié)構(gòu)化數(shù)據(jù)挑围，特別適合 RESTful 的接口。各大抓包工具如 Chrome 自帶的開發(fā)者工具糖荒、Firebug杉辙、Fiddler，都會以樹形結(jié)構(gòu)展示 JSON 數(shù)據(jù)捶朵，非常友好蜘矢。
3狂男，前端安全XSS和CRSF
XSS，跨站腳本攻擊品腹，全稱cross-site scripting岖食，使用js腳本注入的方式攻擊網(wǎng)站。
防范:
1舞吭，過濾轉(zhuǎn)義輸入輸出泡垃，若輸入輸出中帶有<script>等標簽，將不會被執(zhí)行镣典。
2兔毙，通信cookie使用httponly屬性，防止被讀寫.
CRSF兄春，跨站請求偽造澎剥，偽造請求發(fā)送到服務器
防范:
1，防止登錄的session長時間儲存在客戶端中赶舆，設(shè)置reprice
2哑姚，檢測請求域名
3，關(guān)鍵請求使用驗證碼
4芜茵，CSS中的box-sizing
box-sizing用于設(shè)置盒模型的模式
其中屬性
context-box:(默認值)標準盒模型叙量，border和padding不計入元素width中，一個塊的總寬度等于margin+padding+border+width
border-box:IE怪異盒模型九串，border和padding計入width中绞佩，一個塊的總寬度等于margin+width
padding-box:padding計算入width內(nèi)
5，H5語義化標簽
標簽寫得語義化有助于SEO猪钮，搜索引擎易檢索查到品山。
充分利用各種HTML標簽完成他們本職的工作。
6烤低，創(chuàng)建對象方式
1肘交，對象字面量 var obj = {a:1}
2，構(gòu)造函數(shù)創(chuàng)建對象 var obj = new Function()
3扑馁，對象原生方法創(chuàng)建 var obj = Object.create({})
7涯呻，New一個新對象時發(fā)生了什么？
var obj = new Function()
1腻要，創(chuàng)建了一個新對象 obj
2复罐，將this上下文指向這個新對象 this-->obj，此時的這個對象已經(jīng)是繼承于構(gòu)造函數(shù).prototype
3雄家，執(zhí)行構(gòu)造函數(shù)中的代碼
4市栗，返回一個新對象 return obj 共四步
8，性能優(yōu)化
1，雪碧圖填帽，減少http請求
2，減少dom操作（事件代理等）
3咙好，壓縮js,css
4篡腌，CDN靜態(tài)資源托管
5，DNS預加載(在頭部添加meta標簽勾效，預先請求域名外的域名文件)
9嘹悼，今日雜項
1，表單reset之后不是清空表表單层宫，而是重置到每個input都為默認的value值
2杨伙，Jq中設(shè)置dom屬性為$("#id").attr('src',path)形庭；
而在JS中為dom.setattribute('value',value)泵喘；
3羞酗，原生表單提交阻止頁面自動跳轉(zhuǎn)熊赖，設(shè)置一個隱藏的iframe堵漱，然后將表單的target指向該iframe舍扰，返回信息顯示在iframe中而頁面不會跳轉(zhuǎn)具垫。原始發(fā)送表單submit()趟卸。
4贮庞，刷新頁面location.reload峦筒。
10，ES6深拷貝
var arr = [1,2,3]
var copy = Object.assign([],arr) //此處的第一個參數(shù)也能換成{}對象形式窗慎，返回的copy即為鍵值對對象
copy.push(4)
console.log(arr) //[1, 2, 3]
console.log(copy) //[1物喷，2，3遮斥，4] 對copy的操作并未對arr產(chǎn)生影響
11峦失，事件委托性能優(yōu)化
在一個UI李有10個li，實現(xiàn)點擊對應的li伏伐，輸出對應的下標
var lis = querySelectorAll('li')
for(var i = 0 ; i < 10 ; i++){
lis[i].onclick = (function(a) {
return function() {
alert(a)
}
})(i) //閉包實現(xiàn)塊級作用域
}
使用事件委托
利用冒泡的原理宠进，把事件加到父級上，觸發(fā)執(zhí)行效果藐翎。
1.可以大量節(jié)省內(nèi)存占用材蹬，減少事件注冊。
2.可以方便地動態(tài)添加和修改元素吝镣，不需要因為元素的改動而修改事件綁定堤器。
var ul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
ul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
return
}
}
});
！Ｄ┘帧Ｕ⒗！！注意：addEventListener()方法添加的匿名函數(shù)是無法移除的，所以如果需要移除監(jiān)聽器辉川，添加時應使用函數(shù)名添加表蝙。（若多次添加相同的監(jiān)聽器不會覆蓋，而是在觸發(fā)時執(zhí)行兩次）
11乓旗，split府蛇、join、splice屿愚、slice
var a = [1,2,3,4,5]
a = a.join('-') //將數(shù)組以傳入的參數(shù)連接起來汇跨，返回一個合并的字符串
console.log(a) //1-2-3-4-5
a = a.split("") //將字符串以傳入的參數(shù)分隔，返回一個分隔的數(shù)組
console.log(a) //[1,-,2,-,3,-,4,-,5]
var del = a.splice(0,3) //直接對源數(shù)組進行修改從下標0開始的長度為3數(shù)組
console.log(del) //[1,-,2]
console.log(a) //[-,3,-,4,-,5]
a = a.slice(0,1) //不修改原數(shù)組妆距，返回從下標0開始長度為1的截取的數(shù)組
console.log(a) //[-]
***********************************************************************************
split(' ')操作字符串
join('-')操作數(shù)組 -->合并為字符串
splice(0,3)操作數(shù)組 -->刪除
slice(0,3)操作字符串穷遂，數(shù)組皆可 -->即可分隔數(shù)組，又可分隔字符串
12娱据，Object.creat()函數(shù)
Object.creat()函數(shù)接受兩個參數(shù)蚪黑，第一個設(shè)置的是這個新創(chuàng)建的對象所指向的原型對象，第二個是這個新創(chuàng)建對象的屬性吸耿。收獲一種新的創(chuàng)建對象的方法hhh
var obj = Object.create(null,{ //此處原型對象可以傳空值祠锣，此時obj的__proto__指針指向null
name:{
value:'cty', //使用Object.create創(chuàng)建對象時，對象的屬性名內(nèi)咽安，屬性值必須用value設(shè)置
enumerable: true //enumerable設(shè)為true將其設(shè)置為可枚舉屬性
}
})
console.log(obj.name) //cty
13伴网，文件上傳
直接上代碼
label for="resource" class="upload">pdf上傳</label>
<input type="file" id="resource" name="resource" ref="resource" @change="fileChange">
----------------分割線-----------------------
fileChange(e) {
//通過事件獲取到上傳的文件，操作字符串獲得文件格式妆棒，files的size方法控制上傳文件大小
var fileSize = 0;
獲取上傳的文件
var files = e.target.files || e.dataTransfer.files;
fileSize = e.target.files[0].size;
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
e.target.value="";
return
}
var name = e.target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName != "pdf" && fileName != "mp4" && fileName != "ppt" && fileName != "pptx" && fileName != "avi"){
this.$alert('文件格式有誤澡腾，請選擇PPT,PDF,PPTX,avi,mp4格式上傳', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
e.target.value="";
return
}
14，js獲取事件和h5中的data-*屬性
在全局下發(fā)生點擊的事件可以直接傳入函數(shù)中糕珊，如click(e)（即便綁定時并沒有傳入這個參數(shù)）
然后动分，通過e.target可以獲取目標元素，即事件流中的事件觸發(fā)階段的最具體的元素
再然后红选，
獲取元素上綁定的data-*屬性澜公，用原生js，方法為let value = e.target.dataset.*喇肋。
動態(tài)設(shè)置坟乾，用原生js，方法為e.target.dataset.*='xxx'
dataset屬性的值是DOMStringMap的一個實例蝶防，名值對的映射甚侣。每個data-name形式的屬性都有一個對應的屬性，只不過該屬性名沒有data-前綴间学。
15殷费，reduce方法
reduce為數(shù)組方法印荔，數(shù)組對象可以調(diào)用，接收的回調(diào)函數(shù)接收兩個參數(shù)详羡，第一個是上一次處理后的屬性的值仍律，第二個是上一個屬性的下一個屬性
var arr = [1,2,3,4,5]
arr.reduce(function(pre,cur){
return pre+cur
})
//可以簡單地對number數(shù)組求和
//回調(diào)函數(shù)第一次執(zhí)行pre為空，cur為1
//第二次執(zhí)行pre為上一次返回的數(shù)值实柠，即1染苛，cur進入數(shù)組下一個值為2
//第三次執(zhí)行pre為上一次返回的數(shù)值，即3主到，cur進入數(shù)組下一個值為3
//...以此類推，最后得出1至5的累加為15
15躯概，Object.key(obj)
或得一個對象數(shù)組的屬性值登钥，通常檢測屬性值可以使用hasOwnProperty
var o = {a:'123',b:'456'}
Object.keys(o).forEach(res=>{
console.log(res)
}) //a b
2017年10月
1，這里放一些Vue全局對象的基本操作
1娶靡，axios.defaults.withCredentials = true
默認允許后臺跨域操作牧牢，如在客戶端存儲cookie等需要權(quán)限的操作。重要姿锭，若請求不設(shè)置塔鳍，后端無法在客戶度設(shè)置cookie，再發(fā)起請求時無法在請求頭中攜帶cookie會發(fā)生302錯誤
2呻此，Vue.config.productionTip = false
設(shè)置 Vue.config.productionTip = false 來關(guān)閉生產(chǎn)模式下給出的提示
3轮纫，Vue.prototype.$axios = axios
Vue實例添加axios方法
4，前端響應式布局
rem怎么來的焚鲜？
rem是css3中新增加的一個單位屬性(font size of the root element),根據(jù)頁面的根節(jié)點的字體大小進行轉(zhuǎn)變的單位掌唾。根節(jié)點，也就是html忿磅。
例：(下面例子中的根節(jié)點是html 糯彬，它的字體大小是100px，所以根節(jié)點下面的元素所設(shè)置的rem葱她，都是1rem=100px撩扒。)
rem的初始值是16px，也就是說在沒有設(shè)置根節(jié)點的font-size的時候吨些，1rem=16px搓谆；
于是，只要在媒體查詢中改變根節(jié)點的font-size設(shè)置锤灿，rem將自動根據(jù)根節(jié)點設(shè)置的font-size進行適配挽拔。
html,body{
height: 100%;
margin: 0;
padding: 0;
font-size: 14px;
}
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}
以此適配三種屏幕大小。
5但校，判斷一個字符串是否是回文字
function isreverse(str){
//reverse只能作用于數(shù)組螃诅，將數(shù)組反轉(zhuǎn)
return str.split('').reverse().join('') == str
}
6，統(tǒng)計一個字符串中出現(xiàn)最多的字符
var str = 'aabbcc'
function findMaxDuplicateChar(str){
var obj = {}
var max = 0
var maxindex = []
for(var index in str){
//存儲在對象類數(shù)組中，并統(tǒng)計次數(shù)
if(!obj[str[index]]){
obj[str[index]] = 1
}else{
obj[str[index]] += 1
}
}
for(var index in obj){
//for..in..也可以作用于類數(shù)組
if(obj[index] >= max){
max = obj[index]
maxindex.push(index)
}
}
return maxindex
}
findMaxDuplicateChar(str)
> 輸出(3) ["a", "b", "c"]
以下排序算法皆是從小到大
7术裸，冒泡排序
冒泡排序原理是倘是，每次比較數(shù)組中相鄰的兩個元素，每次將大的數(shù)放在后面袭艺，小的數(shù)向上冒泡搀崭，所以經(jīng)過第一輪冒泡后，最大的數(shù)已經(jīng)在最后一位了猾编。第一輪比較了n-1次瘤睹，第二輪只要比較n-2次，最后最大的那個數(shù)已經(jīng)不用比較了答倡。代碼如下:
function bubbleSort(arr){
//每次要比較的次數(shù)減一
for(var i = arr.length ; i > 0 ; i--){
for(var j = 0 ; j < i ; j++){
if(arr[j] > arr[j+1]){
//如果滿足條件轰传，交換位置
var tmp = arr[j]
arr[j] = arr[j+1]
arr[j+1] = tmp
}
}
}
return arr
}
var arr = [1,4,3,6,7,23,56,2]
bubbleSort(arr)
> 輸出(8) [1, 2, 3, 4, 6, 7, 23, 56]
8，快速排序
快速排序的原理是:遞歸
每次遞歸判斷數(shù)組長度是否小于或等于1個數(shù)瘪撇。若否获茬，則取出數(shù)組中的第一個數(shù)，對剩下的n-1個數(shù)進行遍歷倔既，把較大的數(shù)放在右邊恕曲，較小的數(shù)放在左邊，再對左右數(shù)組再次進行快排渤涌，分別以左右兩邊數(shù)組的第一個數(shù)為哨兵佩谣，再次比較分組，最后將所有的分組數(shù)組使用[].concat方法連接歼捏，得到一個從小到大的數(shù)組稿存。代碼如下:
function quickSort(arr){
//此處還有左邊或右邊數(shù)組一個元素都沒有的情況
if(arr.length <= 1){
return arr
}
let leftArr = []
let rightArr = []
let p = arr[0]
for(var i = 1 ; i < arr.length ; i++){
if(arr[i] < p){
leftArr.push(arr[i])
}else{
console.log(arr[i])
rightArr.push(arr[i])
}
}
return [].concat(quickSort(leftArr),arr[0],quickSort(rightArr))
}
var arr = [7,3,45,2]
quickSort(arr)
> 輸出(4) [2,3,7,45]
9，斐波那契數(shù)列
又稱黃金分割數(shù)列:0,1,1,2,3,5,8,13.....
斐波那契數(shù)列的原理也是遞歸瞳秽，代碼如下
function getFibonacci(n){
var fibarr = []
for(var i = 0 ; i < n ; i++){
if(i < 2){
//前面兩個數(shù)不需要遞歸瓣履，從0,1開始產(chǎn)生遞歸
fibarr.push(i)
}else{
fibarr.push(fibarr[i-2]+fibarr[i-1])
}
}
//其實整個方法只調(diào)用了一次，只是通過fibarr[i-2]+fibarr[i-1]不斷調(diào)用了之前的數(shù)組练俐，所以也叫遞歸
return fibarr
}
上次筆試竟然寫不出來袖迎。。腺晾。燕锥。平時用不到，但是原理不能忘Ｃ醪酢９樾巍！
10鼻由，前端上傳多種格式文件參數(shù)設(shè)置
fileChange(e){
//監(jiān)聽文件上傳的input框change事件
var value = e.target.dataset.type
var name = e.target.value
var fileName = name.substring(name.lastIndexOf(".")+1)
//獲取文件后綴名暇榴，這里也可以用slice
//var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase()
if(value == 'pdf'){
if(fileName != "pdf"){
this.$alert('文件格式有誤厚棵，請選擇PDF格式上傳', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
e.target.value="";
return
}else{
this.file1 = event.target.files[0]
}
}
if(value == 'ppt'){
if(fileName != "ppt" && fileName != "pptx"){
this.$alert('文件格式有誤，請選擇PPT,PPTX格式上傳', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
e.target.value="";
return
}else{
this.file2 = event.target.files[0]
}
}
this.loading = true
//通過驗證
this.$axios.post(BASEPATH+'/subject/info/list/all').then(
res=>{
var data = res.data.allSubjectList
var subId = document.getElementById('subjectid').value
//重復驗證
for(var index in data){
if(subId == data[index].subjectid){
this.$alert('此課程id重復蔼紧，請重新輸入婆硬！', '提示', {
confirmButtonText: '確定',
type: 'warning'
})
return
}
}
//文件轉(zhuǎn)為formData格式才能正確上傳帶文件的from表單
var formData = new FormData();//formData屬性
formData.append('subjectid',this.subjectid)
formData.append('title',this.title)
formData.append('remark',this.remark)
formData.append('parentid',this.parentid)
formData.append('status',this.status)
//formData.append('imgPath',this.imgPath)
formData.append('lessonDetail',this.lessonDetail)
formData.append('relatedLesson',this.relatedLesson)
if(this.file1){
//file文件append到formData后數(shù)據(jù)格式發(fā)生變化
formData.append('resource',this.file1)
}
formData.append('lessonPptnum',this.lessonPptnum)
var config = {
//文件上傳使用multipart/form-data格式上傳，設(shè)置ajax參數(shù)
headers: {
'Content-Type': 'multipart/form-data'
}
}
//發(fā)送請求 this.$axios.post(BASEPATH+'/subject/info/upload',formData,config).then(res=>{
if(res.data.code == 1){
this.$message({
type: 'success',
message: '上傳成功!'
})
this.$router.push({path:'super_courselist'})
}else{
this.$message({
type: 'error',
message: '上傳失敗!'
})
this.loading = false
}
})
}).catch(err=>{
this.$alert('提交出錯奸例！', '提示', {
confirmButtonText: '確定',
type: 'error'
})
this.loading = false
})
}).catch((err) => {
this.$message({
type: 'warning',
showClose: true,
message: '已取消提交'
});
});
},
//判斷輸入字符格式彬犯，使用了ES6模板解析
isString(...s){
for(var i of s){
if(i!=null && typeof i != 'string'){
return false
}
}
return true
},
isNumber(...n){
var pattern =/^[0-9]+([.]{1}[0-9]{1,2})?$/
for(var i of n){
if(i!=null && !pattern.test(i)){
return false
}
}
return true
}
}
11，css偽類創(chuàng)建三角形箭
原理是利用絕對定位的偽類元素查吊，創(chuàng)建邊框顏色為透明色的谐区，僅有邊框的正方形，在需要設(shè)箭頭方向的的另一側(cè)設(shè)置邊框為所需箭頭顏色逻卖。即出現(xiàn)一個小△卢佣。
若要出現(xiàn)箭頭，則使用after箭阶，before兩個大小相同的三角形通過position定位重疊后留下一個小箭頭。
12戈鲁，閉包
閉包是指能夠訪問其他函數(shù)內(nèi)部變量的函數(shù)仇参。
最常見的產(chǎn)生閉包的方法就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。
閉包的作用域鏈包含所引用的外部函數(shù)的活動對象婆殿，自身活動對象(如果有的話)和全局變量對象(全局變量對象诈乒，誰都有)
理解閉包的作用域鏈，就可以清晰地知道this的指向了
this對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的：在全局函數(shù)中婆芦，this指向window對象怕磨，而當函數(shù)被當作某個對象的方法調(diào)用時，this等于那個對象消约。
匿名函數(shù)的this對象延作用域鏈向上搜尋肠鲫，但是只會搜索到其活動對象為止，搜索不到外外部函數(shù)的活動對象或粮，如果都沒有导饲，this則會指向全局對象window
13，清除浮動
1氯材，給父元素設(shè)置高度
2渣锦，在父元素的結(jié)尾處添加一個有clear:both屬性的盒子標簽
3，overflow:hidden
4氢哮，使用偽類元素
.clearfix:after{
content:'';
height:'';
display:block;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1;//兼容ie
}
第五種方法應用最為廣泛袋毙，不用添加額外的標簽，而且可以通用冗尤，添加一個class類名即可听盖。
14胀溺，BFC（block fomating context）塊級格式上下文
描述:簡單地說，BFC描述的是塊級盒的布局規(guī)則
作用:BFC可以用來清除浮動和防止margin重疊
防止margin重疊:因為當塊級盒外層沒有BFC作保護時媳溺，margin-top和margin-bottom會發(fā)生重疊月幌，解決辦法是在外層套一個BFC保護，則不會再發(fā)生重疊
**清除浮動""
- BFC會阻止垂直外邊距（margin-top悬蔽、margin-bottom）折疊
- BFC不會重疊浮動元素
- BFC可以包含浮動
我們可以利用BFC的第三條特性來“清浮動”扯躺，這里其實說清浮動已經(jīng)不再合適，應該說包含浮動蝎困。也就是說只要父容器形成BFC就可以录语，如何形成BFC
- float為 left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|table-caption|inline-block
- position為 absolute|fixed
我們可以對父容器添加這些屬性來形成BFC達到“清浮動”效果。
15禾乘，undefined和null的區(qū)別
如果一個變量聲明后未初始化澎埠，那么改值為undefined
如果一個變量聲明后接下來是為了保存某種對象的，那么就把它初始化為null始藕，也因此typeof null結(jié)果為object
16蒲稳，文檔聲明<!DOCTYPE>
文檔聲明在html文檔的最前面，作用是為了告知瀏覽器的解析器伍派，用什么文檔類型規(guī)范來解析這個文檔江耀，只有正確地確定了一個文檔類型，html和css才能正常生效诉植。
html4.01是基于SGML(標準通用標記語言祥国，xml可擴展標記語言是它的子集)的，在文檔聲明中需要引用.dtd文件(DTD文件就是文檔類型聲明文件)
根據(jù)DTD引入的不同會觸發(fā)兩種格式
標準模式和混雜模式
標準模式晾腔，瀏覽器以其支持的最高標準呈現(xiàn)頁面
混雜模式舌稀，頁面以一種比較寬松的向后兼容的方式顯示∽评蓿混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作壁查。
而html5既然沒有DTD，也就沒有嚴格模式與寬松模式的區(qū)別剔应，html5有相對寬松的語法潮罪，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容领斥。文檔聲明只要簡單的<!DOCTYPE html>
17嫉到，==運算符
下面程序得到的結(jié)果分別是什么？（）
console.log(([])?true:false);
console.log(([]==false?true:false));
console.log(({}==false)?true:false)
A.false true true B.true true true C.true false true D.true true false
解析：
Boolean([]); //true Number([]); //0 Number({}); // NaN Number(false); //0
因此：
console.log(([])?true:fasle);// => console.log((true)?true:false); //true
console.log([]==false?true:false); // => console.log(0==0?true:false); //true
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false); //false
選D選項
拓展：《JavaScript權(quán)威指南》的部分相關(guān)知識點
“==”運算符（兩個操作數(shù)的類型不相同時）
如果一個值是null月洛，另一個值是undefined何恶，則它們相等
如果一個值是數(shù)字，另一個值是字符串嚼黔，先將字符串轉(zhuǎn)換為數(shù)學细层，然后使用轉(zhuǎn)換后的值進行比較惜辑。
如果其中一個值是true，則將其轉(zhuǎn)換為1再進行比較疫赎。如果其中的一個值是false盛撑，則將其轉(zhuǎn)換為0再進行比較。
如果一個值是對象捧搞，另一個值是數(shù)字或字符串抵卫，則將對象轉(zhuǎn)換為原始值，再進行比較胎撇。
18介粘，Vue Virtual DOM
由于原始的DOM操作非常耗時，對性能造成了很大的影響晚树，但是js很快姻采。
vue框架使用的是virtual dom來進行dom操作。
虛擬dom的核心思想是:對復雜的文檔dom結(jié)構(gòu)爵憎，提供一種方便的工具進行最小化的dom操作慨亲。dom的子節(jié)點，標簽宝鼓，屬性巡雨，都可以用js來表示，當數(shù)據(jù)狀態(tài)發(fā)生改變時席函，先通過js對象表示的虛擬dom計算出實際dom需要進行的最小改動再去操作dom。
11月
1冈涧，簡單的git操作
提交
$ git add . 將文件添加到緩存區(qū)
$ git commit -m "說明" 提交緩存區(qū)的代碼
$ git push origin master 推送到源分支
拉取并合并
$ git pukk origin master
2茂附，--save和--save-dev
- --save將install的依賴包名放入package.json的dependencies中，dependencies屬于項目發(fā)布之后還是需要依賴的東西督弓。
- --save-dev將insatll的依賴包名放入package.json的devDependencies中营曼，devDependencies屬于項目發(fā)布前打包，編譯等需要所依賴的工具愚隧，項目上線以后并不需要這些東西蒂阱。webpack屬于打包工具，安裝時npm install webpack --sava-dev
3狂塘，css選擇器權(quán)重
行內(nèi)樣式(1000) > id選擇器(100) > class選擇器(10) == 屬性選擇器(10) > 偽類選擇器(+1) > 標簽選擇器(1) > 通用選擇器(0)
4录煤，逗號選擇器總是由逗號最后的一個表達式?jīng)Q定的
5，瀏覽器渲染過程
- html文檔加載后荞胡，構(gòu)建dom tree
- css文檔加載后妈踊，構(gòu)建css rule tree
- dom tree 和 rule tree 結(jié)合生成 render tree，渲染樹
- layout 計算出每一個渲染對象的位置和尺寸泪漂，將其安置在瀏覽器窗口的正確位置廊营，叫回流歪泳，或者布局
- 繪制（Painting）根據(jù)上一步的layout計算出的位置和元素尺寸進行頁面的繪制
dom tree --> rule tree --> render tree --> layout --> painting
6，call露筒，apply
通過document.getElementsByTagName選擇的dom 節(jié)點是一種類似array的array呐伞。它不能應用Array下的push,pop等方法。我們可以通過：
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
這樣domNodes就可以應用Array下的所有方法了慎式。
12月
1伶氢，Object.prototype.toString.call([1,2,3])
數(shù)組是類對象，但它不是真正的對象瞬捕，不能直接調(diào)用toString方法鞍历，通過call改變this的指向，使得數(shù)組調(diào)用對象原型上的toString方法肪虎，數(shù)組作為類對象返回[Object string]劣砍，而真正的對象則返回[Object object]。
另外判斷其是否為數(shù)組
[1,2,3].__proto__.constructor == Array
true
2扇救，vue生命周期的操作問題
vue生命周期從init到destroy刑枝，應該在哪個地方操作dom，那個地方操作數(shù)據(jù)迅腔？
首先装畅，獲取異步數(shù)據(jù)在created中，因為created中還未掛載vue實例沧烈，且未渲染掠兄，如果在其后獲取異步數(shù)據(jù)，雖然也可以锌雀，但是會導致頁面刷新兩次蚂夕，導致加載時間過長，所以獲取異步數(shù)據(jù)腋逆，預處理數(shù)據(jù)都應該在created中操作婿牍。
其次，操作dom惩歉，應該在mounted或者vm.nextTick之后等脂，因為此時所有的dom的掛載和渲染都已經(jīng)完成，此時操作dom才不會出現(xiàn)問題撑蚌。
最后再提一下updated上遥，updated在每次數(shù)據(jù)更新的時候都會被觸發(fā)，而mounted只觸發(fā)一次争涌，如果updated中獲取異步數(shù)據(jù)露该，則每次頁面有數(shù)據(jù)變化時都會觸發(fā)這個異步請求。所以updated一般不推薦使用第煮。
3解幼，fork和clone的區(qū)別
- 區(qū)別
git clone 是在自己電腦（這里我是ubuntu）直接敲命令抑党，結(jié)果是將github倉庫中的項目克隆到自己本地電腦中了
fork是直接訪問github網(wǎng)站，在項目頁面中點擊fork撵摆，然后自己github項目中就會多出一個復制的項目 - 用法
如果我們想要修改他人github項目的話底靠，我們直接git clone代碼到本地是不能pull的，所以我們使用fork特铝，先把代碼復制到自己的github倉庫暑中，然后git clone到本地修改，然后在提交pull（這里的pull是pull到自己github倉庫了，我們自己的github倉庫中的代碼是fork源的一個分支），這時候我們想要把修改的代碼提交給他人的話愿卒，就可以在自己github上pull，等其他人看到后就可以把代碼做一個合并雕凹。
2018.5.21
1，重溫圣杯布局和雙飛翼布局
圣杯布局和雙飛翼布局都是三列布局左右長度固定政冻，中間寬度隨左右變化的的一種方式枚抵，當然現(xiàn)在可以使用flex，中間flex為1明场，左右固定汽摹。
圣杯布局：
雙飛翼布局：
盒子固定，中間自適應內(nèi)容用新的寬度100%的盒子包裹舟舒，新盒子向內(nèi)padding拉庶，左右兩側(cè)僅需利用margin負邊距即可。
