前端技术-模块化操作(es5写法) | 学习笔记

简介: 快速学习 前端技术-模块化操作(es5写法)

开发者学堂课程【微服务+全栈在线教育实战项目演练(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 的写法,需要程序员定义方法,设置,引入,最终测试。

相关文章
|
6天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
72 29
|
4天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
12 3
|
6天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
22 4
|
4天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
10 2
|
6天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
17 3
|
4天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
6天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
14 2
|
24天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
103 2
|
24天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
35 0
|
24天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
下一篇
无影云桌面