jQuery-初识②

jQuery的封装原理

1.正常js写一个封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script type="text/javascript">
        function test() {
            alert("I am test");
        }
    </script>
</head>
<body>
    <h3>jQuery的封装原理</h3>
    <input type="button" name="" id="" value="测试test" onclick="test()">
</body>
</html>

点击test出现弹框

如果添加一个外部引入的js文件——

function test1() {
    alert("我是test：外部引入声明");
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/my.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        function test() {
            alert("I am test");
        }
    </script>
</head>
<body>
    <h3>jQuery的封装原理</h3>
    <input type="button" name="" id="" value="测试test" onclick="test1()">
</body>
</html>

注意：当外部引入的函数名和内部的相同时，执行结果和预编译（文档流）有关

结果：

——————————————————

扫描二维码关注公众号，回复： 3105522 查看本文章

结果：

————————————————————————————————————————————————————————

尽量保证自己声明的和js文件里面不要有同名变量

改法一：

//声明对象
var a = { };
a.test = function () {
    alert("我是test：外部引入声明");
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>

    <script type="text/javascript">
        function test() {
            alert("I am test");
        }
    </script>
    <script src="js/my.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <h3>jQuery的封装原理</h3>
    <input type="button" name="" id="" value="测试test" onclick="a.test()">
</body>
</html>

注意：对象 a 不能再在js中进行赋值var a = 123；显示没有这个函数

//使用工厂模式(全局变局部，全局不会被销毁。局部执行一次之后就没有了，但是添加return就会返回不会被销毁)
function getA() {
    var a = { };
    a.test = function () {
        alert("工厂");
    }
    return a;
}

(function () {
    var a = { };
    a.test = function () {
        alert("工厂")
    }
    alert("匿名自调用");
    return a;
})()

弹出：

function test2() {
    var n = 999;
    alert(a);
}
alert(n);

——————————————————————

<script type="text/javascript">
    function test() {
        alert("I am test");
    }
    var a = 123;
    //闭包原理:在全局区（外部）不能获取函数体内部的数据,使用更大作用域的变量来记录小作用域的值
    //通过层级传递，把小范围的变量往上层传递
    //函数是对象，在函数里（testA)声明一个变量，这个变量指向一个函数（test2）对象
    function testA() {
        function test2() {
            test2.name ="111";//可以存自己的属性
            var n = 999;
            alert(a);
            return n;
        }
        return test2;//层层传递,test2里面存储test2 里面的数据(当函数执行结束和test2有关的数据都没有了)
    }
    alert(n);
</script>

(function (obj) {
    obj.test = function () {
        alert("工厂");
    }
    alert("匿名自调用");
})(window);

jQuery的封装原理

猜你喜欢