第一篇：前端開發(fā)心得
web前端核心技術
從事前端開發(fā)工作1年多了，從最初的DIV+CSS學起，到現(xiàn)在學到html5、css3、javascript，jquery等等，我覺得前端要學的技術太多了，很多人認為前端開發(fā)要掌握的技能簡單，就是網頁制作，其實不然，前端開發(fā)是網站的前臺代碼實現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級版本是HTML5、CSS3，以及SVG等。JavaScript作為最難的語言之一，許多編程高手也不敢妄自菲薄、自封精通。
關于兼容性的問題我相信對于每個做前端開發(fā)的人來講是一個很頭疼的問題，互聯(lián)網目前主流瀏覽器有IE6789，F(xiàn)irefox，Chrome，Opera，Safari，遨游，包括國內主流的搜狗，騰訊 TT，360等等；從內核上講主要有IE的，遨游版IE，safari，firefox以及opera的，這些都是大家常見的。所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數情況下，用戶用什么瀏覽器來查看同一網站，都應該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問題是前端開發(fā)人員經常會碰到和必須要解決的問題。這個時候就需要針對不同的瀏覽器寫不同的CSS，這個過程叫CSS hack。雖然我們寫代碼都要求按照標準，不寫hack代碼，但實際工作中為了兼容主流瀏覽器，hack代碼是免不了的，所以這也應該是每個前端開發(fā)人員必備的技能。
前端的開發(fā)工具很多，比較常見的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我現(xiàn)在在使用webstorm，強大的提示功能可以幫助我們很快的熟悉并掌握網頁布局,檢查錯誤等。調試代碼的工具我使用的Firebug。Firebug是網頁瀏覽器Mozilla firefox 下的一款開發(fā)類插件，它集HTML查看和編輯、Javascript控制臺、網絡狀況監(jiān)視器于一體，是開發(fā)JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節(jié)層面，給Web開發(fā)者帶來很大的便利。Firebug也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網站的CSS、HTML、Dom 以及Javascript代碼。
以上是自己做前端開發(fā)的一點心得，它所涵蓋的知識面遠遠不止這些，我也在不斷的學習，不斷地豐富自己，希望自己能在前端這個職位上開闊自己的一片天地！
第二篇：前端開發(fā)命名規(guī)范范文
前端開發(fā)工作規(guī)范
為提高團隊協(xié)作效率，便于后臺人員添加功能及前端后期優(yōu)化維護，輸出高質量的文檔，特制訂此文檔。本規(guī)范文檔一經確認，前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā)。
【寫在規(guī)則前面的話】
項目的可維護性第一。你不是一個人在做事，項目的維護和二次開發(fā)可能是直接的或間接的團隊合作。好的可維護性，從四個方面下手：
1）代碼的松耦合，高度模塊化，將頁面內的元素視為一個個模塊，相互獨立，盡量避免耦合過高的代碼，從html,css,js三個層面都要考慮模塊化。
2）良好的注釋。
3）注意代碼的彈性，在性能和彈性的選擇上，一般情況下以彈性為優(yōu)先考慮條件，在保證彈性的基礎上，適當優(yōu)化性能。
4）嚴格按照規(guī)范編寫代碼。
【命名規(guī)則】
為避免命名沖突，命名規(guī)則如下：
1）公共組件因為高度重用，命名從簡，不要加前綴；
2）各欄目的相應代碼，需加前綴，前綴為WD姓名拼音的首字母，例如：杰夫前綴為“jf_”，分隔符為下劃線“_”，例如：“jf_imgList”;
3）模塊組件化，組件中的class或id名采用駱駝命名法和下劃線相結合的方式，單詞之間的分隔靠大寫字母分開，從屬關系靠下劃線分隔。例如：
html:
- 1)XXXXXXXXXXXXXX
- 2)XXXXXXXXXXXXXX
- 3)XXXXXXXXXXXXXX
css:
.textList{}.text_list X{}
.textList_firstItem{ }.textListFirstItem X{}
4）命名清晰，不怕命名長，怕命名容易沖突，長命名可以保證不會產生沖突，所以css選擇時可以盡量不使用子選擇符，也能確保css優(yōu)先級權重足夠低，方便擴展時的覆蓋操作：.textList_firstItem{}.textList.firstItem{}
5)命名要有意義，不要使用沒有意義的命名。用英語命名，不要用拼音。
【分工安排】
1)分工原則為公共組件（包括common.css和public.JS）一人維護，各欄目其他人負責，每個欄目正常情況下一人負責，要詳細寫明注釋，如果多人合作，維護的人員注意添加注釋信息，具體注釋細則，詳見注釋規(guī)則；
2)VD設計完設計圖后，先和交互設計師溝通，確定設計可行，然后先將設計圖給公共組件維護者，看設計圖是否需要提取公共組件，然后再提交給相應欄目的WD。如果有公共組件要提取，公共組件維護者需對欄目WD說明。
3)如果確定沒有公共組件需提取，交互設計師直接和各欄目的WD交流，對照著VD的設計
圖進行說明，WD完成需求；
4)WD在制作頁面的時候，需先去common文件中查詢是否已經存在設計圖中的組件，如果有，直接調用；沒有，則在app.css和app.JS中添加相應的代碼。
5)WD在制作過程中，發(fā)現(xiàn)有高度重用的模塊，卻未被加入到公共組件中，需向公共組件維護人進行說明，然后工作組件維護人決定是否添加該組件。如果 確定添加，則向WD們說明添加了新組件，讓WD們檢查之前是否添加了類似組件，統(tǒng)一更新成新組件的用法，刪除之前自定義的css和js。雖然麻煩，但始終 把可維護性放在首位。
6)公共組件維護者的公共組件說明文檔，需圖片和說明文字配套，方便閱讀。
【注釋規(guī)則】
1.公共組件維護者和各欄目WD都需要在文件頭部加上注釋說明：
/**
*文件用途說明
*作者姓名、聯(lián)系方式（旺旺）
*制作日期
**/
2.大的模塊注釋方法：
//================
// 代碼用途
//================
3.小的注釋；
//代碼說明
注釋單獨一行，不要在代碼后的同一行內加注釋。
例如：
//姓名
var name = “abc”;V
var name =”abc”;//姓名 X
4.維護人員的注釋方法：盡量根據注釋說明，找到代碼的原作者，讓原作者進行維護，原作者進行維護可以無需添加額外說明，直接進行修改。如果因為特殊原因，無法讓原作者進行維護，需添加額外說明進行注釋。說明文字為：“/*change by xxx)原代碼如下：
<{源代碼}>.新代碼如下:*/
新代碼：
如：var name = “abc”;這段代碼，要將name由“abc”變成“123”，原作者可直接改var name=”123”;非原作者修改，需改成：
/*(change by 杰夫)原代碼如下：<{
var name = “abc”;
}>新代碼如下：*/
var name =”123”;
修改時添加的注釋，在項目通過測試之后，上線前，可以優(yōu)化掉。
【js規(guī)范】
1)底層JS庫采用YUI 2.6.0；
2)統(tǒng)一頭部中只載入YUI load組件，其他組件都通過loader對象加載；
3)js盡量避免使用全局變量，復雜應用寫成組件，通過構造函數實現(xiàn)多態(tài)，寫在公共組件或
外部js中，簡單應用直接寫在init函數中，通過命名空間或匿名函數將變量包進閉包中。
【切圖規(guī)范】
1．盡量把頁面的背景圖及小圖標整合到一張圖片，用CSS定位方法。（這樣以減少http請求，從而降底網站的下載速度。）
2．尊從內容與頁面樣式的脫離，如需要，同樣也要做到布局與color的脫離。（什么樣的圖片屬于內容：從數據庫里取出來的圖片。凡是不屬于內容的圖片請都用背景。）
1）頁面代碼，做到精簡，邏輯性清楚；（公用部位可以引入進來，比如頭部，腳部）
2）CSS邏輯清析，精簡。可在不改變功能的前提內，做到能更換頁面布局及換色。
CSS樣式每個頁面引入不超過兩個文件，一個是common：它包含整個站點都需用到的公用部分，如整體布局，頭部，腳部，框，按扭等。另一個是當前頁的CSS。（CSS文件引入在2個之內，減少http請求）避免CSS的表達式。
3．將腳本放在底部。（這樣頁面就可以逐步呈現(xiàn)，而且頁面中的可視組件可以盡早下裁。）配合程序開發(fā)人員我們需要注意的（xhtml）：
1．了解用戶可編輯上傳修改的“圖片”，“文字”區(qū)域的需求。根據需求來定位控制，以保證頁面的穩(wěn)定顯示。
如圖片，需了解：
1）寬度是否是固定大小，2）寬度最大限度，3）大小不一樣時的居中顯示
如文字，需了解：
1)文字的最大長度。及加“…”省略號區(qū)域,2)在測試中經常也會碰到英文無空格情況，得用overflow: hidden的方法隱藏溢出部分。
2．每個頁面加上正確顯示的TITLE。（這個是我經常容易忽視的）
3．在頁面中盡量完成每步交互效果，包括既時響應的。
4．提交程序員的demo必須是連貫的，交互效里齊全，而且經過自已在IE6.0，IE7.0，IE8.0，F(xiàn)IREFOX等瀏覽器的一次以上的整體測試。
用戶體驗方面需要注意的：
1．每個連接，按鈕要做上鼠標hover時的一個變化效果（如果hover時是換一張背景圖片，請把這兩張圖片整合在一張圖片中，以防止在hover時，頁面還在download變化的那張圖片，這樣會出現(xiàn)那個按鈕無圖的間隔）；
2．Input有個label，可以讓用戶在點擊字時，光標自動跳入相應input中；
3．圖片應該有alt屬性，以備圖片阻止時，文字的替換。
本文由世紀淘商城()整理分享！版權歸原作者所有！
第三篇：什么是前端開發(fā)工程師
004km.cn
什么是前端開發(fā)工程師
前端開發(fā)工程師是Web前端開發(fā)工程師的簡稱，是近五年才真正開始受到重視的一個新興職業(yè)。Web前端開發(fā)技術是一個先易后難的過程，主要包括三個要素：HTML（標準通用標記語言下的一個應用）、CSS和JavaScript，這就要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術，網站性能優(yōu)化、SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發(fā)以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
前端開發(fā)工程師是一個很新的職業(yè)，在國內乃至國際上真正開始受到重視的時間2005年開始，是指Web前端開發(fā)工程師的簡稱。Web前端開發(fā)是從美工演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網的演化進程中，Web 1.0時代，網站的主要內容都是靜態(tài)的，用戶使用網站的行為也以瀏覽為主。
2005年以后，互聯(lián)網進入Web 2.0時代，各種類似桌面軟件的Web應用大量涌現(xiàn)，網站的前端由此發(fā)生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現(xiàn)的。
004km.cn
隨著Web 2.0概念的普及和W3C組織的推廣，網站重構的影響力正以驚人的速度增長。XHTML+CSS布局、DHTML和Ajax像一陣旋風，鋪天蓋地席卷而來，包括新浪、搜狐、網易、騰訊、淘寶等在內的各種規(guī)模的IT企業(yè)都對自己的網站進行了重構。
（ps：本文章由北大青鳥廣安門校區(qū)搜集自互聯(lián)網）
第四篇：WEB前端開發(fā)經驗總結
ASP.NET前端開發(fā)經驗總結
通過此次大作業(yè)的設計到完成，我負責的是web前端的開發(fā)，經過此次作業(yè)和結合W3C上的自學，我漸漸有了一些對前端開發(fā)的小小經驗（僅為個人意見）。WEB標準是什么？
說是WEB標準，不過我這里主要是對HTML5 和 CSS3.0的一些經驗總結。因為WEB含蓋的內容實在是太多了，“WEB標準”是一系列標準的總稱，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來一下，WEB標準不是我們所說的DIV+CSS。剛剛上面提到了――DIV+CSS，這里要說明下，這樣說其實是不正確的。DIV+CSS準確的說法（個人的理解）應該是：采用W3C推薦的WEB標準中的HTML5結合CSS3.0樣式表制作頁面的方法，DIV應該指的是HTML標簽，而CSS顯示是指的CSS樣式表了。
采用WEB標準開發(fā)的好處
那么W3C為什么會推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標準開發(fā)（個人理解的）相對以前TABLE布局的優(yōu)勢有哪些？
1、節(jié)約運營成本
看看我們的WEB標準制作方法是如何做到的？
采用WEB標準制作，我們可以做到表現(xiàn)很形式的分離，我們用XHTML來表現(xiàn)（數據），用CSS來控制（頁面元素呈現(xiàn)的）形式。寫的好的頁面，XHTML代碼中基本上都是用戶要看的數據，還其他修飾性的東西，全部由我們的CSS來控制。這樣一來我們的（XHTML）頁面的體積就大大減小了，這樣你在帶寬上的費用就會大家降低了，這個怎么降低的，你可以想象一下，YAHOO的首頁小1K，100W個人一起訪問，那么帶寬節(jié)約了多少？而且可以更充分的利用帶寬。
而我們的CSS控制了，所有的頁面元素的樣式，現(xiàn)在想改網站的整體風格，你只需要花幾分鐘修改一下一個CSS文件，就可以輕松搞定了。維護的成本也下來了，省了不少錢了吧？還有，你開這個頁面的速度會快很多啊，一個讓你等半分鐘的頁面，除非里面的信息對你很有用，不然我們大家基本都沒有太多的時間去用來等待的。
2、對用戶友好更友好，且有機會獲得更多的用戶 現(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類：普通用戶（每個訪問我們網站的人）； 第二類：搜索引擎；
采用WEB標準開發(fā)的頁面，結構清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結構清晰，要找的數據可以很方便的瀏覽到。
而對搜索引擎來說，一個好的采用WEB標準開發(fā)的頁面，都是做過SEO優(yōu)化的，它訪問起來很友好，很容易理解你的頁面中哪里是標題（H1~H6標簽），哪里是段落（p標簽），哪里是段落里要強調的內容（strong標簽）等，它可以很容易的分析出來。而一個SEO好的站點，大家都知道，被搜索引擎收錄的機會更多，這個也意味著您的網站會被更多的普通用戶訪問到，給你的站點帶來更多的用戶。
一個能幫我們省下大筆費用，提高工作效率。同時又能夠提高頁面瀏覽速度，對用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術。你說你會不會去使用它？這個也正式我們的W3C推薦使用WEB標準開放網站的原因啊。而這個技術也得到了我們廣大用戶的認可，所以現(xiàn)在需要學習WEB標準啊。合理的布局
前面我提到了一些知識點――“結構清晰、SEO優(yōu)化、頁面體積小、HTML代碼中基本上都是用戶要看的數據”。這些東西，都是我做了合理布局的結果。而且我個人覺得，我們采用WEB標準制作的一切都是從這個知識點開始的，所以我這里就先來說這個話題。
也許有人會問，怎樣的一個頁面，才算是合理的布局的呢？這個問題問題問得好，也是我們大家剛開始學用WEB標準的問得最多的問題之一，我也曾經常被這個問題所困擾，這里就說說我對合理布局的一些理解。
在開始講合理布局的頁面要達到的要素前，我們還是用個實例來講解會更直觀些。先來看看這個圖片：
不錯，這個是一個文章詳細頁，沒有左右兩欄布局，不過這里我重點要講的是合理的布局。
這是此次實驗中customer（前端的一項）部分的完整代碼：
<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Customer.aspx.cs” Inherits=“Customer” %> <%@ Register Src=“Controllers/Bottom.ascx” TagName=“Bottom” TagPrefix=“uc4” %> <%@ Register Src=“Controllers/Top.ascx” TagName=“Top” TagPrefix=“uc1” %> <%@ Register Src=“Controllers/Left.ascx” TagName=“Left” TagPrefix=“uc2” %>
” name=“description”/> ” name=“keywords” />