? ? ? ?用js進行平時項目開發的時候會經常面臨著一個問題，就是要對變量的作用域進行分析判斷，今天就來淺談一下自己如何來進行區分的。
1.在js中這里指的是es3.0，沒有塊級作用域的概念，只存在函數作用域，即一個function里的變量為一個單獨的作用域，記住要用var進行聲明，否則就會上升至全局變量。其實這個還是比較好區分的，下面來給段代碼
var b=2; function a(){ var b =1; c(); console.log(b)}; ? function c (){console.log (b)} ?; ? ? ?a(); 輸出結果為2，1
因為在js中函數的函數聲明的那一刻起它的作用域就相應的產生了，這就是js里的詞法作用域，聲明的時候就確定了作用域的范圍，就像上面的代碼中c函數聲明時其產生的作用域是全局作用域，再a函數中調用c并不能改變c的作用域鏈，所以第一個輸出的為全局變量2,第二個就簡單了，先從a函數得作用域開始尋找b如果能找到就返回，不能找到就去父級查找，此情景可以找到就輸出1
2.在前端頁面如果要去寫后臺進行數據操作的sql語句時，最好是把這些語句給拆解到后臺實現，因為這里涉及到安全問題，sql不能寫select*from tablename 除了能造成性能問題外還存在一個安全問題，能過截獲這個來得知你的表結構^_^
3.js編程思想
js采用的是基于面向對象的編程思想，但是對于剛剛入門的小白或者說沒有面向對象思想編程的開發人員來說，要在自己程序中使用這種思想開始還是比較難的，比如 大部分或采用
//一個功能對應一個函數
var common = 23；
function·a(){
}
function b(){
}
.....
要使用的時候就直接執行該函數就可以了，但是相對的也有一些局限性 ，首先定義的函數，和一些變量都基于全局作用域的，這樣會污染全局變量，第二，函數與函數之間的邏輯上的關系很模糊，看不之間的關聯關系
如果采用面向對象的編程思想在加上解決全局變量污染可以采用以下方法
var model1 = (function common(){//使用自執行函數形成一個獨立的作用域，避免污染全局變量
? var selfEntiy ={};//定義一個對象
? selfEntiy.selfName = "jack";//定義該對象的私有屬性，不讓其被修改
? selfEntiy.init:fucntion(){
? ? this.load();//調用load方法
}
selfEntiy.load: function(){
//
}
selfEntiy.submitData:function(){
//
}
return {
? ? init:selfEntiy.init,
? ? summit:selfEntiy.selfEntiy.submitData
}())
4.在客戶端通過get方式向服務端請求數據時，當在url后面跟一些參數?時需要注意編碼的問題，會造成前后端編碼不一致的問題就會出現所謂的亂碼
解決辦法：客戶端通過encodeURIComponent()方法或者encodeURI()來進行編碼，兩者之間前者編碼范圍更廣
如：encodeURI：不會進行編碼的字符有82個 ：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
encodeURIComponent:不會進行編碼的字符有71個：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
一般采用一種通用的方法進行編碼
function addURlParm(url,key,value){
? ? url +=(url.indexof("?") == -1:"?":"&");
? ? url+=encodeURIComponent(key)+"="+encodeURIComponent(value);
? ? return url;
}
相應的解碼方法decodeURIComponent() 和 decodeURI()?
5.關于使用圖片預加載的運用
有時候我們需要用到重復的圖片或者說是一次性展示多張圖片比如圖片墻，如果我們不做任何處理，那么首次引用的時候會出現圖片顯示慢或者在進行css背景切換操作過程中會出現閃爍，造成這個問題的原因在于每張圖片加載都是一次http請求，當圖片太大請求時間比較久就會出現視覺中的真空區，此時我們的處理方式就是在頁面初始化是就進行圖片的緩存也就是預加載，當要使用圖片的時候瀏覽器就會直接在緩存中進行查找，這樣就會解決閃爍和圖片顯示慢的用戶體驗效果。
方法為：var img = new Image();img.src = 'img.png'；解決簡單的css背景切換可以直接在頁面上定義一個空的標簽，然后賦予其相同的背景圖片樣式即可
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;},//創建子節點[節點，要創建的TAG，插入位置]
delDom:function(node,obj){node.removeChild(obj);},//刪除子節點[父節點，要刪除節點]
addImg:function(url){var img=new Image();img.src=url;return img;},//創建緩存圖片[圖片地址]
winh:function(){return Math.min(document.documentElement.clientHeight,document.body.clientHeight);},//返回瀏覽器可用高
mouseX:function(event){return (event.pageX || (event.clientX +l(document)));},//返回鼠標的X座標
mouseY:function(event){return (event.pageY || (event.clientY +t(document)));}//返回鼠標的Y座標
}
