ES6模块化开发计算器小案例

最新推荐文章于 2024-09-03 17:48:13 发布

前端歌谣

最新推荐文章于 2024-09-03 17:48:13 发布

阅读量26

点赞数

文章标签： es6 javascript 前端 vue.js 开发语言

原文链接：https://mp.weixin.qq.com/s?__biz=MzIzODE1OTUwMw==&mid=2247487895&idx=1&sn=4b0e7efae802331fa52d532344c5ff44&chksm=e93cc277de4b4b61580af23d374edd957fe90d10cb85121bb6d5dec5858763479d8fb850f7fc&scene=126&sessionid=0

版权

前言

大家好我是歌谣今天继续延续上一节课程的编写本次要说模块化将html的文件分块拼装上去

目录结构

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()
    }
    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.oBtnGroup.addEventListener("click", this.onBtnClick.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")
            var fval = digitalize(trimSpace(this.oInputs[0].value));
            var sval = digitalize(trimSpace(this.oInputs[1].value));
            this.setResult(method, fval, sval)
        }
    }
    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
    }
}

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)

局部tpl文件

<button data-method="plus">+</button>
 <button data-method="minus">-</button>
 <button data-method="mul">*</button>
<button data-method="div">/</button>

配合tpl文件的js文件

import tpl from "./index.tpl"




export default class BtnGroupComponent{
    constructor(){
        this.name="BtnGroupComponent"
    }
    tpl(){
        const oDiv=document.createElement("div")
        oDiv.className='btn-group'
        oDiv.innerHTML=tpl()
        return oDiv
    }
}

依赖配置

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: [
                'style_loader',
                'css_loader',
                'scss-loader'
            ]
        },
        {
            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"
    }
}

运行结果

点击上方蓝字关注我们

下方查看历史文章

ES6模块化开发计算器小案例续

ES5计算器小案例

原型和原型链深入

前端歌谣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6模块化开发计算器小案例

前言大家好我是歌谣今天继续延续上一节课程的编写本次要说模块化将html的文件分块拼装上去目录结构caculator.jsimport Compute from "./Compute"import ResultComponent from "./Header";import InputGroupComponent from "./Middle";import BtnGroup...
复制链接

扫一扫