JQ的插件方法,构造函数细节,认识闭包,垃圾回收机制

JQ的插件方法


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        p,
        span {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
        }
    </style>
    <script src="/jquery-1.10.1.min.js"></script>
    <script>

        // JQ的插件方法:
        // 插件:既插既用。

        // 【注】使用JQ的时候,大家会有这样的体验。
        // 你难免有这样的牢骚,如果JQ再有一个这样的方法就更好。


        // JQ给大家提供了两个插件方法,让大家对原来的JQ函数进行二次拓展。

        // $.extend()     拓展JQ的工具方法  $.xxx() $.yyy()
        // $.fn.extend()  拓展JQ的对象方法  $().xxx()  $().yyy();

        //拓展插件函数
        $.extend({
            aaa: function(){
                alert("工具方法")
            }
        })
        $.fn.extend({
            aaa: function(){
                alert("JQ方法")
            },
            drag:function(){
                //this = $("div");
                //实现拖拽的具体的代码
                this.mousedown(function(ev){
                    //this 指向当前按下的div,JS对象
                    var disX = ev.clientX - $(this).offset().left
                    var disY = ev.clientY - $(this).offset().top

                    var _this = this //记录一下当前按下的div
                    $(document).mousemove(function(ev){
                        $(_this).css({
                            left : ev.clientX - disX,
                            top : ev.clientY - disY
                        })
                    })
                })

                $(document).mouseup(function(){
                    $(document).off("mousemove")
                })
                return this
            }
        })

        $(function(){
            // $.aaa()  //工具方法
            // $("div").aaa()  //JQ方法


            //给div添加拖拽效果
            $(".box").drag().mousedown(function(){
                $(this).css("backgroundColor", 'red')
            }).mouseup(function(){
                $(this).css("backgroundColor", 'blue')
            })
        })

    </script>
</head>

<body>
    <div class="box"></div>
    <!-- <div></div>
    <div></div> -->

    <!-- <p>p</p>
    <span>span</span> -->
</body>

</html>



构造函数细节


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //封装一个英雄构造函数
        function Hero(name, sex) {
            this.name = name
            this.sex = sex
        }

        //给英雄添加方法
        Hero.prototype.showSelf = function () {
            console.log("我是" + this.name + ",性别是" + this.sex + "的")
            //构造函数中this就是当前构造函数新创建的对象
            return this
        }
        Hero.prototype.A = function () {
            console.log("普通攻击")
            return this
        }
        Hero.prototype.blink = function () {
            console.log("闪现")
            return this
        }

        var libai = new Hero("李白", "男")
        //开始游戏  速度太慢
        // var res = libai.showSelf();
        // console.log(res)
        // libai.A()
        // libai.blink()

        //【注】上述这些方法,可以被当前构造函数新创建对象调用的。

        //进行连招
        // var res = libai.showSelf();
        // console.log(res);
        // res.A();

        //链式操作。
        libai.showSelf().A().blink().A().showSelf();
    </script>
</head>

<body>

</body>

</html>



认识闭包



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 闭包  高级编程的一种用法
        // 【注】闭包大家天天都在写。



        // 什么叫做闭包?只要满足以下几个特点
        // 1、函数嵌套函数
        // 2、内部函数调用外部函数的形参和变量
        // 3、被引用的形参和变量就常驻内存,不会被【垃圾回收机制所回收】

        function aaa(a){
            var b = 20
            function bbb(){
                console.log(a, b)
            }
            return bbb
        }

        var ccc = aaa(10) //aaa函数已经执行完毕,里面的变量和形参被同时销毁掉
        // alert(ccc)
        ccc()
    </script>
</head>

<body>

</body>

</html>



垃圾回收机制


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 计算机的程序,是在内存中运行。

        // 一般情况下,我们系统根据函数调用,分配内存。

        var a = 2  //全局变量
        function show(){
            a++
            console.log(a)
        }

        show() // 3
        show() // 4
        //【注】会造成全局变量污染。 两个人以上,能够保证所有的全局的变量名字都不一样么。

        function show(){
            var a = 2; //局部变量
            a++;
            console.log(a);
        }

        show(); //3  没有办法对a进行累加
        show(); //3
        console.log(a);  //a is not defined
    </script>
</head>

<body>

</body>

</html>

你可能感兴趣的:(JQ的插件方法,构造函数细节,认识闭包,垃圾回收机制)