js前端开发面向对象开发实例_组件开发

web 前端开发实例|vs2012前端开发实例|前端开发 安卓官网

组件分为 UI组件和功能组件
将 参数,方法,事件(自定义事件) 三者分离

1、关于参数

传参的时候以json的形式,只传一个参数
需要用配置参数b和默认参数a, 用b继承a (b和a前边的key值要保持一致)
调用的时候,调用默认参数

例如:拖拽
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>编写web前端开发实例</title>
    <style>
        #div1,
        #div2,
        #div3 {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        #div1 {
            background: red;
        }
        #div2 {
            background: yellow;
            left: 100px;
        }
        #div3 {
            background: green;
            left: 200px;
        }
    </style>
    <script>
        window.onload = function () {
            var d1 = new drag({ //配置参数
                id: ‘div1’
            });
            var d2 = new drag({
                id: ‘div2’,
                toUp: function () {
                    document.title = ‘hello’;
                }
            })
            var d3 = new drag({
                id: ‘div3’,
                toUp: function () {
                    document.title = ‘world’;
                },
                toDown: function () {
                    document.title = ‘你好’;
                }
            })
        }
        function drag(opt) //创建构造函数
        {
            this.disX = null;
            this.disY = null;
            this.setting = { //默认参数
                id: ‘div1’,
                toUp: function () {},
                toDown: function () {}
            };
            extend(this.setting, opt);
            this.oDiv = document.getElementById(this.setting.id);
            this.change();
        }
        drag.prototype.change = function () {
            var This = this;
            this.oDiv.onmousedown = function (ev) {
                This.setting.toDown();
                var ev = ev || window.event;
                this.disX = ev.clientX – this.offsetLeft;
                this.disY = ev.clientY – this.offsetTop;
                This.oDiv.onmousemove = function (ev) {
                    var ev = ev || window.event;
                    var l = ev.clientX – this.disX;
                    var t = ev.clientY – this.disY;
                    This.oDiv.style.left = l + ‘px’;
                    This.oDiv.style.top = t + ‘px’;
                }
                This.oDiv.onmouseup = function () {
                    This.setting.toUp();
                    This.oDiv.onmousemove = This.oDiv.onmouseup = null;
                }
                This.oDiv.onmouseout = function () //鼠标移出取消事件
                {
                    This.oDiv.onmousemove = This.oDiv.onmouseup = null;
                }
                return false; //阻止默认事件
                ev.preventDefault();
            }
        }
        function extend(obj1, obj2) {
            for (var attr in obj2) {
                obj1[attr] = obj2[attr];
            }
        }
    </script>
</head>
<body>
    <div id=”div1″></div>
    <div id=”div2″></div>
    <div id=”div3″></div>
</body>
</html>

2、关于自定义事件

 自定义事件:主要是跟函数有关系,就是让函数能够具备事件的某些特性;有利于多人协作开发。

 例如:选项卡
 **html 代码**
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>前端组建化开发实例</title>
</head>
<style>
    .tab div {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        display: none;
    }
    .tab .active {
        background: red;
    }
</style>
<script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.js”></script>
<script>
    /*选项卡切换组件
     Options:events
     Events: beforeClick afterClick 自定义事件
     自定义事件需要主动触发 jq中用trigger()
     */
    $(function () {
        var t1 = new Tab();
        t1.init(‘div1’, {});
        var t2 = new Tab();
        t2.init(‘div2’, {
            events: ‘mousemove’
        });
        var t3 = new Tab();
        t3.init(‘div3’, {});
        $(t3).on(‘beforeClick’, function () { //添加自定义事件
            alert(1);
        })
        $(t3).on(‘afterClick’, function () { //添加自定义事件
            alert(2);
        })
    })
    function Tab() //创建构造函数
    {
        this.par = null;
        this.aIn = null;
        this.aDiv = null;
        this.setting = { //默认参数
            events: ‘click’
        };
    }
    Tab.prototype.init = function (oPar, opt) //初始化
    {
        this.par = $(‘#’ + oPar);
        this.aIn = this.par.find(‘input’);
        this.aDiv = this.par.find(‘div’);
        $.extend(this.setting, opt); //JQ自带extend方法
        this.change();
    }
    Tab.prototype.change = function () {
        var This = this;
        this.aIn.on(this.setting.events, function () {
            $(This).trigger(‘beforeClick’); //主动触发自定义事件
            This.aIn.removeClass(‘active’);
            $(this).addClass(‘active’);
            This.aDiv.css(‘display’, ‘none’);
            This.aDiv.eq($(this).index()).css(‘display’, ‘block’);
            $(This).trigger(‘afterClick’); //主动触发自定义事件
        })
    }
</script>
<body>
    <div class=”tab” id=”div1″>
        <input type=”button” value=”1″ class=”active” />
        <input type=”button” value=”2″ />
        <input type=”button” value=”3″ />
        <div style=”display: block;”>11111111</div>
        <div>22222222</div>
        <div>33333333</div>
    </div>
    <div class=”tab” id=”div2″>
        <input type=”button” value=”1″ class=”active” />
        <input type=”button” value=”2″ />
        <input type=”button” value=”3″ />
        <div style=”display: block;”>11111111</div>
        <div>22222222</div>
        <div>33333333</div>
    </div>
    <div class=”tab” id=”div3″>
        <input type=”button” value=”1″ class=”active” />
        <input type=”button” value=”2″ />
        <input type=”button” value=”3″ />
        <div style=”display: block;”>11111111</div>
        <div>22222222</div>
        <div>33333333</div>
    </div>
</body>
</html>

前端如何分辨开发语言|18年有前端开发岗位没?|hr如何看前端开发?

» 本文来自:前端开发者 » 《js前端开发面向对象开发实例_组件开发》
» 本文链接地址:https://www.rokub.com/3929.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!