當前位置:首頁 » 網頁前端 » Web組件
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

Web組件

發布時間: 2022-01-25 13:44:19

⑴ 常用的WEB伺服器組件有哪些

internet信息服務(IIS系統組件)--公用文件-萬維網服務-asp文檔

Apache 最流行的HTTP伺服器軟體之一.
http://lccnc.skycn.com/down/apache_2.2.4-win32-x86-no_ssl.zip

⑵ 網頁組件的介紹

網頁組件,又叫web組件。網頁組件包含各種常用的界面組件,如:表格、樹、聯動下拉框等,可輕松構造出令人耳目一新的,具有RIA (Rich Internet Application) 特徵的Web 應用界面。無需下載安裝任何瀏覽器插件,即能實現類似C/S 應用的界面風格和操作習慣,根除B/S 應用難以滿足用戶體驗的頑症。可擴展的UI 數據層, 可快速地與各種第三方的開發框架或應用整合。獨樹一幟的Client 端 / Server 端事件編程機制, 充分保證Web 界面的擴展性和靈活性。

⑶ web組件都有什麼基於java技術的web組件都有什麼

傳統的JSF、Portlet算是這種技術,不過現在生產開發用的Web組件應該主要是指JavaScript實現的前端組件。

⑷ 1.以下不屬於J2EE提供的Web組件技術是( )。 A、JSP B、Applet C、Servlet D、Filter

B
jsp是web組件的頁面
servlet是web組件的控制器
filter是web組件的過濾器
至於B中的applet是小應用程序,不屬於web獨有的。

⑸ Web Components是不是Web的未來

今天 ,Web
組件已經從本質上改變了HTML。初次接觸時,它看起來像一個全新的技術。Web組件最初的目的是使開發人員擁有擴展瀏覽器標簽的能力,可以自由的進行定
制組件。面對新的技術,你可能會覺得無從下手。那這篇文章將為你揭開Web組件神秘的面紗。如果你已經熟知HTML標簽和DOM編程,已經擁有了大量可用
的Web組件,那麼你已經是Web組件專家了。

Web組件的現狀

隨著各式各樣的用戶需求,瀏覽器的原生組件已經無法滿足需求。Web組件也就變得越來越重要。

我們將以自定義一個傳統三方插件為例來介紹Web組件。

首先,需要引用插件的CSS和JavaScript資源:

<link rel="stylesheet" type="text/css" href="my-widget.css" />

<script src="my-widget.js"></script>

接下來,我們需要向頁面中添加佔位符。

<div data-my-widget></div>

最後,我們需要使用腳本來找到並且實例化這個佔位符為Web組件。

// 使用 jQuery 初始化組件

$(function() {

$('[data-my-widget]').myWidget();

});

通過以上是三個基本步驟。已經完成了在頁面中添加了自定義插件,但是瀏覽器無法確定自定義組件的生命周期,如果通過以下方式聲明則使自定義組件生命周期變得清晰了。

el.innerHTML = '<div data-my-widget></div>';

因為這不是一個內置的組件,我們現在必須手動實例化新組件,

$(el).find('[data-my-widget]').myWidget();

避免這種復雜設置方法的有效方式是完全抽象DOM交互。不過,這個動作也比較復雜,需要創建框架或者庫來自定義組件。

面臨的問題

組件一旦被聲明,佔位符已經被替代為原生的HTML標記:

<div data-my-widget>

<div class="my-widget-foobar">

<input type="text" class="my-widget-text" />

<button class="my-widget-button">Go</button>

</div>

</div>

這樣做的弊端是,自定義組件的標記和普通HTML組件的標記混雜在一起,沒有清晰的分割和封裝。這就不可避免的會出現命名及樣式等沖突。

Web組件的產生

隨著三方Web組件的發展,它已經成為了Web開發不可或缺的部分:

<!—導入: -->

<link rel="import" href="my-widget.html" />

<!—使用:-->

<my-widget />

在這個實例中,我們通過導入HTML來添加組件並且立即使用。

更重要的是,因為<my-widget />是瀏覽器原生支持的組件,它直接掛在瀏覽器的生命周期中,允許我們像添加原生組件一樣添加三方組件。

el.innerHTML = '<my-widget />';

// 插件當前已經被實例化

當查看這個組件的HTML 源碼,你會發現它僅僅是一個單一的標簽。如果啟用瀏覽器Shadow DOM 特性,才可以查看標簽內的組件,你將會發現一些有趣的事情,

當我們談論Web組件時,我們不是在談論一門新技術。Web組件最初的目的是給我們封裝能力,它可以通過自定義組件和Shadow DOM 技術來實現。所以,接下來,我們將著重介紹下這兩項技術。介紹以上兩個技術之前,我們最好先梳理下已知瀏覽器原生組件。

已知的HTML組件

我們知道組件可以通過HTML標記或JavaScript來實例化:

使用標記實例化:

<input type="text" />
document.createElement('input');
el.innerHTML = '<input type="text" />';

使用JaveScript實例化:

document.createElement('input')

document.createElement('div')

添加帶有屬性的HTML標簽:

// 創建帶有屬性的input標簽...

el.innerHTML = '<input type="text" value="foobar" />';

//這時value屬性已經同步

el.querySelector('input').value;

組件可以響應屬性的變化:

// 如果我們更改value 屬性值
input.setAttribute('value', 'Foobar');

//屬性值會立即更改
input.value === 'Foobar'; // true

組件可以有內部隱藏的DOM結構:

<!—使用一個input實現復雜的日歷功能-->
<input type="date" />

// 盡管其內部結構比較復雜,但是已經封裝成為一個組件
dateInput.children.length === 0; // true

組件可以使用子組件:

<!—可以給組件提供任意個 'option' 標簽-->

<select>

<option>1</option>

<option>2</option>

<option>3</option>

</select>

組件可以為其子組件提供樣式:

dialog::backdrop {

background: rgba(0, 0, 0, 0.5);

}

最後,組件可以有內置樣式。和自定義插件不同,我們不需要為瀏覽器的原生控制項引用CSS文件。

有了以上的了解,我們已經具備了解Web組件的基礎。使用自定義組件和Shadow DOM,我們可以在我們的插件中定義所有這些標准行為。

自定義組件

注冊一個新組件也比較簡單:

var MyElement = document.register('my-element');

// 'document.register' 返回一個構造函器

你也許注意到上面的自定義組件名稱包含一個連接符。這是為了確保自定義組件名稱不和瀏覽器內置組件不沖突。

現在<my-element />這個組件具備了原生組件的特性,

所以,自定義組件也同樣可以進行普通的DOM操作:

document.create('my-element');

el.innerHTML = '<my-element />';

document.create('my-element');

構建自定義組件

當前,這個自定義組件僅僅有框架,而沒有內容,下面讓我們向其中添加一些內容:

//我們將提供'document.register'的第二個參數:

document.register('my-element', {

prototype: Object.create(HTMLElement.prototype, {

createdCallback: {

value: function() {

this.innerHTML = '<h1>ELEMENT CREATED!</h1>';

}

}

})

});

在這個例子中,我們設置自定義組件的prototype,使用Object.create 方法創建一個繼承於HTMLElement的對象。在這個方法中修改該組件的屬性 innerHTML。

我們定義了createdCallback方法,在每次聲明實例時調用。你同樣可以有選擇性的定義attributeChangedCallback、 enteredViewCallback 和leftViewCallback等方法。

目前為止我們實現了動態修改自定義組件內容的功能,我們仍然需要提供自定義組件的封裝方法,用於隱藏其內部組件。

使用Shadow DOM實現封裝

我們需要完善下createdCallback方法。本次,除了修改innerHTML之外,我們添加一些額外的操作:

createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

shadow.innerHTML = '<h1>SHADOW DOM!</h1>';

}

}

在這個例子中, 你會注意到『SHADOW DOM!』,但是查看源碼時你會發現只有空白的<my-element /> 標簽而已。這里使用創建Shadow Root 方法替代了直接修改頁面。

Shadow Root中的任何組件,是肉眼可見的,但是和當前頁面的樣式和DOM API相隔離。這樣就實現了自定義組件是一個獨立組件的假象。

添加「輕量級DOM」

目前為止,我們的自定義組件是空標簽,但是如果向其中添加內部組件會出現什麼現象呢?

我們假設自定義組件包含的節點如下,

<my-element>

這是一個輕量級 DOM。

<i>hello</i>

<i>world</i>

</my-element>

一旦針對於這個組件的 Shadow Root 被創建,它的子節點不再存在。我們這些隱藏的子節點封裝為輕量級DOM節點。

如果禁用了 Shadow DOM,上面這個例子僅僅會顯示為:這是一個輕量級 DOM『hello world』。

當我們在createdCallback方法中設置 Shadow DOM後,我們可以使用新增內容分配輕量級DOM組件到Shadow DOM 中。

createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

// 子組件'i' 標簽現在已經消失了

shadow.innerHTML =

『輕量級 DOM 中的 "i" 標簽為: ' +

'<content select="i" />';

//現在,在 Shadow DOM 中只有 'i' 標簽是可以見的。

}

}

封裝樣式

Shadow DOM 最重要的作用是創建了和當前頁面隔離的Web組件,使Web組件不受當前頁面樣式和JaveScript腳本的影響。

createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

shadow.innerHTML =

"<style>span { color: green }</style>" +

"<span>I'm green</span>";

}

}

反之,在 Shadow DOM 中定義的樣式也不會影響之外的標簽樣式。

<my-element />

<span>I'm not green</span>

揭露鉤子的秘密

當隱藏自定義組件內部標記,有時也需要在當前頁面對組件中的內部特定組件進行樣式設置。

例如,如果我們自定義一個日歷插件,在不允許用戶控制整個插件的情況下,允許最終用戶去定義按鈕的樣式。

這是其中的部分特性和偽組件:

createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

shadow.innerHTML = 'Hello <em part="world">World</em>';

}

}

這是在當前頁面設置自定義組件內部組件樣式的方法:

my-element::part(world) {

color: green;

}

這部分內容介紹了封裝web組件的基本方式。Shadow DOM 是我們可以任意修改Web組件中的標簽。在例子中,我們設置了「World」的樣式,但是使用者卻無法判斷它是<em>標簽。

在你嘗試自定義Web組件之前,需要確保瀏覽器的相關特性已經打開。如果使用 Chrome,在 Chrome 中打開chrome://flags ,並且開啟「experimental Web Platform features」。

這僅僅是個開始

所有本文中介紹的內容,都是模擬一些簡單的瀏覽器標准行為。我們已經習慣於和原生的瀏覽器組件進行交互,因此自定義組件的步驟並不是想像中的那個難。Web組件最終提供我們一種實現簡單、一致、可復用、封裝和組合部件的方法,這是一個有意義的開始。

⑹ web組件具體指的是什麼

web容器 內嵌一下form表單各種 標簽 插件

⑺ web前端組件怎麼實現

模塊化更一種開發規范,比如cmd amd 是為了更好的解藕,比如一個網站,按照不同的模塊來開發,比如你有個評論區,a 項目有,b 項目有,如果僅是單純的模塊開發,這個js 文件你就可以單獨來回引用,
更比如 ,一個頁面 分好多個功能, 這時候你要是都寫在一個js 中 會越來越大,
而你把他分成不同的模塊,
比如評論是一塊
分頁又是一塊,
已經上線,或你不做了,後期別人拉手,或你接手別人的項目, 這時候來個需求讓你把分頁去掉,或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的,

組件,更想當於一個通用的東西,有的分功能組件,有的分業務組件
大圖切換,這種就是單純的一個效果展示,只要調用就ok
一個分頁,也是只單純的調用,
組件更是一個多處都可以使用 ,不需要再單獨開發的

⑻ 什麼是Office Web 組件

利用Internet Explorer瀏覽器,用戶可以充分利用交互頁面的效果。當用戶使用Internet Explorer瀏覽器去瀏覽一個含有Office Web 組件的頁面時,用戶能夠在Web頁面上交互的進行各種操作,比如:數據分類、過濾、輸入數據、定義公式計算,擴展或折疊數據內容等。Com控制項能夠提供交互操作。並且是可以通過編程,製作實用的、交互的、基於Web的解決方案。Office Web 組件含有四個組件。Office 電子表格組件、Office 數據透視表組件、Office 數據源組件、Office圖表組件。Office 電子表格組件:Office 電子表格組件提供一個重計算的引擎,一個全功能的庫和一個顯示在Web頁面的電子表格界面。通過頁面內的控制項或其它的URL地址內的Internet Explorer 文檔對象模型,用戶可以進行多種計算。只要保存Excel文件作為Web頁面,並選擇交互頁面,用戶就可以製作交互頁面。Office 數據透可以使用電子表格輸入和計算數據。電子表格由單元格的列和行組成。可以直接在電子表格的單元格中輸入數據,並使用公式對這些數據進行計算。如果使用某個 Microsoft Office 2000 設計程序創建了互動式的電子表格,並將該電子表格放置到 Web 頁之上,則 Web 用戶就有可能直接在瀏覽器中與數據進行交互和計算。用戶可以對數據進行更改,並自動看到計算的結果。視表組件:Office 數據透視表組件使用戶能夠通過分類、組合、過濾、縱覽或數據透視來分析數據。數據可以從一個數據透視表、或從一個資料庫(如Microsoft Access或Microsoft SQL Server)或從任何支持OLEDB(如Microsoft Decision Support Server)。當用戶將一個含有數據透視表或者動態查詢表的工作表保存為互動式主頁時。用戶就可以通過Internet頁面來訪問動態的數據透視表組件。Office 數據源組件:數據源組件是工作於數據訪問頁面和數據透視表後的報告引擎。數據源組件用來管理後端資料庫和決定頁面上顯示那條紀錄。

⑼ Web組件與Web容器有哪些,WEB組件的三種關聯

Web組件:有Jsp,Servlet等
Web容器:有tomcat ,jboss, resin, weblogic ,websphere, glassfish。可以理解為Web伺服器。

WEB應用程序如此強大的原因之一就是他們能彼此鏈接和聚合信息資源。WEB組件之間存在三種關聯關系:
l 請求轉發
l URL重定向
l 包含關系
存在以上關聯關系的Web組件可以是JSP或Servlet,對於Struts應用,則還包含Action,這些Web組件都可以訪問HttpServletRequest和HttpServletResponse對象,具有處理請求、生成響應結果的功能。
1. 請求轉發。
請求轉發允許把請求轉發給同一個應用程序中的其他Web組件。這種技術通常應用於Web應用中的Servlet流程式控制制器。
Servlet類使用 javax.servlet.RequestDispatcher.forward()方法來轉發。轉發目標將處理該請求並生成響應結果,或者將請求轉發到另一個組件,最初請求的ServletRequest,ServletResponse對象被傳遞給轉發目標組件,這使得目標組件可以訪問整個請求上下文。值得注意的是,只能把請求轉發給同一個web應用中的組件。下面是一個例子,當前的servlet組件要把請求轉發給一個JSP組件,如hello.jsp,可以在Servlet的service()方法中執行以下代碼:
RequestDispatcher rd = request.getRequestDispatcher(「hello.jsp」);
Rd.forward(request,response);
在jsp頁面中,可以使用<jsp:forward>標簽來轉發請求,例如:
<jsp:forward page=」hello.jsp」/>
對於請求轉發,轉發的源組件和目標組件共享request范圍內的共享數據。
2. 請求重定向
請求重定向類似於請求轉發,但也有一些重要的區別:
l Web組件可以將請求重定向到任一URL,而不僅僅是同一應用中的URL。
l 重定向的目標組件與源組件之間不共用同一個HttpServletRequest對象,因此不能共享request范圍內的共享數據。
例如當前應用的Servlet組件把請求轉發到URL:http://jakarta.apache.org/struts,可以在Servlet的service()方法中執行以下代碼:
Response.sendRedirect(「http://jakarta.apache.org/struts」);
HttpServletResponse的sendRedirect()方法向瀏覽器返回包含重定向的信息,瀏覽器根據這一信息迅速發出一個新的HTTP請求,請求訪問重定向目標組件。
3. 包含
Servlet類使用javax.servlet.RequestDispatcher.include()方法包含其他的Web組件。例如當前的Servlet組件包含三個JSP文件:header.jsp/main.jsp/footer.jsp,則可以在servlet的service()方法中執行以下代碼:
RequestDispatcher rd;
Rd = req.getRequestDispatcher(「/header.jsp」);
Rd.include(req,res);
Rd = req.getRequestDispatcher(「/main.jsp」);
Rd.include(req,res);
Rd = req.getRequestDispatcher(「/footer.jsp」);
Rd.include(req,res);
在JSP文件中,可以通過〈include〉指令來包含其他的web資源,例如:
<%@ include file=」header.jsp」%>
<%@ include file=「main.jsp」%>
<%@ include file=」footer.jsp」%>

⑽ web components是什麼意思

Web Components 包括四個部分:
Custom Elements、HTML Imports、HTML Templates、Shadow DOM
用自定義的標簽來引入組件是前端組件化的基礎
在頁面引用 HTML 文件和 HTML 模板是用於支撐編寫組件視圖和組件資源管理
Shadow DOM 是隔離組件間代碼的沖突和影響