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