jQuery之基本概念和封装原理

一、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:外部引用声明");
}
1
2
3
4
5

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

//使用工厂模式
function getBjsxt(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}
1
2
3
4
5
6
7
8

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

function(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂1");
    }
    return bjsxt;
}
1
2
3
4
5
6
7

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

//匿名自调用
(function(){
    var bjsxt={};
    bjsxt.test=function(){
        alert("工厂2");
    }
    alert("匿名自调用");
    return bjsxt;
})()
1
2
3
4
5
6
7
8
9

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

对应的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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

相关阅读:
ElasticSearch 菜鸟笔记（一）ElasticSearch 入门简介
C++(反向迭代器)
打造南沙“强芯”，南沙首届IC Nansha大会召开
35. 干货系列从零用Rust编写负载均衡及代理，代理服务器的源码升级改造
UNIAPP实战项目笔记29 购物车设置自定义导航栏
STM32F4X RNG随机数发生器
kafka位移提交
java垃圾回收机制
数据包络分析（DEA）——BCC模型
《C++游戏编程入门》第9章高级类与动态内存：Game Lobby

原文地址：https://blog.csdn.net/qq_46106857/article/details/126735373