JS到VUE
以前给页面绑定数据是这样的
有多复杂,多不方便,显而易见。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>原始的网页内容</p>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
//index.js
let dom=document.getElementById('app');
dom.append("<div>append</div>"); //页面显示<div>append</div>,div未被转译
const div_box=document.createElement("div");
div_box.innerText='append';
dom.append(div_box); //页面显示append
const footer=document.createElement("div");
footer.innerText='footer';
dom.append(footer); //页面显示footer
加入面向对象模式,变成这样
<p>原始的网页内容</p>
<div id="app"></div>
<script src="./header.js"></script>
<script src="./footer.js"></script>
<script src="./index.js"></script>
//header.js
function Header() {
let dom=document.getElementById('app');
const div_box=document.createElement("div");
div_box.innerText='header';
dom.append(div_box);
}
//footer.js
function Footer() {
let dom=document.getElementById('app');
const div_box=document.createElement("div");
div_box.innerText='footer';
dom.append(div_box);
}
index.js
let dom=document.getElementById('app'); //这句重复了,可以删除
new Header();
new Footer();
面向对象的优点当然很多,但也有如下缺点:
1.引入N个JS文件,就会有N个http请求,会导致加载缓慢
2.当从header.js中看不出引用关系
3.JS文件引入顺序等导致错误
以上缺点怎么解决?改用ES moudule方式
webpack登场
改用ES moudule方式后,只引入1个JS,不存在顺序颠倒,依赖关系直观明了;
//index.js
import Header from './header'
import Footer from './footer'
new Header();
new Footer();
//header.js
function Header() {
let dom=document.getElementById('app');
const div_box=document.createElement("div");
div_box.innerText='header';
dom.append(div_box);
}
export default Header;
但一运行都报错了
Uncaught SyntaxError: Cannot use import statement outside a module
因为浏览器不能识别import。那怎么办?webpack出现了。
npm init 一路回车
npm install wabpack-cli --save-dev
npm install webpack --save
npx webpack index.js //打包index.js
打包成功后多了dist目录下main.js
把原来的index.html下引入的index.js改为main.js就可以运行成功了
注意header和footer.js文件中引出要export default Footer;
修改webpack配置文件
1、js文件统一放在src目录下
2、修改webpack配置主入口文件位置
Webpack到VUE
Webpack偏向于应用打包的定位不同,rollup更专注于Javascript类库打包。vue用的是rollup打包。但大原理是一样的。
1、import 模块方式引入JS
2、loader打包各种css,img,pdf,自定义文件名如vue等
3、plugin生成html文件,删除原打包目录等
4、devserver 服务器,监听并编译,修改代码自动刷新页面,自动打开浏览器
5、可自定义devserver服务器
加入flow到VUE
Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查。
Flow 的类型检查分成 2 种方式:
类型推断: 通过变量的使用上下文来推断出变量类型,然后根据这些推断来检查类型。
类型注释: 事先注释好我们期待的类型,Flow 会基于这些注释来判断。