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

最新推荐文章于 2024-07-25 15:19:10 发布
最新推荐文章于 2024-07-25 15:19:10 发布
阅读量46 收藏
点赞数
文章标签： es6 前端 ecmascript 开发语言 javascript
原文链接：https://mp.weixin.qq.com/s?__biz=MzIzODE1OTUwMw==&mid=2247487876&idx=1&sn=a8c9768c160f7832ea76ffde18781aeb&chksm=e93cc264de4b4b722d530c90d9cec745db3a031427a6c101cfeb12015e1f5852ec68f14ba7ca&scene=126&sessionid=0
版权

 前言

f96cd2e378735c53f0bcdf652ff592fa.png

大家好 我是歌谣 接着上节webpack进行数据得一个说明

  index.html

a5c1a997e3baf90611c6c8ddb4e0ec96.png

<!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">
            <p>结果:<span class="result">0</span></p>
            <div class="input_wrap">
                <input type="text" value="0" class="num-input" placeholder="第一个数字"/>
                <input type="text" value="0" class="num-input" placeholder="第二个数字"/>
            </div>
            <div class="btn-group">
                <button data-method="plus">+</button>
                <button data-method="minus">-</button>
                <button data-method="mul">*</button>
                <button data-method="div">/</button>
            </div>
        </div>
    </body>
    <script type="module" src="./index.js"></script>
    </html>
</body>
</html>

index.js

848334c8df894f7c051ad96ec31dd72b.png

import Calculator from "./Calculator";
;((doc)=>{
    var oCalculator = document.getElementsByClassName("J_calculater")[0]
    const init=()=>{
        new Calculator(oCalculator).init()
    }
    init()
})(document)

 calculator.js

f6cc20d1d72a11b6e718bbc84544fc80.png

export default class Calculator {
    constructor(el) {
        this.name = "Calculator"
        this.oResult = el.getElementsByClassName("result")[0]
        this.oBtnGroup = el.getElementsByClassName("btn-group")[0]
        this.oInputs = el.getElementsByClassName("num-input")
    }
    init() {
        this.bindEvent()
    }
    bindEvent() {
        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");
               var fval = Number(this.oInputs[0].value.replace(/\s+/g, ''))||0;
               var sval = Number(this.oInputs[1].value.replace(/\s+/g, ''))||0;
                switch (method) {
                    case 'plus':
                       this.oResult.innerText=fval+sval
                        break;
                    case 'minus':
                        this.oResult.innerText=fval-sval
                        break;
                    case 'mul':
                        this.oResult.innerText=fval*sval
                        break;
                    case 'div':
                        this.oResult.innerText=fval/sval
                        break;
                    default:
                        break
                }
        }
    }
}

 运行结果

f82dd5eff3540242057010da1932fbaf.png

1d597cf16ddeb586b2e8069d4b1c4b0b.png

355a0b88fb6837a0ae1f3a644d6c23d4.png

b1a04d59fddcfd1853bce2924dc793c8.png

07728e42f48375f6ac4ce5599e9d1c79.png

 变化1

829539765a9949002723b8f645a400ba.png

  caculater.js

c2f72ae37fdcbe9f9e23b3ce0f86d48a.png

import Compute from "./Compute"
export default class Calculator extends Compute {
    constructor(el) {
        super()
        this.name = "Calculator"
        this.oResult = el.getElementsByClassName("result")[0]
        this.oBtnGroup = el.getElementsByClassName("btn-group")[0]
        this.oInputs = el.getElementsByClassName("num-input")
    }
    init() {
        this.bindEvent()
    }
    bindEvent() {
        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 = Number(this.oInputs[0].value.replace(/\s+/g, '')) || 0;
            var sval = Number(this.oInputs[1].value.replace(/\s+/g, '')) || 0;
            this.setResult(method, fval, sval)
        }
    }
    setResult(method, fval, sval) {
        console.log(method, fval, sval)
        this.oResult.innerText = this[method](fval, sval)
    }
}

computed.js

e604723f9371aa908ff5a01141a53043.png

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

运行结果

2f260710a197ae5be55d50422d2c4d18.png

01c66cae5d11e0083092ea3de9f0439e.png

92e8061abf905f1f22e0f4f88b47d448.png

 变化二装饰器模式

8880cf17937fc4d6ed8d1ccfba92ed50.png

 配置

8072dfcd1f97d01264b85b9c876abc4c.png

{
    "presets": ["env"],
    "plugins": ["babel-plugin-transform-runtime","transform-decorators-legacy"]
}

 Caculator.js

d1e18014ca362753b5c5020014271747.png

import Compute from "./Compute"
@Compute
export default class Calculator {
    constructor(el) {
        this.name = "Calculator";
        this.oResult = el.getElementsByClassName("result")[0];
        this.oBtnGroup = el.getElementsByClassName("btn-group")[0];
        this.oInputs = el.getElementsByClassName("num-input");
    }
    init() {
        this.bindEvent()
    }
    bindEvent() {
        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 = Number(this.oInputs[0].value.replace(/\s+/g, '')) || 0;
            var sval = Number(this.oInputs[1].value.replace(/\s+/g, '')) || 0;
            this.setResult(method, fval, sval)
        }
    }
    setResult(method, fval, sval) {
        console.log(method, fval, sval)
        this.oResult.innerText = this[method](fval, sval)
    }
}

 Computed.js

3f0052f2aa8fc862be9daf0ec5d19dd3.png

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.js

f00c4bfb85a9b27fe663d710a5cfafc2.png

import Calculator from "./Calculator";
;((doc)=>{
    var oCalculator = document.getElementsByClassName("J_calculater")[0]
    const init=()=>{
        new Calculator(oCalculator).init()
    }
    init()
})(document)

 运行结果

ab65d4412faf1645a878572c5eb0902f.png

898303a0ac417d98d91dbb068ede3dc3.png

 最终结构目录

f6649f1b9c8fe4b418a848a5881c1e4a.png

344c29c987f6ee6c2a0a17b0ef8a4f2c.png

 tool.js

a9165150c332bdec5483db0538c8690c.png

<!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">
            <p>结果:<span class="result">0</span></p>
            <div class="input_wrap">
                <input type="text" value="0" class="num-input" placeholder="第一个数字"/>
                <input type="text" value="0" class="num-input" placeholder="第二个数字"/>
            </div>
            <div class="btn-group">
                <button data-method="plus">+</button>
                <button data-method="minus">-</button>
                <button data-method="mul">*</button>
                <button data-method="div">/</button>
            </div>
        </div>
    </body>
    
    </html>
</body>
</html>

 index.js

f6db719d02d39577d382ea862f58caa4.png

import Calculator from "./Calculator";
;((doc)=>{
    var oCalculator = document.getElementsByClassName("J_calculater")[0]
    const init=()=>{
        new Calculator(oCalculator).init()
    }
    init()
})(document)

 computed.js

1f95e45809b78b75068b4e53dcd0730b.png

// 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
    }
}

 caculator.js

60db2fb48dda1b4c3cafbab80f0a7813.png

import Compute from "./Compute"
import {
    trimSpace,
    digitalize
} from "./tools"
@Compute
export default class Calculator {
    constructor(el) {
        this.name = "Calculator";
        this.oResult = el.getElementsByClassName("result")[0];
        this.oBtnGroup = el.getElementsByClassName("btn-group")[0];
        this.oInputs = el.getElementsByClassName("num-input");
    }
    init() {
        this.bindEvent()
    }
    bindEvent() {
        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)
    }
}

装饰器配置.babelrc

0700b4163b8727804a8254a4f4f3c0a9.png

{
    "presets": ["env"],
    "plugins": ["babel-plugin-transform-runtime","transform-decorators-legacy"]
}

 依赖

13f9ea5d30c0d09a29e11ce68a098ee4.png

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --config webpack.config.js",
    "webpack":"webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^6.8.1",
    "ejs-loader": "^0.5.0",
    "html-webpack-plugin": "^5.5.3",
    "node-sass": "^9.0.0",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

 运行结果

394556509c880f006145f9f2a4f0e70d.png

6155786aed6480e1a15141822e3235be.png

b4c1ffef686aa8467b33e2d291a988e6.png

点击上方 蓝字 关注我们

下方查看历史文章

75c86c1fc84589d476841bc9ca5765e8.png

ES5计算器小案例

原型和原型链深入

原型和原型链

构造函数和实例化原理

构造函数和实例化

前端歌谣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-reactantdmobilewebpack房贷计算器
08-14
在房贷计算器项目中，Webpack会处理React的JSX语法，转换ES6+的特性，如箭头函数和解构赋值，并将CSS、图片等资源打包。通过配置Webpack，我们可以实现代码分割，优化首屏加载速度，还可以利用热模块替换（HMR）进行...
ReactCalc:基于W10计算器的React内置计算器
05-14
此外，可能还会使用到现代JavaScript库或工具，如Babel用于转译ES6+代码，Webpack或Parcel用于模块打包，以及 ESLint进行代码质量检查。 在项目文件结构中，“ReactCalc-master”很可能包含了以下部分： 1. `src`...
前端歌谣-第叁拾肆课-ES6模块化开发计算器小案例续
qq_41632427的博客
11-21 25
大家好 我是歌谣 接着上节webpack进行数据得一个说明。
ES6模块化开发计算器小案例
qq_41632427的博客
11-14 24
前言大家好 我是歌谣 今天继续延续上一节课程的编写 本次要说模块化 将html的文件分块拼装上去目录结构caculator.jsimport Compute from "./Compute" import ResultComponent from "./Header"; import InputGroupComponent from "./Middle"; import BtnGroup...
ES6模块化开发计算器
qq_41632427的博客
11-17 28
前言大家好 我是歌谣 今天继续延续上一节课程的编写 本次要说模块化 将html的文件分块拼装上去目录结构 caculator.jsimport Compute from "./Compute" import ResultComponent from "./Header"; import InputGroupComponent from "./Middle"; import BtnG...
JavaScript中的模块化（Modules）及其导入导出
热门推荐
官方推荐
07-17 1万+
JavaScript中的模块化（Modules）及其导入导出
JSCalculator:一个界面简单的科学计算器
06-22
为了保持代码的可读性和维护性，JSCalculator可能采用了模块化的设计。这可能涉及到使用立即执行函数表达式（IIFE）、ES6的模块系统或CommonJS模块规范。 ### 十、部署与应用 完成的JSCalculator可以通过将HTML、...
源代码：网站制作高仿苹果计算器.rar
09-24
- 可能使用模块化技术，如CommonJS或ES6的import/export，来分隔功能和逻辑。 综上所述，这个项目涵盖了网页开发的多个核心方面，包括HTML布局、CSS样式设计、JavaScript编程以及用户体验设计。通过研究这个源代码...
完美版JS计算器--内置文档说明
11-27
9. **模块化**：为了保持代码的清晰和可维护性，可能采用了模块化设计，如使用ES6的import和export。 最后，文档说明将提供对上述技术的详细解释，包括如何使用代码、如何调试以及可能遇到的问题解决方案。这对于...
ES6 class 类
分享学习网络的点点滴滴
07-24 329
【代码】ES6 class 类。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 799
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 991
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 354
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 584
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 275
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 226
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
通过不同方式在 Vue 3 中传递路由参数
最新发布
点点滴滴
07-25 545
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
前端学习1——自学习梳理
qq_63125992的博客
07-24 326
【代码】前端学习1——自学习梳理。
es6模块化案例下载
08-26
ES6模块化的案例下载可以通过以下步骤进行： 1. 首先，在网上搜索并找到一个合适的ES6模块化的案例，确保该案例是符合你的需求的。 2. 下载案例文件。一般来说，案例会以一个压缩文件的形式提供下载，如.zip或.tar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值