JavaScript || 写组件的模式

时间 2019-11-16

标签 javascript 组件模式栏目 JavaScript 繁體版

原文原文链接

简单弹窗组件

一编写组件的流程

组件是利用JavaScript生成HTML结构，配合既有CSS生成页面中的内容。用处是：便于修改、维护，可重用html

完成静态HTML与CSS前端
- 将组件结构与样式使用HTML与CSS总体展示出来，不须要JavaScript。node
去掉组件的HTML结构，使用JavaScript面向对象的模式建立原有HTML结构，而且添加交互功能前端工程师
- 建立组件对象，将构造函数接口暴露闭包
使用建立的构造函数，建立组件对象，执行相应逻辑。app

二组件设计的原则

先设计组件的结构dom
再处理组件的APIide
完成组件的控制流函数

三弹窗组件

1 基本的HTML与CSS

组件样式的编写：布局

先完成容器总体外部轮廓的布局、宽高。只在容器上设置一个类

设置容器内各个元素在容器中的样式

<div class="layer">
    <h2>提示</h2>
    <p>重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。</p>
    <button>知道了</button>
</div>

<style>
* {
    margin: 0;
    padding: 0：
}
.layer {
    width: 300px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 3px 5px #bbb;
    /* 在容器中水平垂直居中显示 */
    position: absolute;    /* 弹窗是浮出层，位置是绝对定位的，不会影响原文档流 */
    left: 50%;
    top: 50%;      /* 相对于容器的宽度 */
    transform: translate(-50%, -50%);  /* 相对于元素自身宽度 */
}
.layer h2 {
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.layer p {
    text-indent: 2em;
    font-size: 14px;
    line-height: 1.5;
}
.layer button {
    display: block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #333;
    margin: 10px auto 0;
    text-align: center;
    cursor: pointer;
}
</style>

2 选择面向对象的模式建立组件对象

使用工厂模式过程：

定义保存HTML结构的模板字符串（第一步静态结构中的弹窗结构，将定制部分做为变量）
建立对象的构造函数，定义弹窗可配置内容的接口text，而后初始化弹窗组件this.init()
设计组件的API：
- show()
- hide()
设计组件控制流：
- 结构初始化this.initDom()
- 事件逻辑初始化this.initEvent()
对外暴露构造函数，在外部使用。
- var layer = new Layer('hahahaha')

(function () {
    // 一个闭包
    
    // 弹窗组件的HTML结构：模板字符串，定制需求
    var html = `<div class="layer">\
                    <h2>提示</h2>\
                    <p>{text}</p>\
                    <button>知道了</button>\
                </div>`;

    // 弹窗组件构造函数
    function Layer(text) {      // text是对外的接口，能够定制弹窗中的内容
        // 用户的定制需求：弹窗组件的参数配置
        this.text = text;
        // 调用初始化弹窗韩式
        this.init();
    } 

    // 原型对象上的方法
    
    // 定义初始化弹窗的方法
    Layer.prototype.init = function () {
        // 初始化弹窗的DOM结构
        this.initDom();
        // 初始化弹窗的事件
        this.initEvent();
    }

    // 定义初始化弹窗DOM结构的方法
    Layer.prototype.initDom = function () {
    }

    // 初始化弹窗中的事件方法
    Layer.prototype.initEvent = function () {
    }

    // 显示组件的方法：将生成的内容添加到HTML页面中
    Layer.prototype.show = function () {
    }

    // 关闭弹窗的方法：将节点删除
    Layer.prototype.hide = function () {}

    //----------------------------------------------------------------//
    // 组件调用渠道：
    // 
    // 将构造函数返回出整个闭包，能够在外面调用构造函数生成弹窗组件
    window.Layer = Layer;   // 挂载到全局对象，也能够使用闭包，return Layer;
})();

    //----------------------------------------------------------------//
    // 组件使用：生成一个组件对象
    var layer = new window.Layer('重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性，但即便如此，真正决定课程效果的，仍是你的每一次思考和实践');

3 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0：
        }
        .layer {
            width: 300px;
            padding: 20px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 3px 5px #bbb;
            /* 在容器中水平垂直居中显示 */
            position: absolute;    /* 弹窗是浮出层，位置是绝对定位的，不会影响原文档流 */
            left: 50%;
            top: 50%;      /* 相对于容器的宽度 */
            transform: translate(-50%, -50%);  /* 相对于元素自身宽度 */
        }
        .layer h2 {
            font-size: 16px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
            margin-bottom: 20px;
        }
        .layer p {
            text-indent: 2em;
            font-size: 14px;
            line-height: 1.5;
        }
        .layer button {
            display: block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 0;
            border-radius: 5px;
            color: #fff;
            background: #333;
            margin: 10px auto 0;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layer">
    <h2>提示</h2>
    <p>重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。</p>
    <button>知道了</button>
</div>
    <script>
        //----------------------------------------------------------------//
        // 组件建立
        //
        (function () {
            // 一个闭包
            
            // 弹窗组件的HTML结构：模板字符串，定制需求
            var html = `<div class="layer">\
                            <h2>提示</h2>\
                            <p>{text}</p>\
                            <button>知道了</button>\
                        </div>`;

            // 弹窗组件构造函数
            function Layer(text) {      // text是对外的接口，能够定制弹窗中的内容
                // 用户的定制需求：弹窗组件的参数配置
                this.text = text;
                // 调用初始化弹窗韩式
                this.init();
            } 

            // 原型对象上的方法
            
            // 定义初始化弹窗的方法
            Layer.prototype.init = function () {
                // 初始化弹窗的DOM结构
                this.initDom();
                // 初始化弹窗的事件
                this.initEvent();
            }

            // 定义初始化弹窗DOM结构的方法
            Layer.prototype.initDom = function () {
                var node = document.createElement('div');

                // 根据配置生成弹窗内容
                node.innerHTML = html.replace('{text}', this.text);
                // 完成弹窗DOM结构初始化：childNodes[0]表示原来的html字符串中建立为DOM节点
                this.dom = node.childNodes[0];   // div节点以及其中的内容保存下来，显示函数用于添加到页面中
            }

            // 初始化弹窗中的事件方法
            Layer.prototype.initEvent = function () {
                this.dom.addEventListener('click', function (evt) {   // 在整个弹窗上注册事件，经过evt.target来获取触发事件的对象
                    // 若是点击了按钮
                    if(evt.target.tagName == 'BUTTON') {
                        this.hide();   //隐藏整个面板
                    }
                }.bind(this), false);     // bind()强制绑定弹窗组件来调用回调函数
            }

            // 显示组件的方法：将生成的内容添加到HTML页面中
            Layer.prototype.show = function () {
                document.body.appendChild(this.dom);   // 将建立的节点添加到页面的hook中
            }

            // 关闭弹窗的方法：将节点删除
            Layer.prototype.hide = function () {
                document.body.removeChild(this.dom);
            }

            //----------------------------------------------------------------//
            // 组件调用渠道：
            // 
            // 将构造函数返回出整个闭包，能够在外面调用构造函数生成弹窗组件
            window.Layer = Layer;   // 挂载到全局对象，也能够使用闭包，return Layer;
        })();

            //----------------------------------------------------------------//
            // 组件使用：生成一个组件对象
            var layer = new window.Layer('重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性，但即便如此，真正决定课程效果的，仍是你的每一次思考和实践');

            layer.show();   // 调用show()方法将建立的节点添加到页面上，显示弹窗
    </script>
</body>
</html>

JavaScript || 写组件的模式

简单弹窗组件

一 编写组件的流程

二 组件设计的原则

三 弹窗组件

1 基本的HTML与CSS

2 选择面向对象的模式建立组件对象

3 完整代码

一编写组件的流程

二组件设计的原则

三弹窗组件