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>