主要内容
- 使用MVC的思想逐步重构代码
- 最小知识原则
- 使用模块化开发
- #app1 - 计算器
- #app2 - tab 切换
- #app3 - div左右切换
- #app4 - 鼠标移入移除
图示
项目初始化
yarn init -y
yarn install //安装依赖
目录文件
mvc-1
├── package.json
├── src
│ ├── app1.css
│ ├── app1.js
│ ├── app2.css
│ ├── app2.js
│ ├── app3.css
│ ├── app3.js
│ ├── app4.css
│ ├── app4.js
│ ├── global.css
│ ├── index.html
│ ├── main.js
│ └── reset.css
└── yarn.lock
index
<body>
<div class="page">
<section id="app1">
<div class="output">
<span id="number">100</span>
</div>
<div class="actions">
<button id="add1">+1</button>
<button id="minus1">-1</button>
<button id="mul2">*2</button>
<button id="divide2">÷2</button>
</div>
</section>
<section id="app2">
<ol class="tab-bar">
<li><span>1111</span></li>
<li><span>2222</span></li>
</ol>
<ol class="tab-content">
<li>内容1</li>
<li>内容2</li>
</ol>
</section>
<section id="app3">
<div class="square"></div>
</section>
<section id="app4">
<div class="circle"></div>
</section>
</div>
<script src="main.js"></script>
</body>
</html>
mian.js
import "./reset.css";
import "./global.css";
import "./app1.js";
import "./app2.js";
import "./app3.js";
import "./app4.js";
#app1.js
import "./app1.css";
import $ from "jquery";
const $button1 = $("#add1");
const $button2 = $("#minus1");
const $button3 = $("#mul2");
const $button4 = $("#divide2");
const $number = $("#number");
const n = localStorage.getItem("n");
$number.text(n || 100);
$button1.on("click", () => {
let n = parseInt($number.text());
n += 1;
localStorage.setItem("n", n);
$number.text(n);
});
$button2.on("click", () => {
let n = parseInt($number.text());
n -= 1;
localStorage.setItem("n", n);
$number.text(n);
});
$button3.on("click", () => {
let n = parseInt($number.text());
n *= 2;
localStorage.setItem("n", n);
$number.text(n);
});
$button4.on("click", () => {
let n = parseInt($number.text());
n /= 2;
localStorage.setItem("n", n);
$number.text(n);
});
#app2.js
import "./app2.css";
import $ from "jquery";
const $tabBar = $("#app2 .tab-bar");
const $tabContent = $("#app2 .tab-content");
$tabBar.on("click", "li", e => {
const $li = $(e.currentTarget);
$li
.addClass("selected")
.siblings()
.removeClass("selected");
const index = $li.index();
$tabContent
.children()
.eq(index)
.addClass("active")
.siblings()
.removeClass("active");
});
// 触发一个起始事件
$tabBar.children().eq(0).trigger('click')
#app3.js
import $ from 'jquery'
import './app3.css'
const $square = $('#app3 .square')
$square.on('click', ()=>{
// 有就add 没有就remove
$square.toggleClass('active')
})
#app4.js
import $ from "jquery";
import "./app4.css";
const $circle = $('#app4 .circle')
$circle.on('mouseenter', ()=>{
$circle.addClass('active')
}).on('mouseleave', ()=>{
$circle.removeClass('active')
})
总结
这是起始状态, 后面会逐渐重构成mvc 技术点:
- 将每个app 分模块写, 有main.js 进行导入, 获得模块化
- 使用import 导入各个模块
- js里不要写css, 可以写个类在css里,然后addClass