开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-模块化操作(es5写法)】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11322
前端技术-模块化操作(es5写法)
内容介绍:
一、如何做模块化
二、测试及结果
三、总结
一、如何做模块化
1、 总体过程
(1)创建 “module” 文件夹
(2)导出模块
创建 common-js 模块化/四则运算 .js
//定义成员:
const sum=function(a,b){
return parseInt(a)+parseInt(b)
}
const subtract=function(a,b){
return parseInt(a)-parseInt(b)
}
const multiply=function(a,b){
return parseInt(a)*parseInt(b)
}
const divide=function(a,b){
return parseInt(a)/parseInt(b)
}
导出模块中的成员
//导出成员:
module.exports ={
sum:sum,
subtract:subtract
multiply:multiply
divide:divide
}
简写
//简写
module.exports ={
sum,
subtract,
multiply,
divide
}
module.exports ={ 是指写指定方法,方便调用。
(3) 导入模块
创建 common-js 模块化/引入模块 .js
//引入模块,注意:当前路径必须写 ./
const m=require(‘ ./四则运算 .js’)
console.log(m)
const result1 =m.sum(1,2)
const result2 =m.subtract(1,2)
console.log(result1,result2)
(4) 运行程序
Node common-js 模块化/引入模块 .js
2、操作过程
首先,创建 module 文件夹,对项目进行初始化:
e:\work\vs1010\moduledemo>npm init -y
为了操作明显,新建 es5module 文件夹。
新建01.js 与 02.js 文件。做到在01.js 定义 js 方法,在02.js 中去调用01.js 的方法。
01. Js 代码:
//1创建 js 方法
const sum=function(a,b){
return parseInt(a)+parseInt(b)
}
const subtract=function(a,b){
return parseInt(a)-parseInt(b)
}
注意:
默认情况下,该方法无法直接调用。需要通过设置使方法可以被调用。
//2设置哪些方法可以被其他 js 调用
module.exports={
sum,
subtract
}
02. Js 代码:
//调用01.js 里面的方法
//1引入01.js 文件
Const m=require(‘./’01.js) (用关键字引入文件,‘./’表示当前路径)
//2调用
console.log(m.sum(1,2))
console.log(m.subtract(10,3))
二、测试及结果
在02中调用01方法,直接执行02。
在终端中打开 es5module 目录,用 node js 执行:
e:\work\vs1010\moduledemo\es5module>node02.js
方法中的相加与相减结果直接显示。
Microsoft Windows [版本 6.1.7601】
版权所有(c)2009 Microsoft Corporation。保留所有权利
e:\work\vs1010\moduledemo\es5module>node 02.js
3
7
e:\work\vs1010\moduledemo\es5module>
上述代码是 es5 的写法,需要程序员定义方法,设置,引入,最终测试。