开发相关内容总结,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 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);

发表评论

电子邮件地址不会被公开。 必填项已用*标注