javascript-五个需要注意的TIPS

最新推荐文章于 2024-04-03 21:56:19 发布

Void_CM

最新推荐文章于 2024-04-03 21:56:19 发布

阅读量98

点赞数

分类专栏： Html+CSS+js 文章标签： javascript

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113885158

版权

Html+CSS+js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first class function</title>
    <style>
        #thirdexample{
            /* background-color: gray; */
            width: 400px;
            height: 200px;
            text-align: center;
        }
        #thirdexample button{
            width: 80px;
            height: 30px;
            border: none;
            border-radius: 5px;  
            transition: 0.5s; 
        }
        #thirdexample button.active{
            background-color: green;
            transition: 0.5s;
        }
        #targetdiv{
            display: none;
            background-color: rgb(172, 168, 168);
            border-radius: 5px;
            height: 170px;
            line-height: 170px;
        }
        
    </style>
</head>
<body>
    <h1>first class function</h1>
    <p><button>click me plz!</button></p>

    <div id="thislist">
        <ul>
            <li>Clicked <span>0</span> Times</li>
            <li>Clicked <span>0</span> Times</li>
            <li>Clicked <span>0</span> Times</li>
        </ul>
    </div>

    <div id="thirdexample">
        <button id="opendiv">Open Div</button>
        <div id="targetdiv">
            <div class="content">Will you watch me?</div>
        </div>
    </div>




    <script src="/jQuery/js/jquery-3.5.1.js"></script>
    <script>
    /******TIP-one
        在js中函数也可以是变量————头等函数*/
        function add(first,second,callback){
            console.log(first+second);
            callback();//第三个参数为函数（回调）
        }
        function logOk(){
            console.log('ok')
        }
        add(1,2,function(){
            console.log('ok');
        });
        add(3,4,logOk);
        
        /*改进使得callback非必须*/
        console.log('-----------------')
        function addv2(first,second,callback){
            console.log(first+second);
            if(callback){
                callback();
            }
        }
        addv2(1,2);//不会报错
        addv2(12,13,logOk);

    /******TIP-two——事件驱动环境
        js基于事件驱动的环境，代码保存在内存中，
        当某事件触发执行相应的代码逻辑（看起来快的原因）
        不会重载整个界面*/

        var a = 1;
        console.log('this would be the only one to be executed');//仅执行一次，点击按钮后只执行与按钮事件有关部分的逻辑代码
        //记载这里的的一个小问题，getElementsByTagName返回的是一个数组对象，不能对其使用addEventListener，所以后面需添加[0]
        //最好不好通过这种方式访问，使用id或是类名
        var mbtn = document.getElementsByTagName('button')[0];
        mbtn.addEventListener('click',function(){
            alert(a++);
        });
    /*****TIP-three——闭包
    在js中
    闭包中的变量，在函数执行后仍保存在内存中（正常来说会被释放）
    如：上例中的a，每次点击后函数执行完毕，然而a的值却仍保存在内存中，未被释放
    且随着点击的次数增加增加
    */  

    /******TIP-four——作用域
    变量起作用的范围*/
        console.log('---------------')
        var a = 1;//声名全局变量 a === window.a
        function aaa(){
            var a = 2;//这里的a仅在aaa()函数范围内生效，与window.a不是同一个a，变量名是存在冲突的，且物理存储位置不同
            console.log(a);
        }

        function bbb(){
            a = 3;//在该函数范围内没有对a的声名，会一层一层向外找，直至找到a的声名，若没有将创建全局变量（全局污染）
            //可以在脚本起始位置添加"use strict"进入严格模式，可规避此类问题
            var b=2;
            console.log(a);
        }
        aaa();//a = 2
        bbb();//a = 3
        console.log(a);//a = 3
        // console.log(b);//报错 b is not defined
    
    /*****TIP-five-context(上下文)
     * context === this */
    
        console.log('-----------');
        console.log(this);//window
        console.log(this===window);//true

        function contexttest(){
            console.log(this);//window,默认函数运行在window范围
        }
        contexttest();//===window.contexttest();     
        //该例中的函数的this不是window而是obj
        var obj = {
            fuc:function(){
                console.log(this);
                console.log(this===window);//false
                console.log(this===obj);//true
            }
        }
        obj.fuc();

        //有三种方式可以改变context:call,apply,bind(知道上下文可以被改变)
        obj.fuc.call(window);//上下文变成window,如果存在参数一并写在call中call(window,1,2,3)
        obj.fuc.apply(window);//与call类型，区别是，参数使用数组统一存储apply(window,[1,2,3]
        var myboundfnc = obj.fuc.bind(window);//返回一个函数
        myboundfnc();

        //this的实际应用
        $('body').on('click',obj.fuc);//这里的this指向body
        var $list = $('#thislist');
        $list.find('li').on('click',function(){
            console.log(this);
            //不使用this的情况下，单独使得点击元素的数字增加时困难且复杂的
            // var currentTimes = parseInt($('li span').html() );
            // $('li span').html(currentTimes+1);//所有的span都增加了，不符合预期

            //使用this，来获取每次点击的目标（即对应的context）,有助于针对性的完善代码逻辑
            //根据上下文这里的this是所点击的li
            var currentTimes = parseInt($(this).find('span').html());
            $(this).find('span').html(currentTimes+1);
        });

        //example3 使用this过程中需要注意的问题
        $('#opendiv').on('click',function () {  
            var self = this;
            // //逻辑：点击opendiv同时显示content
            // $(this).toggleClass('active');
            // $('#targetdiv').slideToggle(500);
            //现要求在显示content后button样式才生效
            $('#targetdiv').slideToggle(500,function(){  
                // $(this).toggleClass('active');//但是此处的this，根据context已经变成了targetdiv
                //有以下方法，利用全局变量self,保存上一个this
                // $(self).toggleClass('active');
                //使用bind(this),绑定slideToggle的this
                $(this).toggleClass('active');
            }.bind(this));//绑定slideToggle的this后，里层的this默认指向外层的opendiv

        });
    </script>
</body>
</html>

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript-五个需要注意的TIPS

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fir
复制链接

扫一扫

专栏目录