Wvv_ 2019-01-03 14:53 采纳率: 100%
浏览 583
已采纳

怎么将面向过程的JS代码改写成面向对象的JS代码?

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="style/shopping.css">
    <script type="text/javascript" src="style/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $.ajax({
                type: "GET",
                url: "./style/goods.json",
                dataType: "json",
                success:function(result){
                    add(result);
                }
            });
        })
        function add(result){
            $.each(result.data, function(obj){
                //console.log(result.data[obj].count);
                let str = '<tr>' +
                    '<td><input type="checkbox" name="select"></td>' +
                    '<td>' + result.data[obj].name + '</td>' +
                    '<td>¥<strong>' + result.data[obj].price + '</strong></td>' +
                    '<td>' +
                        '<input type="button" value="-" name="sub" disabled="disabled">' +
                        '<input type="text" name="inputNum" class="inputNum" value="1">' +
                        '<input type="button" value="+" name="add">' +
                    '</td>' +
                    '<td><em name="em">¥' + result.data[obj].count + '</em></td>' +
                    '<td><a name="delete" href="javascript:;">删除</a></td>' +
                '</tr>';
                let row = $(str);

                //被选中的计算总和
                let selectAll = document.getElementById("selectAll");
                let $select = $(row).find("input[name='select']");
                $("#goods").append(row);
                $select.click(function(){
                    selectAll.checked = true;
                    countNum = 0;
                    sum = 0;
                    part();
                    if(!$select.checked){
                        selectAll.checked = false;
                    }
                });
                //console.log($select);
            });
        }
    </script>
    <script type="text/javascript" src="style/shopping.js"></script>
</head>
<body>
    <table id="goods">
        <tr>
            <th><input type="checkbox" id="selectAll">全选</th>
            <th>商品</th>   
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
            <th>操作</th>
        </tr>
    </table>
    <br/><br/>
    <div class="sum">
        已选商品<em name="em">0</em>件,合计<em name="em">0.00</em>元。
    </div>
</body>
</html>

js代码

//获取单价,计算金额
function count(){
    let strong = document.getElementsByTagName("strong");
    let em = document.getElementsByTagName("em");
    let inputNum = document.getElementsByName("inputNum");
    let money = 0;
    for(let i = 0; i < strong.length; i++){
        //console.log(strong[i].innerHTML);
        money = strong[i].innerHTML * inputNum[i].value;
        money = money.toFixed(2);
        em[i].innerHTML = "¥" + money;
    }
}

//计算总额
function part(){
    let strong = document.getElementsByTagName("strong");
    let em = document.getElementsByTagName("em");
    let inputNum = document.getElementsByName("inputNum");
    let select = document.getElementsByName("select");
    let countNum = 0;
    let sum = 0;
    for(let i = 0; i < select.length; i++){
        if(select[i].checked){
            sum = sum + strong[i].innerHTML * inputNum[i].value;
            countNum = countNum + parseInt(inputNum[i].value);
        }
    }
    sum = sum.toFixed(2);
    em[em.length - 2].innerHTML = countNum;
    em[em.length - 1].innerHTML = sum;
}

//绑定响应函数,并解决兼容性问题
function bind(obj, eventStr, callback){
    if(obj.addEventListener){
        obj.addEventListener(eventStr, callback, false);
    }else{
        obj.attachEvent("on" + eventStr, function(){
            callback.call(obj);
        });
    }
}

window.onload = function(){
    //给“+”、“-”绑定事件
    //事件委派
    //let add = document.getElementsByName("add")[0];
    let table = document.getElementsByTagName("table")[0];
    bind(table, "click", function(event){
        // console.log(event);
        //获取当前行
        let tr = event.target.parentNode.parentNode;
        // console.log(tr.childNodes[3].childNodes[0]);
        let input = tr.childNodes[3].childNodes[1];
        let subNum = tr.childNodes[3].childNodes[0];
        // let a = tr.childNodes[5].childNodes[0];
        // console.log(name);
        if(event.target.name === "add"){
            input.value++;
            if(input.value > 1){
                subNum.disabled = false;
            }
            count();
            part();
        }else if(event.target.name === "sub"){
            input.value--;
            if(input.value == 1){
                subNum.disabled = true;
            }
            count();
            part();
        }else if(event.target.name === "delete"){
            //删除
            let name = tr.getElementsByTagName("td")[1].innerHTML;
            let flag = confirm("确认删除" + name + "?");
            if(flag){
                tr.parentNode.removeChild(tr);
            }
            part();
        }
    });

    //全选操作
    //console.log(selectAll.checked);
    let em = document.getElementsByTagName("em");
    let selectAll = document.getElementById("selectAll");
    let select = document.getElementsByName("select");
    selectAll.onclick = function(){
        for(let i = 0; i < select.length; i++){
            select[i].checked = this.checked;
        }
        if(this.checked){
            part();
        }else{
            em[em.length - 2].innerHTML = 0;
            em[em.length - 1].innerHTML = "0.00";
        }
    };
};
  • 写回答

3条回答 默认 最新

  • lambda-fk 2019-01-03 15:12
    关注

    依葫芦画瓢呗。
    首先明确下js 是弱类型语言,本质更贴近面向对象哦,里面一切都是对象,包括函数。(建议看看那本核心javascript 不和dom 沾染的)
    你代码写的采用了过程 方法和思维 那就是面向过程,采用了面向对象方法和思维就是面向对象哦。
    和采用哪种语言关系不大。你可以尝试用c 语言来实现面向对象也是可以的
    其次,面向对象的方法
    面向对象 代码 形似 得具有 : 封装 , 继承 , 多态 这几个 ,
    所以你得先封装,对于js 的封装 那就是弄成一个 js 文件呗,Java里面有类来做封装,脚本文件可称为模块
    然后是你 的继承,你看看你代码里面的处理函数本质是处理了几个控件的事件对吧,因此你可以定义对应控件类的函数啊
    声明js里面没有类,对象或意义上的类型本质都是函数 比如 Number ,String 啥的都是函数不是类,不要按照Java理解
    因此你定义绑定的类,实质是函数然后是checkbox 下拉框等 控件的对应的函数 定义好
    js的继承采用 prototype这个字段进行的原生继承,可以从js核心里面了解下这种继承方式
    最后是多态,强类型语言中方法都有this,因此必须类型匹配才能使用该类方法
    但是弱类型语言可以参考下python中的 self 更贴切,js中也有this,但是这个this没有类型限制,只要两个对象具有相同的属性名
    那么就可以调用该方法的,js的多态更加灵活

    你先依葫芦画瓢按照结构写,出来的就是面向对象程序,至于程序的组织技巧你后续慢慢领悟吧

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 关于IMageEnView 图标定位问题
  • ¥20 求解答(matlab)
  • ¥30 ffmpeg库使用过程中遇到的问题
  • ¥15 pyqt5 中python如何通过Qtwebchannel主动发消息给web前端
  • ¥15 关于HTML中title获取xml内容的问题
  • ¥15 fanuc机器人PRIO083数字信号未复原错误,如何解决?
  • ¥20 如何为现有电路板增加远程控制功能
  • ¥15 UE5打包失败,求解决
  • ¥15 请问STM32G431的CANOPEN协议函数怎么写
  • ¥15 graphpad prism 三因素重复测定报错