模块化介绍
每个文件没有独立的命名空间 ，变量和函数还是会相互影响
1.命名空间 2.通过函数作用域来区分
require.js sea.js
区分文件之间的依赖关系
前端的模块化
1.ESM : ES6 Module
2.commonjs 规范 ： nodejs的模块化规范
model module
原生浏览器环境 要使用ESM 必须要满足2个前提条件 ：
1.网页需要通过服务器打开 ,通过网页地址查看 ，如果是http协议就是通过服务器打开的；
2. 设置script 标签的type="module";
2.导入和导出 导入 ： import
1.直接导入文件 import "路径地址"
2.导入文件且导入变量 import {导出的变量1,导出的变量2} from "地址"
导出 ： export ： 可以导出多个
1.先定义在导出 export {导出的变量}
2.直接导出定义的变量 例： export let a = 10;
（1）引入模块 ,直接引入
模块化方式 每个文件都有自己的命名空间 相互之间不会影响；
import "引入文件的地址";
（2）导出需要导出的内容
引入 export 导出的内容
import {导出的内容的属性名/函数名/类名} from "引入文件的地址"; //from 导入东西要加
一、默认导出和导入
例：import myc,{a,b,d} from "./a.js";
myc是接受 export default 导出的内容，名字可以自定义
a b d 是接受 export 导出的内容；
输出
console.log(myc);或 console.log(a,b,d);
let {c,e} = myc; // 解构
console.log(c,e);
默认导出和导入 1.导出 export default ： 只能导出一个 2.导入 import 自定义变量 from "地址"
二、导入和导出别名；
导入为（import as） 导出为（export as）
import as:
import * as obj from './b.js';
console.log(obj);
let {b,c,default:mydefault} = obj;
console.log(b,c,mydefault);
export as:
export {sayHi as hi, sayBye as bye};
通过内置 import 函数 按需导入模块
例：
let 获取标签名 document.querySelector("获取标签");
获取标签名.各种事件 = async function(){
// 写法1
import("引入文件的地址").then(res=>{
//
}
// 写法2
let 应用名 = await import("引入文件的地址");
console.log(应用名);
}
懒加载
懒加载，即延迟加载(Lazyload)。简单来说就是一个长页面中需要展示很多图像的时候，如果在进入页面的时候一次性把所有图片加载完，需要很长的时间。为了提升用户体验，我们使用懒加载，当图片出现在浏览器可视区域时，才加载图片。例如各种电商页面。
懒加载的作用 加快页面打开速度，提升用户体验 减少服务器压力和浏览器的负担
例：
let 获取图片标签名 document.querySelector("获取图片标签");
function 函数名(){
获取图片标签名.forEach(img=>{
// 判断图片是否超出了屏幕 ，如果超出了屏幕加加载图片
console.log(img.getBoundingClientRect().bottom)
if(img.getBoundingClientRect().bottom < window.innerHeight){
console.log(img);
let 获取图片属性名 = img.getAttribute("data-src");
img.src = 获取图片属性名;
}
})
}
函数名();
window.onscroll = function(){
函数名();
}
预加载
预加载 ： 提前把资源加载好 ，方便使用 ；
资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。
例：
let 获取图片属性数列 = [图片地址（可多个）]；
获取图片属性名(获取图片属性名);
function 获取图片属性名(获取图片属性名){
let 静态数据 = 0;
for(let i=0;i<获取图片属性数列.length;i++){
let img = document.createElement("img");
img.src = 获取图片属性数列[i];
img.onload = function(){
静态数据++;
if(静态数据==获取图片属性数列.length){
// console.log("所有图片加载完毕 ，继续写后续的逻辑");
}
}
}
}
懒加载和预加载的对比
两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
git
一、git : 版本控制工具
代码管理协同工具；
直接新建一个目录写代码 ，只能看到代码的结果
版本控制工具 ： git svn cvs ...
git ： 分布式 。 svn 中心式
二、git安装
是否安装好git
mac 电脑 ： 打开终端 输入 git --version
win电脑 ： 鼠标右键 多2个菜单
win 电脑 ： 多一个命令行工具 ，gitbash；
win电脑 终端 ： win+r 输入 cmd ；
git安装后可能出现的问题 vscode 集成命令行工具 修改 系统的执行策略 第一步 ： 使用管理员身份打开 powershell 命令行 第二步 ： 输入 set-ExecutionPolicy RemoteSigned 第三步 ： 输入 y 按enter ； 第四步 ： 需要重启 vscode ，重启电脑 ；
常见的linux指令
- 打开输入指令的终端
- mac ： 终端
- win 的终端
- 1. win 自带的cmd 终端
- 2. powershell ： 新版终端
- 3. 推荐使用gitbash 终端 （装完git自动安装） ，1.鼠标右键 gitbashhere 2.搜索 gitbash
- vscode集成终端： 快捷键 `ctrl +` `
- 常见指令
- cd
- cd : 切换目录 ,cd 目录地址
- cd . : 切换当前目录
- cd .. : 返还上层目录
- 查看当前目录下的文件
- ls (list)
- 可以通过 tab键 补全选中的文件名称；
- ls -a ： 查看所有文件
- 创建目录
- mkdir ： mkdir 目录名称
- 创建文件
- touch ： touch 文件名称
- 往文件中写入内容 vim 编辑器
- 写入内容 按键 i
- 写完后 保存 ： 先按 esc --》 ：wq
- 强制退出： ：q!;
- pwd 当前位置
- 删除 rm 文件地址
- cat : 可以查看文件里的内容
- rmdir ： 删除目录
- mv mv index.js ../a2/index.js
- netstat -ano --->找到 pid ----》 找到任务管理器 结束 对应pid的进程
### git 基本操作
- 配置用户名和邮箱
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
- git config --list 查看配置；
- 创建git仓库
- git 初始化仓库 ： git init;
- 一旦创建了git仓库 ，那么 目录中就会多一个.git的隐藏目录
- .git 隐藏目录不要修改 ，也不要删除了；
- git 的三个区域
- 工作区 （看到的区域）
- 暂存区 （临时存储版本）
- 仓库区域
- 提交流程
- 把工作区内容添加到 暂存区 ： git add 文件名称
- 把暂存区的内容提交到仓库： git commit -m "注释";注释必须得有
- 查看当前状态 ： git status;
## 查看日志
- git log : 查看提交的日志
- git log --oneline 日志的简写
- git reflog : 查看详细日志
- 覆盖提交 git commit --amend -m "覆盖提交"
## 回退 操作
- 回退工作区 : git checkout .
- 回退暂存区 ： git reset .
- 回退仓库，回退版本 ： git reset --hard commitID;
### git 里的删除
- 直接删除文件 然后重新做一次提交
- 删除工作区和仓库的文件 ： git rm 文件名;
- 删除之后需要提交一次
- 只删除仓库的文件 ： git rm --cached 文件名
### git的比较
- 1. 比较工作区和暂存区的不同 ： git diff
- 2. 比较暂存区和仓库的区别： git diff --cached;
- 3. 比较2个版本之间的区别 ： git diff commitID1 commitID2
### 分支操作
- 查看分支 ： git branch;
- 创建一个分支 ： git branch 分支名
- 切换分支 ： git checkout 分支名;
- 删除分支 ：
- 非强制删除： git branch -d 分支名;
- 强制删除： git branch -D 分支名
- 合并分支
- git merge 分支名
