? ? ? ?用js進(jìn)行平時項(xiàng)目開發(fā)的時候會經(jīng)常面臨著一個問題度陆，就是要對變量的作用域進(jìn)行分析判斷鸵熟，今天就來淺談一下自己如何來進(jìn)行區(qū)分的。
1.在js中這里指的是es3.0扣典，沒有塊級作用域的概念妆毕，只存在函數(shù)作用域，即一個function里的變量為一個單獨(dú)的作用域贮尖，記住要用var進(jìn)行聲明笛粘，否則就會上升至全局變量。其實(shí)這個還是比較好區(qū)分的湿硝，下面來給段代碼
var b=2; function a(){ var b =1; c(); console.log(b)}; ? function c (){console.log (b)} ?; ? ? ?a(); 輸出結(jié)果為2闰蛔，1
因?yàn)樵趈s中函數(shù)的函數(shù)聲明的那一刻起它的作用域就相應(yīng)的產(chǎn)生了，這就是js里的詞法作用域图柏，聲明的時候就確定了作用域的范圍序六，就像上面的代碼中c函數(shù)聲明時其產(chǎn)生的作用域是全局作用域，再a函數(shù)中調(diào)用c并不能改變c的作用域鏈蚤吹，所以第一個輸出的為全局變量2,第二個就簡單了例诀，先從a函數(shù)得作用域開始尋找b如果能找到就返回，不能找到就去父級查找裁着，此情景可以找到就輸出1
2.在前端頁面如果要去寫后臺進(jìn)行數(shù)據(jù)操作的sql語句時繁涂，最好是把這些語句給拆解到后臺實(shí)現(xiàn)，因?yàn)檫@里涉及到安全問題二驰，sql不能寫select*from tablename 除了能造成性能問題外還存在一個安全問題扔罪，能過截獲這個來得知你的表結(jié)構(gòu)^_^
3.js編程思想
js采用的是基于面向?qū)ο蟮木幊趟枷耄菍τ趧倓側(cè)腴T的小白或者說沒有面向?qū)ο笏枷刖幊痰拈_發(fā)人員來說桶雀，要在自己程序中使用這種思想開始還是比較難的矿酵，比如 大部分或采用
//一個功能對應(yīng)一個函數(shù)
var common = 23唬复；
function·a(){
}
function b(){
}
.....
要使用的時候就直接執(zhí)行該函數(shù)就可以了，但是相對的也有一些局限性 全肮，首先定義的函數(shù)敞咧，和一些變量都基于全局作用域的，這樣會污染全局變量辜腺，第二休建，函數(shù)與函數(shù)之間的邏輯上的關(guān)系很模糊，看不之間的關(guān)聯(lián)關(guān)系
如果采用面向?qū)ο蟮木幊趟枷朐诩由辖鉀Q全局變量污染可以采用以下方法
var model1 = (function common(){//使用自執(zhí)行函數(shù)形成一個獨(dú)立的作用域评疗，避免污染全局變量
? var selfEntiy ={};//定義一個對象
? selfEntiy.selfName = "jack";//定義該對象的私有屬性测砂，不讓其被修改
? selfEntiy.init:fucntion(){
? ? this.load();//調(diào)用load方法
}
selfEntiy.load: function(){
//
}
selfEntiy.submitData:function(){
//
}
return {
? ? init:selfEntiy.init,
? ? summit:selfEntiy.selfEntiy.submitData
}())
4.在客戶端通過get方式向服務(wù)端請求數(shù)據(jù)時，當(dāng)在url后面跟一些參數(shù)?時需要注意編碼的問題百匆，會造成前后端編碼不一致的問題就會出現(xiàn)所謂的亂碼
解決辦法：客戶端通過encodeURIComponent()方法或者encodeURI()來進(jìn)行編碼邑彪，兩者之間前者編碼范圍更廣
如：encodeURI：不會進(jìn)行編碼的字符有82個 ：!，#胧华，$寄症，&，'矩动，(有巧，)，*悲没，+篮迎，,，-示姿，.甜橱，/，:栈戳，;岂傲，=，?子檀，@镊掖，_，~褂痰，0-9亩进，a-z，A-Z
encodeURIComponent:不會進(jìn)行編碼的字符有71個：!缩歪， '归薛，(，)，*主籍，-习贫，.，_崇猫，~沈条，0-9需忿，a-z诅炉，A-Z
一般采用一種通用的方法進(jìn)行編碼
function addURlParm(url,key,value){
? ? url +=(url.indexof("?") == -1:"?":"&");
? ? url+=encodeURIComponent(key)+"="+encodeURIComponent(value);
? ? return url;
}
相應(yīng)的解碼方法decodeURIComponent() 和 decodeURI()?
5.關(guān)于使用圖片預(yù)加載的運(yùn)用
有時候我們需要用到重復(fù)的圖片或者說是一次性展示多張圖片比如圖片墻，如果我們不做任何處理屋厘，那么首次引用的時候會出現(xiàn)圖片顯示慢或者在進(jìn)行css背景切換操作過程中會出現(xiàn)閃爍涕烧，造成這個問題的原因在于每張圖片加載都是一次http請求，當(dāng)圖片太大請求時間比較久就會出現(xiàn)視覺中的真空區(qū)汗洒，此時我們的處理方式就是在頁面初始化是就進(jìn)行圖片的緩存也就是預(yù)加載议纯，當(dāng)要使用圖片的時候?yàn)g覽器就會直接在緩存中進(jìn)行查找，這樣就會解決閃爍和圖片顯示慢的用戶體驗(yàn)效果溢谤。
方法為：var img = new Image();img.src = 'img.png'瞻凤；解決簡單的css背景切換可以直接在頁面上定義一個空的標(biāo)簽，然后賦予其相同的背景圖片樣式即可
6.封裝dom操作
window.Dom=Dom=
{
addEvent:function(s,fn){this.attachEvent?this.attachEvent('on'+s,fn):this.addEventListener(s,fn,false);return this;},//添加事件[事件(要去掉前面的on),方法]
delEvent:function(s,fn){this.detachEvent?this.detachEvent('on'+s,fn):this.removeEventListener(s,fn,false);return this;},//刪除事件[事件(要去掉前面的on),方法]
addDom:function(node,tag,first){var o=node.createElement(tag);first?node.insertBefore(o,node.firstChild):node.appendChild(o);return o;},//創(chuàng)建子節(jié)點(diǎn)[節(jié)點(diǎn)世杀，要創(chuàng)建的TAG阀参，插入位置]
delDom:function(node,obj){node.removeChild(obj);},//刪除子節(jié)點(diǎn)[父節(jié)點(diǎn)，要刪除節(jié)點(diǎn)]
addImg:function(url){var img=new Image();img.src=url;return img;},//創(chuàng)建緩存圖片[圖片地址]
winh:function(){return Math.min(document.documentElement.clientHeight,document.body.clientHeight);},//返回瀏覽器可用高
mouseX:function(event){return (event.pageX || (event.clientX +l(document)));},//返回鼠標(biāo)的X座標(biāo)
mouseY:function(event){return (event.pageY || (event.clientY +t(document)));}//返回鼠標(biāo)的Y座標(biāo)
}
