前言
大家好 我是歌谣 今天继续延续上一节课程的编写 本次要说模块化 将html的文件分块拼装上去
目录结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算小案例</title>
</head>
<body>
<div class="calculator J_calculater">
</div>
</body>
</html>
</body>
</html>
index.js
import Calculator from "./Calculator";
;((doc)=>{
var oCalculator = document.getElementsByClassName("J_calculater")[0]
const init=()=>{
new Calculator(oCalculator).init()
}
init()
})(document)
caculator.js
import Compute from "./Compute"
import ResultComponent from "./Header";
import InputGroupComponent from "./Middle";
import BtnGroupComponent from "./Footer";
import {
trimSpace,
digitalize
} from "./tools"
@Compute
export default class Calculator {
constructor(el) {
this.name = "Calculator";
this.el = el
this.resultComponent = new ResultComponent()
this.inputGroupComponent = new InputGroupComponent()
this.btnGroupComponent = new BtnGroupComponent()
this.data = this.defineData()
console.log(this.data, "data is")
this.selectedIndex = 0
}
init() {
this.render()
this.bindEvent()
}
render() {
const oFrag = document.createDocumentFragment()
oFrag.append(this.resultComponent.tpl())
oFrag.append(this.inputGroupComponent.tpl())
oFrag.append(this.btnGroupComponent.tpl())
this.el.appendChild(oFrag)
}
bindEvent() {
const el = this.el
this.oResult = el.getElementsByClassName("result")[0];
this.oBtnGroup = el.getElementsByClassName("btn-group")[0];
this.oInputs = el.getElementsByClassName("num-input");
this.oBtns = this.oBtnGroup.getElementsByClassName('btn')
this.oBtnGroup.addEventListener("click", this.onBtnClick.bind(this), false)
this.oInputs[0].addEventListener('input', this.onInput.bind(this), false)
this.oInputs[1].addEventListener('input', this.onInput.bind(this), false)
}
onBtnClick(ev) {
const e = ev || window.event,
tar = e.target || e.srcElement,
tagName = tar.tagName.toLowerCase();
console.log(tagName)
if (tagName === 'button') {
const method = tar.getAttribute("data-method");
console.log(method, "method is")
this.data.method = method
this.setBtnDelected(tar)
// var fval = digitalize(trimSpace(this.oInputs[0].value));
// var sval = digitalize(trimSpace(this.oInputs[1].value));
// this.setResult(method, fval, sval)
}
}
onInput(e) {
var tar = e.target || e.srcElement;
var tagName = tar.tagName.toLowerCase();
var id = tar.getAttribute("data-id")
var val = digitalize(trimSpace(tar.value)) || 0
switch (id) {
case 'fVal':
this.data.fVal = val
break
case 'sVal':
this.data.sVal = val
break
}
}
defineData() {
let _obj = {
}
const _self = this;
var method = 'plus'
var fVal = 0
var sVal = 0
Object.defineProperties(_obj, {
method: {
get() {
return method;
},
set(newVal) {
method = newVal
_self.setResult(_self.data.method, _self.data.fVal, _self.data.sVal)
}
},
fVal: {
get() {
return fVal;
},
set(newVal) {
fVal = newVal
_self.setResult(_self.data.method, _self.data.fVal, _self.data.sVal)
}
},
sVal: {
get() {
return sVal;
},
set(newVal) {
sVal = newVal
_self.setResult(_self.data.method, _self.data.fVal, _self.data.sVal)
}
}
})
return _obj
}
setBtnDelected(target) {
this.oBtns[this.selectedIndex].className = 'btn'
this.selectedIndex = [].indexOf.call(this.oBtns, target)
this.oBtns[this.selectedIndex].className += ' selected'
}
setResult(method, fval, sval) {
console.log(method, fval, sval)
this.oResult.innerText = this[method](fval, sval)
}
}
compute.js
// export default class Compute{
// plus(a,b){
// return a+b;
// }
// minus(a,b){
// return a-b
// }
// mul(a,b){
// return a*b
// }
// div(a,b){
// return a/b
// }
// }
export default (target) => {
target.prototype.plus=function(a, b){
return a + b;
}
target.prototype.minus=function(a, b){
return a - b
}
target.prototype.mul=function(a, b){
return a * b
}
target.prototype.div=function(a, b){
return a / b
}
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
path = require("path")
module.exports = {
mode: 'development',
entry: {
index: path.resolve(__dirname, "./index.js")
},
output: {
path: path.resolve(__dirname + "/dist"),
filename: 'js/[name].js'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, "node_modules"),
},
{
test: /\.css$/,
use: [
'style_loader',
'css_loader'
]
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}
]
},
{
test: /\.tpl$/,
use: [
{
loader: 'ejs-loader',
options: {
esModule: false,
variable: 'data',
},
},
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, "./index.html"),
chunks: ['index'],
excludeChunks: ['node_modules']
})
],
devServer: {
open: true,
host: "localhost",
port: "3002"
}
}
tool.js
function trimSpace(str){
return str.replace(/\s+/g,'')
}
function digitalize(str){
return Number(str)||0
}
export {
trimSpace,
digitalize
}
.babelrc
{
"presets": ["env"],
"plugins": ["babel-plugin-transform-runtime","transform-decorators-legacy"]
}
运行结果