1. ECMAScript 6
1.1什么是 ECMAScript 6
ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准, 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
1.2 ECMAScript 和 JavaScript 的关系
一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)
二.基本语法
2.1 let声明变量(局部,只能声明一次)
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a = 1;
let b = 2;
}
console.log(a)
console.log(b) //b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1;
var m = 2;
let n = 10;
let n = 20; //'n' has already been declared
console.log(m)
console.log(n)
2.2 const声明常量(只读变量)
<script>
//常量
// 1、声明之后不允许改变 // 2、一但声明必须初始化,否则会报错
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.
</script>
2.3 解构对象
<script>
let a=1,b=2,c=3
console.log(a,b,c)
//ES6
let[x,y,z]=[1,2,3]
console.log(x,y,z)
//2.对象解构
let user={name: 'helen',age: '18'}
// 传统
let name1=user.name
let age1=user.age
console.log(name1,age1)
//ES6
let {name,age}=user
console.log(name,age)
</script>
2.4 模板字符串
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式
<script>
let a=1,b=2,c=3
let info ='My name is ${a} ,name2 is{b}'
console.log(info)
</script>
2.5声明对象简写
//传统方式定义对象
const name = "lucy"
const age = 20
const user1 = {name:name,age:age}
//console.log(user1)
//es6
const user2 = {name,age}
console.log(user2)
2.6对象拓展运算符
拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象
//对象复制
let person1 = {name: "Amy", age: 15}
let someone1 = { ...person1}
//console.log(someone1)
//对象合并
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)
2.7箭头函数
// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var f3 = function(m,n) {
return m+n
}
//es6
var f4 = (m,n) => m+n
console.log(f4(4,5))
三. Vue入门
Vue.js 是一款流行的 JavaScript 前端框架,目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层,同时,它也能方便地获取数据更新,实现视图与模型的交互。
官方网站:Vue.js - 渐进式 JavaScript 框架 | Vue.js
3.1vue快速入门
创建文件夹vuejs,将vue.min.js引入文件夹
创建 hello.htm
<script src="vue.min.js"></script>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue'
}
})
</script>
3.2新建代码片段
文件 => 首选项 => 用户片段 => 新建全局代码片段文件:
vue-html.code-snippets 使用vuehtml即可使用
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
3.3vue基本语法
3.3.1 单向绑定v-bind
<script>
new Vue({
el: '#app',
data: {
msg:'color:green;'
}
})
</script>
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写冒号(:)
<div v-bind:style="msg">单向绑定</div>
<div :style="msg">单向绑定</div>
3.3.2双向判定
什么是双向数据绑定?
当数据发生变化的时候,视图也会跟着发生变化
数据模型发生了改变,会直接显示在页面上
当视图发生变化的时候,数据也会跟着同步变化
用户在页面上的修改,会自动同步到数据模型中去
:value是单向绑定的,v-model才是双向绑定
<div id="app">
{{keyword}}
<br/>
<input type="text" :value="keyword"/>
<br/>
<input type="text" v-model="keyword"/>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword:'尚硅谷'
}
})
</script>
3.3.3事件
使用 v-on 进行数件处理,v-on:click 表示处理鼠标点击事件,事件调用的方法定义在 vue 对象声明的 methods 节点中
v-on:click= 和@click两种写法
<div id="app">
<button v-on:click="show()">事件绑定1</button>
<button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
show() {
console.log("show.....")
}
}
})
</script>
3.3.4条件渲染
<div id="app">
<input type="checkbox" v-model="ok"/>
<br/>
<div v-if="ok">选中了</div>
<div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
3.3.5列表渲染
<div id="app">
<div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
<div v-for="(user,index) in userList">
{{index}} -- {{user.name}} -- {{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[ {"name":"lucy","age":20},{"name":"mary","age":30}]
}
})
</script>
3.3.6 实例生命周期
<script>
new Vue({
el: "#app",
data: {
msg: 'hello'
},
created(){
//页面渲染之前执行
//调试
debugger
console.log('create.....')
},
mounted(){
//页面渲染之后执行
console.log('mounted.....')
}
})
</script>
四.axios
axios的使用
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[]
},
created() { //在页面渲染之前执行
//调用方法,得到返回json数据
this.getList()
},
methods:{
getList() {
//使用axios方式ajax请求
axios.get("user.json")
.then(response => {//请求成功
//console.log(response)
this.userList = response.data.data.items
console.log(this.userList)
})
.catch(error => {
console.log(error)
}) //请求失败
}
}
})
</script>
user.json
{
"code":200,
"message":"成功",
"data":{
"items":[
{"name":"zjh","age":20},
{"name":"zjh","age":20},
{"name":"zjh","age":20}
]
}
}
四. Node.js
4.1 什么是Node.js
脱离浏览器环境也可以运行JavaScript,只要有JavaScript引擎就可以。
Node.js是一个基于Chrome V8引擎的JavaScript运行环境:即Node.js内置了Chrome的V8 引擎,可以在Node.js环境中直接运行JavaScript程序。
在Node.js中写JavaScript和在Chrome浏览器中写JavaScript基本没有什么不一样。哪里不一样呢?
Node.js没有浏览器API,即document,window的等。
加了许多Node.js 专属API,例如文件系统,进程,http功能。
4.2 Node.js有什么用
如果你想开发类似JavaWeb的简单的后端程序,那么学习Node.js是一个非常好的选择。
如果你想部署一些高性能的服务,那么学习Node.js也是一个非常好的选择。
通常他会被用来作一个BFF层,即 Backend For Frontend(服务于前端的后端),通俗的说是一个专门用于为前端业务提供数据的后端程序
4.3 BFF 解决什么问题
一个前端页面向 Service A、Service B 以及 Service C发送请求,不同的微服务返回的值用于渲染页面中不同的组件。此时,每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据,这个服务层叫做BFF。
手机、平板端、PC机等用户终端都需要向每个Service,例如Service A发送请求。对于同一个功能,不同的终端需要的数据格式和内容会有不同。此时 Service A 的一个接口,不能同时满足三个客户端的不同需求。我们可以在Service A中开发三个接口,也可以增加一个数据裁剪服务,将数据按照不同终端的不同要求进行裁剪,这个服务层叫做BFF。
BFF层的作用是让前端有能力自由组装后台数据,减少大量的业务沟通成本,加快业务的迭代速度。
无论是数据聚合还是数据剪裁,这类程序的特点是不需要太强大的服务器运算能力,但是对程序的灵活性有较高的要求,这两个特点都正好和Node.js的优势相吻合