文章目录
- 一、安装nodejs
- 二、es6-module
-
- 模块导出export
-
- 导出普通模块
- 导出默认模块
- 模块的导入 import
- 模块之间的关系
- 三、Symbol数据类型
- 四、proxy数据绑定
一、安装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>
![电商难做？低代码开发平台为企业转型升级保驾护航[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)