jQuery之基本概念和封装原理

熊凯瑞

于 2022-09-06 22:29:57 发布

阅读量566

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_46106857/article/details/126735373

版权

jQuery 封装闭包 JavaScript 工厂模式

关键词由CSDN通过智能技术生成

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、jQuery简介

1、什么是jQuery?

jQuery全称javaScript Query，是js的一个框架，本质上仍是js

2、jQuery的特点

支持各种主流的浏览器
使用特别简单
拥有便捷的插件扩展机制和丰富的插件

3、jQuery官网

jQuery官网链接：jQuery官网

二、jQuery的封装原理

1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖

2、使用对象封装，将代码封装到对象中，但是对象如果被覆盖，则全部失效，风险极高

//声明对象
var bjsxt={};
bjsxt,test=function(){
    alert("我是test:外部引用声明");
}

3、使用工厂模式，将代码进行封装，但是并没有解决问题

//使用工厂模式
function getBjsxt(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}

4、将封装的函数名字去除，避免覆盖，但是函数没有办法调用了

function(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}

5、匿名自调用，可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取

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

6、闭包原理：在全局中不能够获取函数体内的数据,使用更大作用域的变量来记录小作用域变量的值

//闭包原理
样例1：
(function(obj){
    obj.test=function(){
        alert("工厂3");
    }
    alert("闭包原理");
})(window)


样例2：
function testA(){
    function test2(){
         test2.name = "张三";
         var n = 999;
         alert(bjsxt);
         return n;
    }
    return test2;
}

7、完整代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery之封装原理</title>
    <script src="js/my.js" type="text/javascript" charset="utf-8"></script>
    <script>
        function test(){
            alert("test1");
        }
        var bjsxt = 123;

        //闭包原理：在全局中不能够获取函数体内的数据,使用更大作用域的变量来记录小作用域变量的值
        function testA(){
            function test2(){
                test2.name = "张三";
                var n = 999;
                alert(bjsxt);
                return n;
            }
            return test2;
        }

    </script>
</head>
<body>
    <h3>jquery的封装原理</h3>
    <hr/>
    <input type="button" name="" id="" value="测试test" onclick="bjsxt.test()"/>
</body>
</html>

对应的js文件

//声明对象
var bjsxt={};
bjsxt,test=function(){
    alert("我是test:外部引用声明");
}

//使用工厂模式
function getBjsxt(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}

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

//闭包原理
(function(obj){
    obj.test=function(){
        alert("工厂3");
    }
    alert("闭包原理");
})(window)