① 前端怎麼判斷漢字是什麼字母開頭的
去找Convert_Pinyin這個漢子轉拼音的插件，使用方法看文檔
轉為拼音後得到的拼音字元串用 str.splic(0,1)截取第一個字母就行了
② 前端規范一（命名規范）
前端規范一（命名規范）
1、小駝峰命名法（lowerCamelCase） ：第一個單詞以小寫字母開始，第二個單詞的首字母大寫，例如：firstName、lastName。
2、大駝峰命名法（CamelCase） ：每一個單詞的首字母都採用大寫字母，例如：FirstName、LastName。
3、下劃線命名法（snake_case）：下劃線命名法也叫蛇形法，全由小寫字母和下劃線組成，在兩個單詞之間用下滑線連接。例如：first_name。
4、中劃線命名法（kebab-case）：中劃線命名法也叫串式命名法，各個單詞之間通過下劃線「-」連接。例如：first-name。
強制使用：中劃線命名法
命名規則：1、文件名不得含有空格
2、文件名建議只使用小寫字母，不使用大寫字母
3、文件名包含多個單詞時，單詞之間建議連詞線 ( - ) 分隔
4、有復數結構式，要使用復數
示例：login 、 error-page、 icons
強制使用：全部大寫字母
為了醒目，某些說明文件的文件名，可以使用大寫字母
示例：README
補充說明: README 標准
◎ 項目簡介。
◎ 注意事項。
◎ 線上的示例地址（測試、正式）。
◎ 支持運行的環境。
◎ 必要的依賴准備，以及如何搭建。
◎ 項目的安裝指南。
◎ 相關的文檔鏈接。
◎ 相關人員的聯系方式。
README.md 示例：
強制使用：小駝峰命名法
命名規則：前綴為動詞，見名知意
1、onXxx 監聽事件的回調
2、handleXxx 處理事件
3、getXxx 獲取某個值
4、setXxx 設置某個值
常見場景：
a、事件處理：
(1).事件主動監聽採用 onXxx ,被動處理使用handleXxx
示例：onXxxSubmit: '提交表單'
handleXxxSizeChange: '處理分頁頁數改變'
handleXxxPageChange: '處理分頁每頁大小改變'
onXxxKeydown: '按下鍵'
(2). 其他命名：元素+click、 元素+change、select+范圍
示例：selectAllXxx: '選擇所有'
xxxCellClick: '當某個單元格被點擊時會觸發該事件'
xxxSortChange: '當表格的排序條件發生變化的時候會觸發該事件'
b、增刪改查處理：
增: addXxx 添加子項
createXxx 創建大項
刪: deleteXxx 真刪除
removeXxx 偽刪除
改：updateXxx
查: getXxx 獲取原始數據需要修改
fetchXxx 原始數據
示例：getUserList: '獲取用戶列表', fetchToken: '取得Token', deleteUser: '刪除用戶', removeTag: '移除標簽', updateUserInfo: '更新用戶信息', addUser: '添加用戶', createAccount: '創建賬戶'
c、API介面函數：
get: getXxxApi
post: postXxxApi
patch: patchXxxApi
delect: delectXxxApi
域名：xxxUrl
一般屬性變數 強制使用：小駝峰命名法
1、布爾值
命名規則：前綴為判斷性動詞
hasXxx 判斷是否含有某個值。true：含有此值； false：不含有此值
isXxx 判斷是否為某個值。true：為某個值； false：不為某個值
示例：isShow: '是否顯示', isLoading: '是否處於載入中'， hasToken: '是否包含Token',
2、數組命名
命名規則：使用名詞+List組合
示例: userList: '用戶列表'
3、私有屬性變數
命名規則：前綴為下劃線(_)後面和變數命名一樣。
4、枚舉變數 \textcolor{red}{強制使用：大駝峰命名法}
枚舉的屬性使用全大寫字母，單詞間用下劃線隔開。
示例：let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };
5、常量： 強制使用：使用全大寫字母，單詞間用下劃線隔開
強制使用：大駝峰命名法
命名規則： 可參考vue官網風格指南
例如： 1、按照功能來命名
2、應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。
3、組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
示例：components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
強制使用: 中劃線命名法
命名規則：
1.class、id 、標簽、屬性的命名應該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用中劃線 「-」 連接
2.class必須代表相應模塊或部件的內容或功能，不得以樣式信息進行命名。
3.元素 id 必須保證頁面唯一。
4.禁止創建無樣式信息的 class
示例：
1、盡量不要縮寫、簡寫的單詞。除了 template => tmp、message => msg、image => img、property => prop 這些單詞已經被公認的縮寫
2、可讀性強的命名優先於簡短的命名
3、命名長度最好在 20 個字元以內，避免多長帶來的閱讀不便
4、命名要有具體的含義，避免使用一些泛指和無具體含義的詞
5、不要使用拼音，更不要使用中文
6、正則表達式用 Exp 結尾
7、ref：使用Ref結尾
③ 學web前端該如何做好自己的職業規劃
職業方向定位
首先，只有確定好自己的職業方向，才能做好職業規劃。
(1)資深WEB前端工程師
這個方向算是一個WEB前端最基本的選擇了，在國外，很多老外都能夠把自己的專業做到極致，能一輩子就在一個專業領域不斷學習和積累。主要在於內因和外因
兩方面，內因是老外通常思想比較簡單直接，容易一直專注於一個領域;外因是國外的環境很好，能夠良好的支撐這樣的職業發展道路。反觀國內，從內因來
講，WEB前端技術人員還是蠻浮躁的，通常會因為WEB前端知識的更新速度太快而覺得學習起來辛苦，最終轉向後台或其他道路。從外因來講，WEB前端人員
沒有獲得公平的待遇，可能從HTML頁面製作就開始並沿襲下來的，從來WEB前端人員都比後端人員低一等，貌似前端就是「淺顯」的代名詞、後端就是「深
奧」的代名詞，這也直接造就了前端人員的收入無法和後端人員媲美，同時直接影響到前端人才市場的活躍程度。另一方面，前端的技術入門較容易，造成另一個極
端情況：人員泛濫、人才稀缺。我想對所有的WEB前端工程師說：麵包總會有的，要耐得住寂寞!我個人比較推薦這個職業發展方向，因為，在這個方向下，只要
足夠耐心、厚積薄發，成功的概率是非常高的。同時，這是一條最單純的路，我們更多的是花費精力在技術的鑽研上，而不是辦公室政治等其它瑣事。
(2)資深WEB架構師
說功利點兒，這個方向既兼顧了工作的單純性、又能夠減少實際Coding的工作量能騰出更多時間鑽研技術。在國內，WEB前端工程師遇到較多的情
況是總是反復編寫著同樣的代碼，總是面對著同樣的技術和產品，容易感覺枯燥。由於我們擁有最為廣泛的WEB相關知識沉澱，使得我們更加容易成為一名架構
師。這個職業發展方向不如第一種來得平滑，主要是作為一名架構師不得不學習：後端技術、DBA、Platform等內容，而這種學習通常需要實際操刀做項
目，不是自己在家裡寫兩個Demo就好的，這就勢必會遭遇一段時間的陣痛期。雖然不是很平滑，但是，對於一個大局觀好、悟性好、知識面廣的前端工程師，我
推薦你們努把力，走一條光榮的架構師之路吧。
(3)自己創業
其實，自己創業是最好的道路、也是成功率最低的道路，挑戰和機遇並存。這里，作為一個前端技術人員，需要將自己的視野更多放在行業的動態、產業鏈的動態、
相關產品領域的動態，把關注細節的優勢繼續保持，同時，增強自己把控一個產品乃至一個公司命運的能力。
(4)轉崗管理或其他
由於這條職業道路和WEB前端技術之路關系不大，故而，這里不做過多討論，但是，無論是否走上這條道路，我覺得對於任何技術之路，更好的大局觀、更廣泛的
視野是良好發展的必備條件，擁有良好的大局觀和更廣泛的視野別無他法，只能不斷的進行知識的橫向拓展和積累，同時，多在橫向拓展知識的時候進行實踐，把知
識變成技能。
職業發展目標
我們都有一個最終的目標，在這個目標之上，我們需要給自己制定一系列學習和成長計劃，制定的方法如下：
第一、梳理知識架構;
梳理知識架構的目的在於，我們要了解清楚，哪些技術是前置、哪些技術是後繼，那些技術是深度、哪些技術是廣度，按照這兩個維度梳理好知識架構之後，我們才能准確地制定清晰的成長目標、高效的成長計劃。
第二、分解目標;
我認為，大抵可分解為三個階段，包括：起步階段、提升階段、成型階段。這三個階段分別對應著不同的目標：
起步階段：
1、基本知識的掌握
在我們梳理的知識架構中，按照我們分析的兩個維度里最前置的、最淺顯的部分，作為打基礎的階段，必須要在這個過程中更多投入到實踐中去，我們通常做的多了、熟練了，就認為這部分知識和內容掌握了。
2、常用工具的掌握
對於常用工具的掌握應該掌握一些有大公司或專業團隊背景的流行工具，這些工具的熟練掌握能夠提升專業度、職業度，同時，能提升我們的工作效率。我們只有在
檢驗自己對於知識和技能熟練程度的時候，才會自虐式的用Notepad去編寫頁面、css和腳本等內容。
3、溝通技巧的掌握
通常做技術的人會被定位為「不善溝通」的人，這是為什麼呢?究其原因，主要是因為多跟程序和代碼打交道，跟人的溝通較少導致。這種時候我們要特別注意增加
和人溝通的機會，著重提升這塊兒的能力。另一方面，我們通常被稱為「不懂溝通技巧」的人。作為一個技術人員，包括我自己，似乎天生就有一些難以接受挑戰的
缺陷。在國內，我們的技術人員通常都是自己制定方案、自己執行方案，在執行過程中又缺乏相關產品、交互設計等人員的溝通，大多是在自己的思路貫徹下進行開
發，久而久之，我們習慣於信任自己的觀點、在自己的視角看問題，對於挑戰總是百般地「據理」力爭。我們需要更多提升的是，如何在對方的視角看問題、如何在
用戶的視角看問題。
4、良好的開發習慣
開發習慣是養成的，一旦有不好的習慣，對於將來去修正帶來的將是很大的麻煩，我們在培養良好開發習慣一定要從起步時做起，例如：寫代碼之前先分析、先寫文
檔、先寫注釋。定義變數最好能用直接可理解的語義，最好是拼音，別整英文，尤其是生僻單詞，將來自己忘了還要開金山詞霸。文件最好有有意義的文件夾命名來
管理，文件名最好有意義，需要版本號的最好能和項目版本號一同更新等等。
提升階段：
1、高級技術的掌握
在提升階段對於知識和技能掌握，我們需要從梳理好的知識架構中選擇更深一層次的技術進行學習，選擇之前，我們先通過類比或預估的方法，衡量自身學習的難
點，以學習難點和自己最不感興趣的部分為主。這樣推薦大家的原因是：這個階段我們興趣正濃，已經度過了苦澀的起步階段，到達了興奮的提升階段，我們要用興
趣和興奮去挑戰最困難的部分，在我們信心受挫和興趣濃厚之中找到平衡。同時，輔以其他的深層次知識一起學習和研究。
2、產品思想的學習
沒有正確的產品思想，很難設計出良好的程序，無論從界面、交互，還是介面、邏輯，不能夠理解產品、理解用戶需求，我們會給自己造成很大的麻煩，例如：我們
千辛萬苦用最新技術、最復雜的實現做出的功能，卻得不到使用者或領導、同事的認可。為了使我們的工作和學習更加有效率、避免無用功，我們需要不斷的學習產
品的思想，只有理解了產品的思路，我們才知道用我們的技術去輸出什麼。
3、各種框架的學習
框架是我們提高工作效率的優秀手段，對於框架的學習是成長必經之路。我們學習框架的路線通常應該是：使用->分析->個性化定製->模仿編寫自己的
框架。只有大量的使用，才能明白設計框架者在設計背後的思路，只有了解到設計的思路，才能做正確全面的分析，只有正確全面的分析才能支撐我們去對其裁剪或
擴展，只有經過實際分析、修改別人的框架，才有可能寫出優秀的、自己的框架。學習通常的路線是：學習、理解、模仿、創造。
4、富客戶端應用的學習
隨著帶寬和計算機性能的提升，以及WEB2.0的如火如荼，富客戶端應用充斥著互聯網，如果你不懂得富客戶端應用，你就不能稱之為一個合格的前端技術人
員。可以按照：Flash動畫->Flash編程->Flex->->Air->Silverlight動畫->Silverlight編程
的步驟學習，先學Flash後學Siverlight的原因，一來Silverlight還不太成熟，二來，實際Silverlight借鑒了很多
Flash的思想，最好在學習的時候不要本末倒置。
5、各種網路協議的學習
WEB前端技術就是雲上的技術，雲的協議有N種，我們應該著重學習：TCP/IP，UDP，HTTP，POP3，SMTP這幾種協議，在開發WEB前端應
用過程中，這些協議是我們的技術的載體，有時候決定了我們的應用是否能實現、有時候決定了我們的應用是否高性能，同時，這些協議還是我們和後端技術交互的
重要手段，這些協議就像是密碼字典，幫助我們把後端傳輸過來的密文解釋成我們前端技術能夠理解的明文。
6、程序設計
這個階段我們需要學習OO、UML、設計模式、設計方法，我們要讓技術開發工作變成有目的性、有計劃性，並且，這些目的和計劃必須有理論的支持，這
樣，我們設計出來的程序才能夠更優秀、我們的開發才更有效率，這樣，我們的技術才能有所提升。為什麼要學習程序設計呢?主要是，就算我們不用Flash的
ActionScript編寫程序的前端邏輯，我們至少要把我們自己的Javascript函數、包的定義規劃起來，避免將來自己或他人維護代碼的時候出
現問題。程序設計能力，在技術人員仍然被看作是程序員的
這個年代，是灰常、灰常重要滴。
成型階段：
到了這個階段，我也沒什麼好說的了，如果能達到這個階段，就證明後續的成長之路是異彩紛呈的，是成為一個資深WEB前端工程師，還是成為一個資深WEB架
構師，亦或其他，都要具體分析自身的特點和興趣所在。如果是資深的前端工程師，我覺得更重要的是去作新技術的研究，互聯網技術發展速度日新月異，不斷學習
新技術，否則就被淘汰。此外，我建議在知識的廣度、深度方面最好能挑選一個自己最擅長和最感興趣的一兩個領域深入鑽研，不要挑太多，多而不精。如果是資深
的WEB架構師之路，我建議要深入了解後台技術，這種深入了解一定要伴隨著實際的項目開發，基本方法是：按照別人設計的架構實現幾個Server->自己設計並實現幾個Server。
關於一個WEB前端的職業規劃，其實是有各種的答案，沒有哪種答案是完全正確的，全憑自己的選擇，只要是自己選定了，堅持去認真走，就好。當然，任何規劃和目標的實現都依賴於知識的積累，而知識的積累來源於學習及學習後大量的實
踐。
④ 前端模糊搜索
這是自動完成功能思路：當你輸入一個字元之後（這個可以你自己定義變數來約束，隨便幾個），通過AJAX訪問後台，查詢到所有結果包含你輸入的字元的一個結果集 然後再返回給前端 當然你可以在後台封裝好（即拼接hmtl代碼和結果） 將返回的結果放到文本框下面的那個DIV裡面 顯示出來 就OK了 具體代碼不難 如果你是程序員 告訴你思路應該就可以實現了
⑤ 生僻字前端如何在手機顯示
到手機官方論壇找找主題，或許已經提供了思源黑體、思源宋體版主題了呢。應該能夠滿足絕大部分生日姓名、地名生僻用字。
⑥ 學完Web前端後的發展方向如何
今天小編要跟大家分享的文章是關於學完Web前端後的發展方向如何?正在學習和從事Web前端相關學習和工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
一、職業方向定位
首先，只有確定好自己的職業方向，才能做好職業規劃。在我看來，做Web前端技術能夠找到的職業方向有以下幾種：
(1)資深Web前端工程師
這個方向算是一個Web前端最基本的選擇了，在國外，很多老外都能夠把自己的專業做到極致，能一輩子就在一個專業領域不斷學習和積累。主要在於內因和外因兩方面，內因是老外通常思想比較簡單直接，容易一直專注於一個領域;外因是國外的環境很好，能夠良好的支撐這樣的職業發展道路。
反觀國內，從內因來講，WEB前端技術人員還是蠻浮躁的，通常會因為Web前端知識的更新速度太快而覺得學習起來辛苦，最終轉向後台或其他道路。
從外因來講，Web前端人員沒有獲得公平的待遇，可能從HTML頁面製作就開始並沿襲下來的，從來WEB前端人員都比後端人員低一等，貌似前端就是「淺顯」的代名詞、後端就是「深奧」的代名詞，這也直接造就了前端人員的收入無法和後端人員媲美，同時直接影響到前端人才市場的活躍程度。另一方面，前端的技術入門較容易，造成另一個極端情況：人員泛濫、人才稀缺。
我想對所有的WEB前端工程師說：麵包總會有的，要耐得住寂寞!我個人比較推薦這個職業發展方向，因為，在這個方向下，只要足夠耐心、厚積薄發，成功的概率是非常高的。同時，這是一條最單純的路，我們更多的是花費精力在技術的鑽研上，而不是辦公室政治等其它瑣事。
(2)資深Web架構
說功利點兒，我喜歡這個方向，既兼顧了工作的單純性、又能夠減少實際Coding的工作量能騰出更多時間鑽研技術。在國內，Web前端工程師遇到較多的情況是總是反復編寫著同樣的代碼，總是面對著同樣的技術和產品，容易感覺枯燥。由於我們擁有最為廣泛的Web相關知識沉澱，使得我們更加容易成為一名架構師。這個職業發展方向不如第一種來得平滑，主要是作為一名架構師不得不學習：後端技術、DBA、Platform等內容，而這種學習通常需要實際操刀做項目，不是自己在家裡寫兩個Demo就好的，這就勢必會遭遇一段時間的陣痛期。雖然不是很平滑，但是，對於一個大局觀好、悟性好、知識面廣的前端工程師，我推薦你們努把力，走一條光榮的架構師之路吧。
(3)自己創業
其實，自己創業是最好的道路、也是成功率最低的道路，挑戰和機遇並存。這里，作為一個前端技術人員，需要將自己的視野更多放在行業的動態、產業鏈的動態、
相關產品領域的動態，把關注細節的優勢繼續保持，同時，增強自己把控一個產品乃至一個公司命運的能力。但是，這條道路和技術之路稍有分歧，後續將不再贅述。
(4)轉崗管理或其他
由於這條職業道路和Web前端技術之路關系不大，故而，這里不做過多討論，但是，無論是否走上這條道路，我覺得對於任何技術之路，更好的大局觀、更廣泛的視野是良好發展的必備條件，擁有良好的大局觀和更廣泛的視野別無他法，只能不斷的進行知識的橫向拓展和積累，同時，多在橫向拓展知識的時候進行實踐，把知識變成技能。
二、職業發展目標
我都有一個最終的目標，在這個目標之上，我們需要給自己制定一系列學習和成長計劃，制定的方法如下：
第一、梳理知識架構;
梳理知識架構的目的在於，我們要了解清楚，哪些技術是前置、哪些技術是後繼，那些技術是深度、哪些技術是廣度，按照這兩個維度梳理好知識架構之後，我們才能准確地制定清晰的成長目標、高效的成長計劃。
第二、分解目標;
我認為，大抵可分解為三個階段，包括：起步階段、提升階段、成型階段。這三個階段分別對應著不同的目標：
起步階段：
1、基本知識的掌握
在我們梳理的知識架構中，按照我們分析的兩個維度里最前置的、最淺顯的部分，作為打基礎的階段，必須要在這個過程中更多投入到實踐中去，我們通常做的多了、熟練了，就認為這部分知識和內容掌握了。
2、常用工具的掌握
對於常用工具的掌握應該掌握一些有大公司或專業團隊背景的流行工具，這些工具的熟練掌握能夠提升專業度、職業度，同時，能提升我們的工作效率。我們只有在檢驗自己對於知識和技能熟練程度的時候，才會自虐式的用Notepad去編寫頁面、css和腳本等內容。
3、溝通技巧的掌握
通常做技術的人會被定位為「不善溝通」的人，這是為什麼呢?究其原因，主要是因為多跟程序和代碼打交道，跟人的溝通較少導致。這種時候我們要特別注意增加
和人溝通的機會，著重提升這塊兒的能力。另一方面，我們通常被稱為「不懂溝通技巧」的人。作為一個技術人員，包括我自己，似乎天生就有一些難以接受挑戰的缺陷。在國內，我們的技術人員通常都是自己制定方案、自己執行方案，在執行過程中又缺乏相關產品、交互設計等人員的溝通，大多是在自己的思路貫徹下進行開發，久而久之，我們習慣於信任自己的觀點、在自己的視角看問題，對於挑戰總是百般地「據理」力爭。我們需要更多提升的是，如何在對方的視角看問題、如何在用戶的視角看問題。
4、良好的開發習慣
開發習慣是養成的，一旦有不好的習慣，對於將來去修正帶來的將是很大的麻煩，我們在培養良好開發習慣一定要從起步時做起，例如：寫代碼之前先分析、先寫文
檔、先寫注釋。定義變數最好能用直接可理解的語義，最好是拼音，別整英文，尤其是生僻單詞，將來自己忘了還要開金山詞霸。文件最好有有意義的文件夾命名來管理，文件名最好有意義，需要版本號的最好能和項目版本號一同更新等等。
提升階段：
1、高級技術的掌握在提升階段對於知識和技能掌握，我們需要從梳理好的知識架構中選擇更深一層次的技術進行學習，選擇之前，我們先通過類比或預估的方法，衡量自身學習的難點，
以學習難點和自己最不感興趣的部分為主。這樣推薦大家的原因是：這個階段我們興趣正濃，已經度過了苦澀的起步階段，到達了興奮的提升階段，我們要用興趣和興奮去挑戰最困難的部分，在我們信心受挫和興趣濃厚之中找到平衡。同時，輔以其他的深層次知識一起學習和研究。
2、產品思想的學習
沒有正確的產品思想，很難設計出良好的程序，無論從界面、交互，還是介面、邏輯，不能夠理解產品、理解用戶需求，我們會給自己造成很大的麻煩，例如：我們
千辛萬苦用最新技術、最復雜的實現做出的功能，卻得不到使用者或領導、同事的認可。為了使我們的工作和學習更加有效率、避免無用功，我們需要不斷的學習產品的思想，只有理解了產品的思路，我們才知道用我們的技術去輸出什麼。
3、各種框架的學習
框架是我們提高工作效率的優秀手段，對於框架的學習是成長必經之路。我們學習框架的路線通常應該是：使用——》分析——》個性化定製——》模仿編寫自己的框架。只有大量的使用，才能明白設計框架者在設計背後的思路，只有了解到設計的思路，才能做正確全面的分析，只有正確全面的分析才能支撐我們去對其裁剪或擴展，只有經過實際分析、修改別人的框架，才有可能寫出優秀的、自己的框架。學習通常的路線是：學習、理解、模仿、創造。
4、富客戶端應用的學習
隨著帶寬和計算機性能的提升，以及Web2.0的如火如荼，富客戶端應用充斥著互聯網，如果你不懂得富客戶端應用，你就不能稱之為一個合格的前端技術人員。可以按照：Flash動,畫—>Flash編程—>Flex—>Air—>Silverlight動畫—Silverlight編程
的步驟學習，先學Flash後學Siverlight的原因，一來Silverlight還不太成熟，二來，實際Silverlight借鑒了很多Flash的思想，最好在學習的時候不要本末倒置。
5、各種網路協議的學習
Web前端技術就是雲上的技術，雲的協議有N種，我們應該著重學習：TCP/IP，UDP，HTTP，POP3，SMTP這幾種協議，在開發Web前端應用過程中，這些協議是我們的技術的載體，有時候決定了我們的應用是否能實現、有時候決定了我們的應用是否高性能，同時，這些協議還是我們和後端技術交互的重要手段，這些協議就像是密碼字典，幫助我們把後端傳輸過來的密文解釋成我們前端技術能夠理解的明文。
6、程序設計
這個階段我們需要學習OO、UML、設計模式、設計方法，我們要讓技術開發工作變成有目的性、有計劃性，並且，這些目的和計劃必須有理論的支持，這樣，我們設計出來的程序才能夠更優秀、我們的開發才更有效率，這樣，我們的技術才能有所提升。為什麼要學習程序設計呢?主要是，就算我們不用Flash的ActionScript編寫程序的前端邏輯，我們至少要把我們自己的Javascript函數、包的定義規劃起來，避免將來自己或他人維護代碼的時候出現問題。程序設計能力，在技術人員仍然被看作是程序員的這個年代，是灰常、灰常重要滴。
成型階段：
到了這個階段，我也沒什麼好說的了，如果能達到這個階段，就證明後續的成長之路是異彩紛呈的，是成為一個資深Web前端工程師，還是成為一個資深Web架構師，亦或其他，都要具體分析自身的特點和興趣所在。如果是資深的前端工程師，我覺得更重要的是去作新技術的研究，互聯網技術發展速度日新月異，不斷學習新技術，否則就被淘汰。此外，我建議在知識的廣度、深度方面最好能挑選一個自己最擅長和最感興趣的一兩個領域深入鑽研，不要挑太多，多而不精。如果是資深的Web架構師之路，我建議要深入了解後台技術，這種深入了解一定要伴隨著實際的項目開發，基本方法是：按照別人設計的架構實現幾個Server—>自己設計並實現幾個Server。
現在這個時代，金錢都變成了數字，從前都是拿在手上，現在都變成了虛擬幣一樣，互聯網時代，我們拼的是時間，只有在有限的時間，把自己提升上去，才能去給自己獲得更多的回報!
以上就是小編今天為大家分享的關於學完Web前端後的發展方向如何的文章，希望本篇文章能夠對小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端程序員。
文章來源：張_前端留學生
⑦ 求前端驗證js代碼
這是一般表單中會用到的 1. 長度限制
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert(」不能超過50個字元！」);
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit=」return test()」>
<textarea name=」b」 cols=」40″ wrap=」VIRTUAL」 rows=」6″></textarea>
<input type=」submit」 name=」Submit」 value=」check」>
</form>
2. 只能是漢字
<input onkeyup=」value=」/oblog/value.replace(/[^\u4E00-\u9FA5]/g,」)」>
3.」 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>
<input onkeydown=」onlyEng();」>
4. 只能是數字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考慮小鍵盤上的數字鍵
event.returnvalue=false;
}
</script>
<input onkeydown=」onlyNum();」>
5. 只能是英文字元和數字
<input onkeyup=」value=」/oblog/value.replace(/[\W]/g,」」) 「onbeforepaste=」clipboardData.setData(』text』,clipboardData.getData(』text』).replace(/[^\d]/g,」))」>
6. 驗證郵箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert(」oh」);
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7. 屏蔽關鍵字(這里屏蔽***和****)
<script language=」javascript1.2″>
function test() {
if((a.b.value.indexOf (」***」) == 0)||(a.b.value.indexOf (」****」) == 0)){
alert(」:)」);
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit=」return test()」>
<input type=text name=b>
<input type=」submit」 name=」Submit」 value=」check」>
</form>
8. 兩次輸入密碼是否相同
<FORM METHOD=POST ACTION=」">
<input type=」password」 id=」input1″>
<input type=」password」 id=」input2″>
<input type=」button」 value=」test」 onclick=」check()」>
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert(」false」)
input1.value = 「」;
input2.value = 「」;
}
else document.forms[0].submit();
}
}
</script>
夠了吧 :)
屏蔽右鍵 很酷
oncontextmenu=」return false」 ondragstart=」return false」 onselectstart=」return false」
加在body中
二
2.1 表單項不能為空
<script language=」javascript」>
<!–
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert(」請輸入您姓名!」);
document.form.name.focus();
return false;
}
return true;
}
–>
</script>
2.2 比較兩個表單項的值是否相同
<script language=」javascript」>
<!–
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert(」您兩次輸入的密碼不一樣！請重新輸入.」);
document.ADDUser.PWD.focus();
return false;
}
return true;
}
–>
</script>
2.3 表單項只能為數字和」_」,用於電話/銀行帳號驗證上,可擴展到域名注冊等
<script language=」javascript」>
<!–
function isNumber(String)
{
var Letters = 」1234567890-」; //可以自己增加可輸入值
var i;
var c;
if(String.charAt( 0 )==』-')
return false;
if( String.charAt( String.length - 1 ) == 』-』 )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert(」您的電話號碼不合法！」);
document.form.TEL.focus();
return false;
}
return true;
}
–>
</script>
2.4 表單項輸入數值/長度限定
<script language=」javascript」>
<!–
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert(」輸入數值不能小於零大於100!」);
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert(」輸入文字小於10!」);
document.form.MESSAGE.focus();
return false;
}
return true;
}
//–>
</script>
2.5 中文/英文/數字/郵件地址合法性判斷
<SCRIPT LANGUAGE=」javascript」>
<!–
function isEnglish(name) //英文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E-mail值檢測
{
if(! isEnglish(name))
return false;
i = name.indexOf(」 at 」);
j = name dot lastIndexOf(」 at 」);
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}
function isNumber(name) //數值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < 」0″ || name.charAt(i) > 」9″)
return false;
}
return true;
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert(」您的電子郵件不合法！」);
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert(」英文名不合法！」);
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert(」中文名不合法！」);
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert(」郵政編碼不合法！」);
form.PublicZipCode.focus();
return false;
}
return true;
}
//–>
</SCRIPT>
2.6 限定表單項不能輸入的字元
<script language=」javascript」>
<!–
function contain(str,charset)// 字元串包含測試函數
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}
function CheckForm()
{
if ((contain(document.form.NAME.value, 」%\(\)><」)) || (contain(document.form.MESSAGE.value, 」%\(\)><」)))
{
alert(」輸入了非法字元」);
document.form.NAME.focus();
return false;
}
return true;
}
//–>
</script>
1. 檢查一段字元串是否全由數字組成
—————————————
<script language=」Javascript」><!–
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum(」1232142141″))
alert(checkNum(」123214214a1″))
// –></script>
2. 怎麼判斷是否是字元
—————————————
if (/[^\x00-\xff]/g.test(s)) alert(」含有漢字」);
else alert(」全是字元」);
3. 怎麼判斷是否含有漢字
—————————————
if (escape(str).indexOf(」%u」)!=-1) alert(」含有漢字」);
else alert(」全是字元」);
4. 郵箱格式驗證
—————————————
//函數名：chkemail
//功能介紹：檢查是否為Email Address
//參數說明：要檢查的字元串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf(』@');
var tempd = a.indexOf(』.');
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}
}
}
return 0;
}
5. 數字格式驗證
—————————————
//函數名：fucCheckNUM
//功能介紹：檢查是否為數字
//參數說明：要檢查的數字
//返回值：1為是數字，0為不是數字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp=」0123456789″;
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++)
{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//說明有字元不是數字
return 0;
}
}
//說明是數字
return 1;
}
6. 電話號碼格式驗證
—————————————
//函數名：fucCheckTEL
//功能介紹：檢查是否為電話號碼
//參數說明：要檢查的字元串
//返回值：1為是合法，0為不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp=」0123456789-()# 「;
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//說明有字元不合法
return 0;
}
}
//說明合法
return 1;
}
7. 判斷輸入是否為中文的函數
—————————————
function ischinese(s){
var ret=true;
for(var i=0;i<s.length;i++)
ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}
8. 綜合的判斷用戶輸入的合法性的函數
—————————————
<script language=」javascript」>
//限制輸入字元的位數開始
//m是用戶輸入，n是要限制的位數
function issmall(m,n)
{
if ((m<n) && (m>0))
{
return(false);
}
else
{return(true);}
}
9. 判斷密碼是否輸入一致
—————————————
function issame(str1,str2)
{
if (str1==str2)
{return(true);}
else
{return(false);}
}
10. 判斷用戶名是否為數字字母下滑線
—————————————
function notchinese(str){
var reg=/[^A-Za-z0-9_]/g
if (reg.test(str)){
return (false);
}else{
return(true); }
}
2.8. form文本域的通用校驗函數
—————————————
作用：檢測所有必須非空的input文本，比如姓名，賬號，郵件地址等等。
該校驗現在只針對文本域，如果要針對form裡面的其他域對象，可以改變判斷條件。
使用方法：在要檢測的文本域中加入title文字。文字是在提示信息，你要提示給用戶的該欄位的中文名。比如要檢測用戶名
html如下<input name=」txt_1″ title=」姓名」>,當然，最好用可視化工具比如dreamweaver什麼的來編輯域。
如果要檢測數字類型數據的話，再把域的id統一為sz.
javascript判斷日期類型比較麻煩，所以就沒有做日期類型校驗的程序了.高手可以補充。
程序比較草，只是提供一個思路。拋磚引玉！ ：）
哦，對了，函數調用方法：
< form onsubmit=」return dovalidate()」>
function dovalidate()
{
fm=document.forms[0] //只檢測一個form,如果是多個可以改變判斷條件
for(i=0;i<fm.length;i++)
{
//檢測判斷條件，根據類型不同可以修改
if(fm[i].tagName.toUpperCase()==」INPUT」 &&fm[i].type.toUpperCase()==」TEXT」 && (fm[i].title!=」"))
if(fm[i].value=」/blog/=」")//
{
str_warn1=fm[i].title+」不能為空!」;
alert(str_warn1);
fm[i].focus();
return false;
}
if(fm[i].id.toUpperCase()==」SZ」)//數字校驗
{
if(isNaN(fm[i].value))
{ str_warn2=fm[i].title+」格式不對」;
alert(str_warn2);
fm[i].focus();
return false;
}
}
}
return true;
}
⑧ 檢索圖書的依據是什麼
通過本系統，讀者可以查到首都圖書館館藏的1949年以來的中文普通圖書、港台圖書、1900年之後的報刊資料，以及古籍善本、北京地方文獻、電子文獻和視聽資料。英文文獻正在建庫，已有部分可以提供書目檢索，日、俄文也將陸續建庫。。如查詢俄、日文館藏圖書請通過卡片目錄查詢（卡片目錄在6204外文圖書借閱室），查詢英文文獻可通過本檢索系統和卡片目錄配合進行。
二樓大廳設有公共檢索計算機，讀者可在開館時間內查詢，也可在任何聯網計算機中進入首都圖書館書目檢索系統進行網上查詢。
二、檢索欄位說明 返回
題名--包括正題名、並列題名、從屬題名、其它題名、叢書名等等。匹配方式為「前方一致」。
例如：在「題名」中輸入「文學研究」四字，檢索時如果正題名、並列題名、從屬題名、其它題名、叢書名等各項中只要其中一項前端部分是「文學研究」字樣，即為符合條件的檢索結果。
⑨ web前端的彈出提示欄咋寫
js有三種彈出框
alert()--警告消息框
alert 方法有一個參數，即希望對用戶顯示的文本字元串。該字元串不是 HTML 格式。該消息框提供了一個「確定」按鈕讓用戶關閉該消息框，並且該消息框是模式對話框，也就是說，用戶必須先關閉該消息框然後才能繼續進行操作。例如：window.alert("歡迎！請按「確定」繼續。")
confirm()--確認消息框
使用確認消息框可向用戶問一個「是-或-否」問題，並且用戶可以選擇單擊「確定」按鈕或者單擊「取消」按鈕。confirm 方法的返回值為 true 或 false。該消息框也是模式對話框：用戶必須在響應該對話框（單擊一個按鈕）將其關閉後，才能進行下一步操作。
例如： var truthBeTold = window.confirm("單擊「確定」繼續。單擊「取消」停止。")
prompt()--提示消息框
提示消息框提供了一個文本欄位，用戶可以在此欄位輸入一個答案來響應您的提示。該消息框有一個「確定」按鈕和一個「取消」按鈕。如果您提供了一個輔助字元串參數，則提示消息框將在文本欄位顯示該輔助字元串作為默認響應。否則，默認文本為 "<undefined>"。 與alert( ) 和 confirm( ) 方法類似，prompt 方法也將顯示一個模式消息框。用戶在繼續操作之前必須先關閉該消息框 。
例如：var theResponse = window.prompt("歡迎？","請在此輸入您的姓名。");
⑩ 前端頁面中的label是什麼作用
其實主要是 Label 中有兩個屬性是非常有用的,一個是FOR、另外一個就是ACCESSKEY了。
FOR屬性
功能：表示Label標簽要綁定的HTML元素，你點擊這個標簽的時候，所綁定的元素將獲取焦點。
用法： <Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY屬性：
功能：表示訪問Label標簽所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。
用法： <Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
局限性：accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵沖突，否則將優先激活瀏覽器的快捷鍵。
注意：
要將 LABEL 綁定到其它的控制項，請將 LABEL 元素的 FOR 屬性設置為與該控制項的 ID 相同。將 LABEL 綁定到控制項的 NAME 屬性毫無用處。但是，要提交表單，你必須為 LABEL 元素所綁定到的控制項指定NAME。