前端規(guī)范化對網站制作的重要性
前端在日新月異的發(fā)展下,給開發(fā)人員帶來便捷與高效,也給開發(fā)人員帶來挑戰(zhàn)與思考;開發(fā)過程中一千個人之中有一千個哈姆雷特也出現了一千份截然不同的代碼,使得代碼的管理以及維護帶來困難,在此基礎下,不同的團隊在自身的環(huán)境下具體問題具體分析后制定出自己的一套規(guī)范,由此,展開了規(guī)范化在于項目過程中的重要性討論。
項目開發(fā)過程中不是一蹴而就,而是由簡入繁的過程,這個過程受到不同因素影響,從未知的影響下轉化為已知的過程,往往帶來的結果就是對于項目的調整,這是一個不可避免的流程。在這個不可避免的流程下,提出自己的第一個觀點,規(guī)范化對于項目的重要性之一則是利于對項目的維護。由此,可以提出另外一個開發(fā)疑問,什么樣的規(guī)范化利于項目的維護;在我理解情況下,主要有一下幾點。
一、代碼的注釋:
上面的兩段代碼在實現的過程中假設是A開發(fā)人員,在修改的過程中需要B來修改,在一個龐大的項目中B為了修改代碼需要讀懂A開發(fā)人員寫的代碼,在沒有注釋的情況,無疑會給B開發(fā)人員帶來難度,項目越復雜,需要理解的代碼就越多,在修改的過程中就會耗費更多的時間。
二、模塊化開發(fā):
為什么要開始模塊化開發(fā)?當一個項目越來越復雜的時候,會出現比較多的問題,比如說全局變量污染問題,功能之間的可關聯性太小,不能很好的調用已完成的功能......
上面呈現代碼中,我們可以看到在eat和play兩個方法在模塊化和普通函數的調用的區(qū)別,通過person的類我們把子類封裝到自己的私有作用域中,減少了全局的方法,只留下一個接口來進行調用。而普通的函數式直接暴露在window的作用域下,同時假設上面兩段代碼是A開發(fā)人員已經寫好的,而B開發(fā)人員開始維護,B開發(fā)人員這個時候也想實現一個eat和play的方法,這個時候所產生的問題就是,B人員所寫的方法名和A人員的方法沖突?;蛘咴谄渌那闆r下,B想修改A的方法,在關聯性不強的情況下,也使得B對于A的代碼產生難度,(注:這里所說的關聯性不是低耦合或者高耦合的概念),這里所指的面向對象的封裝概念。模塊化的實現不僅可以使得代碼的可讀性和復用性提高,還能大大的減少代碼沖突和無意義的報錯。在這里所舉例的只是最為的簡單的一種封裝的模塊化,在整站的模塊化過程也可以調用框架,前端的模塊化框架request.js和服務器框架node.js。
規(guī)范化的重要性還遠遠不止于此,現在說說規(guī)范化另外一個重要功能SEO,SEO是搜索引擎的排名機制的基礎之上,對網站進行內部的調整及外部的調整優(yōu)化,好的SEO就像好的影視劇,能讓劇中之人露臉頻率與被人熟知的機會加大。那么為什么前端的規(guī)范化和SEO有關聯?SEO的工作過程中是一個網頁發(fā)現、收集網頁信息、之后針對收集的網頁信息建立索引庫,再由檢索器根據用戶輸入的關鍵詞返回結果。通過這個過程,我們拋出另外一個疑問,這個機制是如何搜集信息,而我們的規(guī)范化是如何讓我們的信息被搜索引擎機制所抓取。
一、爬蟲通過url超鏈接從這個網頁爬到另外一個網頁:
所以url的設計過程中,一方面對于的功能的實現,另外一方面也需要考慮到SEO的優(yōu)化,具體的表現在于:
1.url盡量簡短,在簡短的url中使用規(guī)范的小寫英文關鍵詞。
2.減少域名的收錄,一個網站如果有幾個不同的域名,對于SEO來說,不能夠判斷其中哪一個才是正確的,在網頁收錄的過程中爬蟲會收錄這幾個域名,在搜索過程中顯示的網頁或許不是你想要的域名,同時一個規(guī)范性的域名為http://www.test.cn,不規(guī)范的域名為http://test.cn,這些情況下會分散頁面權重,不利于搜素排名。雖然在可以通過301重定向來轉向權重。但無疑來說,規(guī)范的url是對SEO無疑是較好的。
二、通過標簽來提高SEO的收錄:
當搜索引擎抓取到了一個新的站點,爬蟲將會對這個站點進行收錄。為了使爬蟲的抓取更為高效,也需要開發(fā)人員在開發(fā)中不僅僅是實現功能,同時也需要考慮網頁的結構上對SEO的考慮。
1.html5的語義化的標簽出現,對于SEO更加的友好,也促使我們需要合理的使用Html5的標簽進行網頁結構的布局
2.meta屬性content設置搜索引擎搜索到的關鍵字,content的內容和title標題設置的關鍵詞需要精簡。
3.頁面中不過多的設置h1標簽,也不能不設置h1標簽,h1變遷的重要性僅此與title的內容,如果網頁中使用不到h1標簽,可以設置h1的內容為需要收錄的內容,對h1的標簽進行z-index的隱藏,不建議使用dISPlay:none進行隱藏,對于display:none的內容,爬蟲會默認跳過。同時對于重要的內容渲染不使用js,js的內容和iframer的內容,爬蟲的收錄效果非常差或者說不收錄。
4.圖片需要設置alt屬性,網頁需要設置404頁面;之所以需要圖片設置alt屬性是因為爬蟲不認識圖片上的內容,只能通過alt進行抓取圖片的信息。網頁中設置404頁面,對于爬蟲來說,會不斷從當前頁面上抽取新的URL放入隊列。如果抽取的過程中進入404頁面,爬蟲會默認回到之前的收錄的頁面。
規(guī)范化是每一個開發(fā)人員在不停的思考、經驗積累的過程總結出來的一套'標準'。這套'標準'也許沒有在開發(fā)過程中帶來驚喜,但是卻會在'隱藏'的地帶帶來福利。以上所說的規(guī)范化,只是蜻蜓點水,還有著許許多多的優(yōu)勢沒有體現。(注:以上觀點僅為個人觀點,如果觀點有誤。歡迎指正和補充)
想了解更多網站技術的內容,請訪問:網站技術