后端开发必须要掌握的前端知识
文章目录
一、ECMAScript 6
1、 简介
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
简单来说：es6是一套标准，一套规范，JavaScript很好的遵循了这套规范。
2、基本语法
ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
2.1、let声明变量
创建 let.html
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a = 0
let b = 1
}
console.log(a) // 0
console.log(b) // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
2.2、const声明常量（只读变量）
创建 const.html
// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration
2.3、解构赋值
-
解构赋值是对赋值运算符的扩展。
-
是一种针对
数组或者对象进行模式匹配，然后对其中的变量进行赋值。 -
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
创建 解构赋值.html
//1、数组解构
// 传统
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: 'hao', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } = user//注意：解构的变量必须是user中的属性
console.log(name, age)
2.4、模板字符串
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
创建 模板字符串.html
// 1、多行字符串
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?
------------------------------------------------
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
------------------------------------------------
// 3、字符串中调用函数
function f(){
return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2); // Game start,have fun!
2.5、声明对象简写
创建 声明对象简写.html
const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}
2.6、定义方法简写
创建 定义方法简写.html
// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"
2.7、对象拓展运算符
拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
创建 对象拓展运算符.html
// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
-----------------------------------------------
// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}
2.8、箭头函数
箭头函数提供了一种更加简洁的函数书写方式,多用于匿名函数的定义。基本语法是：
参数 => 函数体
创建 箭头函数.html
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
-----------------------------------------------
// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b
二、Vue
Vue是一套用于构建用户界面的渐进式框架。
官网传送门：Vue.js - 渐进式 JavaScript 框架
1、入门案例
创建 demo.html
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {{}} 插值表达式，绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
-
这就是
声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 -
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作
小技巧：
在vs code中创建代码片段:
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets
注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格
{
"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"
}
}
2、基本语法
2.1、基本数据渲染和指令
v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
创建 01-基本数据渲染和指令.html
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}
------------------------------------------------
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">
{{content}}
</h1>
2.2、双向数据绑定
双向数据绑定和单向数据绑定：使用v-model进行双向数据绑定
data: {
searchMap:{
keyWord: 'hao'
}
}
---------------------------------------------
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>
2.3、事件
**需求：**点击查询按钮，按照输入框中输入的内容查找相关信息
在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法
创建 03-事件.html
data: {
searchMap:{
keyWord: 'hao'
},
//查询结果
result: {}
},
methods:{
search(){
console.log('search')
//TODO
}
}
html中增加 button 和 p
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>
<p>您要查询的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
完善search方法
search(){
console.log('search');
this.result = {
"title":"hao",
"site":"http://www.hao.com"
}
}
简写
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>
2.4、修饰符
修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为
data: {
user: {}
}
--------------------------------------------------
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>
--------------------------------------------------
methods: {
onSubmit() {
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}
2.5、条件渲染
创建 05-条件渲染.html
v-if：条件指令
data: {
ok: false
}
注意：单个复选框绑定到布尔值
<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>
v-show：条件指令
使用v-show完成和上面相同的功能
<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。- 相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 - 一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
2.6、列表渲染
v-for：列表循环指令
创建 06-列表渲染.html
例1：简单的列表渲染
<!-- 1、简单的列表渲染 -->
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
<!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>
例2：遍历数据列表
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
<!-- 2、遍历数据列表 -->
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
3、组件
-
组件（Component）是 Vue.js 最强大的功能之一。
-
组件可以扩展 HTML 元素，封装可重用的代码。
-
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
3.1、局部组件
定义组件：
var app = new Vue({
el: '#app',
// 定义局部组件，这里可以定义多个局部组件
components: {
//组件的名字
'Navbar': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
使用组件：
<div id="app">
<Navbar></Navbar>
</div>
3.2、全局组件
定义全局组件：components/Navbar.js
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app'
})
</script>
4、实例生命周期
创建 03-vue实例的生命周期.html
data: {
message: '床前明月光'
},
methods: {
show() {
console.log('执行show方法')
},
update() {
this.message = '玻璃好上霜'
}
}
<button @click="update">update</button>
<h3 id="h3">{{ message }}</h3>
分析生命周期相关方法的执行时机
//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
console.log(this.message) //undefined
this.show() //TypeError: this.show is not a function
// beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法(重要)
console.log(this.message) //床前明月光
this.show() //执行show方法
// created执行时，data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
console.log(document.getElementById('h3').innerText) //{{ message }}
// beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法（重要）
console.log(document.getElementById('h3').innerText) //床前明月光
// 内存中的模板已经渲染到页面，用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
console.log('界面显示的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 message 数据是：' + this.message)
// beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
console.log('界面显示的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 message 数据是：' + this.message)
// updated执行时，内存中的数据已更新，并且页面已经被渲染
}
5、路由（导航栏）
-
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
-
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
-
Vue.js 路由需要载入 vue-router 库
5.1、引入js
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
5.2、编写html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
5.3、编写js
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>
6、axios
axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
- 在浏览器中可以帮助我们完成 ajax请求的发送
- 在node.js中可以向远程接口发送请求
应用场景：
获取数据
第一步：创建html 页面，引入js文件，包含两个js文件
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
第二步： 编写axios 代码
var app = new Vue({
el: '#app',
data: {
memberList: []//数组
},
created() {//created执行时，data 和 methods 都已经被初始化好了
this.getList()//调用方法
},
methods: {
getList(id) {
//vm = this
axios.get('http://localhost:8081/admin/ucenter/member')
.then(response => {
console.log(response)
this.memberList = response.data.data.items
})
.catch(error => {
console.log(error)
})
}
}
})
控制台查看输出
注意：测试时需要开启后端服务器，并且后端开启跨域访问权限
显示数据
<div id="app">
<table>
<tr>
<td>id</td>
<td>姓名</td>
</tr>
<tr v-for="item in memberList">
<td>{{item.memberId}}</td>
<td>{{item.nickname}}</td>
</td>
</tr>
</table>
</div>
7、element-ui
-
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
创建 06-element-ui.html
7.1、引入css
<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
7.2、引入js
<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>
7.3、编写html
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
关于.sync的扩展阅读
https://www.jianshu.com/p/d42c508ea9de
7.4、编写js
<script>
new Vue({
el: '#app',
data: function () {//定义Vue中data的另一种方式
return { visible: false }
}
})
</script>
测试
三、Node
1.简介
1.1、Node.js是什么
-
简单的说 Node.js 就是运行在服务端的 JavaScript。
-
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
1.2、能干嘛
-
如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。
-
Node.js 是运行在服务端的 JavaScript
-
如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。
1.3、去哪下载
官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
安装，查看版本：node -v
1.4、怎么用
2、快速入门
创建 01.js
console.log('Hello Node.js')
进入到程序所在的目录，输入
node 01.js
查看结果：
四、NPM包管理器
1、NPM是什么
- NPM全称Node Package Manager，是全球最大的模块生态系统，里面所有的模块都是开源免费的；
- 是Node.js的包管理工具，相当于后端的Maven 。
- 管理前端js依赖，联网下载js依赖，比如jquery
2、NPM工具的安装位置
-
我们通过npm 可以很方便地下载js库，管理前端工程。
-
Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules
- 在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
3、使用npm管理项目
3.1、npm项目初始化操作
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
---------------------------------------------------------
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y
3.2、修改npm镜像
使用淘宝 NPM 镜像 http://npm.taobao.org/
设置镜像地址：
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
3.3、npm 下载js 依赖
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack
3.4、其它命令
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
五、Babel
1、是什么
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。
2、去哪下
安装命令行转码工具
npm install --global babel-cli
#查看是否安装成功
babel --version
3、Babel的使用
3.1、初始化项目
npm init -y
3.2、创建文件
src/example.js
下面是一段ES6代码：
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
3.3、配置 .babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
{
"presets": [],
"plugins": []
}
presets字段设定转码规则，将es2015规则加入 .babelrc：
{
"presets": ["es2015"],
"plugins": []
}
3.4、安装转码器
npm install --save-dev babel-preset-es2015
3.5、转码
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2
六、模块化
1、什么是模块化开发
传统非模块化开发有如下的缺点：
- 命名冲突
- 文件依赖
模块化规范：
- CommonJS模块化规范
- ES6模块化规范
2、CommonJS模块化规范
2.1、导出模块
创建 common-js模块化/四则运算.js
// 定义成员：
const sum = function(a,b){
return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
return parseInt(a) - parseInt(b)
}
const multiply = function(a,b){
return parseInt(a) * parseInt(b)
}
const divide = function(a,b){
return parseInt(a) / parseInt(b)
}
导出模块中的成员
// 导出成员：
module.exports = {
sum: sum,
subtract: subtract,
multiply: multiply,
divide: divide
}
-----------------------------------------------------
//简写
module.exports = {
sum,
subtract,
multiply,
divide
}
2.2、导入模块
创建 common-js模块化/引入模块.js
//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const result1 = m.sum(1, 2)
const result2 = m.subtract(1, 2)
console.log(result1, result2)
2.3、运行程序
node common-js模块化/引入模块.js
CommonJS使用 exports 和require 来导出、导入模块。
3、ES6模块化规范
ES6使用 export 和 import 来导出、导入模块。
3.1、导出模块
创建 es6模块化/userApi.js
export function getList() {
console.log('获取数据列表')
}
export function save() {
console.log('保存数据')
}
3.2、导入模块
创建 es6模块化/userComponent.js
//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()
3.3、运行程序
node es6模块化-dist/userComponent.js
注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
4、ES6模块化的另一种写法
4.1、导出模块
创建 es6模块化/userApi2.js
export default {
getList() {
console.log('获取数据列表2')
},
save() {
console.log('保存数据2')
}
}
4.2、导入模块
import user from "./userApi2.js"
user.getList()
user.save()
七、Webpack
1、什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
2、Webpack安装
全局安装
npm install -g webpack webpack-cli
------------------------------------
//查看版本号
webpack -v
3、初始化项目
3.1、创建webpack文件夹
进入webpack目录，执行命令
npm init -y
3.2、创建src文件夹
3.3、src下创建common.js
exports.info = function (str) {
document.write(str);
}
3.4、src下创建utils.js
exports.add = function (a, b) {
return a + b;
}
3.5、src下创建main.js
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));
4、创建webPack配置信息，配置打包信息
4.1、webpack目录下创建配置文件webpack.config.js
以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
4.2、命令行执行编译命令
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
4.3、webpack目录下创建index.html
//引用bundle.js
<body>
<script src="dist/bundle.js"></script>
</body>
浏览器中查看
5、CSS打包
5.1、安装style-loader和 css-loader
-
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
-
Loader 可以理解为是模块和资源的转换器。
-
首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader
5.2、修改webpack.config.js
const path = require("path"); //Node.js内置模块
module.exports = {
entry:'./src/main.js',//配置入口文件
output:{
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出文件
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
5.3、在src文件夹创建style.css
body{
background:pink;
}
5.4、修改main.js
在第一行引入style.css
require('./style.css');
浏览器中查看
1804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
