您的位置:澳门新葡8455最新网站 > Web前端 > JavaScript日志操作对象实例,开发相关内容总结

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

发布时间:2019-12-31 04:27编辑:Web前端浏览(137)

    移动端 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 scrollEvent=function(){}; //事件销毁 that.desrory=function(){ $('.event_dom').off(); //window 方法的销毁必须使用事件名称和回调函数,主要是 window 上可能绑定这系统自定义的事件和回掉 $(window).off('scroll',scrollEvent); };

    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里面添加文本节点。  
                    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里面添加文本节点。
        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构造...

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:JavaScript日志操作对象实例,开发相关内容总结

    关键词:

上一篇:没有了

下一篇:数组方法相比较,删除数组二种艺术