///////////////////////////////////////////////////////////////////////////////
jquery插件中預(yù)防$沖突的辦法：
(function($){ //...? })(jQuery);
把jQqury傳遞給插件乍钻，用$來獲取該參數(shù)纺非，這樣其他框架中即便占用了$也不影響jQ插件里對(duì)$的使用
///////////////////////////////////////////////////////////////////////////////
setInterval和setTimeout函數(shù)部分帶引號(hào)和不帶引號(hào)的區(qū)別：
var a=0;
1、setTimeout("hallo(a)",300);//可以傳參數(shù)a僵刮，并且該函數(shù)會(huì)在300ms之后執(zhí)行珊拼；
2扣泊、setTimeout("hallo",300);//并不會(huì)被執(zhí)行
3、setTimeout(hallo,300);//不可傳參數(shù)a催束，300ms之后執(zhí)行
4集峦、setTimeout(hallo(a),300);//可傳遞參數(shù)a，立即執(zhí)行抠刺。setTimeout將變得無意義
5塔淤、setInterval(hallo(a),300);//立即執(zhí)行，setInterval變得無效速妖，不會(huì)輪詢
結(jié)論：a高蜂、不帶引號(hào)的，不能帶括號(hào)罕容，帶引號(hào)的必須帶括號(hào)备恤。2、4锦秒、5實(shí)際是錯(cuò)誤的寫法露泊；b、要想在規(guī)定的時(shí)間里用setInterval和setTimeout的回調(diào)函數(shù)來執(zhí)行函數(shù)并且又想傳遞參數(shù)旅择，最好的方式就是使用方法1惭笑、"hallo(a)"
///////////////////////////////////////////////////////////////////////////////
網(wǎng)頁更新防止緩存方法：
1、<meta forua="true" http-equiv="Cache-Control" content="max-age=86400"/>
其中max-age為獲新的時(shí)間生真，86400表示一天之后獲新沉噩，獲新內(nèi)容為所有js、css和image等資源文件
///////////////////////////////////////////////////////////////////////////////
解決ie8不支持媒體查詢：
<!--[if?lt?IE?9]>??
????<script?src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>??
<![endif]-->??
///////////////////////////////////////////////////////////////////////////////
讓一個(gè)元素不再浮動(dòng)的css：float:none;
///////////////////////////////////////////////////////////////////////////////
@media查詢中汇歹，max-width和max-device-width區(qū)別：
width指可視寬度屁擅，橫屏?xí)r，會(huì)變寬产弹。device-width是設(shè)備自帶的屬性派歌，不會(huì)變化弯囊。另外，height在有菜單欄的瀏覽器下會(huì)比device-height小
判斷橫屏豎屏方式：
@media (max-width:XXXX) and (orientation:landscape | portrait)胶果。其中l(wèi)andscape表示手持匾嘱，portrait表示橫屏，其原理就是比較width和height早抠。
///////////////////////////////////////////////////////////////////////////////
千萬不要將float與
原則是：少用
///////////////////////////////////////////////////////////////////////////////
函數(shù)前面加上感嘆號(hào)“霎烙！”有什么用？
原因：形如 function(){}()的函數(shù)是無法執(zhí)行的蕊连，需要用括號(hào)括起來把函數(shù)體編程一個(gè)表達(dá)式：(function(){})()
但是函數(shù)前面加上!之后悬垃，函數(shù)就會(huì)被正確的解析和調(diào)用：!function(){}();這樣的方式，效率似乎更高甘苍。另外尝蠕，+、-也有類似功能：
+function(){}()载庭、-function(){}();
參見：在bootstrap中看彼，自動(dòng)執(zhí)行的函數(shù)的寫法是：
!function($){}(window.jQuery);
///////////////////////////////////////////////////////////////////////////////
幾個(gè)冷知識(shí)：
1、但凡有id的dom囚聚，會(huì)自動(dòng)生成一個(gè)全局對(duì)象靖榕，不用document.getElementById("id")或$("#id");
html:<div id="hallo">aaa</div>
js:console.log(hallo.innerHTML);=>aaa
? ?console.log($(hallo).html());=>aaa;
2、
///////////////////////////////////////////////////////////////////////////////
垂直居中的解決方案
單行：
1顽铸、vertical-align:middle;line-height:100%;
多行茁计、未知高度：
1、
內(nèi)層：
position:relative;
top:50%;transform:translateY(-50%);
top:50%;-webkit-transform:translateY(-50%);
只支持ie9以上
2跋破、
外層：display:table;
內(nèi)層：diaplay:table-cell;vertical-align:middle;
///////////////////////////////////////////////////////////////////////////////
要想知道一個(gè)對(duì)象有什么特性及其值簸淀，可以使用以下方法：
for(var i in obj){
console.log(i+":"+obj[i]);
}
通過此方法，意外的獲知：
對(duì)于<a?id="hallo"?></a>毒返，可以獲得如下參數(shù)
1租幕、a標(biāo)簽（對(duì)象）的屬性中有host：主機(jī)名（含接口），hostname不含接口拧簸，如：192.168.0.124:8001是host劲绪，而192.168.0.124。
2盆赤、hallo.pathname=>/a/b/c
3贾富、hallo.protocol=>http
4、hallo.host=>www.baidu.com
5牺六、hallo.hostname=>www.baidu.com
6颤枪、hallo.origin=>http://www.baidu.com
7、hallo.search=>?id=123"
///////////////////////////////////////////////////////////////////////////////
如何利用toString來創(chuàng)建字符和數(shù)字結(jié)合的編碼：
console.log(generateRandomAlphaNum(25));//創(chuàng)建25位混排編碼
? ? ? ? function generateRandomAlphaNum(len) {
? ? ? ? ? ? var rdmString = "";
? ? ? ? ? ? for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)) {
? ? ? ? ? ? ? ? console.log(rdmString);
? ? ? ? ? ? }
? ? ? ? ? ? return rdmString.substr(0, len);
? ? ? ? }
///////////////////////////////////////////////////////////////////////////////
高效率的位操作符：
(12.4/4.13)|0=>相當(dāng)于：Math.round(12.4/4.13)
~~(12.4/4.13)=>相當(dāng)于：Math.floor(12.4/4.13)
!!(a)=>快速轉(zhuǎn)換為布爾值淑际，相當(dāng)于：boolean(aa);如：!!window=>true
///////////////////////////////////////////////////////////////////////////////
自定義console.log的樣式：
function resetConsoleStyle(cssStyle) {
? ? var _log = console.log;
? ? console.log = function () {
? ? ? ? _log.call(console, '%c' + [].slice.call(arguments).join(' '), cssStyle);
? ? };
}
resetConsoleStyle("color:fff;background:#000;");
console.log("aaa")=>aaa
///////////////////////////////////////////////////////////////////////////////
交換兩個(gè)變量的值畏纲，不用第三個(gè)變量暫存
1vara=1,b=2;a=[b,b=a][0];
///////////////////////////////////////////////////////////////////////////////
關(guān)于動(dòng)作的設(shè)計(jì)：鼠標(biāo)移上和移 出元素產(chǎn)生的動(dòng)畫扇住，分別為進(jìn)入和離開動(dòng)作
///////////////////////////////////////////////////////////////////////////////
一張圖解釋文檔的加載和解析過程沒，defer和async的區(qū)別
（綠線的終點(diǎn)為DOMContentLoaded的狀態(tài)）
///////////////////////////////////////////////////////////////////////////////
caller是函數(shù)對(duì)象的一個(gè)屬性盗胀，他指向調(diào)用該函數(shù)的函數(shù)艘蹋，可以用fn.caller.toString()將函數(shù)轉(zhuǎn)化為字符串
callee是arguments對(duì)象的一個(gè)屬性，他指向當(dāng)前函數(shù)體
注：caller和callee都是在函數(shù)執(zhí)行時(shí)才產(chǎn)生
? ? function callDemo() {
? ? ? ? if (callDemo.caller) {
var a=callDemo.caller;
? ? ? ? ? ? alert(a);
? ? ? ? } else{
? ? ? ? ? ? alert("this is a top function");
? ? ? ? }
alert(arguments.callee);
? ? }
? ? !function handleCall() {
? ? ? ? callDemo();
? ? }();
輸出：
caller=>function handleCall(){callDemo();}
callee=>
????function callDemo() {
? ? ? ? if (callDemo.caller) {
? ? ? ? ? ? var a= callDemo.caller;
? ? ? ? ? ? alert(a);
? ? ? ? } else{
? ? ? ? ? ? alert("this is a top function");
? ? ? ? }
? ? ? ? alert(arguments.callee);
? ? }
二者結(jié)合：arguments.callee.caller=>調(diào)用此函數(shù)的函數(shù)票灰，即callDemo函數(shù)
///////////////////////////////////////////////////////////////////////////////
delete obj.para=>刪除obj對(duì)象中的para屬性女阀，但并不會(huì)刪除屬性本身；如：
obj.p={};
delete obj.p;=>只是接觸了obj和p之間的關(guān)聯(lián)屑迂，并沒有徹底清除p浸策。產(chǎn)生的問題：這并不是一種不嚴(yán)謹(jǐn)?shù)膭h除方法，容易造成內(nèi)存泄漏
///////////////////////////////////////////////////////////////////////////////
js中的三種編碼方式：
escape：將所有ASCII表以外的字符串進(jìn)行編碼屈糊。解碼方式：unescape
encodeURI和endoceURIComponent相對(duì)來說更強(qiáng)大的榛，對(duì)應(yīng)解碼方式分別為：decodeURI和decodeURIComponent
推薦方式：endodeURIComponent
注：document.cookie沒有進(jìn)行編碼琼了，因此逻锐，通常情況下建議對(duì)cookie進(jìn)行編碼——encodeURIComponent(getCookie(aaa));
///////////////////////////////////////////////////////////////////////////////
webworker的總結(jié)：
使用webworker另起一個(gè)線程：
加載順序：網(wǎng)頁js+css加載完成后，才呈現(xiàn)頁面雕薪，這樣會(huì)導(dǎo)致頁面加載很慢昧诱，于是，可以把那些加載過慢的js模塊單拿出來放到異步線程中所袁，這樣盏档，頁面可以正常顯示，而不會(huì)因?yàn)檫^慢的模塊導(dǎo)致頁面加載變慢
語法如下：
新建：var wk=new Worker("XX.js");
分線程XX.js中回傳結(jié)果：postMessage(a);//假設(shè)此處a的值為1
主線程添加監(jiān)聽：wk.onmessage=function(event){
console.log(event.data);//獲取返回來的結(jié)果燥爷，打印1
}
關(guān)閉線程：wk.terminate();//通常是在獲取完event.data之后進(jìn)行關(guān)閉
瀏覽器支持：ie10以下不支持
///////////////////////////////////////////////////////////////////////////////
this深入解析
1蜈亩、this定義：this所在域（函數(shù)）被看成是哪個(gè)對(duì)象的方法，this指代的就是那個(gè)對(duì)象
2前翎、全局中的this都是指的window
var obj={
? ? x:0,
? ? y:function(){
? ? ? ? var _this=this;
? ? ? ? setTimeout(function(){
//this指window稚配，因?yàn)閟etTimeout是window的方法
? ? ? ? ? ? //_this指obj
? ? ? ? })
? ? }
}
3、call港华、apply的本質(zhì)：重新定義函數(shù)的執(zhí)行環(huán)境道川，即重新定義了函數(shù)中this的指向
function A(n,m){
//this指向待定
}
var obj={};、
A.call(obj,1,2);//將A看成是obj的方法立宜，函數(shù)中this自然而然指向obj
這里提一下bind冒萄。bind也是javascript原生的函數(shù)，ie9+可支持橙数，與call尊流、apply同樣是改變this的指向，區(qū)別在于使用方法：
bind返回的是函數(shù)體灯帮，后兩者返回的是執(zhí)行結(jié)果崖技，即fun和fun()的區(qū)別
obj.y.call(o,1,1)=>等價(jià)于obj.y.bind(o,1,1)()=>等價(jià)于obj.y.bind(o)(1,1);
bind方法中蜘澜，會(huì)優(yōu)先調(diào)用bind(paras)中的參數(shù)，當(dāng)發(fā)現(xiàn)bind(paras)中參數(shù)不足時(shí)候响疚，才會(huì)去依次調(diào)用后面(paras)的參數(shù)鄙信，obj.y.bind(o,1)(2,3)=>如果obj.y需要的參數(shù)是2個(gè)，則此時(shí)使用的參數(shù)是(1,2)忿晕，如果需要三個(gè)參數(shù)装诡，則會(huì)使用(1,2,3)
bind常可以在setTimeout和setInterval中用到
var obj={};
obj.stv=setInterval(function(){
this=>指向obj而不是window?
}.bind(obj),100);
///////////////////////////////////////////////////////////////////////////////
曾經(jīng)一直困擾我的一個(gè)問題：body的高度來源于其內(nèi)容的高度践盼，故無法滿屏
解決辦法很簡單：html,body{height:100%;}鸦采。結(jié)果：當(dāng)body內(nèi)元素不足body的高度時(shí)，html和body高度為屏幕高度咕幻，當(dāng)body內(nèi)元素大于body高度時(shí)候渔伯，body的offsetHeight不變，始終等于document.body.clientHeight肄程。而document.body.scrollHeight會(huì)隨著頁面內(nèi)容的增加而自動(dòng)擴(kuò)張
///////////////////////////////////////////////////////////////////////////////
為一個(gè)dom添加事件監(jiān)聽之后立即取消該事件監(jiān)聽的精致寫法：
s.addEventListener("load",function(){
this.removeEventListener("load",arguments.callee,false);
})
///////////////////////////////////////////////////////////////////////////////
css锣吼、js、dom蓝厌、img加載順序：
dom樹按順序加載玄叠，遇到css文件（link標(biāo)簽）時(shí)，dom會(huì)繼續(xù)執(zhí)行下去拓提，而css標(biāo)簽異步進(jìn)行加載读恃。
dom樹遇到j(luò)s文件（script標(biāo)簽）時(shí)，會(huì)等到j(luò)s加載并執(zhí)行完后再繼續(xù)下去代态。而動(dòng)態(tài)加載進(jìn)來的js則不會(huì)阻塞dom
dom遇到img標(biāo)簽時(shí)寺惫，會(huì)繼續(xù)執(zhí)行下去，圖片則異步進(jìn)行加載蹦疑。并且圖片會(huì)被延遲加載西雀，直到css加載完成之后才加載圖片（因?yàn)闉g覽器不知道圖片此時(shí)應(yīng)該以什么樣式進(jìn)行顯示）——有待考證
window的onload、window的DOMContentLoaded必尼、document的ready順序：
DOMContentLoaded是指所有dom加載完成蒋搜，而js（在沒有defer、async的干擾時(shí)）是引入文檔中作為文檔的一份子判莉，因此瀏覽器解析script標(biāo)簽時(shí)就會(huì)將其加載進(jìn)來豆挽，DOMContentLoaded狀態(tài)下所有的js都已經(jīng)加載完畢
而img、link-css則會(huì)異步加載券盅，而window的onload是指所有的img帮哈、link-css等資源加載完成后執(zhí)行，因此onload比DOMContentLoaded慢锰镀。
通常娘侍，在移動(dòng)端咖刃，onload不如DOMContentLoaded更優(yōu)
其實(shí)，DOMContentLoaded就相當(dāng)于在html的最底部執(zhí)行
html+script=>window DOMContentLoaded=>img憾筏、link-css=>window onload
jquery中的$(document).ready(function(){})和$(function(){})等于window的DOMContentLoaded
別人給出的建議：
1嚎杨、由于圖片會(huì)在css加載完成后載入，CSS樣式表影響了圖片的加載速度氧腰，然而JS不會(huì)影響枫浙，如果想讓圖片盡快加載，就不要給圖片使用樣式古拴，比如寬高采用標(biāo)簽屬性即可箩帚。
2、JS的加載執(zhí)行速度影響了DOMContentLoaded事件的觸發(fā)時(shí)間黄痪，如果想要盡快觸發(fā)DOMContentLoaded事件紧帕，就將次要的JS采用動(dòng)態(tài)加載的方式加載吧。
///////////////////////////////////////////////////////////////////////////////
canvas變形方法：
canvas.translate(x,y)：定義canvas的(0,0)坐標(biāo)點(diǎn)（以下所有方法都是相對(duì)于此點(diǎn)進(jìn)行變形）
canvas.scale(scaleWidth,scaleHeight)：放大倍數(shù)桅打，寬度和高度倍數(shù)都不可少
canvas.rotate(angle)：旋轉(zhuǎn)角度
canvas.transform(a,b,c,d,e,f)：
canvas.setTransform(a,b,c,d,e,f)：
transform和setTransform中的參數(shù)解釋：
a:水平縮放
b:垂直傾斜是嗜，0表示無傾斜
c:水平傾斜，0表示無傾斜
d:垂直縮放油额，1表示無縮放
e:水平位置偏移
f:垂直位置偏移
1叠纷、setTransform會(huì)重置0,0坐標(biāo)點(diǎn)和其他變形為初始狀態(tài)。
scale潦嘶、rotate、tranform則會(huì)依據(jù)當(dāng)前的狀態(tài)進(jìn)行相對(duì)的變形崇众。
比如：transform和setTransform：前者會(huì)基于目前已經(jīng)變形的情況進(jìn)行進(jìn)一步變形掂僵，而setTransform則是重置所有變形。比如顷歌，已經(jīng)用scale放大了2倍锰蓬，transform再放大3倍，canvas將變成6倍眯漩，而setTransform放大3倍則會(huì)重置放大倍數(shù)為3倍
2芹扭、canvas中的變形的相對(duì)點(diǎn)是canvas的0,0點(diǎn)。而css3 transform中的變形的相對(duì)點(diǎn)永遠(yuǎn)是元素的中心點(diǎn)赦抖。所有傾斜均是逆時(shí)針方向
///////////////////////////////////////////////////////////////////////////////
為某些內(nèi)置對(duì)象增加方法：
String.prototype.getHallo=function(a,b){}
想調(diào)用某些內(nèi)置對(duì)象的方法：
情形一：不需要改變this指向的
var getHallo=Math.pow;
console.log(getHallo(2,5));//=>32
情形二：需要改變this指向的
（1） "".substr.call(str,2);//=>cdef
或者
（2）?(new String()).substr.call(str,2)//=>cdef 性質(zhì)同（1）
或者
（3）?var str="abcdef";
String.prototype.substr.call(str,2);//=>cdef
或者
（4）?"".__proto__.substr.call(str,2)//=>cdef 性質(zhì)同（3）
///////////////////////////////////////////////////////////////////////////////
關(guān)于表單元素value值：
表單中textarea和input的值均保存在dom.value中舱卡，這里的dom.value與自身的value屬性并不一樣。dom.value會(huì)隨著onchange自動(dòng)更新队萤，而自身的value則不會(huì)轮锥。也就是說getAttribute("value")一旦<ipnut value="111"/>被賦值，則不會(huì)再改變要尔，除非js動(dòng)態(tài)改變其value值
textarea和input：
舉例：
<input id="hallo" type="text" value="111"/>
hallo.value=>111
hallo.getAttribute("value")=>111
input輸入222
hallo.value=>222
hallo.getAttribute("value")=>111
設(shè)置value屬性值
hallo.setAttribute("value","333")
hallo.value=>333
hallo.getAttribute("value")=>333
結(jié)論：dom.value總是會(huì)自動(dòng)更新舍杜，而html標(biāo)簽-value屬性值則與data-xxx并無差別新娜，要想改變?cè)撝担夹枰猻etAttribute()
///////////////////////////////////////////////////////////////////////////////
用以下幾行代碼來解釋一下作用域和bind以及閉包的應(yīng)用：
首先既绩，看一下原始形態(tài)：
var obj={};
obj.stv=setTimeout(function(){
? ? console.log(this); //<b>
},100);
<b>處指向window概龄，因?yàn)閟etTimeout是window的對(duì)象，事實(shí)上我們希望這里指向當(dāng)前對(duì)象obj
變形：
var obj={};
obj.stv=setTimeout(function(){
? ? console.log(this); //<b>
}.bind(obj),100);
<b>處指向obj饲握，bind將指向做了改變
但是旁钧，我們希望不要再bind中使用obj，而是互拾，直接用this指向當(dāng)前對(duì)象歪今，于是變形：
var obj={};
obj.stv=function(){
? ? console.log(this);//<a>
? ? setTimeout(function(){
? ? ? ? console.log(this);?//<b>
? ? }.bind(this),100);
}();
咦，似乎與我們想要的結(jié)果不太一樣颜矿，函數(shù)體將自動(dòng)執(zhí)行寄猩，<a>處和<b>的this都指向了window，這是因?yàn)樵摵瘮?shù)在定義時(shí)就被執(zhí)行骑疆，并未被賦值給任何對(duì)象
再變形：
var obj={};
obj.stv=function(){
? ? console.log(this);//<a>
? ? setTimeout(function(){
? ? ? ? console.log(this);?//<b>
? ? }.bind(this),100);
};
obj.stv();
這就是我們想要的結(jié)果了蹋笼，但看起來好像仍然不夠完美扰肌，因?yàn)椋瘮?shù)內(nèi)部和外部環(huán)境沒有分離開，于是叠萍，我們給他一個(gè)閉包
var obj={};
obj.stv=function(){
? ? return function(){
? ? ? ? console.log(this);//<a>
? ? ? ? setTimeout(function(){
? ? ? ? ? ? console.log(this); //<b>
? ? ? ? }.bind(this),100);
? ? };
}();
obj.stv();
這樣，就完美了
///////////////////////////////////////////////////////////////////////////////
用call來優(yōu)化笨重的上下文切換
設(shè)想一下昼钻，如果我們寫一個(gè)改變dom顏色的函數(shù)袁余，并可能會(huì)被頻繁調(diào)用
如下：
function changeColor(c){
? ? this.style.color=c;
}
如何使用？
div1.changeColor("#f90") 肯定會(huì)報(bào)錯(cuò)冷守，因?yàn)閏hangeColor不是dom自帶的方法刀崖，一般情況下，我們可能會(huì)去給dom寫拓展拍摇，比如：
!function(dom){
? ? dom.changeColor=function(c){
? ? ? ? //循環(huán)亮钦、賦值。充活。蜂莉。。
? ? }
}(NodeList.prototype);
或者干脆調(diào)用時(shí)將要操作的dom對(duì)象作為傳過去
function changeColor(ele,c){
? ? ele.style.color=c;
}
第一種方法是一種封裝混卵，對(duì)于頻繁使用的內(nèi)容可以這么做映穗，但是總不能對(duì)所有的涉及到dom操作的都拓展到prototype上吧，那樣太不人道了
第二種方法比較low淮菠，就不細(xì)說了
用下面的方法：
function changecolor(c){
this.style.color=c;
}
調(diào)用時(shí)：changeColor.call(ele,c)
///////////////////////////////////////////////////////////////////////////////
關(guān)于函數(shù)節(jié)流：當(dāng)用戶通過某些操作而頻繁調(diào)用某一函數(shù)時(shí)男公，尤其是涉及到dom重流重繪時(shí)，會(huì)導(dǎo)致性能浪費(fèi)，于是對(duì)某些操作做一定延時(shí)處理枢赔，比如窗口resize：
var resizeTimer=null;
$(window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log("window resize");
},400);
}
);
我們將函數(shù)節(jié)流成為throttle澄阳，以上是基本原理，以后細(xì)細(xì)研究
///////////////////////////////////////////////////////////////////////////////
jquery中map的應(yīng)用：
場景：
<div class="hallo">1</div>
<div class="hallo">2</div>
<div class="hallo">3</div>
現(xiàn)在想要獲取.hallo中的值并組成一個(gè)數(shù)組：
var arr=[];
$(".hallo").each(function(){
? ? arr.push(this.innerHTML);
});
console.log(arr);
有了map踏拜，可以更加簡單：
arr=$(".hallo").map(function(){
? ? return this.innerHTML;
}).get();
console.log(arr);
這里的map是一個(gè)jquery封裝的數(shù)組碎赢，需要用get()方法就能得到標(biāo)準(zhǔn)的數(shù)組了
///////////////////////////////////////////////////////////////////////////////
高效率canvas：
1、減少canvas狀態(tài)的改變
普通方式：
for (var i = 0; i < STRIPES; i++) {
? ? ? ? ? context.fillStyle = (i % 2 ? COLOR1 : COLOR2);
? ? ? ? ? context.fillRect(i * GAP, 0, GAP, 480);
? ? ? }?
高效方式：
context.fillStyle = COLOR1;
? ? ? for (var i = 0; i < STRIPES / 2; i++) {
? ? ? ? ? context.fillRect((i * 2) * GAP, 0, GAP, 480);
? ? ? }
? ? ? context.fillStyle = COLOR2;
? ? ? for (var i = 0; i < STRIPES / 2; i++) {
? ? ? ? ? context.fillRect((i * 2 + 1) * GAP, 0, GAP, 480);
? ? ? }
2速梗、盡量少調(diào)用canvasAPI
3肮塞、渲染范圍盡量縮小，只渲染有效部分
普通：context.fillRect(0, 0, canvas.width, canvas.height);?
高效：context.fillRect(20, 20, 100, 100);
4姻锁、復(fù)雜場景使用多層canvas（但不要超過3個(gè)）
5枕赵、像素級(jí)別的操作，盡量用整數(shù)
6位隶、動(dòng)畫用 requestAnimationFrame
7拷窜、渲染canvas比渲染圖片更快，所以可以預(yù)先將圖片渲染到隱藏的canvas中涧黄，需要使用的時(shí)候?qū)㈦[藏的canvas中的圖像區(qū)域取出來
8篮昧、可以用html背景的就不要用canvas做背景
9、使用的圖片盡量小笋妥，且bmp格式比png格式效率更高（前者不用考慮透明度）
10懊昨、putImageData比drawImage效率高
11、預(yù)渲染春宣，具體什么原理暫時(shí)沒搞懂酵颁，先貼出代碼：
普通：
var canvas = document.getElementById("myCanvas");
var context = this.canvas.getContext('2d');
var drawAsync = eval(Jscex.compile("async", function () {
while (true) {
? ? ? ? ? ? ? drawMario(context);
? ? ? ? ? ? ? $await(Jscex.Async.sleep(1000));
? ? ? ? ? }
? ? ? }))
Async().start();
? ? ? dra
w
高效：
var canvas = document.getElementById("myCanvas");
var context = this.canvas.getContext('2d');
var m_canvas = document.createElement('canvas');
m_canvas.width = 64;
? ? ? m_canvas.height = 64;
var m_context = m_canvas.getContext('2d');
? ? ? drawMario(m_context);
var drawAsync = eval(Jscex.compile("async", function () {
while (true) {
? ? ? ? ? ? ? context.drawImage(m_canvas, 0, 0);
? ? ? ? ? ? ? $await(Jscex.Async.sleep(1000));
? ? ? ? ? }
? ? ? }))
Async().start();
? ? ? dra
w
///////////////////////////////////////////////////////////////////////////////
iPhone上有一個(gè)奇怪的事件傳導(dǎo)機(jī)制：
如果div1和div2重疊了，那么單擊div1信认，則div2也會(huì)監(jiān)聽到材义。
解決辦法：div1的單擊事件加上e.preventDefault();
///////////////////////////////////////////////////////////////////////////////
關(guān)于click和touch觸發(fā)順序和抵消機(jī)制：
touchstart、touchmove嫁赏、touchend、touchcancel
touchstart：手指接觸屏幕即觸發(fā)
touchmove：在touchstart之后移動(dòng)后不斷觸發(fā)
touchend：手指離開屏幕觸發(fā)
touchcancel：當(dāng)系統(tǒng)停止跟蹤觸摸的時(shí)候觸發(fā)油挥。并非是手指離開屏幕時(shí)潦蝇。比如：拖拽過程中突然按下了home鍵，就會(huì)觸發(fā)
正常拖拽結(jié)束后只會(huì)觸發(fā)touchend而不會(huì)觸發(fā)touchcancel
拖拽觸發(fā)的事件順序?yàn)椋簍ouchstart=>touchmove=>touchend
點(diǎn)擊觸發(fā)的事件順序?yàn)椋簍ouchstart=>touchend=>click
長按如果觸發(fā)了選中深寥，則touchmove不會(huì)持續(xù)觸發(fā)攘乒，所以，如果事件監(jiān)聽比較復(fù)雜惋鹅，最好添加上
另：移動(dòng)端點(diǎn)擊操作會(huì)在touchend之后相繼（延時(shí)后）觸發(fā)mousemove则酝、mousedown、mouseup闰集、click沽讹，而拖拽則不會(huì)(touchend就結(jié)束了)
///////////////////////////////////////////////////////////////////////////////
事件的一些通用屬性：
1般卑、e.bubbles：是否允許冒泡，默認(rèn)為true爽雄，當(dāng)使用了e.stopPropagation()方法后蝠检，變?yōu)閒alse
2、e.cancelable：是否禁止默認(rèn)事件挚瘟，默認(rèn)為false叹谁，當(dāng)使用了e.preventDefault()方法后，變?yōu)閠rue
3乘盖、e.target和e.currentTarget：前者是觸發(fā)事件流的對(duì)象焰檩，后者是當(dāng)前監(jiān)聽的對(duì)象，如：
<ul><li></li></ul>
$("ul").addEventListener("click",function(e){
? ? e.target=>點(diǎn)擊 li 時(shí)订框，指 li 析苫，點(diǎn)擊ul時(shí)候指ul
? ? e.currentTarget=>點(diǎn)擊 li 時(shí)指ul，點(diǎn)擊ul時(shí)布蔗，指ul
});
也就是說只有當(dāng)觸發(fā)事件流的對(duì)象和當(dāng)前監(jiān)聽對(duì)象一致時(shí)藤违，target才等于currentTarget
應(yīng)用場景：如果你想對(duì)某父元素進(jìn)行監(jiān)聽但希望只有在點(diǎn)擊該父元素時(shí)才執(zhí)行監(jiān)聽函數(shù)，但又不想對(duì)子元素禁止冒泡纵揍，則可以在父元素處做一個(gè)判斷顿乒，判定是點(diǎn)擊了的該父元素還是冒泡過來的事件
4、e.deaultPrevented：是否禁止默認(rèn)事件泽谨，默認(rèn)為false璧榄，當(dāng)使用了e.preventDefault()方法后，變?yōu)閠rue
5吧雹、e.eventPhase：返回事件的階段骨杂，1、2雄卷、3分別代表捕獲階段（EVENT.CAPTUREING_PHASE）搓蚪、正常事件派發(fā)階段（EVENT.AT_TARGET）和冒泡階段（EVENT.BUBBING_PHASE）。上一個(gè)應(yīng)用場景也可以用此屬性進(jìn)行判定
6丁鹉、e.isTrusted：是否可信事件妒潭，非用戶觸發(fā)的事件，返回false揣钦，正常激發(fā)的事件為true雳灾，比如：用jquery的trigger方法代碼觸發(fā)事件，返回false
思考：有沒有可能通過isTrusted來解決Safari中不支持自動(dòng)語音播放問題
7冯凹、e.timeStamp：觸發(fā)事件的時(shí)間
思考：沒有必要在事件監(jiān)聽中用new Date()來獲取當(dāng)前時(shí)間谎亩，因?yàn)槭录幸呀?jīng)有了這個(gè)屬性，要時(shí)常溫習(xí)舊知識(shí)
8、e.type：事件類型匈庭，不必贅述
特定事件的一些特有屬性：
1夫凸、clipBoardData：剪切事件，剪切的內(nèi)容
///////////////////////////////////////////////////////////////////////////////
hasOwnProperty()方法和in語句的區(qū)別：
var Person=function(name,age){
?this.name=name;
?this.age=age;
};
Person.prototype.hello=function(){
?console.log(this.name);
?console.log(this.age);
}
var p=new Person("lijun",24);
p.hello();//=>返回lijun 24
console.log(p.hasOwnProperty("name"));//=>返回true
console.log(p.hasOwnProperty("hello"));//=>返回false
console.log("hello" in p);//=>返回true
///////////////////////////////////////////////////////////////////////////////
嚴(yán)格模式下arguments不允許被修改：
"use strict";
function hello(a,b,c){
?arguments[2]=10; //嚴(yán)格模式下嚎花，此行無效
?alert(c); //若無"use strict"寸痢，則返回10，若有紊选，則返回3
}
hello(1,2,3);
///////////////////////////////////////////////////////////////////////////////
變量聲明和賦值順序：
看如下代碼：
function a(x) {
? ? return x * 2;
}
var a=1;
console.log(a);//output：1
執(zhí)行順序?yàn)椋?/p>
//聲明階段——先聲明普通變量啼止，再聲明函數(shù)變量
var a;
function a;
//賦值階段——按順序賦值
a=function(x){
? ? return x*2;
}
a=1;
以上代碼改成：
function a(x) {
? ? return x * 2;
}
var a;
console.log(a);//output：function(x){return x*2;}
///////////////////////////////////////////////////////////////////////////////
call傳null：
function a() {
? ? console.log(this);
}
a.call(null);//output：window
這個(gè)原因可能是call函數(shù)的實(shí)現(xiàn)中，對(duì)參數(shù)的判斷是兵罢，如果參數(shù)為null或undefined献烦，就認(rèn)為沒有傳參數(shù)，而沒有傳參數(shù)的時(shí)候上下文顯然應(yīng)該是window卖词。
為了更深入理解巩那，深入一步進(jìn)行探索：
var obj={
?a:function(){
? ? ?console.log(this);
?}
};
obj.a.call(null);//output：仍然是window，而不是obj此蜈，這說明null并不預(yù)示著無傳入?yún)?shù)即横，相反，null就意味著傳入了window裆赵，call默認(rèn)的傳入?yún)?shù)是window东囚，也就是說，call方法對(duì)第一個(gè)參數(shù)進(jìn)行了整理战授。繼續(xù)：
var obj={
?a:function(){
? ? ?console.log(this);
?}
};
obj.a.call(0);//output：Number
obj.a.call(false);//output：Boolean
符合上面的猜想页藻，call的確對(duì)第一個(gè)參數(shù)做了特殊處理，它要保證第一個(gè)參數(shù)進(jìn)入后以對(duì)象的形式傳遞給委托方法的this植兰，而undefined和null只不過被轉(zhuǎn)換成了window而已
///////////////////////////////////////////////////////////////////////////////
function中的function的歸屬問題份帐，這應(yīng)該算是js的一個(gè)bug：
function hallo(){
?console.log(this); //=>(1) window
?function what(){
? console.log(this); //=>(2)?window
?}
?what();
}
hallo();
console.log("what" in window);//=>(3)?false
console.log("hallo" in window);//=>(4)?true
函數(shù)what為函數(shù)hallo的局部變量，但(2)處的this指向是window楣导，而與此同時(shí)(3)卻返回了false標(biāo)明what并不被window收錄為其屬性
另：在嚴(yán)格模式下废境，(1)(2)處均返回undefined，而(3)處為false筒繁，(4)處為true
///////////////////////////////////////////////////////////////////////////////
css外鏈link標(biāo)簽的屬性在中彬坏，stylesheet是必須的，但type不是必須的
///////////////////////////////////////////////////////////////////////////////
關(guān)于js中的兩種繼承方法：
function Person(name){
this.name=name:
}//這是父類
Person.prototype.setAge=function(){};//原型方法
1膝晾、類繼承（以下使用call）
function Student(){
Person.call(this,"Jack");
}
2、原型式繼承
function Student(){}
Student.prototype=new Person();
對(duì)比：類繼承每次構(gòu)造函數(shù)時(shí)繼承方法都要?jiǎng)?chuàng)建一遍务冕，函數(shù)復(fù)用也就無從談起血当，另外，超類Person原型中定義的方法對(duì)子類Student是不可見的。
而原形式繼承本質(zhì)是克隆而非繼承臊旭，是把父類所擁有的所有方法和屬性克隆一遍給子類落恼，當(dāng)然，這種一股腦的繼承也并不是一定一直都需要的离熏。兩種方式各有各的特點(diǎn)
///////////////////////////////////////////////////////////////////////////////
ES5中Object的getPropertypeOf()方法和ES6中的__proto__屬性都可以獲得對(duì)象的原型
原型鏈的作用是用來實(shí)現(xiàn)繼承
///////////////////////////////////////////////////////////////////////////////
獲取arguments中除第一個(gè)元素外的所有其他元素的方法：
var args=Array.prototype.call(arguments,1);
為什么要這么做：1佳谦、應(yīng)用場景是某些時(shí)候，第一個(gè)參數(shù)是作為判定參數(shù)或者施效對(duì)象滋戳，需要獲取其他參數(shù)參數(shù)args钻蔑；2、由于argument不是數(shù)組奸鸯，無法直接用arguments.slice咪笑，于是用call來借用Array的方法
///////////////////////////////////////////////////////////////////////////////
動(dòng)畫中，頁面渲染頻率娄涩，一般瀏覽器默認(rèn)的fps（frame per second）應(yīng)維持在24~60之間窗怒。低于24則會(huì)卡頓
建議的延時(shí)更新dom的時(shí)間間隔為16.7（等于屏幕刷新時(shí)間）。
setTimeout(fn,0)=>并不是會(huì)立即執(zhí)行蓄拣，會(huì)在主線程中的隊(duì)列調(diào)用完了后再隔大概4ms（不同瀏覽器不一樣）后執(zhí)行扬虚，所以，這里的timer瀏覽器會(huì)認(rèn)定最小為4
setImmediate(fn)可達(dá)到上述效果且?guī)缀醪粫?huì)延遲（可能會(huì)有1ms）
setInterval(fn,100)=>下一次fn并不是上一次循環(huán)結(jié)束后再放入隊(duì)列中球恤，而是在上一次執(zhí)行的時(shí)候就早已在隊(duì)列中了辜昵。比如：
fn中執(zhí)行了一個(gè)超大的循環(huán)（大概要耗費(fèi)10秒鐘運(yùn)算），那么下一次的fn甚至可能會(huì)與上一次的運(yùn)算同時(shí)進(jìn)行碎捺，因?yàn)橄乱淮蔚倪\(yùn)算可能會(huì)比上一次運(yùn)算快
///////////////////////////////////////////////////////////////////////////////
gulp本地安裝的坑：
1路鹰、當(dāng)前目錄必須要有pachage.json
2、npm get global一定要為false收厨，也就是不可以默認(rèn)為全局安裝晋柱，否則無法正確安裝。（運(yùn)行install之后輸入gulp還是會(huì)提示說gulp不是內(nèi)部命令）
如何做诵叁？npm set global=true 將會(huì)把默認(rèn)全局安裝設(shè)定為true
npm set global=false雁竞，卻并不會(huì)把他改成false
這時(shí)候npm config ls查看配置，找到 ;userconfig的值并根據(jù)這個(gè)路徑在文件夾中刪除該文件(.npmrc)
這樣npm gulp --save-dev就成功了
注意：安裝時(shí)候有個(gè)錯(cuò)誤說npm deprecated graceful-fs@3.0.8...之類的話還說什么please update to graceful-fs@^4.0.0 as soon as possible.網(wǎng)上都說可以不必理會(huì)拧额，已經(jīng)安裝成功了碑诉，一開始我還不信一直以為是這個(gè)問題，后來確信了侥锦，跟這個(gè)真的沒關(guān)系进栽，不影響使用，根本原因在于萬惡的.npmmrc
3恭垦、gulp-jshint對(duì)jshint有依賴快毛，所以要想使用gulp-jshint格嗅，還必須要npm install jshint
///////////////////////////////////////////////////////////////////////////////
UtoVR的使用中，視頻一定要是可以獲得寬高的視頻唠帝，否則基于canvas渲染的時(shí)候屯掖，是沒辦法進(jìn)行的
///////////////////////////////////////////////////////////////////////////////
gulp-connect的功能就是在本地啟動(dòng)一個(gè)Web Server?
///////////////////////////////////////////////////////////////////////////////
看網(wǎng)上的教程性文檔一定要細(xì)致，抓住一些關(guān)鍵的點(diǎn)襟衰，做到心里有數(shù)贴铜，在實(shí)踐的過程中，如果遇到與教程中結(jié)果不一致瀑晒，一定要細(xì)致查看教程绍坝，看看忽略了那些細(xì)節(jié)
///////////////////////////////////////////////////////////////////////////////
css clip-path屬性可以裁切多邊形
兼容語法：
-webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
-webkit-clip-path: url("#clip-shape");?
clip-path: url("#clip-shape");
引用的內(nèi)斂svg：
<svg width="0" height="0">
? ? <defs>
? ? ? ? <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
? ? ? ? ? ? <polygon points="0 0.5, 0.5 0, 1 0.5, 0.5 1" />
? ? ? ? </clipPath>
? ? </defs>
</svg>
其中，clipPathUnits屬性的值為objectBoundingBox瑰妄，這樣clipping path就繼承了引用了它的HTML元素的邊界陷嘴。
效果：
///////////////////////////////////////////////////////////////////////////////
通過配置package.json快速進(jìn)行本地node模塊安裝：
1、pachage.json配置
"devDependencies": {
? ? "gulp": "^3.9.1",
? ? "gulp-autoprefixer": "^3.1.0",
? ? "gulp-cache": "^0.4.5",
? ? "gulp-concat": "^2.6.0",
? ? "gulp-dest": "^0.2.3",
? ? "gulp-if": "^2.0.1",
? ? "gulp-ignore": "^2.0.1",
? ? "gulp-imagemin": "^3.0.1",
? ? "gulp-jshint": "^2.0.1",
? ? "gulp-less": "^3.1.0",
? ? "gulp-livereload": "^3.8.1",
? ? "gulp-minify-css": "^1.2.4",
? ? "gulp-minify-html": "^1.0.6",
? ? "gulp-notify": "^2.2.0",
? ? "gulp-remove-logging": "^1.2.0",
? ? "gulp-rename": "^1.2.2",
? ? "gulp-rev": "^7.1.0",
? ? "gulp-rev-collector": "^1.0.4",
? ? "gulp-sourcemaps": "^1.6.0",
? ? "gulp-uglify": "^1.5.3",
? ? "gulp-useref": "^3.1.0",
? ? "jshint": "^2.9.2",
? ? "lazypipe": "^1.0.1"
? }
然后運(yùn)行 npm install即可一次性安裝所有模塊依賴
2间坐、npm install gulp del gulp-jshint gulp-uglify即可一次性安裝多個(gè)插件
///////////////////////////////////////////////////////////////////////////////
關(guān)于網(wǎng)頁長度單位和font-size：
相對(duì)單位：em灾挨、%都是相對(duì)于父元素的font-size。而rem是相對(duì)于html
絕對(duì)單位：px竹宋、pt劳澄。額~其實(shí)px相比于pt，也算是相對(duì)單位蜈七，pt就想cm秒拔、m等，是一個(gè)物理絕對(duì)單位飒硅，1pt=1/72inch砂缩，而px換算到pt則跟像素密度有關(guān)，當(dāng)屏幕像素密度很大的話三娩，1px對(duì)應(yīng)的視覺物理長度會(huì)很小
///////////////////////////////////////////////////////////////////////////////
解決新添加的元素沒有事件綁定的方法：
<ul class=“l(fā)ist"><li></li><li></li><li></li></ul>
給li添加點(diǎn)擊事件庵芭，對(duì)于ul中動(dòng)態(tài)添加的li無效，于是可以對(duì)ul進(jìn)行監(jiān)聽
var list=document.getElementsByClassName(“l(fā)ist”)[0];
list.onclick=function(e){
var target=e.target;
if(target.tagName==="li”){
//do something
}
}
我們把li的事件委托給ul.list
這就是大名鼎鼎的事件委托機(jī)制
當(dāng)然jquery中自帶事件委托處理的方法雀监，此處不解釋双吆，只針對(duì)原生js的解決方案進(jìn)行探討
但是，這個(gè)事件委托機(jī)制有個(gè)缺陷：當(dāng)li有子元素的時(shí)候会前，li的子元素點(diǎn)擊并不會(huì)被生效好乐，因?yàn)閠arget不是li。怎么辦呢瓦宜？在li上就是阻止事件的抓捕蔚万。如何實(shí)現(xiàn)：
用css實(shí)現(xiàn)即可：
.list>li>*{pointer-event:none;}
這里是pointer-event的一個(gè)應(yīng)用，這個(gè)屬性為none的時(shí)候表示鼠標(biāo)在此處變得無效
更多pointer-event的認(rèn)識(shí)和酷炫的應(yīng)用临庇，看這篇文章吧
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
另外笛坦，說明一下区转，并非所有的事件都會(huì)冒泡
以下事件天生就不會(huì)冒泡：
blur focus mouseenter mouseleave?
另外，以下事件在ie8及以下版扩，并不會(huì)參照規(guī)范進(jìn)行冒泡：
change select submit reset
///////////////////////////////////////////////////////////////////////////////
throw new Error(str);//會(huì)拋出錯(cuò)誤并且停止js的執(zhí)行
new promise.catch((err)=>console.error(err););//可以將錯(cuò)誤信息捕獲并輸出
///////////////////////////////////////////////////////////////////////////////
console：
console.log(str);//輸出
console.info(str);//信息輸出
console.warn(str);//警示輸出
console.error(str);//錯(cuò)誤輸出
另外，參數(shù)可以有多個(gè)侄泽，多個(gè)參數(shù)之間會(huì)自動(dòng)有空格隔開
如console.log(111,222);
輸出：111 222
///////////////////////////////////////////////////////////////////////////////
曾經(jīng)的那個(gè)必須用閉包解決的js異步坑礁芦，可以用es6的map來快速避開
[1,2,3,4,5].map(id=>setTimeout(()=>console.log(i),100*i););
///////////////////////////////////////////////////////////////////////////////
正則
.*匹配所有非換行字符
[.*\n]匹配所有字符
.*和.*?的區(qū)別：前者是貪婪匹配，后者會(huì)匹配一次
如：str=STARTabb123e2eeEND要去掉abb和之后第一個(gè)e以及他們之間的內(nèi)容
str.replace(/abb+.*e+/,'');
//output：STARTEnd
str.replace(/abb+.*?e+/,'');
//output：START2eeEnd
///////////////////////////////////////////////////////////////////////////////
node命令跟上>+文件名即可將node輸出的內(nèi)容輸出到文件中去
比如：
console.warn(xxxx);
console.log();
等
///////////////////////////////////////////////////////////////////////////////
node中__dirname是全局變量悼尾，可獲取當(dāng)前運(yùn)行文件路徑
///////////////////////////////////////////////////////////////////////////////
清空數(shù)組的方法：
arr.splice(0,arr.length);//這樣會(huì)直接將數(shù)組中的內(nèi)容也清空
然而：arr=[];//這種方法只是將數(shù)組指向空柿扣，而數(shù)組中的項(xiàng)目會(huì)殘留在內(nèi)存中等待垃圾回收
雖然兩者都有效，但是前者更嚴(yán)謹(jǐn)
///////////////////////////////////////////////////////////////////////////////
編譯jade：
方法一：node編譯：
1闺魏、npm安裝jade
2未状、輸入命令：jade xx.jade或者實(shí)時(shí)監(jiān)聽并編譯：jade -p -w xx.jade
方法二：webstorm編譯器實(shí)時(shí)編譯：
file=>setting=>tools=>file watchers設(shè)置jade，并在arguments一欄中"$FileName$"的前面添加"-P "變成："-P?$FileName$"
///////////////////////////////////////////////////////////////////////////////
node express中析桥，創(chuàng)建的server如何獲取客戶端傳來的參數(shù)：
app.get('get',function(req,res){
? ? var paras=req.query;//客戶端傳來的所有參數(shù)（Object）
? ? var url=req.url;//客戶端訪問的url
});
///////////////////////////////////////////////////////////////////////////////
isNaN()：
第一步：先將參數(shù)轉(zhuǎn)變?yōu)閿?shù)字
第二步：檢驗(yàn)是否為數(shù)字
即：
isNaN(a)=>
var a=Number(a);
return typeof a==="number";
測試結(jié)果如下：
isNaN(0);=>false
isNaN("");=>false
isNaN("12");=>false
isNaN("12a");=>true
isNaN({});=>true
isNaN(undefined);=>true
isNaN(null);=>false
///////////////////////////////////////////////////////////////////////////////
document由
<!doctype html>
<html></html>
這兩個(gè)元素組成
document.documentElement指html元素
///////////////////////////////////////////////////////////////////////////////
mac中如何配置虛擬主機(jī)：
開啟apache：sudo apachectl start
用vim打開配置文件：sudo vim /etc/apache2/extra/httpd-vhosts.conf
將如下代碼添加到文件中：
<VirtualHost *:8080>
? ? DocumentRoot "/Users/jun.li/ctb/ctb-project/h5pro"
? ? ServerName localhost
? ? DirectoryIndex ? index.html index.htm index.php default.index default.php
? ? ErrorLog "/private/var/log/apache2/sites-error_log"
? ? CustomLog "/private/var/log/apache2/sites-access_log" common
? ? <Directory />
? ? Options Indexes FollowSymLinks MultiViews
? ? AllowOverride None
? ? Order deny,allow
? ? Allow from all
? ? </Directory>
</VirtualHost>
另外司草，vim的一些基本命令：
i：進(jìn)入編輯模式
esc：退出編輯模式
/ServerName(向前查找)
?ServerName(向后查找)
均可以查找字符串ServerName，然后用n(向前)或N(向后)可進(jìn)行下一個(gè)查找
:set ignorecase即可忽略大小寫
:set noignorecase對(duì)大小寫敏感
u撤銷之前的修改
:qw寫入并且退出
:q!強(qiáng)制退出且忽略之前的更改
///////////////////////////////////////////////////////////////////////////////
通過HTMLElement.prototype添加的原生拓展屬性
document.documentElement（即html）以及其子孫元素將會(huì)獲得泡仗，而document和其另外一個(gè)子元素——doctype將不會(huì)活的
由此可見埋虹，html對(duì)象源于HTMLElement（這是個(gè)function類）
///////////////////////////////////////////////////////////////////////////////
document做委托事件代理監(jiān)聽有個(gè)兼容性bug：在部分手機(jī)（如iPhone5）上有如下問題
document.addEventListener("click",function(e){
? ? var tar=e.target;
? ? ...
});
當(dāng)tar不為以下元素的時(shí)候，事件無法冒泡到document
img娩怎、表單元素（label除外）搔课、a標(biāo)簽
也就是說，若目標(biāo)事件不是上述這些類型的元素截亦，上述的document監(jiān)聽事件無法被觸發(fā)爬泥，其他元素在某些手機(jī)（如iPhone5）上的點(diǎn)擊監(jiān)聽默認(rèn)是沒有被激活的：
解決辦法：
用以下代碼激活頁面所有的元素的點(diǎn)擊監(jiān)聽
document.onclick=function(){return;};
///////////////////////////////////////////////////////////////////////////////
這里通過客戶端和服務(wù)端中加載本地文件來認(rèn)識(shí)一下二者的區(qū)別：
服務(wù)端是存放所有文件和資源的地方，當(dāng)本地要load一個(gè)資源的時(shí)候崩瓤，不管這個(gè)資源在當(dāng)前站點(diǎn)所在的服務(wù)器還是在其他的服務(wù)器上袍啡，都需要解析url然后找到制定的目錄下去獲取相應(yīng)的資源。也就是說<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">還是使用<script src="js/jquery.min.js">谷遂，本質(zhì)上是一樣的葬馋，所以，很多情況下肾扰，這些公用庫畴嘶，完全可以從百度等這些資源庫上獲取，因?yàn)槟菢蛹虞d速度更快集晚，以下是對(duì)比百度資源庫和微信路況資源庫分別加載jquery文件所耗用的時(shí)間：
百度資源庫（嘗試窗悯，平均40ms）：
微信路況（平均130ms）：
當(dāng)然，此處大小也有差距偷拔，前者29.5kb蒋院，后者36.3kb
///////////////////////////////////////////////////////////////////////////////
網(wǎng)頁編碼和語言：
一亏钩、html要想中文沒問題，必須：
1欺旧、文件編碼設(shè)置為UTF-8
2姑丑、meta charset="UTF-8"
二、lang標(biāo)簽含義：
告訴網(wǎng)頁你當(dāng)前標(biāo)簽中的內(nèi)容所使用的語言（地域）辞友，與編碼無關(guān)栅哀，對(duì)seo會(huì)有影響
傳統(tǒng)的值，lang="zh-CN"表示中文称龙，zh-HK粵語留拾，en表示英語，zh-TW表示臺(tái)灣
新的標(biāo)準(zhǔn)中鲫尊，lang="zh-cmn-hans-CN"用來代替zh-CN痴柔，前綴zh-cmn-hans-代替?zhèn)鹘y(tǒng)的zh-前綴
///////////////////////////////////////////////////////////////////////////////
以下是資源預(yù)加載的順序和描述
///////////////////////////////////////////////////////////////////////////////
關(guān)于項(xiàng)目開發(fā)的一些溝通的經(jīng)驗(yàn)：
1、一旦應(yīng)用了新的技術(shù)方案疫向，一定要記著跟測試說一聲咳蔚，這個(gè)地方重點(diǎn)測一下，以免測試借助過往經(jīng)驗(yàn)認(rèn)為這個(gè)模塊已經(jīng)很成熟了而疏于精細(xì)鸿捧。導(dǎo)致新方案的未知問題出現(xiàn)
2屹篓、開發(fā)的過程中，永遠(yuǎn)不要相信自己對(duì)邏輯的判斷匙奴，一定要有事實(shí)的真相告訴自己ok堆巧，才算通過，比如泼菌，一個(gè)需要在微信和app上運(yùn)行的站點(diǎn)谍肤，一定要有真實(shí)的app環(huán)境和微信環(huán)境都測驗(yàn)過，才算完成
///////////////////////////////////////////////////////////////////////////////
微信功能鏈接：
weixin://dl/scan 掃一掃
weixin://dl/feedback 反饋
weixin://dl/moments 朋友圈
weixin://dl/settings 設(shè)置
weixin://dl/notifications 消息通知設(shè)置
weixin://dl/chat 聊天設(shè)置
weixin://dl/general 通用設(shè)置
weixin://dl/officialaccounts 公眾號(hào)
weixin://dl/games 游戲
weixin://dl/help 幫助
weixin://dl/feedback 反饋
weixin://dl/profile 個(gè)人信息
weixin://dl/features 功能插件
兼容寫法：
不同系統(tǒng)不同瀏覽器對(duì) url 格式有不同的限制哗伯，所以還需要轉(zhuǎn)變一下荒揣。
安卓原生瀏覽器，url地址需要變成 javascript:window.location.href='weixin://dl/favorites';
Chrome 瀏覽器可以直接用 weixin://dl/favorites
QQ瀏覽器要用到 data url data:text/html,<html><script>window.location.href='weixin://dl/favorites';</script></html>
