首页 未命名正文

linux编程_JavaScript面向对象分层头脑

云返利网 未命名 2020-05-26 09:07:18 15 0

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动态效果层,若是营业对照繁杂也可以在分个数据展现层.

【关于云返利网】

云返利网是阿里云、腾讯云、华为云产品推广返利平台,在各个品牌云产品官网优惠活动之外,云返利网还提供返利。您可以无门槛获得阿里云、华为云、腾讯云所有产品返利,在官网下单后就可以领取,无论是自己用、公司用还是帮客户采购,您个人都可以获得返利。云返利网的目标是让返利更多、更快、更简单!详情咨询13121395187(微信同号)