让 JavaScript 文件代码相互独立

最新推荐文章于 2023-02-28 10:59:19 发布

lefex

最新推荐文章于 2023-02-28 10:59:19 发布

阅读量618

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/104120750

版权

在 JavaScript 的世界，函数是一等公民，在没有 let、const 的时候，JavaScript 中申明的变量只能是全局作用域或者函数作用域，根本没有块级作用域。这样很难避免变量命名冲突。比如在一个很大的项目中张三创建了一个 js 文件 block1.js，定义了一个变量 name：

var name = 'suyan';

李四创建了一个 js 文件 block2.js，同样也定义了变量 name：

var name = '前端小课';

在 html 文件中引用，name 的值是什么呢？

<body>
    <script src="./block1.js"></script>
    <script src="./block2.js"></script>
    <script>
      console.log(name);
</script>
</body>

name 的值是“前端小课”，变量 name 在彼此不知情的情况下被修改了，这种开发体验非常糟糕。程序开发的最佳体验是保证结果的唯一性，也就是说程序在同一条件下结果只有一个。

解决这个问题只要为张三和李四提供一个「独立的环境」，保证自己声明的变量在自己毫不知情的情况下不会被修改。可以使用「函数」来解决这个问题。

文件 block1.js:

function zhangsan() {
    var name = 'zhangsan';
    console.log(name);
}
zhangsan();

文件 block2.js：

function lishi() {
    var name = 'lishi';
    console.log(name);
}
lishi();

这样把两个文件中的变量都隔离到一个独立的函数中，但是如果函数名重复呢？又回到了前面提到的问题。还有一种更好的方式。

文件 block1.js:

(function () 
    var name = 'zhangsan';
    console.log(name);
})();

文件 block2.js，

(function () {
    var name = 'lishi';
    console.log(name);
})();

JavaScript 可以省略分号，比如下面的代码是无法执行的：

var name = 'suyan'
(function () {
    console.log('call self');
})();

所有通常会把：

(function () {
    console.log('call self');
})();

写成：

;(function () {
    console.log('call self');
})();

或者：

void (function () {
    console.log('call self');
})();

今天的内容主要介绍了一种常见的 JavaScript 代码隔离方法，这也是第三方库常用的手段。

关注