让 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
    评论
### 回答1: 这取决于这段代码的具体功能和用途。一些通用的建议如下: - 如果这段代码是用来控制网页上的交互和动态效果的,那么一般会放在 JavaScript 文件中。 - 如果这段代码是用来定义网页的结构和内容的,那么一般会放在 HTML 文件中。 - 如果这段代码是用来控制样式和布局的,那么一般会放在 CSS 文件中。 - 如果这段代码是用来处理服务器端逻辑的,那么一般会放在后端语言(如 PHP、Python、Java 等)的文件中。 需要注意的是,网页开发中经常使用的是 HTML、CSS 和 JavaScript 三种语言相结合的方式,因此在实际应用中,这些代码往往会分别放在不同的文件中,并且相互调用和引用。 ### 回答2: 这段代码的存放位置会根据代码的功能和需要来决定,以下是对不同类型代码应该放在哪个文件里的一些建议: 1. HTML代码:HTML代码主要用于构建网页的结构和内容,例如定义页面标题、段落、链接等。通常将HTML代码放在以`.html`或`.htm`为后缀的文件中,比如`index.html`。在这个文件中,可以使用标签和属性来描述网页的结构。 2. CSS代码:CSS代码主要用于添加样式和布局,例如设置字体、颜色、边距等。一般将CSS代码放在以`.css`为后缀的文件中,比如`styles.css`。在HTML文件中,可以使用`<link>`标签将CSS文件链接到网页,让网页应用这些样式。 3. JavaScript代码JavaScript代码主要用于实现网页的交互和动态效果,例如验证表单、展示动画等。JavaScript代码可以放在HTML文件中的`<script>`标签中,也可以将JavaScript代码单独放在以`.js`为后缀的文件中,比如`script.js`。通过在HTML文件中使用`<script>`标签,将JavaScript文件引入,使其能够被网页调用和执行。 需要注意的是,较小的代码段可以直接放在HTML文件内,但如果代码较多或多个文件需要共享代码,则更好将其封装在独立的CSS或JavaScript文件中,以提高代码重用性和维护性。另外,也可以使用外部库或框架,如jQuery、React等来管理和组织代码。最终的决策应基于项目的要求和最佳实践。 ### 回答3: 这段代码的存放位置要根据代码的功能和用途来决定。一般来说,HTML文件主要用于定义网页的结构和内容,而JavaScript文件用于实现网页的交互和动态效果。 如果这段代码是用于控制网页的交互和动态效果,例如按钮点击事件、表单验证等,那么应该将代码放在JavaScript文件中。在HTML文件中通过引入JavaScript文件来调用这段代码,使用<script>标签来引入外部的.js文件。 如果这段代码是用于定义网页的结构和内容,例如网页标题、文本、图片等,那么可以将代码直接放在HTML文件中。代码可以写在<head>或<body>标签内,用于定义网页的结构和内容元素。 需要注意的是,为了代码的可维护性和可读性,也可以将代码根据功能进行模块化,将交互和动态效果的代码放在一个或多个.js文件中,将结构和内容的代码放在HTML文件中或者另外的.css文件中进行样式定义。这样可以更好地组织和管理代码,提高代码的可维护性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值