澳门在线威尼斯官方 > 威尼斯澳门在线 > JavaScript日志操作对象实例,开辟有关内容总括

原标题:JavaScript日志操作对象实例,开辟有关内容总括

浏览次数:164 时间:2019-11-10

移步端 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);

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:JavaScript日志操作对象实例,开辟有关内容总括

关键词:

上一篇:浏览器缓存知识小结及应用,对浏览器缓存的学

下一篇:没有了