模块化引入外部js文件

本文引自 JavaScript 课程 0412

JavaScript：模块化编程

模块化引入外部js文件

一、模块化的概念

二、模块化的用法

文章到此就结束啦，记得留下你们的小赞喔，你们的鼓励就是对我最大的支持！！

)

一、模块化的概念

什么是模块？

模块就是一块 js 代码块;

封装成模块中的 js 文档，内部成员外部不可见，除非导出;

模块解决了模块化编程与代码封闭的问题;

(1) 传统引用外部 js 脚本

module.js 文件

let userName = "RQ桑";

html 文件

<script src="module1.js">console.log(userName);  //打印：RQ桑
</script>

注：传统的引用方式在学习过程中还是比较通用的，但是在实战过程中，模块化编程能提高工作效率。

(2) 模块化引用外部 js 脚本

module.js 文件

导出变量语法: export { 变量名 };

// 在模块中声明的变量是私有变量，不能被外部拿到，所以必须导出变量
let userName = "RQ桑";// 导出变量
export { userName };

html 文件

导入变量语法: inport (变量) from 'url'

<!-- 实现模块化，type值为module -->
<script type="module"></script>

<script type="module">// 导入指令要放在最前面,不导入则无法实现模块化import { userName } from "./module1.js";console.log(userName);// 模块成员在当前使用环境中，即不能重复声明，也不能更新let userName = "新声明的 RQ 桑";console.log(userName); //报错
</script>

可以这样理解：模块成员就是当前环境中的"常量"！

二、模块化的用法

(1) 模块化语法 as 起别名

外部 js 文件库如果是别人的，为了防止与使用环境中的变量重名，这里我们可以使用模块化语法 as 起别名。

<script type="module">// 导入指令要放在最前面import { userName as myName } from "./module1.js";let userName = "新的 RQ 桑";console.log(userName); //打印 新的 RQ 桑//   此时用别名访问模块导入的成员console.log(myName); //打印：RQ桑
</script>

(2) 模块化语法支持函数和类的引入

module.js 文件

// 变量
let userName = "RQ桑";// 函数体
function hello(name) {return "Hello" + name;
}// 类
class User {constructor(name, price) {this.name = name;this.price = price;}print() {return `${this.name} : ${this.price} 元`;}
}// 一起导出
export { userName, hello, User };

html 文件

导入变量语法: inport (变量) from 'url'

<script type="module">// 导入指令要放在最前面import { userName, hello, User } from "./module1.js";console.log(userName); //打印：RQ桑console.log(hello(userName)); //打印：Hello RQ桑let user = new User("宝马", "19999999");console.log(user); //打印：User {name: '宝马', price: '19999999'}
</script>

(3) 模块化语法默认导出

默认模块

一个模块中只允许有一个默认成员导出。

module.js 文件

let userName = "RQ桑";function hello(name) {return "Hello" + name;
}// 默认模块不能加大括号
// export default {hello}; //不 OK// 单个默认变量的导出
export default hello;// 混合式导出，不建议这样写
export { userName, hello as default };

html 文件

<script src="module1.js">// 导出时默认变量也不能用括号括起来import hello, { userName } from "./module2.js";console.log(hello(userName));  //打印：Hello RQ桑
</script>

(3) 模块化语法命名空间

基本上所有的编程语言都有命名空间这个概念，这里的命名空间是为了解决:

导入的成员非常多，那么就很可能会和当前空间的成员产生命名冲突;

此时，可以为这此导入的外部成员的集合，设置一个挂载点;

module.js 文件

let userName = "RQ桑";function hello(name) {return "Hello" + name;
}export { userName, hello };

html 文件

<script src="module1.js">// *表示所有的值, as 设置一个挂载点import * as namespace from "./module1.js";console.log(namespace); //输出如下图片console.log(namespace.userName); //打印：RQ桑console.log(hello(namespace.userName));  //打印：Hello RQ桑
</script>

文章到此就结束啦，记得留下你们的小赞喔，你们的鼓励就是对我最大的支持！！

JavaScript 中级篇：模块化编程相关推荐

深入理解JavaScript系列(四): 模块化编程
本文整理自 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1.模块的写法 1.原始写法模块就是实现特定功能的一组方法. ...
Javascript模块化编程系列二: 模块化的标准化(CommonJS AMD)
前言 Javascript模块化编程系列一: 模块化的驱动在前一篇介绍了为什么要进行Javascript模块化编程.至于如何实现模块化,不同的开发组织和个人具体的实现方式肯定是不一样.如何统一一个规 ...
JavaScript进阶(十二)JS 模块化编程规范-CommonJS、AMD、CMD、ES6
文章目录一.前言二.AMD-异步模块定义三.CMD-同步模块定义四.CommonJS 规范五.ES6 六.拓展阅读一.前言 AMD.CMD.CommonJs是ES5中提供的模块化编程方案, ...
(转)Javascript模块化编程（一）：模块的写法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
Javascript模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
Javascript模块化编程：AMD规范
一.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...
Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
JavaScript模块化编程知识分享！
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
学习阮一峰Javascript模块化编程，requireJS使用
使用背景NOW: 网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式. 项目需要一个团队分工协作.进度管理.单元 ...

JavaScript 中级篇：模块化编程

模块化引入外部js文件

JavaScript：模块化编程

一、模块化的概念

二、模块化的用法

文章到此就结束啦，记得留下你们的小赞喔，你们的鼓励就是对我最大的支持！！

JavaScript 中级篇：模块化编程相关推荐

最新文章

热门文章