一、安装nodejs
1. 安装nodejs (简单操作就是 一路next (除了更改文件安装目录))
2. 测试 nodejs 安装是否成功
2-1. 打开命令行窗口(cmd)
(1) 在开始菜单 的搜索栏输入 cmd 直接回车
(2) 在电脑的任何空白地方 , 按着 shift键 + 鼠标右键 ===》出现菜单 ==》 在此处打开命令行窗口(W)
2-2 在命令行窗口中输入命令测试
输入 node -v 回车
出现详细的nodejs版本号, 就证明nodejs 安装成功了
如果输入命令回车出现 一下的提示信息: 就证明要么没有安装相关的命令工具,或者是安装失败
'xxx' 不是内部或外部命令,也不是可运行的程序或批处理文件。
3. npm 包管理命令
npm 随着nodejs的安装一起安装
测试 npm 是否可以使用
输入 npm -v 回车即可
4. es6的模块: 借助一个webapck的打包工具使用
5. webpack的相关命令:
npm run build
npm run dev
拷贝文件时: 一定不要拷贝 node_modules (这是存放第三方包的地方,可以随时安装随时删除)
安装依赖:
在项目的根目录下(package.json 文件所在的目录) 执行 npm i 命令
二、es6-module
模块导出export
导出普通模块
可以把任意的数据类型作为模块导出
- 单独导出模块:
// a.js
export const num = 100; // 导出模块
export let str = 'heelo' // 变量名或者函数名就是模块名
export function fun(){}
- 整体导出模块
// a.js
const num = 100;
let str = 'hello world';
function test(){}
export {
num, // 导出的模块名
str,
test
}
- 导出模块起别名
一旦导出模块时起了别名,导入模块时必须使用对应的别名
export {
num as n,
str as s,
test as t
}
导出默认模块
一个模块文件只能有一个默认模块,可以有多个普通模块
export default 模块名
模块的导入 import
如果是导入普通模块,需要通过对象的解构的形式导入
// 引入普通模块 模块名必须和导出的模块名保持一致
// 多个模块之间使用逗号隔开
import {模块名1, 模块名2, ...} from '文件路径url'
// 案例
import {num, str, test} from './a.js'
// 引入默认模块 默认模块的名字可以自定义
import 自定义模块名 from '文件路径url'
// 导入模块起别名 ,
import {模块名 as 自定义名字} from '文件路径'
// 默认模块和普通模块同时引入
import 默认模块名,{普通模块名, ...} from '文件路径'
// 模块整体加载 必须给模块起别名
// 使用的是普通的模块,通过 `别名.模块名` 使用; 如果使用默认模块, 通过 `别名.default` 使用
import * as 别名 from '文件路径'
模块之间的关系
一个模块可以被多个模块引用; 一个模块可以引入多个模块
// 引入jQuery 引入第三方包 需要先下载安装,然后才能引入; 直接引入第三方包的名字即可
import $ from 'jquery'
// console.log($);
//原生获取
export function getCnode() {
let btn = document.querySelector('.btn');
btn.onclick = function() {
let xhr = new XMLHttpRequest();
xhr.open('get', 'https://cnodejs.org/api/v1/topics');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = xhr.responseText;
console.log(data);
}
}
}
}
//Ajax获取
function jqueryGetCnode() {
$('.btn').click(function() {
$.ajax({
url: 'https://cnodejs.org/api/v1/topics',
type: 'get',
success: function(data) {
console.log(data);
}
})
})
}
// 导出模块 起别名 统一导出模块的方式 通过as关键字
export { jqueryGetCnode as c }
function getDate() {
console.log("获取数据");
}
// 导出一个普通的模块
// export {
// getDate
// }
// 导出一个默认模块
function defaultModule() {
console.log("导出默认模块===");
}
export default defaultModule;
function jqueryGetCnode() {
$('.btn').click(function() {
$.ajax({
url: 'https://cnodejs.org/api/v1/topics',
type: 'get',
success: function(data) {
console.log(data);
}
})
})
}
export {
getDate,
jqueryGetCnode
}
// 入口文件
// import {num} from './a'
// let res = num + 100;
// console.log(res);
// 需要谁就引入谁 可以进行按需引入
// import {str, fun} from './a'
// console.log(str);
// fun();
// import { str, fun } from './b'
// console.log(str);
// fun();
// 引入模块 可以给模块起别名 通过as关键字
// 一旦导出默认时有别名, 引入需要使用别名引入
// import { getCnode as g, c } from "./cnode"
// getCnode()
// c()
// g();
//引入普通模块
// import { getDate } from "./test"
// getDate();
// 引入默认模块
// import a from "./test"
// a()
// 普通模块和默认模块同时引入
// import a from "./test";
// import { getDate } from "./test";
// import a, { getDate } from "./test";
// a();
// getDate();
// 模块整体加载 * 实现 , 但是必须给模块执行别名
// 后期使用模块 通过 对象.模块名 使用
// 使用默认模块,通过 对象.default 使用
import * as o from "./test"
console.log(o);
三、Symbol数据类型
js 数据类型:
number
string
boolean
Object
Array
undefined
null
function
js 基本数据类型 和引用数据类型
基本数据类型
number
string
boolean
undefined
null
引用数据类型
Object
Array
function
es6 新增一个基本数据类型 Symbol (独一无二的值)
目的: 就是为了扩展对象 (解决对象属性名冲突的问题)
// var a = 100;
// var b = 100;
// console.log(a == b); //true
// 声明一个Symbol类型数据
// let a = Symbol();
// let b = Symbol();
// console.log(a == b);//false
// 区分symbol 类型只要传入参数即可
// let a = Symbol("asymbol")
// let b = Symbol('bsymbol')
// console.log(a, b); //Symbol(asymbol) Symbol(bsymbol)
// Symbol 作为对象的属性存在 需要使用[symbol的变量名]:value
let name = Symbol('name')
let person = {
name: "张三",
age: 18,
[name]: "hello world",
[Symbol("sing")]: "唱歌"
}
// 遍历对象 symbol 属性不会被遍历
// for (let key in person) {
// console.log(key); //name age
// }
// 通过 Object.getOwnPropertySymbols() 方法获取对象中所有的Symbol
// let res = Object.getOwnPropertySymbols(person)
// console.log(res); // [Symbol(name), Symbol(sing)]
// es6 提供了一个新的方法 Reflect.ownKeys() 可以 获取对象中所有的属性 , 包含普通属性和 Symbol属性
let res = Reflect.ownKeys(person)
console.log(res); //["name", "age", Symbol(name), Symbol(sing)]
//遍历对象
let obj = {
name: "tom",
age: 18,
say: "hello word"
}
for (let key in obj) {
// console.log(obj[key]);// key是一个变量
// console.log(obj.key);//对象中的某个属性key
}
</script>
四、proxy数据绑定
Proxy: 实现数据的拦截和响应 (可以实现数据的双向绑定)
如果给对象设置了代理拦截,当我们对对象进行操作时,都会被拦截
Vue3 的数据双向绑定的原理就是 通过 Proxy 的数据劫持 实现的(可以代理所有的属性)
Vue2 的数据双向绑定的原理 是 通过 Obejct.defineProperty() 实现 (一次只能代理一个属性)
<script>
let person = {
name: "tom",
age: '18'
}
// 定义一个代理 第一个参数是要代理的对象 ,第二个参数是配置项,就是数据的拦截和响应
// 对 person 对象进行整体的代理,后期操作对象 通过 Proxy 的实例对象进行操作
let px = new Proxy(person, {
// 拦截器(数据劫持) 获取 当我们从对象中获取值的时候会被拦截
get: function(target, propKey, receiver) {
// console.log(target); //{name: "tom", age: "18"}
// // 此处为输出px.name的结果
// console.log(propKey); //name
// console.log(receiver); //Proxy {name: "tom", age: "18"}
// 通过return 返回结果
return "hello world"
},
// 设置 当我们改变对象的属性值时 会被拦截
set: function(target, propKey, value, receiver) {
// obj.key = value;
console.log(target); // target 是代理的目标对象 person
//{name: "tom", age: "18"}
console.log(propKey); // propkey 是 对象的属性key
//sex
console.log(value); // value 是 设置的值
//张三
console.log(receiver); // Proxy 实例对象
//Proxy {name: "tom", age: "18"}
target[propKey] = value;
}
})
// console.log(px); //Proxy {name: "tom", age: "18"}
// console.log(person); //{name: "tom", age: "18"}
// console.log(px.name); //hello world
// console.log(px.sex); //hello world
// person.name = "张三"
// console.log(px.name); //hello world
// console.log(person.name); //张三
px.sex = '张三';
console.log(px); //Proxy {name: "tom", age: "18", sex: "张三"}
console.log(px.name); //name
</script>