前端歌谣-第叁拾捌课-ES6模块化开发计算器小案例最终优化defineProperty和proxy
  Fuy6dnbn2ffz 2023年12月23日 12 0

49/100

发布文章

前端歌谣-第叁拾捌课-ES6模块化开发计算器小案例最终优化defineProperty和proxy_html

加粗

斜体

标题

删除线

无序

有序

待办

引用

代码块

运行代码

资源绑定

图片

视频

表格

超链接

投票

导入

导出

保存

撤销

重做

历史

new

模版

使用富文本编辑器

目录

创作助手

语法说明

# 前言

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

# 目录结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/7f47e23c56714c4e8e86e14e31515234.png)
# index.html

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" cnotallow="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" cnotallow="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"]
}
```

# 运行结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/55b01cc2f47948cb98dedef50d6199b9.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/acb63869fbee4fb29d11a14825bbf650.png)

前言

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

目录结构

前端歌谣-第叁拾捌课-ES6模块化开发计算器小案例最终优化defineProperty和proxy_插入图片_02

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"]
}

运行结果

前端歌谣-第叁拾捌课-ES6模块化开发计算器小案例最终优化defineProperty和proxy_css_03


前端歌谣-第叁拾捌课-ES6模块化开发计算器小案例最终优化defineProperty和proxy_插入图片_04

Markdown 已选中 4931 字数 305 行数 当前行 305, 当前列 0

HTML 4644 字数 265 段落

采集 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2023年12月23日 0

暂无评论

推荐阅读
  iFlC2TQwmEmX   2023年12月23日   53   0   0 htmlurljQueryhtmljQueryurl
  PQopDDLXkGHB   2023年12月23日   13   0   0 Vue缩进可选值cssVue可选值css缩进
  SuVXIKXQi51s   2023年12月23日   12   0   0 htmljQuery加载html加载jQuery
  F5MM6ELZe4VV   2023年12月23日   8   0   0 html双击事件双击事件jQueryhtmljQuery
  Dk8XksB4KnJY   2023年12月23日   16   0   0 html标签页jQuery标签页htmljQuery
  NHaurzrhyr04   2023年12月23日   63   0   0 htmljQueryhtmljQuery
  ejdQbmcNduLw   2023年12月23日   17   0   0 node.jscss模块化模块化es6CSSWebpackWebpackNode.jses6
  G5G9kTkvHDi8   2023年12月23日   10   0   0 字符串html字符串html开发语言正则表达式javascriptJavaScript开发语言正则表达式
  BEOpup9HILHT   2023年12月23日   40   0   0 htmljQueryhtmljQuery
  rvK6MEy2nX9x   2023年12月23日   51   0   0 html点击事件点击事件jQueryhtmljQuery
  Eab8PqVrV6ZI   2023年12月23日   18   0   0 插槽css前端javascriptJavaScriptCSS数据共享数据共享插槽前端
  QtikZq7rxZYL   2023年12月23日   92   0   0 html示例代码示例代码jQueryhtmljQuery
  878tGgGE4gkv   2023年12月23日   65   0   0 html点击事件点击事件jQueryhtmljQuery
  7YynnRRFCsyP   2023年12月23日   34   0   0 前端开发html前端开发jQueryhtmljQuery
  s2pvW3BZ98qa   2023年12月23日   16   0   0 htmljQuery数据数据htmljQuery
  XSukm9cU0gkT   2023年12月23日   18   0   0 html代码示例代码示例jQueryhtmljQuery
  Fuy6dnbn2ffz   2023年12月23日   15   0   0 装饰器模式数据htmlhtml装饰器模式数据
  vbyzBTPBnJJV   2023年12月23日   9   0   0 htmljQueryhtmljQuery
Fuy6dnbn2ffz
Fuy6dnbn2ffz
作者其他文章 更多
前端歌谣-第叁拾肆课-ES6模块化开发计算器小案例续

2023-12-23

前端歌谣-第叁拾伍课歌谣-v2+ele笔记记录创建项目流程

2023-12-23

前端歌谣-第叁拾柒课-ES6模块化开发计算器小案例下

2023-12-23

前端歌谣-第叁拾捌课-ES6模块化开发计算器小案例最终优化defineProperty和proxy

2023-12-23

前端歌谣-第五拾一课-node之http模块之stream流

2023-12-11

前端歌谣-第五十课-node之http模块之fs模块(续)

2023-12-11

前端歌谣的刷题之路-第一百二十一题-计数

2023-12-11

前端歌谣的刷题之路-第一百二十二题-去除重复元素

2023-12-11

前端歌谣-第四拾九课-node之http模块之fs模块

2023-12-10

前端歌谣-第四拾捌课-node之http模块之event模块

2023-12-10

最新推荐 更多
一个简洁、干净的中后台管理模板

2024-04-27

VUE知识体系、VUE面试题

2024-04-27

一文搞懂drag&drop浏览器拖放功能的实现

2024-04-27

探索 DTD 在 XML 中的作用及解析：深入理解文档类型定义

2024-04-27

uView（u-collapse）折叠 展开 高度问题 无法撑开 nextTick

2024-04-26

vue3 快速入门系列 —— 状态管理 pinia

2024-04-26

a-textarea(textarea)出现模糊问题的可能解决方案

2024-04-25

Angular 17+ 高级教程 – Angular 的局限 の Query Elements

2024-04-24

lodash已死？radash最全使用介绍（附源码说明）—— Array方法篇（4）

2024-04-24

Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册

2024-04-23

不到200行用Vue实现类似Swiper.js的轮播组件

2024-04-23

面试官：在原生input上面使用v-model和组件上面使用有什么区别？

2024-04-23

怎么样零代码零成本搭建个人网站？

2024-04-22

vue3 快速入门系列 —— 其他API

2024-04-22

前端如何防止接口重复提交

2024-04-22

主题捣鼓日记

2024-04-22

结对编码-软件开发与创新课程设计

2024-04-22

next.js app目录 i18n国际化简单实现

2024-04-21

Angular 17+ 高级教程 – 学以致用

2024-04-19

Angular 17+ 高级教程 – 盘点 Angular v14 到 v17 的重大改变

2024-04-19

常用标签
数据数据数据java数据linuxlinuxpythonCentOSredis区块链技术区块链字符串MySQL资讯信息系统项目管理mysql教程JavaMySQLpython