JavaScript面向對象分層思維

js本身不是面向對象語言，在我們實際開發中其實很少用到面向對象思想，以前一直以為當要復用的時候才封裝成對象，然而隨著現在做的項目都後期測試階段發現面向對象的作用不僅僅只是復用，可能你們會說面向對象還有繼承，多態的概念，但在javascript裡面多態的概念是不存在，而繼承由於web頁面的必須先下載js在運行導致js的繼承不能像後台那麼靈活而且js沒有重載以及重寫不方便(而且js中重寫的意義不是很大)，所以在js中很少用到面向對象，可能在一些插件中會看到對象的寫法，寫js的都會有同樣的感覺在寫一個插件的時候一般是先用面相過程把插件功能寫出來，然後在重構改成對象的方法。但在實際項目開發中要求時間進度和開發成本很少會有那麼寬松的時間讓你先用面向過程實現功能在重構。實際開發中我們基本都是用面相過程寫完就直接提交了。

這種寫法發現一個問題就是，當你把這個頁面的寫完了之後過一段時間突然這個頁面的功能需求或是頁面布局要調整，你在看這個頁面的代碼，一下很難快速的把整個頁面的代碼邏輯步驟梳理清楚，我相信很多寫前端都要同感吧! 舉個例子:我幾年前寫的放大鏡插件，現在我在放出來發現我寫的這個插件在谷歌浏覽器第一次渲染的時候沒有效果，代碼如下:

/// <reference path="../jquery11.js" />
(function ($) {
    $.fn.extend({
        jqoom: function (potions) {
            var settings = {
                width: 350,
                height: 350,
                position: "right"
            }
            if (potions) {
                $.extend(settings, potions);
            }
            var ImgUrl = $("img", this).attr("src");
            var ImgMinWidth = $("img", this).width();
            var ImgMinHeigth = $("img", this).height();
            var ImgWidth = 0;
            var ImgHeight = 0;
            var de = true;

            $(this).hover(function (e) {
            }, function () {
                $("#jqoomz").remove();
                $(document).unbind("mousemove");
                $("#jqoomy").remove();

                de = true;
            });
            $("img", this).hover(function (e) {
                var pagex = e.x || e.pageX;
                var pagey = e.y || e.pageY;
                var pagex1 = 0;
                var pagey1 = 0;
                var leftcha = 0;
                var topcha = 0;
                _this = $(this).parents("div");
                if ($("#jqoomz").length == 0) {
                    _this.after("<div id='jqoomz'></div>");
                    var obj = new Image();
                    obj.src = ImgUrl;
                    obj.onload = function () {
                        if (de && obj.height > 0) {
                            de = false;
                            ImgWidth = obj.width;
                            ImgHeight = obj.height;
                            finder.call(_this.find("img")[0]);
                        }
                    };
                    $("#jqoomz").width(settings.width).height(settings.height).offset({
                        left: $(_this).outerWidth() + $(_this).offset().left,
                        top: $(_this)[0].offsetTop
                    }).append($("<img></img>").attr("src", ImgUrl));
                    if (de && obj.height > 0) {
                        de = false;
                        ImgWidth = obj.width;
                        ImgHeight = obj.height;
                        finder.call(this);
                    }
                }
                function mover(event) {
                    var pagex2 = event.x || event.pageX;
                    var pagey2 = event.y || event.pageY;
                    if (parseInt(pagex2 + leftcha) <= parseInt($(_this).width() + $(_this).offset().left) && pagex2 >= leftcha + $(_this).offset().left) {
                        $(this).offset({left: pagex2 - leftcha});
                    } else {
                        if (parseInt(pagex2 + leftcha) > parseInt($(_this).width() + $(_this).offset().left) && pagex2)
                            $(this).offset({left: $(_this).width() + $(_this).offset().left - leftcha * 2});
                        else
                            $(this).offset({left: $(_this).offset().left});
                    }
                    if (parseInt(pagey2 + topcha) <= parseInt($(_this).height() + $(_this).offset().top) && pagey2 >= topcha + $(_this).offset().top) {
                        $(this).offset({top: (pagey2 - topcha)});
                        //document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px";
                    } else {
                        if (parseInt(pagey2 + topcha) > parseInt($(_this).height() + $(_this).offset().top))
                            $(this).offset({top: ($(_this).height() + $(_this).offset().top - topcha * 2)});
                        //document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px";
                        else
                            $(this).offset({top: $(_this).offset().top});
                        //document.getElementById("move").style.top = "0px"
                    }
                    var bilx = ($(this).offset().left - $(_this).offset().left) / (ImgMinWidth / ImgWidth);
                    var bily = ($(this).offset().top - $(_this).offset().top) / (ImgMinHeigth / ImgHeight);
                    $("#jqoomz img").css({"margin-left": -bilx, "margin-top": -bily});
                }

                function finder() {
                    if (parseFloat($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth)) >=
                        parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) && parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) >=
                        parseFloat($(this).offset().top)) {
                        pagey1 = (pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2);
                    } else {
                        if ((pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) < $(this).offset().top) {
                            pagey1 = $(this).offset().top;
                        } else {
                            pagey1 = ($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth));
                        }
                    }
                    if (($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth) >=
                        (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) && (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) >=
                        $(this).offset().left) {
                        pagex1 = (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2);
                    } else {
                        if ((pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) < $(this).offset().left) {
                            pagex1 = $(this).offset().left;
                        } else {
                            pagex1 = ($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth);
                        }
                    }
                    leftcha = ImgMinWidth / ImgWidth * ImgMinWidth / 2;
                    topcha = ImgMinHeigth / ImgHeight * ImgMinHeigth / 2;
                    if ($("#jqoomy").length == 0) {
                        $(this).after("<div id='jqoomy'></div>")
                            .siblings("#jqoomy")
                            .addClass("jqoomy").show()
                            .width((ImgMinWidth / ImgWidth * ImgMinWidth))
                            .height((ImgMinHeigth / ImgHeight * ImgMinHeigth)).offset({
                            top: pagey1,
                            left: pagex1
                        });
                    }
                    $(document).on("mousemove", $.proxy(mover, $("#jqoomy")));
                }
            }, function () {
            });
        }
    });
})(jQuery);

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery11.js"></script>
    <script src="OppJqoom.js"></script>
    <style type="text/css">
        .jqoom
        {
            width: 350px;
            height: 350px;
            border: solid 1px #DFDFDF;
            z-index: 10;
        }

            .jqoom img
            {
                cursor: pointer;
                z-index: 10;
                max-height: 350px;
                max-width: 350px;
            }

        .jqoomy
        {
            background-color: white;
            position: relative;
            z-index: 999;
            opacity: 0.5;
            cursor: pointer;
            border: solid 1px #DFDFDF;
        }

        #jqoomz
        {
            border: solid 1px #DFDFDF;
            position: absolute;
            overflow: hidden;
        }

        .lef
        {
            border: 1px solid #DFDFDF;
            display: block;
            height: 72px;
            line-height: 72px;
            text-align: center;
            text-decoration: none;
            width: 10px;
            background-color:#EBEBEB;
            float:left;
        }
            .lef:hover
            {
                color:red;
            }
        .jqooz
        {
            float:left;
            width:352px;
            margin-top:20px;
        }
            .jqooz ul
            {
                float: left;
                margin: 0;
                padding: 0;
                width:328px;
                height:72px;
            }
                .jqooz ul li
                {
                    display: inline;
                    list-style: none outside none;
                    margin: 0 10px;
                }
                    .jqooz ul li img
                    {
                        border: 1px solid #DFDFDF;
                        max-height: 72px;
                        max-width: 120px;
                    }
                        .jqooz ul li img:hover
                        {
                            border: 1px solid #ff6600;
                        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".jqoom").jqoom();
        });

    </script>
</head>
<body>
    <div class="jqoom">
        <img src="b3.jpg" />
    </div>
    <div class="jqooz">
    <a href="javascript:void(0)" class="lef"><</a>
        <ul>
            <li><a>
                <img src="b3.jpg" /></a></li>
        </ul>
        <a href="javascript:void(0)" class="lef">></a>
        </div>
</body>
</html>

效果:

現在我要修改這個插件為什麼在谷歌浏覽器第一次加載的時候沒有效果,那我要重新跟著代碼來梳理放大鏡裡面的整個功能步驟,這個放大鏡的功能還不是很復雜,在實際項目中各種函數回調嵌套,取數,數據處理,顯示,頁面的動態效果都交織在onload或是ready裡面你要花幾個小時甚至一整天來梳理你要修改頁面的代碼邏輯,而且還未必能梳理的全面,所以經常會有前端同事在隔了一段時間給之前寫的頁面添加注釋的時候說我自己寫代碼都開始看不懂了.

  本身javascript特點之一是事件監聽函數回調,這是它優點,nodejs作者之所以選擇js其中一個原因就是javascript的事件監聽函數回調帶來的優點,但函數回調同時也帶來一個缺點就是經常出現return不出數據,典型的例子就是ajax,jQuery傳統的ajax成功之後回調success方法,當你要把這個ajax的輸出作為另一個ajax的輸入的時候你就不得不要嵌套ajax,一旦嵌套多了這個代碼的可讀性和復雜度就增加了很多!後期的維護也自然增加了難度,Promise出來之後,jQuery、angular也都紛紛加了Promise。為什麼javascript在後期維護要花這麼大的時間去梳理邏輯？

  我們在看看後台java或c#的語言是怎麼做，典型的javaweb幾乎都是springMVC框架，C#做web毋庸置疑是.net MVC,他們都有共同的特點是c層提供給前台頁面ajax調用的方法都是按照所需要的數據一個一個拆分的,還有相對於的m層,mvc其實是兩個維度的分層這是我個人觀點,一個維度是單個細小的功能分為view,control,model,另一個維度是整個頁面分成多個小的功能.所以你發現後台代碼要修改其實很容易就把邏輯梳理,那前台javascript也能不能按照整個思路來取分層呢?

  這個插件沒有涉及到動態取數,所以分層的標准也不一樣,在這裡我分了兩層,第一層是對鼠標移動後圖片的一系列算法,第二層是事件綁定分的一系列dom的操作,代碼如下:

/**
 * Created by  on 2016/11/2.
 */
(function ($) {
    //構造函數邏輯主線路
    var OppJqoom = function (_this, potions) {
        this._this = _this;
        this.ImgUrl = $("img", this._this).attr("src");
        this.ImgMinWidth = $("img", this._this).width();
        this.ImgMinHeigth = $("img", this._this).height();
        this.ImgWidth ,this.ImgHeight ,this.leftcha,this.topcha;
        var settings = {
            width: 350,
            height: 350,
            position: "right"
        }
        $.extend(this,settings);
        if (potions) {
            $.extend(this, potions);
        }
        this.domOperation.Jqoomhover.call(this);
        this.domOperation.imghover.call(this);

    };
    OppJqoom.prototype = {
        // 第一層 算法層
        basicOperation: {
          /* 獲取遮罩層的top和left*/
            finder: function (that) {
                var pagey1, pagex1;
                if (parseFloat($(this).offset().top + $(this).height() - (that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth)) >=
                    parseFloat(this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) && parseFloat(this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) >=
                    parseFloat($(this).offset().top)) {
                    pagey1 = (this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2);
                } else {
                    if ((this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) < $(this).offset().top) {
                        pagey1 = $(this).offset().top;
                    } else {
                        pagey1 = ($(this).offset().top + $(this).height() - (that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth));
                    }
                }
                if (($(this).offset().left + $(this).width() - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth) >=
                    (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) && (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) >=
                    $(this).offset().left) {
                    pagex1 = (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2);
                } else {
                    if ((this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) < $(this).offset().left) {
                        pagex1 = $(this).offset().left;
                    } else {
                        pagex1 = ($(this).offset().left + $(this).width() - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth);
                    }
                }
                that.leftcha = that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2;
                that.topcha = that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2;
                that.domOperation.docMousemove.call(that);
                return {top: pagey1, left: pagex1};

            },
            // 放大鏡的圖片的top和left
            mover: function (that) {
                if (parseInt(that.pagex2 + that.leftcha) <= parseInt(that._this.width() + that._this.offset().left) && that.pagex2 >= that.leftcha + that._this.offset().left) {
                    $(this).offset({left: that.pagex2 - that.leftcha});
                } else {
                    if (parseInt(that.pagex2 + that.leftcha) > parseInt(that._this.width() + that._this.offset().left) && that.pagex2)
                        $(this).offset({left: that._this.width() + that._this.offset().left - that.leftcha * 2});
                    else
                        $(this).offset({left: that._this.offset().left});
                }
                if (parseInt(that.pagey2 + that.topcha) <= parseInt(that._this.height() + that._this.offset().top) && that.pagey2 >= that.topcha + that._this.offset().top) {
                    $(this).offset({top: (that.pagey2 - that.topcha)});
                    //document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px";
                } else {
                    if (parseInt(that.pagey2 + that.topcha) > parseInt(that._this.height() + that._this.offset().top))
                        $(this).offset({top: (that._this.height() + that._this.offset().top - that.topcha * 2)});
                    //document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px";
                    else
                        $(this).offset({top: that._this.offset().top});
                    //document.getElementById("move").style.top = "0px"
                }
                var bilx = ($(this).offset().left - that._this.offset().left) / (that.ImgMinWidth / that.ImgWidth);
                var bily = ($(this).offset().top - that._this.offset().top) / (that.ImgMinHeigth / that.ImgHeight);
                return{left:bilx,top:bily};
            }
        },
        // 第二層 事件綁定層
        domOperation: {
            // 鼠標移動到圖片的一系列dom的操作
            imghover: function () {
                var that = this;
                $("img", this._this).hover(function (e) {
                    this.pagex = e.x || e.pageX;
                    this.pagey = e.y || e.pageY;
                    var offset;
                    var obj = new Image();
                    obj.src = that.ImgUrl;
                    obj.onload = function () {
                        if (obj.height > 0) {
                            that.ImgWidth = obj.width;
                            that.ImgHeight = obj.height;
                            if ($("#jqoomz").length == 0) {
                                that._this.after("<div id='jqoomz'></div>");
                            }
                            offset = that.basicOperation.finder.call(that._this.find("img")[0],that);
                        }
                    };
                    if ($("#jqoomz").length == 0) {
                        that.ImgWidth = obj.width;
                        that.ImgHeight = obj.height;
                        that._this.after("<div id='jqoomz'></div>");
                    }
                    offset = that.basicOperation.finder.call(this,that);
                    if ($("#jqoomy").length == 0) {
                        $(this).after("<div id='jqoomy'></div>")
                            .siblings("#jqoomy")
                            .addClass("jqoomy")
                            .show()
                            .width((that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth))
                            .height((that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth))
                            .offset({
                                top: offset.top,
                                left: offset.left
                            });
                    }
                    $("#jqoomz").width(that.width).height(that.height).offset({
                        left: that._this.outerWidth() + that._this.offset().left,
                        top: that._this[0].offsetTop
                    }).append($("<img></img>").attr("src", that.ImgUrl));
                },function () {});
            },
            //鼠標在圖片上滑動的一系列dom操作
            docMousemove: function () {
                var that=this;
                $(document).on("mousemove", function (event) {
                    that.pagex2 = event.x || event.pageX;
                    that.pagey2 = event.y || event.pageY;
                    var offset=that.basicOperation.mover.call($("#jqoomy"),that);
                    $("#jqoomz img").css({"margin-left": -offset.left, "margin-top": -offset.top});
                });
            },
            //鼠標移除圖片的一系列dom操作
            Jqoomhover:function () {
                this._this.hover(function (e) {
                }, function () {
                    console.log(111);
                    $("#jqoomz").remove();
                    $(document).unbind("mousemove");
                    $("#jqoomy").remove();
                });
            }
        }
    };
    $.fn.extend({
        jqoom: function (potions) {
            return new OppJqoom(this, potions);
        }
    })
})(jQuery);

然後加上簡單的注釋感覺頁面的邏輯步驟就很清晰了,當然這種寫法一種比較麻煩的就是this的用法,對象中嵌套對象調用裡面的方法this是指向自己的對象.

在實際開發中我們可以分為數據讀取層,數據處理層,以及dom動態效果層,如果業務比較繁雜也可以在分個數據展現層.

當然這是我個人的理解,可能有很多方面沒考慮到,只是提供了一些思路!