資訊專欄INFORMATION COLUMN
摘要：去掉組件的結(jié)構(gòu)，使用面向?qū)ο蟮哪Ｊ絼?chuàng)建原有結(jié)構(gòu)，并且添加交互功能創(chuàng)建組件對象，將構(gòu)造函數(shù)接口暴露使用創(chuàng)建的構(gòu)造函數(shù)，創(chuàng)建組件對象，執(zhí)行相應(yīng)邏輯。
簡單彈窗組件 一 編寫組件的流程
組件是利用JavaScript生成HTML結(jié)構(gòu)，配合既有CSS生成頁面中的內(nèi)容。用處是：便于修改、維護，可重用
完成靜態(tài)HTML與CSS
將組件結(jié)構(gòu)與樣式使用HTML與CSS整體展現(xiàn)出來，不需要JavaScript。
去掉組件的HTML結(jié)構(gòu)，使用JavaScript面向?qū)ο蟮哪Ｊ絼?chuàng)建原有HTML結(jié)構(gòu)，并且添加交互功能
創(chuàng)建組件對象，將構(gòu)造函數(shù)接口暴露
使用創(chuàng)建的構(gòu)造函數(shù)，創(chuàng)建組件對象，執(zhí)行相應(yīng)邏輯。
二 組件設(shè)計的原則先設(shè)計組件的結(jié)構(gòu)
再處理組件的API
完成組件的控制流
三 彈窗組件 1 基本的HTML與CSS
組件樣式的編寫：
先完成容器整體外部輪廓的布局、寬高。只在容器上設(shè)置一個類
設(shè)置容器內(nèi)各個元素在容器中的樣式
2 選擇面向?qū)ο蟮哪Ｊ絼?chuàng)建組件對象提示
重要說明 百度前端技術(shù)學院的課程任務(wù)是由百度前端工程師專為對前端不同掌握程度的同學設(shè)計。
使用工廠模式過程：
定義保存HTML結(jié)構(gòu)的模板字符串（第一步靜態(tài)結(jié)構(gòu)中的彈窗結(jié)構(gòu)，將定制部分作為變量）
創(chuàng)建對象的構(gòu)造函數(shù)，定義彈窗可配置內(nèi)容的接口text，然后初始化彈窗組件this.init()
設(shè)計組件的API：
show()
hide()
設(shè)計組件控制流：
結(jié)構(gòu)初始化this.initDom()
事件邏輯初始化this.initEvent()
對外暴露構(gòu)造函數(shù)，在外部使用。
var layer = new Layer("hahahaha")
(function () {
// 一個閉包
// 彈窗組件的HTML結(jié)構(gòu)：模板字符串，定制需求
var html = `
提示
{text}
`;
// 彈窗組件構(gòu)造函數(shù)
function Layer(text) { // text是對外的接口，可以定制彈窗中的內(nèi)容
// 用戶的定制需求：彈窗組件的參數(shù)配置
this.text = text;
// 調(diào)用初始化彈窗韓式
this.init();
}
// 原型對象上的方法
// 定義初始化彈窗的方法
Layer.prototype.init = function () {
// 初始化彈窗的DOM結(jié)構(gòu)
this.initDom();
// 初始化彈窗的事件
this.initEvent();
}
// 定義初始化彈窗DOM結(jié)構(gòu)的方法
Layer.prototype.initDom = function () {
}
// 初始化彈窗中的事件方法
Layer.prototype.initEvent = function () {
}
// 顯示組件的方法：將生成的內(nèi)容添加到HTML頁面中
Layer.prototype.show = function () {
}
// 關(guān)閉彈窗的方法：將節(jié)點刪除
Layer.prototype.hide = function () {}
//----------------------------------------------------------------//
// 組件調(diào)用渠道：
//
// 將構(gòu)造函數(shù)返回出整個閉包，可以在外面調(diào)用構(gòu)造函數(shù)生成彈窗組件
window.Layer = Layer; // 掛載到全局對象，也可以使用閉包，return Layer;
})();
//----------------------------------------------------------------//
// 組件使用：生成一個組件對象
var layer = new window.Layer("重要說明 百度前端技術(shù)學院的課程任務(wù)是由百度前端工程師專為對前端不同掌握程度的同學設(shè)計。我們盡力保證課程內(nèi)容的質(zhì)量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐");
3 完整代碼
Document
提示
重要說明 百度前端技術(shù)學院的課程任務(wù)是由百度前端工程師專為對前端不同掌握程度的同學設(shè)計。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82110.html
摘要：策略模式由兩部分構(gòu)成一部分是封裝不同策略的策略組，另一部分是。策略模式的典型應(yīng)用場景是表單校驗中，對于校驗規(guī)則的封裝。然而圖像的壓縮及上傳錯誤處理等部分是公用的。遂考慮使用策略模式封裝。 淺談 JavaScript 中策略模式的使用： 什么是設(shè)計模式 什么是策略模式 策略模式在 JavaScript 中的應(yīng)用（使用策略模式封裝百度AI識別調(diào)用） 策略模式在 Vue 組件封裝中的應(yīng)用（...
摘要：一般這種情況會在類的構(gòu)造函數(shù)內(nèi)創(chuàng)建一個屬性，引用或詞法域的，但后面會看到我們有更好的辦法，避免這種手工代碼。 換句話說，StateUp模式把面向?qū)ο蟮脑O(shè)計方法應(yīng)用到了狀態(tài)對象的管理上，在遵循React的組件化機制和基于props實現(xiàn)組件通訊方式的前提之下做到了這一點。 ---- 少婦白潔 閱讀本文之前，請確定你讀過React的官方文檔中關(guān)于Lifting State Up的論述： ht...
摘要：大潮來襲前端開發(fā)能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的標準讓我們可以使用語言來開發(fā)。 VR 大潮來襲 --- 前端開發(fā)能做些什么 去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的 API 標準讓我們可以使用 ...
摘要：作為一名前端菜鳥，最近看例子，根據(jù)理解自己也簡單實現(xiàn)了一下組件的繼承和事件機制。公共功能銷毀在子類中調(diào)用的組件自己的功能的實現(xiàn)有很多種，我用了，的實現(xiàn)比較巧妙。最后記得提供一個銷毀組件的方法，一個簡單的組件就完成了。 作為一名前端菜鳥，最近看react例子，根據(jù)理解自己也簡單實現(xiàn)了一下組件的繼承和事件機制。 代碼在這里 原始的組件寫法 (function($) { $.plug...
閱讀 2249·2021-11-15 11:36
閱讀 1672·2021-09-23 11:55
閱讀 2558·2021-09-22 15:16
閱讀 2089·2019-08-30 15:45
閱讀 1933·2019-08-29 11:10
閱讀 1089·2019-08-26 13:40
閱讀 981·2019-08-26 10:44
閱讀 3232·2019-08-23 14:55
