# jsdemo202204
**Repository Path**: nieps/jsdemo202204
## Basic Information
- **Project Name**: jsdemo202204
- **Description**: javascript
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-16
- **Last Updated**: 2022-08-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# JavaScript
spa (单页应用)
## 大纲
## 使用方法
> ria应用 （rich internet application) flash
>
> flex ----编译后 swf
>
> silverlight
内部js
在页面中定义标记，在标记内定义js代码
外部js
~~~javascript
~~~
延迟加载
JavaScript 文件延迟到页面解析完毕后再运行
~~~javascript
~~~
异步加载
让浏览器异步加载 JavaScript 文件，即在加载 JavaScript 文件时，浏览器不会暂停，而是继续解析。这样能节省时间，提升响应速度
~~~javascript
~~~
## 基础语法
### 变量定义
#### var声明变量
#### let声明变量
#### const常量
### 注释
* 单行注释 //
* 多行注释 /* */
### 变量的作用域
#### 全局变量
* 函数体外声明的变量
* 在函数体内，不用var声明，直接使用变量并赋值
* 直接在window对象上添加属性
> 在实际开发中，应该避免使用全局变量，如果有需求，可以通过闭包的形式实现。
>
> 闭包：是在函数内嵌套函数， 嵌套函数可以访问外部函数的局部变量
>
> ~~~javascript
> (function(){
> var host="http://localhost";//局部变量
> //函数内定义 嵌套函数 允许访问函数内的局部变量 host
> //请求用户
> function queryUser(){
> console.log("用户请求:"+host)
> }
> //请求商品
> function queryGoods(){
> console.log("商品请求:"+host)
> }
> //方法暴露 允许在外部访问 引入全局变量
> window.queryGoods=queryGoods;
> window.queryUser=queryUser;
> })();
> ~~~
>
>
#### 局部变量
* 在函数体内使用完整的声明语句声明的变量
* 函数的参数
#### 代码块作用域
使用let \const声明的变量
## 数据类型
### 基本类型
* 数字类型 number
> 原型方法： 实例方法 通过类型的实例或变量 来调用 的方法
>
> 静态方法： 通过类型直接调用
掌握标1的方法
* 字符串
表示方法
## 对象
## 函数
### 普通函数
### this关键字
### 箭头函数
## 数组
## 解构赋值
## ajax
* 同步请求
* 异步请求
Ajax即**A**synchronous **J**avascript **A**nd **X**ML（异步JavaScript和[XML](https://baike.baidu.com/item/XML/86251)）
回调函数：回调函数就是一个被作为参数传递的函数，通常用来获取异步操作的结果
回调地狱：回调函数里面嵌套回调函数。
关于时间操作：
* setTimeout (回调函数,延迟时间) 单位毫秒 在指在多少毫秒后执行函数
* setInterval(回调函数,间隔时间) 指每隔多久执行一次函数
## ES6 模块
模块就是一个文件 (js文件 )
### export导出
~~~javascript
export let host="http://localhost:8080" ;
export function save(){}
~~~
> 使用export 可以导出函数，`var`，`let`，`const`定义的变量或对象
简洁导出(推荐)
~~~javascript
let host="http://localhost:8080" ;
function save(){}
//统一导出 方便查看暴露的接口
export {host,save}
~~~
> export { 变量或函数 as 别名} 可能通过as为接口指定别名
### import导入
#### 按需导入
~~~javascript
import {host,save} from '模块名'
~~~
> import 导入时也可以通过as起别名如
>
> ~~~javascript
> import {host as url,save} from '模块名'
> ~~~
>
>
#### 整体导入
~~~javascript
import * as obj from '模块名'
~~~
> obj是一个对象 包含所有export暴露的接口
### export default 导出
使用export default导出时，如同将default看成变量 ，将后面的值赋值给变量default，如下
~~~javascript
export default 1; //default后面可以是变量 函数 常量 对象 等
~~~
导入时：
~~~javascript
import {default as x} from '模块名'
~~~
default必须指定别名，所以在引入时，可以简化并指定任意的名称，如下
~~~javascript
import x from '模块名'
~~~
### export合并
~~~javascript
import { foo, bar } from 'my_module';
export { foo, bar };
//上面的是从一个模块导入变量 再导出 可以合并成如下代码
export { foo, bar } from 'my_module';
~~~
> 通过合并可以实现模块继承功能，既合并后新的模块包含被合并过来的模块接口
>
> 注意：如果是 默认导出
>
> ~~~javascript
> export default {}
> ~~~
>
> 合并时如下：
>
> ~~~javascript
> export {default} from '模块名'
> ~~~
>
> 此时default当成是变量名来使用
### 对比Node.js模块
| | node.js模块 | es6模块 |
| ---- | ------------------------------------------------------------ | ---------------------------------------- |
| 导出 | 在module.exports 这个对象上增加属性,可者在module.exports的别名上暴露 | export {变量名\|函数名...} |
| 导入 | const o=require("模块的路径") o 是对应模块中module.exports对象 的引用，使用o调用模块中的属性 | import {变量名\|函数名} from "模块路径" |
| | | |
## Node.js
### 介绍
> [官网](https://nodejs.org/zh-cn/)
Node.js® 是一个基于 [Chrome V8 引擎](https://v8.dev/) 的 JavaScript 运行时环境。
> V8 是 Google 的开源高性能 JavaScript 和 WebAssembly 引擎，用 C++ 编写。它用于 Chrome 和 Node.js 等。它实现了[ECMAScript](https://tc39.es/ecma262/)和[WebAssembly](https://webassembly.github.io/spec/core/)，并在 Windows 7 或更高版本、macOS 10.12+ 以及使用 x64、IA-32、ARM 或 MIPS 处理器的 Linux 系统上运行。V8 可以独立运行，也可以嵌入到任何 C++ 应用程序中。
### 安装
安装完后，测试是否安装成功，可以在命令行输入以下命令查看版本信息:
~~~shell
node -v #查看版本
~~~
运行js文件
~~~shell
node xxx.js
~~~
交互模式,在命令行输入node
~~~shell
C:\Users\wqa>node
Welcome to Node.js v16.17.0.
Type ".help" for more information.
> console.log("hello world")
hello world
~~~
### NPM包管理器
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
新版的nodejs已经集成了npm,测试查看：
~~~shell
npm -v #查看版本信息
~~~
#### NPM配置
##### 查看帮助
~~~shell
npm --help
~~~
##### 查看配置
~~~shell
#查看所有配置
npm config list
#配置指定条目
npm config set 配置项 值
#查看指定配置项
npm config get 配置项
~~~
##### 查看路径
~~~shell
#查看缓存路径
npm config get cache
#查看全局模块路径
npm config get prefix
#查看全局模块
npm root -g
~~~
#### 安装源
在使用npm命令时，如果直接从国外的仓库下载依赖，下载速度很慢，甚至会下载不下来，我们可以更换npm的仓库源，提高下载速度。
##### 查看安装源
~~~shell
npm get registry
~~~
> npm 默认地址： [http://www.npmjs.org](http://www.npmjs.org)
##### 设置淘宝镜像源
###### 临时使用
~~~shell
npm --registry=http://registry.npm.taobao.org install
~~~
###### 使用cnpm命令代替npm
~~~shell
#安装cnpm命令,不会改变npm的源 使用cnpm命令代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
#使用
cnpm install
~~~
###### 修改npm
~~~shell
#设置npm的源，可以设置多个源，但是只有一个是生效的
#设置淘宝源
npm config set registry https://registry.npm.taobao.org
#设置公司的源
#npm config set registry http://127.0.0.1:4873
#查看源，可以看到设置过的所有的源
npm config get registry
~~~
### 模块安装
