JavaScript 服务器编程模块化

最新推荐文章于 2023-12-01 11:11:42 发布

《嘘》安静

最新推荐文章于 2023-12-01 11:11:42 发布

阅读量877

点赞数 1

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/weixin_65257540/article/details/123691377

版权

js运行环境（运行时）

浏览器

node

缺点：

1、全局变量污染（多个js文件有相同变量时，后面会覆盖前面的，导致结果不是自己想拿到）。

2、依赖管理问题（多个文件之间有联系使用时，就需要都分别引入这些文件）。

服务端模块化

CommonJS规范解决以上两个缺点

规范

1、每个JS文件都是一个独立的模块。

2、模块之前通信（使用），数据间的相互使用

在js文件中暴露需要给外部使用的变量、函数等，然后再需要使用的文件中接收就可以了，具体见day11代码

暴露可以给引用文件使用的标识符（接口）：

module.exports = { 变量、函数};

接收：

const { 变量名接收 } = require("接收的文件路径");

let { 变量名接收 } = require("接收的文件路径");

具体代码：当以相同变量名暴露和接收时

文件1

let a =20;
module.exports = { a}; //文件1暴露

文件2

let b=200;
let { a } = require("./index1.js");//接收文件1的暴露
let c=a+b;
module.exports = { c};//文件2暴露

文件

let {c} = require("./index2.js");//接收文件2的暴露
console.log(c);//220
module.exports = { c};//文件暴露
let {str} = require("./index3.js");//接收文件3的暴露
console.log(`1是${str}`);//1是270

文件3

let str=50;
let { c } = require("./index.js");//接收文件的暴露
str+=c;
console.log(str);//270
module.exports = { str};//文件3暴露

具体代码：当以不同变量名暴露和接收时，需要以键值对的方式（常用，多个键值对以逗号隔开），键是暴露出来的名字，值是新声明用来接的变量名

文件1

let a =20;
module.exports = { a}; //文件1暴露

文件2

let b=200;
let { a：a1} = require("./index1.js");//接收文件1的暴露
let c=a1+b;
module.exports = { c};//文件2暴露

文件

let {c：c1} = require("./index2.js");//接收文件2的暴露
console.log(c1);//220
module.exports = { c1};//文件暴露
let {str：sum} = require("./index3.js");//接收文件3的暴露
console.log(`1是${sum}`);//1是270

文件3

let str=50;
let { c1：c2 } = require("./index.js");//接收文件的暴露
str+=c2;
console.log(str);//270
module.exports = { str};//文件3暴露

12 服务器编程-node 模块化

CommonJS规范解决以上两个缺点

规范

1、每个JS文件都是一个独立的模块。

2、模块之前通信（使用），数据间的相互使用。

3、包 package（包含多个模块的,多个模块集合成一个包）。

每一个包的根目录都有一个package.json文件，是包的描述文件。

在环境中执行时，需要以下操作：

进入目录

进入一层：cd 目录名称

进入多层：cd 目录A/ 目录B/ 目录C

退出目录

退出上一层：cd..

退出根目录：cd\

NPM node package manage node包管理工具

npm init 初始化包，建立package.json文件

淘宝镜像：npm config set registry https://registry.npm.taobao.org

安装三方工具包 npm install jquery

Express 应用程序生成器

基于NodeJs的框架（Web应用）。

Express步骤：

1、创建一个包（文件夹）。

2、进入文件夹。

3、在终端打开执行 npx express-generator（项目初始化，搭建项目框架）。

4、启动应用 node ./bin/www 或者直接npm start。

5、打开浏览器，在地址栏访问应用 http://127.0.0.1+端口或者http://localhost+端口。

6、修改端口号。

项目结构：

app.js：项目的入口文件。

bin：是项目启动的文件（start文件的储存位置），也是在里面修改端口号。

node_modules：第三方依赖（第三方包）。

public：存放静态资源（img，html，css，js），这些都是在浏览器执行和解析的内容。

routes：路由，分发和管理请求与服务。

创建一个myapp文件，在终端打开构成框架

自动安装所有依赖，如果有其他没有的，需要单独下载

获取请求

get请求方式，使用req.query获取请求数据

post或者其他请求方式，使用req.body获取请求数据

浏览器模块化

ESM规范

和服务端模块化类似，在html文件引入时要+type="module"。

暴露可以给引用文件使用的标识符（接口）：

export let a=1;//暴露一个

export default{a,b};//暴露多个

接收：

import {接收变量名} form "接收的文件路径"。//若是名字不同需要暴露名 as 新名。

import result,{接收变量名} form "接收的文件路径"。//其中result是所有接收的一个对象。

具体代码：

html文件

<script type="module" src="./javascripts/index.js"></script>

index1文件

export let a=100;
export default{a}; 暴露数据

index文件

import {a} from "./index1.js"; 接收数据
console.log(a);//100

若引入的变量名和接收页面同名

index文件

let a=300;
import {a as a1} from "./index1.js";
console.log(a);//300
console.log(a1);//100

若同时暴露并引入的多个变量

index1文件

export let a=100;
export let str='abc';
export default{a,str};

index文件

let a=300;
import result, {a as a1,str} from "./index1.js";
console.log(a);//300
console.log(a1);//100
console.log(result);//{a: 100, str: 'abc'}