jQuery-初识②

宝拉不想努力了

于 2018-09-08 11:26:35 发布

阅读量217

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_41056807/article/details/82526982

版权

jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>

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

结果：

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

结果：

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

尽量保证自己声明的和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);

宝拉不想努力了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-初识②

jQuery的封装原理1.正常js写一个封装&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery的封装原理&lt;/title&gt; &lt;script type=&qu
复制链接

扫一扫

专栏目录