2012-08-01 67 views
1

我正在處理一個項目,並用Javascript編寫了整個頁面。完全由javascript生成網站佈局是否錯誤?

我創建了一個基本功能:

create_element(parent, type, style, attributes); 

實例應用:

var container = create_element(document.body, "div", {width: "100%", height: "100%"}); 
var header_bar = create_element(container, "div", {width: "100%", height: "50px"}); 
var title_span = create_element(header_bar, "span", {fontSize: "18px", fontFamily: "arial", color: "black"}); 
title_span.innerHTML = "Example Website"; 

等等......

我使用這種方法的網站的整個佈局。使用這種方法有很大的缺點嗎?顯而易見的是,JS可能仍然有人在那裏被禁用。

如果Javascript正在創建和渲染項目而不是將它們硬編碼到HTML中,頁面加載時間是否存在實際差異?

謝謝!

TL; DR -

創建一個create_element功能,並使用它來繪製到屏幕上的所有元素。包括頁面的基本佈局。

+0

在諸如Node.js之類的服務器端JavaScript中,您需要使用JS來渲染布局,但這不是您要問的問題。 – zzzzBov 2012-08-01 14:04:38

+4

你可能會得到很難維護的代碼 – mykola 2012-08-01 14:05:24

+4

你的方法有什麼好處? – 2012-08-01 14:06:55

回答

6

有很多,你會遇到當您試圖動態生成非動態內容的問題:

  1. 可維護性將變得非常困難。如果你想徹底改變你的網站,你將不得不編輯JS而不只是改變CSS或HTML。
  2. SEO - Google無法索引動態數據。如果您希望通過搜索引擎找到您的網站,這並不好。
  3. 你在混合你的圖層。通過不分離顧慮(您的觀點與您的內容與...),您再次增加了可維護性問題,併爲將來自己或未來需要觸摸您的代碼的其他開發人員創建了一個問題。

現在,做一些動態生成並沒有錯 - 但是要適當地做。我強烈建議不要爲整個網站動態生成內容。

更新基於評論對原始的問題

這是偉大的,你享受JS。而且,我絕對同意HTML可能有點無聊。但是,如果你正確地分離你的顧慮,你應該不得不寫很少的HTML,並且可以快速回到你喜歡的編碼中。但是,要小心,你並不是試圖強迫一種語言進入它不是的東西這意味着當另一種語言被創建完成時就會這樣做。 (錘子/釘子規則)

此外,不要忘記,HTML5和CSS3是非常強大的。你可以用它做很多事情,甚至不必碰JS(假設滿足客戶需求)。

+1

「我強烈建議爲您的整個站點動態生成內容。」Typo? – 2012-08-01 14:11:50

+1

@Tyler - Whoops。Fixed! – JasCav 2012-08-01 14:14:25

+0

謝謝JasCav。正確答案的類型 – 2012-08-01 14:16:33

1

如果確保用於渲染頁面的元數據不被整體評估,則會導致安全問題,而基於來自服務器的響應,由javascript生成整個網站並沒有錯。

+0

請你詳細說明一下嗎? – 2012-08-01 14:06:38

+0

基本上他說:ajax響應可能是一個對象,您可以從中創建頁面的一部分(例如表單)。但是,通過「不作爲整體評估」,他的意思是:「不要使用'eval'並且不要像'document.getElementById('emtpyDiv')。innerHTML = this.responseText'這樣的東西做爲響應文本可能包含的內容有害的JavaScript代碼(讓你面臨XSS攻擊的危險) – 2012-08-01 14:12:30

0

在我看來,如果它不是動態內容,它會更好地使用html。此外,具有單獨的CSS文件比將它設置爲內聯更合適。

2

一個主要問題是,如果您像這樣構建,Google將不會索引您網站的任何內容。另外,這樣你的內容,你的邏輯和你的造型不會分開,如果你在單獨的文件和服務器端腳本語言中使用html/css,我認爲這是一個巨大的好處。

+1

實際上,如果它是全部使用javascript,它仍然可以分開,就像說你不能組織和分離應用程序的不同部分,因爲它全部用Objective- C或Java或Ruby等等。 – 2014-09-07 16:20:04

0

BackboneJS這樣做。您只需確保JS使用客戶端來完成服務器端渲染,並且任何單獨在客戶端上執行的渲染都可以在服務器上完成或部分完成。

0

沒有理由,一個網頁內容不能完全由JavaScript生成,但我不會認可這個元素的元素的方法。你甚至沒有使用任何樣式規則,只有內聯樣式。此外,在這種情況下,使用某種類似的HTML塊模板機制(如Underscore.js中使用的模板機制)會更易於維護。 (這裏有很多模板解決方案,比如Mustache和Handlebars;我只是給出了一個我用過的)。有幾種方法可以在某些javascript文件不存在的情況下維護html,但即使它是也是在一個JavaScript文件中,它會比這個元素的元素更容易維護。