以前给页面绑定数据是这样的
有多复杂，多不方便，显而易见。
<!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 会基于这些注释来判断。
网友评论