让 JavaScript 文件代码相互独立

在 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 代码隔离方法,这也是第三方库常用的手段。


推荐阅读:

看透变量提升与块级作用域实现的原理
执行上下文与调用栈
推荐我精心准备的 JavaScript 学习资源


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值