网站首页 » 前端开发 » JavaScript » JavaScript 组件封装的基本套路
上一篇:
下一篇:

JavaScript 组件封装的基本套路

这篇文章没有过多的言语来说明什么是组件封装,封装组件有什么好处,这里只会贴出一段代码以便自己日后查阅,如果你碰巧看到了这篇文章,那么我只能跟您说声抱歉了。因为没有过多的说明,可能会让你看完之后更加困惑。所以你用眼睛扫一下,觉得没意思的话,我建议你就不用再往下看了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 组件封装的基本套路-云库网</title>
    <meta name="description" content="JavaScript 组件封装可以让你更方便地重用代码,在写组件时你会在不知不觉中学到很多关于 JavaScript 的原理" />
    <meta name="keywords" content="组件封装, JavaScript 组件封装" />
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    input[type=button]{
        padding: 5px 12px;
        cursor: pointer;
    }
    h3{
        font-weight: normal;
    }
        .dialog{
            z-index: 500;
            position: absolute;
            border: 1px solid #ccc;
            background: #fff;
        }
        .dialog-header{
            box-sizing: border-box;
            padding: 0 10px;
            overflow: hidden;
            background: #ddd;
            line-height: 44px;
            height: 44px;
        }
        .dialog-header .title{
            float: left;
        }
        .dialog-header .close{
            cursor: pointer;
            float: right;
        }

        #mark{
            position: absolute;
            background: #000;
            opacity: 0.7;
            left: 0;
            top: 0;
            z-index: 101;
        }
    </style>
</head>
<body>
<input type="button" value="弹窗1">
<input type="button" value="弹窗2">
<input type="button" value="弹窗3">

<script>
window.onload = function(){
    var oInput = document.getElementsByTagName("input");
    oInput[0].onclick = function(){
        var d1 = new Dialog();
        d1.init({
            status:0, // 标识弹窗
        });
    }

    oInput[1].onclick = function(){
        var d2 = new Dialog();
        d2.init({
            status:1,
            dir :"right",
            title:"朝夕熊博客"
        });
        
    }

    oInput[2].onclick = function(){
        var d3 = new Dialog();
        d3.init({
            status:2,
            dir :"center",
            title:"朝夕熊博客",
            mark:true
        });
    }
}

// 创建一个类对象
function Dialog(){
    this.dialog = null;
    this.close = null;
    this.mark = null;
    this.settings={ // 默认参数
        w:300,
        h:300,
        dir :"center",
        title:"云库网"
    }
}

// 初始化窗口
Dialog.prototype.init = function(opt){
    copy(this.settings,opt); // 合并参数(用户设置参数覆盖默认参数)
    if( this.json[this.settings.status] == undefined ){  // 首次 this.json[this.settings.status] 为 undefined 
        this.json[this.settings.status] = true;
    }
    if( this.json[this.settings.status] == true ){ // 如果是真则创建弹窗
        this.fnCreate();
        this.fnClose();
        if(this.settings.mark == true){
            this.fnMark();
        };
        this.json[this.settings.status] = false; // 标记此按钮为已弹出窗口,再次按时不再弹出。
    }
}

// 创建窗口
Dialog.prototype.fnCreate = function(){
    this.dialog = document.createElement("div");
    this.dialog.className = "dialog";
    this.dialog.innerHTML = '<div class="dialog-header"><h3 class="title">' + this.settings.title + '</h3><span class="close">X</span></div><div class="dialog-body"></div><div class="dialog-footer"></div>';
    document.body.appendChild(this.dialog);
    this.position();
}

// 关闭窗口
Dialog.prototype.fnClose = function(){
    var _this = this;  // 确保 this 对象为 Dialog
    this.close = this.dialog.getElementsByTagName("span")[0];
    this.close.onclick = function(){
        document.body.removeChild(_this.dialog); // 删除弹窗
        if(_this.mark){ // 判断是否存在遮罩,如果存在删除遮罩
            document.body.removeChild(_this.mark);
        }
        _this.json[_this.settings.status] = true; // 标记当前按钮点击可再次弹出窗口
    }
}

// 定义位置
Dialog.prototype.position= function(){
    this.dialog.style.width = this.settings.w + "px";
    this.dialog.style.height = this.settings.h + "px";
    if(this.settings.dir == "center"){
        this.dialog.style.left = (viewWidth() - this.settings.w)/2 + "px";
        this.dialog.style.top = (viewHeight() - this.settings.h)/2 + "px";
    }else if(this.settings.dir == "right"){
        this.dialog.style.right = 0 + "px";
        this.dialog.style.bottom = 0 + "px";
    }
}

// 定义遮罩
Dialog.prototype.fnMark = function(){
    this.mark = document.createElement("div");
    this.mark.id = "mark";
    this.mark.style.width = viewWidth() +"px";
    this.mark.style.height = viewHeight() +"px";
    document.body.appendChild(this.mark);
}

Dialog.prototype.json = {};

// 获取屏幕宽度
function viewWidth(){
    return document.documentElement.clientWidth;
}
// 获取屏幕高度
function viewHeight(){
    return document.documentElement.clientHeight;
}

// 拷贝继承
function copy (obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}
</script>
</body>
</html>

这是一个简单的弹窗组件,可以设置不同的参数来创建不同的弹窗。这个弹窗组件功能不强大,但是不要紧,因为只是通过它来说明一下,一个组件大概都是长得怎么样子的。

在线效果演示:http://yunkus.com/demo/javascript-component-encapsulation/

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-component-encapsulation/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END