用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座标
}
网友评论