零JS筆記 | 面向對象 | 組件

   提高对象的复用性
如何配置参数和默认参数
   对面向对象的深入应用（UI组件，功能组件）
   将配置参数、方法、事件，三者进行分离
创建自定义事件
   有利于多人协作开发代码
   如何去挂载自定义事件与事件函数

組件開發，多組對象；像兄弟之間的關係（代碼利用的一種形式；）
推理過程：

    function show(opt){
    }
    show({
        id:'div1',
        toDown:function(){},
        toUp:function(){}
    })

    var a = { name:'小明' }  //配置參數   1、優先級較高 2、key值一定要相同 ；
    var b = { name:'小強' }  //默認參數

    extend(b,a) //b的name被a的name覆蓋了；

    console.log(b.name);  //小明，（小強被小明蓋了）

    function extend(o1,o2){
        for(var attr in o2){
            o1[attr] = o2[attr]
        }
    }

重點：寫配置參數---> 寫默認參數--->用配置覆蓋默認---->調用默認方法；

所以，搭架子


var f1 = new Fn();
f1.init({

});

function Fn(){
    
    this.settings = {
            
    }
}
Fn.prototype.init = function(opt){
    extend(this.settings,opt)
}

function extend(o1,o2){
    for(var attr in o2){
        o1[attr] = o2[attr]
    }    
}

//改寫：定義配置參數；
        d1.init({
            id:'div1'
        })

        d2.init({
            id:'div2',
            _down:function(){
                document.title = 'down'
            }
        })
        d3.init({
            id:'div3',
            _down:function(){
                document.title = 'down-down-down'
            },
            _up: function () {
                document.title='up-up-up'
            }
        })
        d4.init({
            id:'div4',
            _up:function(){
                document.title = 'bybybyby'
            }
        })

//沒有值的情況：

    function Drag() {
        this.obj = null;
        this.disX = 0;
        this.dixY = 0;
        this.settings = {    //配置覆蓋默認，然後去調用默認的值；
            _down: function () {},
            _up: function () {}
        }
    }

//執行：

    Drag.prototype.init = function (opt) {
        this.obj = document.getElementById(opt.id)
        var _this = this;

        extend(this.settings, opt)   //使this.settings的值 == opt的值，如果opt沒有，則找默認的

        this.obj.onmousedown = function (ev) {
            var ev = ev || event;
            _this.fnDown(ev)  //ev要傳進來，下面才不用定義 ；

            _this.settings._down()  //調用默認

            document.onmousemove = function (ev) {
                var ev = ev || event;
                _this.fnMove(ev)
            }
            document.onmouseup = function () {
                _this.fnUp();

                _this.settings._up() //調用默認

            }
            return false //最後加阻止默認事件；
        }
    }


//其他：

    Drag.prototype.fnDown = function (ev) {
        this.disX = ev.clientX - this.obj.offsetLeft;
        this.disY = ev.clientY - this.obj.offsetTop;
    }
    Drag.prototype.fnMove = function (ev) {
        this.obj.style.left = ev.clientX - this.disX + 'px'
        this.obj.style.top = ev.clientY - this.disY + 'px'
    }
    Drag.prototype.fnUp = function () {
        document.onmousemove = document.onmouseup = null;
    }
    function extend(o1, o2) {
        for (var attr in o2) {
            o1[attr] = o2[attr]
        }
    }

核心：

//1、寫默認
        this.settings = {
            _down: function () {},
            _up: function () {}
        }
//3、改寫默認，即把外面調用的函數賦值給默認 覆蓋默認，所以再執行如果外面有，則執行，如無則執行默認

        extend(this.settings, opt) 

//2、調執行默認
        _this.settings._down()
        _this.settings._up()

組件彈窗

window.onload = function () {
    var _inp = document.getElementsByTagName('input')
    _inp[0].onclick = function () {
        var d1 = new Dialog();
        d1.init({ //配置參數
            cur: 0,
            title: '登入'
        });
    }
    _inp[1].onclick = function () {
        var d2 = new Dialog();
        d2.init({
            cur: 1,
            w: 100,
            h: 400,
            dir: 'right',
            title: '公告'
        })
    }
    _inp[2].onclick = function () {
        var d2 = new Dialog();
        d2.init({
            cur: 2,
            mask: true
        })
    }
}
function Dialog() {
    this._login = null;
    this._mask = null;
    this.settings = {  //默認參數
        w: 300,
        h: 300,
        dir: 'center',
        title: '',
        mask: false
    }
}
Dialog.prototype.json = {};             //目的：只能彈一次： 先定義空json
Dialog.prototype.init = function (opt) {

    extend(this.settings, opt)

    if (this.json[opt.cur] == undefined) { //第一次走這裏；
        this.json[opt.cur] = true;
    }

    if (this.json[opt.cur]) {       //為true時就走創建
        this.create();
        this.fnClose();
        if (this.settings.mask) {
            this.createMask();
        }
        this.json[opt.cur] = false; //後fase跟undefined也等於false，也不會走上面；
    }
}
Dialog.prototype.create = function () {
    this._login = document.createElement('div');
    this._login.className = 'login'
    this._login.innerHTML = '<div class="title"><span>' + this.settings.title + '</span><span class="close">X</span></div><div class="content"></div>'

    document.body.appendChild(this._login);
    this.setDate();
}
Dialog.prototype.setDate = function () {
    this._login.style.width = this.settings.w + 'px'
    this._login.style.height = this.settings.h + 'px'
    if (this.settings.dir == 'center') {
        this._login.style.left = (viewWidth() - this._login.offsetWidth) / 2 + 'px'
        this._login.style.top = (viewHeight() - this._login.offsetHeight) / 2 + 'px'
    }
    else if (this.settings.dir = 'right') {
        this._login.style.left = (viewWidth() - this._login.offsetWidth) + 'px'
        this._login.style.top = (viewHeight() - this._login.offsetHeight) + 'px'
    }
}
Dialog.prototype.fnClose = function () {
    var _this = this;
    var _close = this._login.querySelector('.close')
    _close.onclick = function () {
        document.body.removeChild(_this._login)
        if (_this.settings.mask) {
            document.body.removeChild(_this._mask)
        }
        _this.json[_this.settings.cur] = true; //關閉後再設回；
    }
}
Dialog.prototype.createMask = function () {
    this._mask = document.createElement('div')
    this._mask.id = 'mask'
    document.body.appendChild(this._mask)
    this._mask.style.width = viewWidth() + 'px'
    this._mask.style.height = viewHeight() + 'px'
}
function viewWidth() {
    return document.documentElement.clientWidth;
}
function viewHeight() {
    return document.documentElement.clientHeight;
}
function extend(o1, o2) {
    for (var attr in o2) {
        o1[attr] = o2[attr]
    }
}

See the Pen avezwe by elmok (@elmok) on CodePen.

零JS筆記 | 面向對象 | 組件

最新文章

最近回复

分类

归档

其它