• 移动端 h5 开发相关内容总结——JavaScript 篇


    1.改变页面标题的内容

    有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用

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

    就行解决我们的问题。

    或者使用

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

    这个方案不仅可以改动 title 并且可以改动 url 的值,并且将这些信息存储到浏览器的历史堆栈中,当用户使用返回button的时候可以得到更加好的体验。
    当我们在做一个无刷新更新页面数据的时候,可以使用这个方案来记录页面的状态,使得页面可以回退。

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

    有这种一个场景:
    在做电商类的产品的时候,我们要对每一个产品的PV数进行统计(事实上就是出发一个ajax请求)。PC端的交互大多数是点击商品后新开页面。这个时候ajax同步发送或者异步发送对统计没有影响。
    可是嵌套在client中。长长是在当前 tab 中跳页。假设我们仍旧使用异步的ajax 请求,有请求会被阻断。统计结果不准确。

    3.JavaScript 中 this 相关

    这部分内容之前也是看过非常多次,可是都不可以理解深层次的含义。后来看的多了。也就理解了。

    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();

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

    这里写图片描写叙述

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

    在浏览器中输入一下的内容查看输出:

    这里写图片描写叙述

    我们对代码做一下改动,例如以下:

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

    与之上同样的输入,查看一下输出是什么

    这里写图片描写叙述

    由上可知 new 操作符的运行过程:

    1. 一个新对象被创建。它继承自BBB.prototype
    2. 构造函数 BBB 被运行。运行的时候。对应的传參会被传入,同一时候上下文this会被指定为这个新实例。new BBB 等同于new BBB(), 仅仅能用在不传递不论什么參数的情况。
    3. 假设构造函数返回了一个“对象”。那么这个对象会代替整个new出来的结果。

      假设构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。

      普通情况下构造函数不返回不论什么值,只是用户假设想覆盖这个返回值,可以自己选择返回一个普通对象来覆盖。

      当然,返回数组也会覆盖。由于数组也是对象。

    4.JavaScript 中闭包相关

    定义在闭包中的函数可以“记忆”它创建时候的环境。

    var test=function(string){
        return function(){
            console.log(string);
        }
    };
    var tt=test();
    tt();
    //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); 
        }
    };

    5.销毁事件绑定

    我自己在写 js 的事件绑定的时候也经历了一个过程。刚開始的时候onclickbindlivedelegate,on 这样一个过程。

    之所以会有这种需求就是由于我们页面上的 DOM 是动态更新。

    比方说,某块内容是点击页面上的内容显示出来。然后在这块新出现的内容上使用click肯定是满足不了需求的。

    livedelegate 属于较早版本号的事件托付(代理事件)的写法。最新版本号的 jquery 都是使用on 来做代理事件。效率上比 livedelegate更高。

    live是将事件绑定到当前的document 。假设文档元素嵌套太深。在冒泡的过程中影响性能。


    delegateon 的差别就是

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

    由此可知,使用on的话,子代元素的选择器是可选的。

    可是 delegate的选择器是必须的。

    ondelegate更加的灵活。

    非常多时候我们都是仅仅声明事件绑定。而无论事件的销毁。可是在编写前端插件的时候,我们须要提供事件销毁的方法,提供给插件使用者调用。这样做的优点就是使,使用者对插件更加可控。释放内存,提供页面的性能。

        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(点我) 地址给我一颗星。谢谢啦。

  • 相关阅读:
    20165225《Java程序设计》第六周学习总结
    实验一 Java开发环境的熟悉
    20165225《Java程序设计》第五周学习总结
    移动web——bootstrap响应式工具
    移动web——bootstrap栅格系统
    移动web——bootstrap模板
    移动web——媒体查询
    移动web——轮播图
    移动web——touch事件应用
    移动web——touch事件介绍
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/7138128.html
Copyright © 2020-2023  润新知