javascript 函数,BOM

来源:互联网 发布:教育软件排名 编辑:程序博客网 时间:2024/06/05 03:39
javascript中,函数一直是一个重点。而区别于其它编程语言,它在函数的创建上多了一种方式。
var sayHi=function(){/*add code here*/};
以字符变量的方式创建函数。函数成为了一种字符变量。变量可以保存的类型得到了扩大,不在仅仅只是基本数据类型和引用数据类型。

在函数的递归上,它的处理方式也与其他的函数变量不同。
function myFun(num){
     if(num<=1){return 1;}
     else {
             return num*arguments.callee(num-1);
          }
   }
红字部分实现了调用函数自身,num-1是下一层递归的参数

函数的闭包问题:这是一个非常有意思的问题,也是一个非常关键的问题。
var myFun=function(x){
                          var a=6;
                          var b=7;
                          return function(){
                                  return a*x+b;
                           }
                      }
上面的示例就是一个闭包的问题。它会帮你实现a,b在函数外面无法被找到,简单说就是私有化,保证了私有数据的安全。
使用闭包的情形大体上与上面的类似。它的另一个重要的作用是将局部作用域提升到全局作用域。

关于this对象
this对象是在运行时基于函数执行环境绑定的:在全局函数中,this指向的是window,而函数作为一个对象的方法调用时,this等于那个对象。因此使用this的时候要特别的注意一下。

用函数模仿块级作用域的方法
(function(){
// add code here
})();
只要在去掉注释,添加上自己的代码就会完成块级作用域的模仿了。


私有变量,它是利用闭包的方式来完成的,不管是私有的函数还是私有的变量
function MyObject(){
   var privateName="geogre";

   function privateTag(){return false;}

    //other function and attribute

   function publicGet(){
            return privateTag();
       }
}

私有方法只不过是闭包的一种使用方式

静态私有变量
要解决这个静态问题我们首先会想到的是对象的原型。对象的原型就是一种对静态的模拟。通常对prototype的操作要谨慎一些,毕竟对静态数据操作会影响到共享静态数据的其他单位。
静态私有方法很明显的要用到前面私有化的处理。
(function(){
  function privateFunction(){
      //add private code here
   }
   
  MyObject=function(){
   //add constructor code here
   };
    
  MyObject.prototype.publicMethod=function(){
         return privateFunction();
     } 
})();


BOM:浏览器对象,它提供了浏览器对js支持的许多对象。由于浏览器之间的差异,大部分的标准是事实标准。HTML5已经将其纳入到规范当中。

BOM的核心对象是window,它表示一个浏览器的实例。它是一个全局的对象。
在window对象上直接定义的属性和定义全局变量有一些差别,差别在于全部变量不可以通过delete操作符删除,但是window的属性石可以的。

尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道那个未声明的变量是否存在。例如:
var newValue=oldValue;//抛出错误
var newValue=window.oldValue;//不抛出错误


跨浏览器取得浏览器窗口距离屏幕窗口左边和上边的位置
var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;

窗口的移动
window.moveTo(0,0);    窗口移动到屏幕左上角。
window.moveBy(-50,100);窗口向左移动50像素,向下移动100像素

浏览器中页面的的大小
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;

if(typeof pageWidth!="number"){
     if(document.compatMode=="CSS1Compat"){
         pageWidth=document.documentElement.clientWidth;
         pageHeight=document.documentElement.clientHeight;
     }else{
         pageWidth=document.body.clientWidth;
         pageHeight=document.body.clientHeight;
     }
}
另外使用resizeTo()和resizeBy()可以调整浏览器窗口的大小。resizeTo()接收浏览器窗口的新高度和新宽度。resizeBy()接收新窗口与原窗口的宽度差和高度差。
window.resizeTo(100,100);//调整到100*100
window.resizeBy(100,50);//调整到200*150
window.resizeTo(300,300);//调整到300*300


导航和打开窗口
window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法要接受4个参数:要加载的URL,窗口目标,一个特性字符串,一个表示新页面是否取代浏览器历史记录当中当前加载页面的布尔值。通常只需传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。如果为window.open()传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就在具有该名称的窗口或者框架中加载第一个参数指定的URL。
为新打开的窗口设置位置,大小,关闭新打开的窗口
var wroWin=window.open("url","height=400,width=400,top=10,left=10,resizeable=yes");
wroWin.resizeTo(500,500);
wroWin.moveTo(100,100);
wroWin.close();

弹出窗口的屏蔽程序
var blocked=false;

try{
     var wroWin=window.open(url,"_blank");
     if(wroWin==null){
        blocked=true;
    }
}catch(ex){blocked=true;}

if(blocked){alert("The popup is blocked!");}

系统对话框
对话框的产生是由alert(),confirm(),prompt()产生的。


location对象
它是最有用的BOM对象之一,提供了与当前窗口加载的文档的有关信息,还提供了一些导航功能。它既是window的对象,也是document的对象。location的属性有:hash,host,hostname,href,pathname,port,protocal,
search.
获取查询字符串的参数
funtion getQueryStringArgs(){
var qs=(location.search.length>0)?location.search.substring(1):"";
var args={};
var items=qs.length?qs.split("&"):[];
var item=null,name=null,value=null;
  for(var i=0;i<items.length;i++){
         item=items[i].split("=");
         name=decodeURIComponent(item[0]);
         value=decodeURIComponent(item[1]);
         if(name.length){args[name]=value;}
  }
  return args;
}

改变加载新文档的方法
location.assign(url);
window.location,location.href也可以做到,最常用的是location.href。
location.replace()会禁掉地址栏的回退。
重新加载文档location.reload();强制从服务器重新加载location.reload(true);

检测浏览器的插件
非IE浏览器中
function hasPlugin(name){
    name=name.toLowerCase();
    for(var i=0;i<navigator.plugins.length;i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
            return true;
         }
   } 
    return false;
}
检测IE中的插件
function hasIEPlugin(name){
   try{
           new ActiveXObject(name);
           return true;
        }catch(ex){
           return false;
        }
}




原创粉丝点击