從一場比賽開始大話JS面向對象

時間  2021-08-12
標籤 程序員 編程 markdown dom 函數 oop spa 3d code 欄目 JavaScript 简体版
原文   原文鏈接

前言：最近在看JS對象相關的東西，看到繼承那，想繼承到底有什麼用，就搜了一下，搜到了下面這個故事，而後突發奇想，想着能不能用JS實現一下呢，而後就有了下面這篇文章，我的以爲這篇文章重在啓發。程序員

需求故事參考連接：什麼是面向對象編程思想？編程

附註：文中面向對象的JS代碼並非基於面向對象編程，只是用了面向對象的思想。若是文中有錯誤或者寫的很差的地方，還請各位大佬指正，代碼寫的並不完美，大佬們也能夠作一次老過和阿對，再回過頭來看看本身平常寫代碼是老過的角色仍是阿對的角色仍是另外其它的角色。markdown

1.比賽背景

在一個軟件村裏dom

有一名資深「面向過程」程序員——老過函數

和一名「面向對象」信徒——阿對oop

同時受僱於一家挨踢店ui

有一天老闆突發奇想spa

決定讓這兩名程序員進行一次比賽3d

獲勝者將得到一個限量的code

360 度全自動按摩椅

編程比賽開始了

2.使用JS開始比賽

1.第一回合（需求1）

預告：第一回合，小試牛刀。

老過

// 面向過程思想 JS老過

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，假設全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    return totalPrice;
}
複製代碼

阿對

// 面向對象思想 JS阿對

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    return totalPrice;
}
複製代碼

第一回合老過和阿對居然寫出瞭如出一轍的代碼，看來是同一個培訓班出身啊，師出同門啊。

2.第二回合（需求2）

預告：第二回合，看誰能更勝一籌。

老過

老過微微一笑，很快在以前的代碼上加了一個判斷，便完成了老闆的需求，啪一下，很快啊。

// 面向過程思想 JS老過

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，假設全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // 假設七夕節是陽曆的1月1日啊
    // 由於農曆很差算，這裏從新定義一下七夕節
    if (getCurrentDate() === '1/1') {
        totalPrice = totalPrice * 0.77
    }
    return totalPrice;
}

// 如下均爲輔助方法
// 獲取當前日期方法
function getCurrentDate() {
    let date = new Date();
    return (date.getMonth() + 1) + '/' + date.getDate()
}
複製代碼

阿對

阿對眉頭一皺發現問題並不簡單，老闆這老少子一貫不講武德，各類新需求，看來我得防着點。

// 面向對象思想 JS阿對

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // 需求2：調用七夕打77折活動的函數
    totalPrice = tanabata(totalPrice);
    return totalPrice;
}
// 需求2：處理七夕打77折活動的函數
function tanabata(price) {
    if (getCurrentDate() === '1/1') {
        price = price * 0.77
    }
    return price;
}
// 如下均爲輔助方法
// 獲取當前日期方法
function getCurrentDate() {
    let date = new Date();
    return (date.getMonth() + 1) + '/' + date.getDate()
}
複製代碼

老過：

第二回合結束，老太小勝一籌，老過已經開始幻想本身未來，坐在按摩椅上的舒服日子了。然而此時老闆的心裏：這麼簡單就能讓大家拿走自動按摩椅，那我這老闆早就虧的坐公交車了，年輕人，too young too simple。

3.第三回合（需求3）

預告：第三回合，看阿對是否能扭轉乾坤，一改頹勢呢，讓咱們拭目以待。

老過

老過聽到新需求後，眉頭一皺，發現老闆果真不簡單，反手在羣裏吐槽起來。

吐槽歸吐槽

爲了按摩椅

只能繼續幹了

// 面向過程思想 JS老過

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，假設全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // 假設七夕節是陽曆的1月1日啊
    // 由於農曆很差算，這裏從新定義一下七夕節
    if (getCurrentDate() === '1/1') {
        totalPrice = totalPrice * 0.77
    } else if (getCurrentDate() === '1/2' && totalPrice >= 399) {
        // 處理中秋節滿減的判斷
        // 假設中秋節爲陽曆的1月2日啊
        // 由於農曆很差算，這裏從新定義一下中秋節
        totalPrice -= 100;
    } else if (getCurrentDate() === '1/3' && totalPrice <= 100 && randomNum(0, 9) === 0) {
        // 處理國慶節隨機免單
        // 假設國慶節爲陽曆的1月3日啊
        // 由於農曆很差算，這裏從新定義一下國慶節
        totalPrice = 0
    }
    return totalPrice;
}

// 如下均爲輔助方法
// 獲取當前日期方法
function getCurrentDate() {
    let date = new Date();
    return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成從minNum到maxNum的隨機數
function randomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
        default:
            return 0;
            break;
    }
}
複製代碼

看着愈來愈複雜的 totalPrice 函數

老過眉頭緊鎖他深知事情遠沒有結束

果真老闆的按摩椅是白嫖不了的

中秋和國慶一過

天知道老闆還會再提什麼天馬行空的需求，不管是新增或刪除代碼，在這個判斷過多的函數裏修改都是件不太愉快的事。爲了在一個很長的函數中找到須要修改的位置，「面向過程」使得老過不得不瀏覽大量與修改無關的代碼，當心翼翼地修改後，又要反覆確認不會影響其餘部分。

老過在心底裏默默地祈禱這個函數再也不須要修改

阿對

阿對看到老闆的新需求，微微一笑，果真不出我所料，老闆這老少子果真不講武德，幸虧我阿對也是有備而來。

// 面向對象思想 JS阿對

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // 需求2：調用七夕打77折活動的函數
    totalPrice = tanabata(totalPrice);
    // 需求3：調用中秋節國慶節活動的函數
    totalPrice = moonFestival(totalPrice);
    totalPrice = nationalDay(totalPrice);
    return totalPrice;
}
// 需求2：處理七夕打77折活動的函數
function tanabata(price) {
    if (getCurrentDate() === '1/1') {
        price = price * 0.77
    }
    return price;
}
// 需求3：處理中秋節滿減的函數
function moonFestival(price) {
    if (getCurrentDate() === '1/2' && price >= 399) {
        price -= 100;
    }
    return price;
}
// 處理國慶節隨機免單的函數
function nationalDay(price) {
    if (getCurrentDate() === '1/3' && price <= 100 && randomNum(0, 9) === 0) {
        price = 0;
    }
    return price;
}
// 如下均爲輔助方法
// 獲取當前日期方法
function getCurrentDate() {
    let date = new Date();
    return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成從minNum到maxNum的隨機數
function randomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
        default:
            return 0;
            break;
    }
}
複製代碼

「面向對象」讓阿對最喜歡的一點是

第三回合結束，老過開始有點疲於應對新的需求了，而阿對卻慢慢的開始成竹在胸了。

第四回合（需求4）

預告：第四回合，阿過與阿對開始決戰紫荊之巔，看誰能登上按摩椅寶座，比賽進入白熱化階段。

老過

// 面向過程思想 JS老過

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，假設全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 客人是否爲情侶
let customerCouple = true;
// 客人得到的禮品
let gifts = ['鮮花', '巧克力', '9.9元抵扣券'];
let prize = '無禮品';
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // 假設七夕節是陽曆的1月1日啊
    // 由於農曆很差算，這裏從新定義一下七夕節
    if (getCurrentDate() === '1/1' && customerCouple) {
        if (totalPrice >= 99) {
            prize = gifts[randomNum(0, 2)];
        }
        totalPrice = totalPrice * 0.77
    } else if (getCurrentDate() === '1/2' && totalPrice >= 399) {
        // 處理中秋節滿減的判斷
        // 假設中秋節爲陽曆的1月2日啊
        // 由於農曆很差算，這裏從新定義一下中秋節
        totalPrice -= 100;
    } else if (getCurrentDate() === '1/3' && totalPrice <= 100 && randomNum(0, 9) === 0) {
        // 處理國慶節隨機免單
        // 假設國慶節爲陽曆的1月3日啊
        // 由於農曆很差算，這裏從新定義一下國慶節
        totalPrice = 0
    }
    return totalPrice;
}

// 如下均爲輔助方法
// 獲取當前日期方法
function getCurrentDate() {
    let date = new Date();
    return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成從minNum到maxNum的隨機數
function randomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
        default:
            return 0;
            break;
    }
}
複製代碼

老過又修改了一下七夕節判斷相關的代碼，完成了需求，可是這何時是個頭啊，早晚寫出好幾百行的 totalPrice 函數。

阿對

活力滿滿，幹就完了，按摩椅豈不是非我阿對莫屬了。

// 面向對象思想 JS阿對

// 1.需求1
// 根據客人購買的商品單價和數量生成所購商品的價格
// 客人購買商品的數量
let goodsAmount = {
    '方便麪': 5,
    '火腿腸': 10,
    '牙刷': 2,
    '紙巾': 10
}
// 客人購買商品的單價，全部商品單價都是存在的
let goodsPrice = {
    '方便麪': 3,
    '火腿腸': 2,
    '牙刷': 3,
    '紙巾': 6
}
// 客人是否爲情侶
let customerCouple = true;
// 客人得到的禮品
let gifts = ['鮮花', '巧克力', '9.9元抵扣券'];
let prize = '無禮品';
// 求客人購買商品總價的函數
function totalPrice() {
    let totalPrice = Object.keys(goodsAmount).reduce((acc, cur) => {
        return acc += goodsPrice[cur] * goodsAmount[cur]
    }, 0);
    // 需求2：調用七夕打77折活動的函數
    totalPrice = tanabata(totalPrice);
    // 需求3：調用中秋節國慶節活動的函數
    totalPrice = moonFestival(totalPrice);
    totalPrice = nationalDay(totalPrice);
    return totalPrice;
}
// 需求2：處理七夕打77折活動的函數
function tanabata(price) {
    if (getCurrentDate() === '1/1') {
        price = price * 0.77
    }
    return price;
}
// 需求3：處理中秋節滿減的函數
function moonFestival(price) {
    if (getCurrentDate() === '1/2' && price >= 399) {
        price -= 100;
    }
    return price;
}
// 處理國慶節隨機免單的函數
function nationalDay(price) {
    if (getCurrentDate() === '1/3' && price <= 100 && randomNum(0, 9) === 0) {
        price = 0;
    }
    return price;
}
// 需求4：七夕節活動更改
// 不動之前的代碼，重寫七夕節活動的函數
function tanabata(price) {
    if (getCurrentDate() === '1/1' && customerCouple) {
        if (price >= 99) {
            prize = gifts[randomNum(0, 2)]
        }
        price = price * 0.77
    }
    return price;
}
// 如下均爲輔助方法
// 獲取當前日期方法
function getCurrentDate() {
    let date = new Date();
    return (date.getMonth() + 1) + '/' + date.getDate()
}
//生成從minNum到maxNum的隨機數
function randomNum(minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
        default:
            return 0;
            break;
    }
}
複製代碼

當老闆看完老過和阿對的代碼後

再次興奮地提出新需求時

老過頓時暈了過去......

比賽真是太焦灼了

3.大結局

一對敲代碼的難兄難弟，仍是幹不過精於算計的老闆啊，阿對嘀咕道：大意了，沒有閃，被老闆的傻兒子偷襲了，今後編程界也衍生出了面向CV編程的思想，阿對也建立了一個名爲面向 CV 編程天下第一的羣，交流平常CV心得。

最後贏得獎勵的是？

第三個參賽者

老闆的傻兒子

他徹底不會寫程序

但他使用 Ctrl+C，Ctrl+V

對阿對的代碼作了一個深拷貝。

4.收穫

日常年終總結都要說什麼今年有什麼收穫，那看完這篇文章你有什麼收穫呢？平常敲代碼的你是否就是老過和阿對呢？又或者說不會真有人是老闆的傻兒子吧（手動滑稽）😂😂😂😂😂？有一說一，我日常敲代碼基本上是老過+老闆傻兒子的結合體，因此說仍是當老闆好，不用敲代碼🤔🤔🤔🤔🤔，大家說呢？

完！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程