自定義或可重用的HTML組件

我們可以在HTML中創建自定義或可重用組件嗎？自定義或可重用的HTML組件

我的網頁具有使用HTML，JS，jQuery代碼實現的帳戶搜索功能。我的網頁包含在不同地方的帳戶搜索。（功能同樣強悍）。每次我們使用div時，只有div的ID會發生變化。

那麼我們可以想出一種HTML中的組件嗎？

再一次，將代碼寫入單獨的文件並且包含在不同的位置不會像每個區域的ID更改一樣工作。 ID的問題，因爲我們打電話給服務器，獲取數據和更新字段等。

來源

2013-05-01 Kiran Nunna

目前還不清楚你的問題是什麼，你能否讓我更具體？你是指模板嗎？創建您自己的獨特標記標籤？ – Swordfish0321 2013-05-01 22:44:03

也許你正在尋找像mustacheJS或把手的東西？同樣在可重用的HHTML組件中，angularJS以非常好的方式來實現這一點 - 但這是一個很大的學習曲線，它可能比您需要的這個項目更多。 – 2013-05-01 22:44:32

有一種自定義陰影DOM會很高興，但AFAIK它不是一個選項。 – zzzzBov 2013-05-01 22:50:27

以下框架有助於解決問題：

Mustache

HandleBars

我更喜歡使用車把（這是對鬍鬚的頂部寫的）。

來源

2013-11-21 06:41:38

HTML是一種標記語言，而不是編程語言。最有可能你正在尋找一個template engine像haml

來源

2013-05-01 22:41:50 fotanus

看看到JavaScript模板。一個例子見mustache.js。

例如

<script type="text/template" id="template"> 
    {{#elements}} 
     <div id="{{id}}"> 
     {{content}} 
     </div> 
    {{/elements}} 
</script>

而JavaScript：

var view = { 
    "elements": 
    [ 
     { 
      id: "one", 
      content: "Lorem ipsum dolor" 
     }, 
     { 
      id: "two", 
      content: "Sit amet consectetur" 
     } 
    ] 
} 

var template = document.getElementById("template").innerHTML; 
var output = Mustache.render(template, view); 
console.log(output);

日誌：

<div id="one"> 
    Lorem ipsum dolor 
</div> 
<div id="two"> 
    Sit amet consectetur 
</div>

您可以通過對象循環，評價功能，將其插入文本。

來源

2013-05-01 22:50:14

+1我以前沒有見過像這樣的javascript模板，只有像freemarker這樣的更復雜的服務器端解決方案。很酷。 – 2013-05-01 23:10:19

我喜歡一個很好的模板引擎，但是您可以使用簡單的標記來將您的邏輯與html控件分離。

bootstrap使用類來實現此功能，並且數據屬性也可以進行更精確的控制。

你需要清理你的代碼;收集你需要的所有代碼，並將所有的ref分離到任何給定的id。通常情況下，這並不困難，因爲您只有一個或兩個使用id的位置，使用變量執行其餘的操作。

將所有代碼合併到一個函數中，該函數只接受一個元素作爲唯一參數;這以前是編碼到ID的硬編碼。將代碼中使用的任何ID移動到類或更好的變量中。改變CSS以反映這些類和/或小部件類的後代（更快）。在這一點上，你應該能夠調用該函數並傳遞一個元素，並使其工作。讓我們稱之爲makeSearchFromElement（）。

function makeSearchFromElement(elm){ 
    elm.onchange=function(e){ alert("searching for " + elm.value); }; 
}

一旦你可以做到這一點，你需要的只是一個簡單的方法來定義它們。我們以「widget-search」一類爲例。將該類添加到需要包中的搜索功能的任何html元素。

<input class='search widget-search validation' id=search123 type=search />

現在，你需要做的就是找到所有聲明控件的HTML和他們在一個站點範圍的JS文件的某處發送到部件製造商：

[].slice 
    .call(document.getElementsByClassName("widget-search")) 
    .map(makeSearchFromElement);

如果你不

」 t注入到body標籤的底部，您需要將最後一位放在ready（）或onload（）事件中。

這就是您需要做的所有事情，只需向HTML中添加一個類，而不是一行CSS或JS添加每個輸入，即可使任何輸入具有演示「搜索」功能。它可以讓你從一個地方對網站上的每一個進行補丁或升級，並且它減少了通過網絡發送的自定義代碼的數量，使得網頁加載比手動綁定更快，甚至模板化它們。

來源

2013-05-01 23:57:15 dandavis

請參閱blog post。它使用Handlebar.js闡述了「如何創建可重用組件」。絕對值得一讀。

下面的代碼足以在您的應用中添加datetimepicker。

{{datetime "d1" "Start Date"}}

jsFiddle for this

來源

2013-09-21 05:50:13 user10

如果您使用angularJS，您可以創建一個可重用的html片段，方法是在組件中創建一個單獨的html文件，然後將其作爲元素調用到您的頁面中。

app.directive("elementName", function() { 
    return { 
    restrict: 'E', 
    templateUrl: "/Path/To/Html.file" 
    }; 
});

然後在每一個html頁面要使用該組件，你只要做到以下幾點：

<element-name></element-name>

來源

2014-09-19 15:04:27 Stan

其實，也許你可以使用單獨的js文件，執行只需要接收（也許在構造函數，或者如果不是類，則查找特定的html標籤），並在需要時使用所需的信息。

來源

2014-09-19 15:11:34 Wanderson

自定義或可重用的HTML組件

回答

相關問題