JavaScript || 寫組件的模式

沈儉發布于2019-08-20 15:15 / 2750人閱讀

摘要：去掉組件的結構，使用面向對象的模式創建原有結構，并且添加交互功能創建組件對象，將構造函數接口暴露使用創建的構造函數，創建組件對象，執行相應邏輯。

簡單彈窗組件 一編寫組件的流程

組件是利用JavaScript生成HTML結構，配合既有CSS生成頁面中的內容。用處是：便于修改、維護，可重用

完成靜態HTML與CSS

將組件結構與樣式使用HTML與CSS整體展現出來，不需要JavaScript。

去掉組件的HTML結構，使用JavaScript面向對象的模式創建原有HTML結構，并且添加交互功能

創建組件對象，將構造函數接口暴露

使用創建的構造函數，創建組件對象，執行相應邏輯。

二組件設計的原則

先設計組件的結構

再處理組件的API

完成組件的控制流

三彈窗組件

1 基本的HTML與CSS

組件樣式的編寫：

先完成容器整體外部輪廓的布局、寬高。只在容器上設置一個類

設置容器內各個元素在容器中的樣式


    提示
    重要說明 百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。

2 選擇面向對象的模式創建組件對象

使用工廠模式過程：

定義保存HTML結構的模板字符串（第一步靜態結構中的彈窗結構，將定制部分作為變量）

創建對象的構造函數，定義彈窗可配置內容的接口text，然后初始化彈窗組件this.init()

設計組件的API：

show()

hide()

設計組件控制流：

結構初始化this.initDom()

事件邏輯初始化this.initEvent()

對外暴露構造函數，在外部使用。

var layer = new Layer("hahahaha")

(function () {
    // 一個閉包
    
    // 彈窗組件的HTML結構：模板字符串，定制需求
    var html = `
                    提示
                    {text}
                    
                `;

    // 彈窗組件構造函數
    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 完整代碼




    
    Document
    



    提示
    重要說明 百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。

云服務器 GPU云服務器用ASP寫組件 javascript組件開發 javascript命令模式 javascript嚴格模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82110.html

5分鐘即可掌握的前端高效利器：JavaScript 策略模式

摘要：策略模式由兩部分構成一部分是封裝不同策略的策略組，另一部分是。策略模式的典型應用場景是表單校驗中，對于校驗規則的封裝。然而圖像的壓縮及上傳錯誤處理等部分是公用的。遂考慮使用策略模式封裝。淺談 JavaScript 中策略模式的使用：什么是設計模式什么是策略模式策略模式在 JavaScript 中的應用（使用策略模式封裝百度AI識別調用）策略模式在 Vue 組件封裝中的應用（...

BlackFlagBin 2019-08-23 11:48 評論0 收藏0
少婦白潔系列之React StateUp模式

摘要：一般這種情況會在類的構造函數內創建一個屬性，引用或詞法域的，但后面會看到我們有更好的辦法，避免這種手工代碼。換句話說，StateUp模式把面向對象的設計方法應用到了狀態對象的管理上，在遵循React的組件化機制和基于props實現組件通訊方式的前提之下做到了這一點。 ---- 少婦白潔閱讀本文之前，請確定你讀過React的官方文檔中關于Lifting State Up的論述： ht...

jaysun 2019-08-20 14:46 評論0 收藏0
JS或Jquery

摘要：大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
簡單的JavaScript組件化實現

摘要：作為一名前端菜鳥，最近看例子，根據理解自己也簡單實現了一下組件的繼承和事件機制。公共功能銷毀在子類中調用的組件自己的功能的實現有很多種，我用了，的實現比較巧妙。最后記得提供一個銷毀組件的方法，一個簡單的組件就完成了。作為一名前端菜鳥，最近看react例子，根據理解自己也簡單實現了一下組件的繼承和事件機制。代碼在這里原始的組件寫法 (function($) { $.plug...

Hanks10100 2019-08-21 10:42 評論0 收藏0