MVC 上使用MVC的思想逐步重构代码最小知识原则使用模块化开发 #app1 - 计算器 #app2 - tab 切

主要内容

项目链接:mvc上

下文链接:mvc中

使用MVC的思想逐步重构代码
最小知识原则
使用模块化开发

#app1 - 计算器
#app2 - tab 切换
#app3 - div左右切换
#app4 - 鼠标移入移除

图示

动画.gif

项目初始化

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