封装-自执行函数-命名空间

最新推荐文章于 2021-11-03 13:28:15 发布

Jikel

最新推荐文章于 2021-11-03 13:28:15 发布

阅读量224

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_54902466/article/details/117885996

版权

JavaScript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

封装-自执行函数-命名空间

1.封装
- 1.概念
- 2.提升程序的可维护度
2.自执行函数
2.命名空间

1.封装

1.概念

通过命名空间或自执行函数实现程序的基本封装

2.提升程序的可维护度

2.自执行函数

1.概念

是一种将函数声明和调用合并到一起的写法

2.代码执行

常见写法
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 自执行---函数  ---------------------------------- > 避免了变量污染

        // 自执行函数,为什么避免了变量污染?
        // 因为他没用函数名,避免了重名,我们把这种情况叫做,避免变量污染!!!

        // 调用函数  --- 普通
        function a() {
            document.write('123')
        }
        a()
            // 将函数的声明和调用合并到一起    --- 自执行函数1
        ; (function () {
            document.write('456<br>')
        }())
        // ---------------------------------- 自执行函数2
        let b = 10                      // 之所以加 ; 就是因为浏览器可能将a解析成函数名
        ;(function () {                 // 加上分号 可以断绝与前面的错误
           document.write('789')
        })()
    </script>
</body>

</html>

3.本质

1.自执行函数与普通函数无本质区别，它简化了普通函数的步骤
2.自执行函数同样具有形参和实参
3.自执行函数一般使用匿名函数
4.自执行函数实际是函数表达式，属于高阶函数

4.注意：自执行函数前面尽量都加上分号

1.不然会引起错误
2.后期我们压缩代码也会引起错误
3.常见的除了分号之外也有！或者+
4.但是加分号是我们最常见的写法

2.命名空间

1.概念

命名空间本质上是一个普通对象，将具有关联性的变量和函数封装起来，做为该对象的属性或方法

2.优点

1.解决变量污染的问题

2.变量污染：占用某个变量导致后续无法使用此变量（标识）的问题

3.因为我们在公司基本上都说是多人协作,为防止变量污染,我们通常使用命名空间或者自执行函数进行封装

2.代码演示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 命名空间,本质上是一个对象,在对象中我随意起名字,跟外边没有关系

        // 相同的函数和变量封装在函数中,避免了变量污染

        // 就是防止你和同事,写了相同变量名,起了冲突问题


        let num = 10

        let ls = {                 // 对象是一个空间,每个对象都不一样,不会造成变量污染
            num: 10,
            sayHi: function () {
                console.log('李四');
            }
        }

        let zs = {
            num: 10,
            sayHi: function () {
                console.log('张三');
            }
        }
        console.log(zs.num);
        console.log(ls.num);
        console.log(num);


    </script>
</body>

</html>

3.封装一个命名空间,将时间对象封装

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 比如封装命名空间----日期对象
        // 将常用的变量存放到命名空间之中
        let date = {
            author: 'jikel',         // 作者
            time: new Date(),
            year: function () {
                return this.time.getFullYear()
            },
            m: function () {
                return this.time.getMonth() + 1
            },
            day: function () {
                return this.time.getDate()
            }
        }
        console.log(date.year());
        console.log(date.m());
        console.log(date.day());
        document.write(`${date.year()} -- ${date.m()} -- ${date.day()}`)
    </script>
</body>

</html>

4.总结以上点

自执行函数
自执行函数与普通函数无本质区别，它简化了普通函数的步骤
自执行函数同样具有形参和实参
自执行函数一般使用匿名函数
自执行函数实际是函数表达式，属于高阶函数

命名空间
命名空间本质上是一个普通对象，将具有关联性的变量和函数封装起来，做为该对象的属性或方法
解决变量污染的问题
变量污染：占用某个变量导致后续无法使用此变量（标识）的问题

Jikel

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
封装-自执行函数-命名空间

封装-自执行函数-命名空间1.封装1.概念2.提升程序的可维护度2.自执行函数1.概念2.代码执行3.本质4.注意：自执行函数前面尽量都加上分号2.命名空间1.概念2.优点2.代码演示3.封装一个命名空间,将时间对象封装4.总结以上点1.封装1.概念通过命名空间或自执行函数实现程序的基本封装2.提升程序的可维护度2.自执行函数1.概念是一种将函数声明和调用合并到一起的写法2.代码执行常见写法<!DOCTYPE html><html lang="zh-CN">
复制链接

扫一扫