>

JavaScript日志操作对象实例,开发相关内容总结

- 编辑:至尊游戏网站 -

JavaScript日志操作对象实例,开发相关内容总结

挪动端 h5 费用相关内容总结:JavaScript 篇

2016/01/24 · HTML5, JavaScript · 5 评论 · 移动端

正文小编: 伯乐在线 - zhiqiang21 。未经笔者许可,禁绝转发!
招待到场伯乐在线 专辑小编。

当今我们来归纳使用一下所学知识,来兑现一个JavaScript日志操作对象的实例,我们须要的是那多少个文件:

1.改观页面标题的原委

奇迹大家付出 h5页面包车型客车时候须要动态的去立异title 的名字,那个时候利用

JavaScript

document.title='修改后的名字';

1
    document.title='修改后的名字';

就足以消除大家的难题。

只怕应用

JavaScript

//当前firefox对 title 参数不协助 history.pushstate(state,title,url);

1
2
    //当前firefox对 title 参数不支持
    history.pushstate(state,title,url);

这种艺术不但能够修改 title 並且能够修改 url 的值,而且将这一个音讯囤积到浏览器的历史仓库中,当顾客选择重回开关的时候可以收获越来越好的经验。
当大家在做二个无刷新更新页面数据的时候,能够运用这种情势来记录页面包车型客车情状,使得页面能够回退。

        myLog.js:重要效用是营造myLogger构造函数、增添行、增添节点、css调整。

2.日志记录同步发送诉求

有如此的八个现象:
在做电商类的产品的时候,大家要对每一种产品的点击数进行总计(其实正是出发一个ajax伏乞)。PC端的交互大比相当多是点击商品后新开页面。这年ajax同步发送或者异步发送对总计未有影响。
可是嵌套在客商端中,长长是在如今 tab 中跳页。假若大家照旧采取异步的ajax 央求,有央浼会被堵嘴,计算结果不可信。

        LD.js:首要功效是对台本和字符串制定法则、构造命名空间和依照Id、className抽出对象。

3.JavaScript 中 this 相关

那有的内容前面也是看过很频仍,可是都不可能驾驭深档案的次序的意思。后来看的多了,也就知晓了。

JavaScript

var ab = { 'a': 1, 'b': 2, 'c': 3, abc:function(){ // 对象的艺术中,this是绑定的此时此刻目的 var that=this; console.log('abc'); var aaa=function(){ //that指向的是如今目的 console.log(that.a); //函数中this的值绑定的是大局的window对象 console.log(this); }; aaa(); } }; console.log('---------'); ab.abc();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var ab = {
    'a': 1,
    'b': 2,
    'c': 3,
    abc:function(){
        // 对象的方法中,this是绑定的当前对象
        var that=this;
 
        console.log('abc');
        var aaa=function(){
            //that指向的是当前对象
            console.log(that.a);
            //函数中this的值绑定的是全局的window对象
            console.log(this);
        };
 
        aaa();
    }
};
console.log('---------');
ab.abc();

上述代码浏览器中输出结果如下:

至尊游戏网站 1

JavaScript

var BBB=function(){ var a=0; this.b=1; return this; } var bb= new BBB();

1
2
3
4
5
6
7
    var BBB=function(){
        var a=0;
        this.b=1;
        return this;
    }
 
    var bb= new BBB();

在浏览器中输入一下的开始和结果查看输出:

至尊游戏网站 2

咱们对代码做一下改动,如下:

JavaScript

var BBB=function(){ var a=0; this.b=1; } var bb= new BBB();

1
2
3
4
5
6
    var BBB=function(){
        var a=0;
        this.b=1;
    }
 
    var bb= new BBB();

与上述同样的输入,查看一下输出是如何

至尊游戏网站 3

由上可见 new 操作符的实践进度:

  1. 叁个新对象被创造。它一连自BBB.prototype
  2. 结构函数 BBB 被实行。施行的时候,相应的传参加会议被传出,同一时间上下文this会被钦点为那个新实例。new BBB 等同于new BBB(), 只好用在不传递任何参数的场所。
  3. 风度翩翩经构造函数再次回到了二个“对象”,那么这几个指标会替代风流罗曼蒂克切new出来的结果。即便构造函数未有再次回到对象,那么new出来的结果为步骤1创制的对象。

    日常景色下构造函数不回去任何值,可是客户风度翩翩旦想覆盖那么些再次回到值,能够友善挑选重返二个枯燥无味对象来覆盖。当然,再次回到数组也会覆盖,因为数组也是目的。

        test.js:首要功能是对窗体加多事件,并测量试验mylog中有的函数的可用性。

4.JavaScript 中闭包相关

至尊游戏网站,概念在闭包中的函数能够“记念”它创建时候的情况。

JavaScript

var test=function(string){ return function(){ console.log(string); } }; var tt=test(); tt();

1
2
3
4
5
6
7
var test=function(string){
    return function(){
        console.log(string);
    }
};
var tt=test();
tt();

JavaScript

//li列表点击每大器晚成行 显示当前的行数 var add_li_event=function(node){ var helper=function(i){ return function(e){ alert(i); } }; for (var i = 0, len =node.length; i < len; i++) { node[i].onclick=helper(i); } };

1
2
3
4
5
6
7
8
9
10
11
12
//li列表点击每一行 显示当前的行数
var add_li_event=function(node){
    var helper=function(i){
        return function(e){
            alert(i);
        }
    };
 
    for (var i = 0, len =node.length; i < len; i++) {
       node[i].onclick=helper(i);
    }
};

        log.html:用于浮现日志对象。

5.销毁事件绑定

自己本人在写 js 的事件绑定的时候也经历了三个进程,刚开首的时候onclickbindlivedelegate,on 那样一个经过。

进而会有如此的须求正是因为大家页面上的 DOM 是动态更新。举个例子说,某块内容是点击页面上的剧情展现出来,然后在这里块新出现的剧情上运用click必然是满意不断供给的。

livedelegate 属于较早版本的事件委托(代总管件)的写法。最新版本的 jquery 都以运用on 来做代总管件。效能上比 livedelegate更高。

live是将事件绑定到当前的document ,假若文书档案成分嵌套太深,在冒泡的经过中国电影响属性。
delegateon 的区分就是

JavaScript

jQueryObject.delegate( selector , events [, data ], handler ) //或者 jQueryObject.delegate( selector, eventsMap )

1
2
3
    jQueryObject.delegate( selector , events [, data ], handler )
    //或者
    jQueryObject.delegate( selector, eventsMap )

JavaScript

jQueryObject.on( events [, selector ] [, data ], handler ) //或者 jQueryObject.on( eventsMap [, selector ] [, data ] )

1
2
3
    jQueryObject.on( events [, selector ] [, data ], handler )
    //或者
    jQueryObject.on( eventsMap [, selector ] [, data ] )

推测,使用on的话,子代因素的接纳器是可选的。可是 delegate的选用器是必需的。ondelegate更为的灵巧。

不菲时候大家都是只声明事件绑定,而无论是事件的销毁。不过在编写制定前端插件的时候,大家要求提供事件销毁的措施,提供给插件使用者调用。那样做的补益正是使,使用者对插件尤其可控,释放内部存款和储蓄器,提供页面的性质。

JavaScript

var that={}; $('.event_dom').on('click','.childK_dom',function(){}); $(window).on('scroll',scrollEvent); var scroll伊夫nt=function(){}; //事件销毁 that.desrory=function(){ $('.event_dom').off(); //window 方法的绝迹必得运用事件名称和回调函数,首要是 window 上恐怕绑定那系统自定义的风云和回掉 $(window).off('scroll',scroll伊芙nt); };

1
2
3
4
5
6
7
8
9
10
    var that={};
    $('.event_dom').on('click','.childK_dom',function(){});
    $(window).on('scroll',scrollEvent);
    var scrollEvent=function(){};
    //事件销毁
    that.desrory=function(){
        $('.event_dom').off();
        //window 方法的销毁必须使用事件名称和回调函数,主要是 window 上可能绑定这系统自定义的事件和回掉
        $(window).off('scroll',scrollEvent);
    };

假设你以为不错,请访谈github(点我) 地址给自身风流倜傥颗星。多谢啦!

打赏帮忙自个儿写出越来越多好小说,谢谢!

打赏小编

以下是逐个文件代码:

打赏扶助作者写出越多好小说,谢谢!

任选大器晚成种支付形式

至尊游戏网站 4 至尊游戏网站 5

3 赞 14 收藏 5 评论

test.js

至于笔者:zhiqiang21

至尊游戏网站 6

做以为对的事情,纵然或然是错的,那就做认为自身接受得起的专门的学问! 个人主页 · 小编的小说 · 11 ·      

至尊游戏网站 7

[javascript] view plaincopyprint?//向window对象里面加多八个load事件  
LD.addEvent(window,'load',function(){ 
    LD.log.writeRaw('This is raw'); 
 
    LD.log.writeRaw('<strong>This is bold!</strong>'); 
 
    LD.log.header('With a header'); 
 
    LD.log.write('write source:<strong>This is bold!</strong>'); 
     
    for(i in document){ 
            LD.log.write(i); 
        } 
}); 
//向window对象里面增加叁个load事件
LD.addEvent(window,'load',function(){
 LD.log.writeRaw('This is raw');

 LD.log.writeRaw('<strong>This is bold!</strong>');

 LD.log.header('With a header');

 LD.log.write('write source:<strong>This is bold!</strong>');
 
 for(i in document){
         LD.log.write(i);
  }
});myLog.js[javascript] view plaincopyprint?// JavaScript Document  
 
//myLogger的构造函数  
function myLogger(id){ 
    id=id||"ICLogWindow"; 
 
    //日志窗体的引用  
    var logWindow=null; 
    //创设日志窗体  
    var createWindow=function(){ 
            var browserWindowSize = LD.getBrowserWindowSize(); 
            var top=(browserWindowSize.height-200)/2||0; 
            var left=(browserWindowSize.width-200)/2||0; 
 
            //使用UL  
            logWindow=document.createElement("UL"); 
            //在document下增多三个dom对象UL  
 
            //增添ID进行标志        
            logWindow.setAttribute("id",id); 
 
            //对窗体实行css样式调整  
            logWindow.style.position='absolute'; 
            logWindow.style.top=top+'px'; 
            logWindow.style.left=left+'px'; 
     
            logWindow.style.width='200px'; 
            logWindow.style.height='200px'; 
            logWindow.style.overflow='scroll'; 
             
            logWindow.style.padding='0'; 
            logWindow.style.margin='0'; 
            logWindow.style.border='1px solid black'; 
            logWindow.style.backgroundColor='white'; 
            logWindow.style.listStyle='none'; 
            logWindow.style.font='10px/10px Verdana, Tahoma, Sans'; 
 
            //将窗体加多到页面下边  
            document.body.appendChild(logWindow); 
        } 
 
//向日志窗体中加多风流罗曼蒂克行  
    this.writeRaw=function(message){ 
            //要是初阶窗体是空头支票的,则转移日志窗体  
        if(!logWindow){ 
                createWindow(); 
            } 
//创建li的dom节点  
        var li=document.createElement('LI'); 
 
        //对窗体举办css样式调节  
         
        li.style.padding='2px'; 
        li.style.border='0'; 
        li.style.borderBottom='1px dotted black'; 
        li.style.margin='0'; 
        li.style.color='#000'; 
 
        //      验证message信息  
        if(typeof message == 'undefined'){ 
 
                //在li里面添Gavin本节点。  
                li.appendChild(  
                    document.createTextNode('Message is undefined')     
                    ); 
            }else if(typeof li.innerHTML!=undefined){ 
        //那是另如日方升种形式的发布  
                    li.innerHTML=message; 
                }else{ 
                        li.appendChild( 
                            document.createTextNode(message)        
                        ); 
                    } 
                logWindow.appendChild(li); 
                return true; 
        }; 

//对象字面量的不二秘籍宣示特权方法  
//向日志窗体中增添大器晚成行,向输入的剧情开展轻松处理  
myLogger.prototype={ 
     
    write:function(message){ 
        if(typeof message=='string' && message.length==0 ){ 
                return this.writeRaw('未有输入音信'); 
             
        } 
        if(typeof message !='string'){ 
                if(message.toString){ 
                    return this.writeRaw(message.toString()); 
                }else{ 
                    return this.writeRaw(typeof message); 
                } 
            } 
//将不唯有号小于号举办正则调换来HTML标志  
        message=message.replace(/</g,"<").replace(/>/g,">"); 
        return this.writeRaw(message); 
    }, 
    header:function(message){ 
        message='<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">'+message+'</span>'; 
        return this.writeRaw(message); 
        } 
}; 
window['LD']['log'] = new myLogger(); 
// JavaScript Document

//myLogger的构造函数
function myLogger(id){
 id=id||"ICLogWindow";

 //日志窗体的引用
 var logWindow=null;
 //创立日志窗体
 var createWindow=function(){
         var browserWindowSize = LD.getBrowserWindowSize();
   var top=(browserWindowSize.height-200)/2||0;
   var left=(browserWindowSize.width-200)/2||0;

   //使用UL
   logWindow=document.createElement("UL");
   //在document下加多五个dom对象UL

   //增加ID进行标志     
   logWindow.setAttribute("id",id);

   //对窗体进行css样式调控
   logWindow.style.position='absolute';
   logWindow.style.top=top+'px';
   logWindow.style.left=left+'px';
 
   logWindow.style.width='200px';
   logWindow.style.height='200px';
   logWindow.style.overflow='scroll';
   
   logWindow.style.padding='0';
   logWindow.style.margin='0';
   logWindow.style.border='1px solid black';
   logWindow.style.backgroundColor='white';
   logWindow.style.listStyle='none';
   logWindow.style.font='10px/10px Verdana, Tahoma, Sans';

   //将窗体增加到页面上边
   document.body.appendChild(logWindow);
  }

//向日志窗体中增多意气风发行
 this.writeRaw=function(message){
         //假设初步窗体是不设有的,则变动日志窗体
  if(!logWindow){
    createWindow();
   }
//创建li的dom节点
  var li=document.createElement('LI');

  //对窗体举办css样式调整
  
  li.style.padding='2px';
  li.style.border='0';
  li.style.borderBottom='1px dotted black';
  li.style.margin='0';
  li.style.color='#000';

  //  验证message信息
  if(typeof message == 'undefined'){

          //在li里面添Gavin本节点。
    li.appendChild(
     document.createTextNode('Message is undefined')   
     );
   }else if(typeof li.innerHTML!=undefined){
        //那是另大器晚成种办法的表述
     li.innerHTML=message;
    }else{
      li.appendChild(
       document.createTextNode(message)   
      );
     }
    logWindow.appendChild(li);
    return true;
  };
}
//对象字面量的情势宣示特权方法
//向日志窗体中增加风流洒脱行,向输入的源委实行简劣势理
myLogger.prototype={
 
 write:function(message){
  if(typeof message=='string' && message.length==0 ){
          return this.writeRaw('未有输入音讯');
   
  }
  if(typeof message !='string'){
    if(message.toString){
     return this.writeRaw(message.toString());
    }else{
     return this.writeRaw(typeof message);
    }
   }
//将超过号小于号举办正则调换到HTML标志
  message=message.replace(/</g,"<").replace(/>/g,">");
  return this.writeRaw(message);
 },
 header:function(message){
  message='<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">'+message+'</span>';
  return this.writeRaw(message);
  }
};
window['LD']['log'] = new myLogger();LD.js[javascript] view plaincopyprint?// JavaScript Document  
if(document.all && !document.getElementById){ 
    document.getElementById=function(id){ 
        return document.all[id]; 
        } 
    } 
 
if(!String.repeat){ 
        String.prototype.repeat=function(l){ 
            return new Array(l+1).join(this); 
            } 
    } 
 
if(!String.trim){ 
        String.prototype.trim=function(){ 
                return this.replace(/^s+|+$/g,''); 
            }  
    } 
 
(function(){ 
    //构造命名空间  
    window['LD']={} ;   
     
    function $(){ 
        var elements=new Array(); 
        //arguments当前函数的参数数组。参数  
        for(var i=0;i<arguments.length;i++){ 
                var element=arguments[i]; 
                 
                if(typeof element=='string'){ 
                        element=document.getElementById(element); 
                    } 
                if(arguments.length==1){ 
                    return element; 
                    } 
                elements.push(element); 
        } 
        return elements; 
    } 
    //注册命名空间  
    window['LD']['$']=$; 
     
    function getElementsByClassName(className,tag){ 
            parent=parent || document; 
            if(!(parent=$(parent))) return false; 
             
             
            //var allTags=document.getElementsByTagName(tag);  
            //对tag进行过滤,把tag的对象全抽出来  
            var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag); 
            var matchingElements=new Array(); 
             
            className=className.replace(/-/g,"\-"); 
            var regex=new  RegExp("(^|\s)"+className+ "(\s|$)"); 
             
            var element; 
            for(var i=0;i<allTags.length;i++){ 
                    element=allTags[i]; 
                    if(regex.test(element.className)){ 
                            matchingElements.push(element); 
                        } 
                } 
                 
                //再次来到那个数组  
            return matchingElements; 
        } 
        window['LD']['getElementsByClassName']=getElementsByClassName; 
         
        function bindFunction(ojb,func){ 
                return function(){ 
                        func.apply(obj,arguments); 
                    } 
            }; 
        window['LD']['bindFunction']=bindFunction; 
         
    function getBrowserWindowSize(){ 
            var de=document.documentElement; 
            return{ 
                    'width':( 
                        window.innerWidth 
                        || (de && de.clientWidth) 
                        || document.body.clientWidth), 
                    'heigth':( 
                        window.innerHeight 
                        || (de && de.clientHeight) 
                        || de && document.body.clientHeight) 
                } 
        }; 
        //注册本领件  
    window['LD']['getBrowserWindowSize']=getBrowserWindowSize; 
     
     
    function addEvent(node,type,listener){ 
            if(!(node=$(node))) return false; 
             
            if(node.addEventListener){ 
                node.addEventListener(type,listener,false); 
                return true; 
               }else if(node.attachEvent){ 
                    node['e'+type+listener]=listener; 
                    node[type+listener]=function(){node['e'+type+listener](window.event);} 
                    node.attachEvent('on'+type, node[type+listener]); 
                    return true; 
                   } 
               return false; 
        }; 
        //注册技术件  
    window['LD']['addEvent']=addEvent; 
     
})(); 
// JavaScript Document
if(document.all && !document.getElementById){
 document.getElementById=function(id){
  return document.all[id];
  }
 }

if(!String.repeat){
  String.prototype.repeat=function(l){
   return new Array(l+1).join(this);
   }
 }

if(!String.trim){
  String.prototype.trim=function(){
    return this.replace(/^s+|+$/g,'');
   }
 }

(function(){
 //构造命名空间
 window['LD']={} ; 
 
 function $(){
  var elements=new Array();
  //arguments当前函数的参数数组。参数
  for(var i=0;i<arguments.length;i++){
    var element=arguments[i];
    
    if(typeof element=='string'){
      element=document.getElementById(element);
     }
    if(arguments.length==1){
     return element;
     }
    elements.push(element);
  }
  return elements;
 }
 //注册命名空间
 window['LD']['$']=$;
 
 function getElementsByClassName(className,tag){
   parent=parent || document;
   if(!(parent=$(parent))) return false;
   
   
   //var allTags=document.getElementsByTagName(tag);
   //对tag实行过滤,把tag的指标全抽出来
   var allTags=(tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
   var matchingElements=new Array();
   
   className=className.replace(/-/g,"\-");
   var regex=new  RegExp("(^|\s)"+className+ "(\s|$)");
   
   var element;
   for(var i=0;i<allTags.length;i++){
     element=allTags[i];
     if(regex.test(element.className)){
       matchingElements.push(element);
      }
    }
    
    //重临那一个数组
   return matchingElements;
  }
  window['LD']['getElementsByClassName']=getElementsByClassName;
  
  function bindFunction(ojb,func){
    return function(){
      func.apply(obj,arguments);
     }
   };
  window['LD']['bindFunction']=bindFunction;
  
 function getBrowserWindowSize(){
   var de=document.documentElement;
   return{
     'width':(
      window.innerWidth
      || (de && de.clientWidth)
      || document.body.clientWidth),
     'heigth':(
      window.innerHeight
      || (de && de.clientHeight)
      || de && document.body.clientHeight)
    }
  };
  //注册技能件
 window['LD']['getBrowserWindowSize']=getBrowserWindowSize;
 
 
 function addEvent(node,type,listener){
   if(!(node=$(node))) return false;
   
   if(node.addEventListener){
       node.addEventListener(type,listener,false);
    return true;
      }else if(node.attachEvent){
        node['e'+type+listener]=listener;
     node[type+listener]=function(){node['e'+type+listener](window.event);}
     node.attachEvent('on'+type, node[type+listener]);
     return true;
       }
      return false;
  };
  //注册技术件
 window['LD']['addEvent']=addEvent;
 
})();运维结果:

 

至尊游戏网站 8

总结

        这些小例子,基本上把原先所学内容,包蕴基础支撑、面向对象、原型、对象字面量、this、功用域链等知识点全部席卷,算是对JavaScript学习的三个总括。学的越多,越要找到所学内容之间的联系,学习JS,不只是独自学习JS,更要联络从前所学的面向对象、C#、CSS等文化,让文化像路同样一通百通,才具“书越读越薄”。现在能做的,正是继续构建作者的知识网。

 作者:lidaasky  

myLog.js:主要意义是塑造myLogger构造...

本文由硬件数码发布,转载请注明来源:JavaScript日志操作对象实例,开发相关内容总结