1. 為什麼整個互聯網行業都缺前端工程師
每天，HR群都有人在吐槽招不到前端工程師。實話說對這些需求，誰也無能為力，因為在供不應求的前端招聘市場上，優秀的前端工程師才是有話語權的那一方。不僅在國內的互聯網行業，在國外，前端工程師一樣是需求旺盛、供不應求的香餑餑。
舉個例子，根據#抓取的數千家網站的職位顯示：目前前端的熱門崗位——「HTML5」是需求增長最快的開發崗位，在所有開發職位中排名第一，MongoDB和iOS緊隨其後位列第二、第三。
可見，HTML5可以說是最熱門的前端崗位了，在2010年和2014年底有兩次爆發性增長，現在在美國的崗位需求甚至超過了iOS。所以市場上優秀的前端工程師相對較缺少，是一個世界性難題。
原因一：前端相對來說是一個新領域，當今的web需求要求更多的工程師供應
可能很多人認為前端開發和Web開發類似，而web開發已經有20多年的歷史，所以前端並不是一個新領域。然而，前端工程師的概念中的「介面技術實現和用戶體驗作為一個專業的工作領域」，卻無疑是很新的。大概幾年前，前端開發的技術增長迅猛，如下圖所示：
過去幾年前端工程師的可視化增長趨勢byGoogleTrends
15年或更久以前，Web的可視化設計和技術實現所需要的資源是平均分配的。隨著網站的發展——網站不僅是一個登錄頁面，工程資源的需求越來越明顯。人們開始專門學習網站專用的JS、後端技術、UX、資料庫，甚至系統設計。
今天，一個像AirBnB/Facebook/Quora的Web應用，投入的工程資源比設計資源多得多。換句話說，如今，做出網頁的視覺設計比技術實現要更快，所以當今的web需求要求更多的工程師供應。
現在，一位合格的前端工程師，必須對視覺設計有興趣(或者樂於做一個受虐狂_)。
很顯然，要處理大量的Web應用程序需求，技術任務就要進行分類，以便於多人同時處理網站請求。事實上現在已經不可能一個人快速地解決所有的技術細節了。
現在，一個創業公司想要成功，幾乎要覆蓋一個Web應用程序的諸多技術方面：前端、後台、DBA、運營等。雖然已經有一些服務可以讓企業購買登陸頁面的前端模塊和組件;但是如果你想要創造一些真正的Web應用程序，除了求助前端工程師，別無他法，就像你要創立一個品牌你也繞不開請一位設計師一樣。
原因二：對前端，普遍存在巨大的誤解，其實前端一點也不簡單
大多人都認為前端開發是一個「相對於其他模塊來說更簡單的領域」，在他們心中的前端工程師是這樣工作的：
把Photoshop文件、圖片或者線框放進一個網頁;
偶爾設計Photoshop文件、圖片或者線框;
用JS編程，為網頁製作動畫、過渡效果;
用HTML和CSS編程，確定網頁的內容和形式。
事實上，前端工程師在做的是：
在設計師和工程師之間創建可視化的語言;
用可視化的設計，定義一組代表內容、品牌和功能的組件;
為Web應用程序的公約、框架、需求、可視化的語言和規格設定底線;
定義Web應用程序的設備、瀏覽器、屏幕、動畫的范圍;
開發一個質量保證指南來確保品牌忠誠度、代碼質量、產品標准;
為Web應用程序設定適當的行距、字體、標題、圖標、余糧、填充等等;
為Web應用程序設定多種解析度的圖像，設備為主的實體模型，同時維護設計指南;
用accountsemantics、accessibility、SEO、schemas、microformats標記Web應用程序;
用一種友好的，消耗小的，設備和客戶端感知的方式連接API，獲取內容;
開發客戶端代碼來顯示流暢的動畫、過渡、延遲載入、交互、應用工作流程，大多數時間用來考慮漸進增強和向後兼容的標准;
保證後台連接安全，採取跨地資源共享(CORS)的程序考慮，防止跨站點腳本(XSS)和跨站點請求偽造(CSRF);
最重要的是，盡管有嚴格的期限、利益相關者的要求，以及設備的限制，無論現在還是將來永遠是「客戶第一」。
為了實現上述目標，前端工程師採用了從可視化到編程的多種工具，甚至有時要照顧市場、UX到內容tweakes等等。
原因三：大量糟糕前端工程師的存在，擾亂了市場
這或許是難以招到優秀前端工程師最明顯的原因。由於前端工程師的入門門檻非常低，JS、CSS、HTML並不是很難入門掌握的語言，似乎只要花一點時間，誰都可以通過網上教程和書本學會它，前端工程師市場就是被這些淺嘗輒止的傢伙搞壞的。
糟糕的前端工程師是這樣做事的：
濫用JS庫，因為他們實際上並不了JS的內部(e.g.一切都用jQuery);
濫用JS插件，抄別人的代碼哪怕自己根本讀不懂(e.g.jQuery.doParallaxPls.js);
給Web應用程序添加CSS框架，卻只用到CSS/JS的5%，沒有看到任何的需求、設計或者比較和評價;
認為只要添加了CSS框架，網站就可以「有求必應」;
一邊在說著「響應式Web設計」，卻對伺服器端技術一無所知;
用CSS編程時不管預處理器、命名規范等，卻用不合適的selector/ids/magicnumbers等;
忽視表現、內存泄露(並不理解內存泄露的真正含義)，不會檢測代碼;
不會用指標衡量一個產品，或者這種指標旨在自己的電腦、瀏覽器、設備有效;
忽視軟體技術。
要知道，入門容易精通難，計算機和軟體的基礎對你用JS或瀏覽器編程都非常重要。Web可能是最有影響力的平台和環境之一，在那裡執行的程序必須被小心對待。一位優秀的前端工程師不僅要考慮Web技術和語言，並且還要了解所有不同的組件、系統和概念。
以下是優秀的前端工程師在即時面對普通的任務也會做的事情(這才是市場急需的前端)：
DNS解析、使用CDN和關於;
HTTPHeaders(Expires,Cache-Control,If-Modified-Since);
SteveSouders的所有規則(HighPerformanceWebsites);
如何解決PageSpeed,YSlow,ChromeDevToolsAudit,ChromeDevTools
Timeline顯示的所有問題;
何時把任務傳到伺服器和客戶端;
緩存，預取和負荷技術的使用;
NativeJS，知道何時從頭開始做，何時查找別人的代碼，同時可以評估這樣做的優缺點;
CSS標准、modernconventions、strategies(e.g.BEM,SMACSS,OOCSS)的知識和用法;
JS的電腦知識(內存管理，單線程的性質，垃圾收集演算法，超時，范圍，提升，模式)。
換句話說，如果說精通HTML+CSS+JS，了解後端知識，只是60分的合格前端;那麼要想成為受追捧、拿高薪的80分優秀前端，要對業務需求和、架構設計有真正的運用;而100分的頂級前端，則必須要能夠兼顧技術和設計，更接近「以前端開發為主的全棧工程師」了。
市場不是缺少前端，而是缺少優秀的前端工程師
現在，前端工程師終於前所未有的在Web中佔有了一席之地。隨著多設備、瀏覽器和Web標準的演變革命，前端正在成為兼顧邏輯、性能、交互、體驗的綜合性崗位。
雖然現在互聯網行業普遍缺少前端工程師，但是我們相信越來越多的人將會加入前端的大軍。不僅是因為大多數前端工作提供的優渥薪水和辦公環境，也是因為Web中的前端編程變得越來越有挑戰和意義。
2. vue前端面試題有哪些呢
文章中給你列舉了部分的面試題，這些都是公司面試常遇到的，還有需要的還可以自己去查閱一下資料
1、active-class是哪個組件的屬性？嵌套路由怎麼定義？
答：vue-router模塊的router-link組件。
2、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
3、vue-router有哪幾種導航鉤子？
答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件
4、scss是什麼？安裝使用的步驟是？有哪幾大特性？
答：預處理css，把css當前函數編寫，定義變數,嵌套。 先裝css-loader、node-loader、sass-loader等載入器模塊，在webpack-base.config.js配置文件中加多一個拓展:extenstion，再加多一個模塊：mole裡面test、loader
4.1、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：還是在同一個文件，配置一個mole屬性
第四步：然後在組件的style標簽加上lang屬性 ，例如：lang=」scss」
有哪幾大特性:
1、可以用變數，例如（$變數名稱=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？
答：基於vue的前端組件庫。npm安裝，然後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from 『mint-ui』。組件一：Toast(『登錄成功』)；組件二：mint-header；組件三：mint-swiper
6、v-model是什麼？怎麼使用？ vue中標簽怎麼綁定事件？
答：可以實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：<input @click=doLog() />
7、axios是什麼？怎麼使用？描述使用它實現登錄功能的流程？
答：請求後台資源的模塊。npm install axios -S裝好，然後發送的是跨域，需在配置文件中config/index.js進行設置。後台如果是Tp5則定義一個資源路由。js中使用import進來，然後.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中
8、axios+tp5進階中，調用axios.post(『api/user』)是進行的什麼操作？axios.put(『api/user/8′)呢？
答：跨域，添加用戶操作，更新操作。
9、什麼是RESTful API？怎麼使用?
答：是一個api的標准，無狀態請求。請求的路由地址是固定的，如果是tp5則先路由配置中把資源路由配置好。標准有：.post .put .delete
10、vuex是什麼？怎麼使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
11、mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？
答：一個model+view+viewModel框架，數據模型model，viewModel連接兩個
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
12、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？
答：全局定義指令：在vue對象的directive方法裡面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding
13、說出至少4種vue當中的指令和它的用法？
答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
14、vue-router是什麼？它有哪些組件？
答：vue用來寫路由一個插件。router-link、router-view
15、導航鉤子有哪些？它們有哪些參數？
答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
參數：有to（去的那個路由）、from（離開的路由）、next（一定要用這個函數才能去到下一個路由，如果不用就攔截）最常用就這幾種
16、Vue的雙向數據綁定原理是什麼？
答：vue.js 是採用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變數替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)裡面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果。
ps：16題答案同樣適合」vue data是怎麼實現的？」此面試題。
17、請詳細說下你對vue生命周期的理解？
答：總共分為8個階段創建前/後，載入前/後，更新前/後，銷毀前/後。
創建前/後： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。
載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷毀前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在
18、請說下封裝 vue 組件的過程？
答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。
然後，使用Vue.extend方法創建一個組件，然後使用Vue.component方法注冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用emit方法。
19、你是怎麼認識vuex的？
答：vuex可以理解為一種開發模式或框架。比如PHP有thinkphp，java有spring等。
通過狀態（數據源）集中管理驅動組件的變化（好比spring的IOC容器對bean進行集中管理）。
應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 非同步邏輯應該封裝在action中。
20、vue-loader是什麼？使用它的用途有哪些？
答：解析.vue文件的一個載入器，跟template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
21、請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件
22、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
答：第一步：在components目錄新建你的組件文件（smithButton.vue），script一定要export default {
第二步：在需要用的頁面（組件）中導入：import smithButton from 『../components/smithButton.vue』
第三步：注入到vue的子組件的components屬性上面,components:{smithButton}
第四步：在template視圖view中使用，<smith-button> </smith-button>
問題有：smithButton命名，使用的時候則smith-button。
23、聊聊你對Vue.js的template編譯的理解？
答：簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合並option。
然後，AST會經過generate（將AST語法樹轉化成render funtion字元串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裡面有（標簽名、子節點、文本等等）
3. 前端框架都有哪些，企業常用的是哪些
在做web開發的時候經常會遇到一個問題，那就是，選擇什麼樣的框架來做前端開發。下面我把目前常用的一些前端的框架簡單的給你介紹一下.
就目前來說，比較流行且常用的Web前端框架有Angular、React和Vue。AngularJS通過為開發者呈現一個更高層次的抽象來簡化應用的開發,它主要考慮的是構建CRUD應用,而至少90%的Web應用都是CRUD應用。React是一個用於構建用戶界面的JavaScript庫，也是Web應用程序的視圖層。React擁有較高的性能，代碼邏輯非常簡單，已經有越來越多的人開始關注和使用它。Vue.js是一套構建數據驅動的Web界面的漸進式框架。Vue的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。
除了這幾個，還有一些，我給你介紹
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架如上圖。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
2、flex
Apache基金會發布了Flex 4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本
3、extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後台技術無關的前端ajax框架。
4、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
5、MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
6、jQuery UI
jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
7、DWZ
DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架.
8、GWT
Google 網頁工具包——GWT 提供了一組基於Java語言的開發包，這個開發包的設計參考Java AWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
9、YUI
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫，為了能建立一個高互動的網頁，它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證，基本上沒怎麼研究過！
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三個項目合並而成的一個新項目。
11、Dojo
在國內應用好像不是很廣，不過性能上應該沒問題。
Dojo是一個用javascript語言實現的開源DHTML工具包。
12、ZK
ZK是 一套以 AJAX/XUL/Java 為基礎的網頁應用程式開發框架，用於豐富網頁應用程式的使用介面。最大的好處是，在設計AJAX網路應用程式時，輕松簡便的操作就像設計桌面程式一樣。 ZK包含了一個以AJAX為基礎、事件驅動（event-driven）、高互動性的引擎，同時還提供了多樣豐富、可重復使用的XUL與HTML組件，以 及以 XML 為基礎的使用介面設計語言 ZK User-interfaces Markup Language (ZUML)。
13、OperaMasks-UI
OperaMasks- UI是OperaMasks團隊 2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端 JavaScript UI組件庫。目前，該團隊已將這一產品以LGPL 開源協議開放給社區。
14、JavaFX
Sun 公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用 JavaFX 編程語言開發富互聯網應用程序(RIA)。JavaFX Script 編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative, statically typed(聲明性的、靜態類型)腳本語言。
以上的回答希望對你有所幫助
4. web前端，vs中，生成資料庫訪問類。寫代碼的時候出現「未能找到類型或命名空間名稱，，」該怎麼解決
右鍵點波浪線，解析，如果不在同一個工程中，先在你的WEB項目中添加對這個工程的引用，再右鍵解析
5. 前端錯誤Uncaught TypeError: Cannot read property 'length' of null錯誤怎麼處理
通過統計資料庫中的1000多個項目，我們發現在 JavaScript 中最常出現的錯誤有10個。下面會向大家介紹這些錯誤發生的原因以及如何防止。
1. Uncaught TypeError: Cannot Read Property
這是 JavaScript 開發人員最常遇到的錯誤。當你讀取一個屬性或調用一個未定義對象的方法時，Chrome 中就會報出這樣的錯誤。
導致這個錯誤發生的原因有很多，常見的一種情況是在渲染 UI 組件時，不正確地初始化狀態。我們來看一個真實的應用程序中發生這種情況的例子。
以上代碼有兩個重要方面：
一是組件的狀態（例如 this.state），在開始生命周期之前是 undefined 狀態。
二是當通過非同步的方式獲取數據時，無論是在構造函數中 componentWillMount 中，還是在構造函數中提取 componentDidMount，組件在數據載入之前至少會渲染一次。當檢測首次渲染時，會發現 this.state.items 是未定義的。此時就會出現一個錯誤 -「Uncaught TypeError: Cannot read property 『map』 of undefined" in the consol」。
解決的方法很簡單：在構造函數中使用合理的默認值進行狀態初始化。
2. TypeError: 『undefined』 Is Not an Object (evaluating...)
這是在 Safari 中讀取屬性或調用未定義對象上的方法時發生的錯誤，這與 Chrome 的上述錯誤基本相同，只是 Safari 使用不同的錯誤消息。
3. TypeError: Null Is Not an Object (evaluating...)
這是在 Safari 中讀取屬性或調用空對象上的方法時發生的錯誤。
在實際情況中，導致這種錯誤的原因之一是：在元素載入之前，就嘗試在 JavaScript 中使用 DOM 元素。這是因為 DOM API 對於空白的對象引用返回 null。
任何執行和處理 DOM 元素的 JS 代碼，都應該在創建 DOM 元素之後執行。JS 代碼按照 HTML 中的規定自上而下進行解釋。因此，如果在 DOM 元素之前存在標簽，則腳本標簽內的 JS 代碼就會在瀏覽器分析 HTML 頁面時執行。如果在載入腳本之前尚未創建 DOM 元素，就會出現這樣的錯誤。
在這個例子中，我們可以通過添加一個事件偵聽器來解決這個問題，事件偵聽器會在頁面准備就緒時通知我們。一旦 addEventListener 被觸發，該 init( ) 方法就可以使用 DOM 元素。
4. (unknown): Script Error
當未捕獲的 JavaScript 錯誤違背跨邊界原則時，就會發生腳本錯誤。例如，如果將 JavaScript 代碼託管在 CDN 上，則任何未被捕獲的錯誤（通過 window.onerror 處理程序發出的錯誤，而不是 try-catch 中捕獲到的錯誤）將僅報告為「腳本錯誤」。這是瀏覽器的一種安全措施，主要用於防止跨域傳遞數據的情況出現。
要獲取真實的錯誤消息，需要執行以下操作：
Access-Control-Allow-Origin
將
Access-Control-Allow-Origin 設置為 *， 表示可以從任何域正確訪問資源。* 如有必要，也可以用自己的域名進行替換，例如：
Access-Control-Allow-Origin: www.example.com。
以下是在各種環境中設置的一些示例：
在腳本標簽上設置crossorigin =「anonymous」
在你的 HTML 源代碼中，為每一個腳本設置
Access-Control-Allow-Origin，在設置 SCRIPT 標簽中，設置 crossorigin="anonymous"。在將 crossorigin 屬性添加到腳本標簽之前，請確保正在向腳本文件發送 header。在 Firefox 中，如果 crossorigin 屬性存在但 Access-Control-Allow-Origin 標題不存在，則腳本不會執行。
5. TypeError: Object Doesn』t Support Property
當調用未定義的方法時，IE 中會發生這樣的錯誤。
這相當於 Chrome 中的 「undefined』 is not a function」 錯誤。對於相同的邏輯錯誤，不同的瀏覽器可能會有不同的錯誤消息。
這是在 IE 的 Web 應用程序中使用 JavaScript 命名空間出現的一個常見問題。出現這種情況的絕大部分原因是IE無法將當前名稱空間內的方法綁定到this關鍵字。例如，如果你有 JS Rollbar 方法的命名空間 isAwesome。通常，如果位於 Rollbar 命名空間內，則可以使用以下語法調用該 isAwesome 方法：
6. TypeError: 『undefined』 Is Not a Function
當調用未定義的函數時，Chrome 中就會發生這樣的錯誤。
執行上面的代碼會導致以下錯誤：「Uncaught TypeError: undefined is not a function。」 發生以上錯誤的原因是，當你調用 setTimeout( ) 時，實際上是在調用 window.setTimeout( )，傳遞給 setTimeout( ) 的匿名函數是在窗口對象的上下文中定義的，而該窗口對象沒有 clearBoard( ) 方法。
符合舊版瀏覽器的解決方案是以變數的方式簡單地將引用保存在 this 中，然後通過閉包繼承。
6. 前端ui框架有哪些
以下是幾個精緻的Web UI框架：
1、Aliceui
Aliceui是支付寶的樣式解決方案，是一套精選的基於 spm 生態圈的樣式模塊集合，是 Arale 的子集，也是一套模塊化的樣式命名和組織規范，是寫 CSS 的更好方式。
gitHub地址：https://github.com/aliceui/aliceui.github.io
2、Amazeui
Amaze UI 是一個輕量級、 Mobile first 的前端框架, 基於開源社區流行前端框架編寫的。
地址：http://amazeui.org/
3、sui
SUI是一套基於bootstrap開發的前端組件庫，同時她也是一套設計規范。 通過SUI，可以非常方便的設計和實現精美的頁面。
地址：http://sui.taobao.org/
同時sui還有移動端版本msui，msui是阿里巴巴共享業務事業部UED團隊的作品。目的是為了手機H5頁面提供一個常用的組件庫，減少重復工作。
地址：http://m.sui.taobao.org/
4、FrozeUI
Frozen UI是一個開源的簡單易用，輕量快捷的移動端UI框架。基於手Q樣式規范，選取最常用的組件，做成手Q公用離線包減少請求，升級方式友好，文檔完善，目前全面應用在騰訊手Q增值業務中。
地址：http://frozenui.github.io/
5、uiKit
uiKit是一款輕量級、模塊化的前端框架，可快速構建強大的web前端界面。
地址：http://www.getuikit.net/
6、H-ui
H-ui是輕量級前端框架，簡單免費，兼容性好，適用於中國網站。
地址：http://www.h-ui.net/
7、Weui
weUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
地址：https://github.com/weui/weui
8、layui
Layui 誕生於2016年金秋，是一款帶著濃烈情懷的國產前端UI框架，她追求極簡，又不失豐盈的內在，說她是史上最輕量的結晶，似乎並不為過。一切都源自於她對原生態的執著，對前端社區的那些噪雜聲音的過濾，以及她本身的精心雕琢。
地址：http://www.layui.com/
9、YDUI Touch
YDUI Touch 專為移動端打造，在技術實現、交互設計上兼容主流移動設備，保證代碼輕、性能高;使用 Flex 技術，靈活自如地對齊、收縮、擴展元素，輕松搞定移動頁面布局;實現強大的屏幕適配布局，等比例適配所有屏幕。什麼？用得不開心？輕松切換 px;自定義Javascript組件、Less文件、Less變數，定製一份屬於自己的YDUI;
地址：http://www.yi.org/
10、後台UI開發框架 MuseUI
一款基於bootstrap風格，兼容於主流瀏覽器（包括IE6）的後端UI開發組件。
網站：http://git.oschina.net/muse/museui
7. Web前端新手應該如何防禦XSS攻擊
今天小編要跟大家分享的文章是關於Web前端新手應該如何防禦XSS攻擊。作為JS系工程師接觸最多的漏洞我想就是XSS漏洞了，然而並不是所有的同學對其都有一個清晰的認識。今天我們分享一下XSS漏洞攻擊，希望能幫助到大家。下面我們來一起看一看吧！一、什麼是XSS攻擊XSS（Cross-SiteScripting）又稱跨站腳本，XSS的重點不在於跨站點，而是在於腳本的執行。XSS是一種經常出現在Web應用程序中的計算機安全漏洞，是由於Web應用程序對用戶的輸入過濾不足而產生的。
常見的XSS攻擊有三種：反射型、DOM-based型、存儲型。其中反射型、DOM-based型可以歸類為非持久型XSS攻擊，存儲型歸類為持久型XSS攻擊。
1、反射型
反射型XSS一般是攻擊者通過特定手法（如電子郵件），誘使用戶去訪問一個包含惡意代碼的URL，當受害者點擊這些專門設計的鏈接的時候，惡意代碼會直接在受害者主機上的瀏覽器執行。
對於訪問者而言是一次性的，具體表現在我們把我們的惡意腳本通過URL的方式傳遞給了伺服器，而伺服器則只是不加處理的把腳本「反射」回訪問者的瀏覽器而使訪問者的瀏覽器執行相應的腳本。反射型XSS的觸發有後端的參與，要避免反射性XSS，必須需要後端的協調，後端解析前端的數據時首先做相關的字串檢測和轉義處理。
此類XSS通常出現在網站的搜索欄、用戶登錄口等地方，常用來竊取客戶端Cookies或進行釣魚欺騙。
整個攻擊過程大約如下：
2、DOM-based型
客戶端的腳本程序可以動態地檢查和修改頁面內容，而不依賴於伺服器端的數據。例如客戶端如從URL中提取數據並在本地執行，如果用戶在客戶端輸入的數據包含了惡意的JavaScript腳本，而這些腳本沒有經過適當的過濾和消毒，那麼應用程序就可能受到DOM-basedXSS攻擊。需要特別注意以下的用戶輸入源document.URL、location.hash、location.search、document.referrer等。
整個攻擊過程大約如下：
3、存儲型
攻擊者事先將惡意代碼上傳或儲存到漏洞伺服器中，只要受害者瀏覽包含此惡意代碼的頁面就會執行惡意代碼。這就意味著只要訪問了這個頁面的訪客，都有可能會執行這段惡意腳本，因此儲存型XSS的危害會更大。
存儲型XSS一般出現在網站留言、評論、博客日誌等交互處，惡意腳本存儲到客戶端或者服務端的資料庫中。
整個攻擊過程大約如下：
二、XSS攻擊的危害XSS可以導致：
1、攻擊劫持訪問；
2、盜用cookie實現無密碼登錄；
3、配合csrf攻擊完成惡意請求；
4、使用js或css破壞頁面正常的結構與樣式等；三、防禦方法1、XSS防禦之HTML編碼
應用范圍：將不可信數據放入到HTML標簽內（例如div、span等）的時候進行HTML編碼。
編碼規則：將&<>"'/轉義為實體字元（或者十進制、十六進制）。
示例代碼：
_unction_ncodeForHTML(str,_wargs){
__return(''+_tr)
___.replace(/&/g,'&')
___.replace(/<_EX=><_ntity=><
___.replace(/>/g,'>')
___.replace(/"/g,'"')
___.replace(/'/g,''')_//'_煌萍觶蛭輝_TML規范中
___.replace(///g,'/');
_};
HTML有三種編碼表現方式：十進制、十六進制、命名實體。例如小於號（<）可以編碼為"十進制><","十六進制=><","命名實體=><"三種方式。對於單引號（'）由於實體字元編碼方式不在HTML規范中，所以此處使用了十六進制編碼。
2、XSS防禦之HTMLAttribute編碼
應用范圍：將不可信數據放入HTML屬性時（不含src、href、style和事件處理屬性），進行HTMLAttribute編碼
編碼規則：除了字母數字字元以外，使用HH;(或者可用的命名實體)格式來轉義ASCII值小於256所有的字元
示例代碼：
_unction_ncodeForHTMLAttibute(str,_wargs){
__let_ncoded=''
__for(let_=0;_<_tr.length;_++)_
___let_h=_ex=_tr[i];
___if(!/[A-Za-z0-9]/.test(str[i])&&_tr.charCodeAt(i)<256)_
____hex='&#x'+_h.charCodeAt(0).toString(16)+''
___}
___encoded+=_ex;
__}
__return_ncoded;
_};
3、XSS防禦之JavaScript編碼
作用范圍：將不可信數據放入事件處理屬性、JavaScirpt值時進行JavaScript編碼
編碼規則：除字母數字字元外，請使用xHH格式轉義ASCII碼小於256的所有字元
示例代碼：
_unction_ncodeForJavascript(str,_wargs)_
__let_ncoded=''
__for(let_=0;_<_tr.length;_++)_
___let_c=_ex=_tr[i];
___if(!/[A-Za-z0-9]/.test(str[i])&&_tr.charCodeAt(i)<256)_
____hex='\x'+_c.charCodeAt().toString(16);
___}
___encoded+=_ex;
__}
__return_ncoded;
_};
4、XSS防禦之URL編碼
作用范圍：將不可信數據作為URL參數值時需要對參數進行URL編碼
編碼規則：將參數值進行encodeURIComponent編碼
示例代碼：
_function_ncodeForURL(str,_wargs){
__return_ncodeURIComponent(str);
_};
5、XSS防禦之CSS編碼
作用范圍：將不可信數據作為CSS時進行CSS編碼
編碼規則：除了字母數字字元以外，使用XXXXXX格式來轉義ASCII值小於256的所有字元
示例代碼：
_unction_ncodeForCSS(attr,_tr,_wargs){
__let_ncoded=''
__for(let_=0;_<_tr.length;_++)_
___let_h=_tr.charAt(i);
___if(!ch.match(/[a-zA-Z0-9]/)_
____let_ex=_tr.charCodeAt(i).toString(16);
____let_ad=�'.substr((hex.length));
____encoded+='\'+_ad+_ex;
___}_lse_
____encoded+=_h;
___}
__}
__return_ncoded;
_};後記在任何時候用戶的輸入都是不可信的。對於HTTP參數，理論上都要進行驗證，例如某個欄位是枚舉類型，其就不應該出現枚舉以為的值；對於不可信數據的輸出要進行相應的編碼；此外httpOnly、CSP、X-XSS-Protection、SecureCookie等也可以起到有效的防護。
XSS漏洞有時比較難發現，所幸當下React、Vue等框架都從框架層面引入了XSS防禦機制，一定程度上解放了我們的雙手。但是作為開發人員依然要了解XSS基本知識、於細節處避免製造XSS漏洞。框架是輔助，我們仍需以人為本，規范開發習慣，提高Web前端安全意識。
以上就是小編今天為大家分享的關於Web前端新手應該如何防禦XSS攻擊的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！
作者：公子
鏈接：#/a/1190000017057646
8. ASP.NET是什麼
ASP.NET又稱為ASP+，不僅僅是ASP的簡單升級，而是微軟公司推出的新一代腳本語言。ASP.NET基於.NET Framework的Web開發平台，不但吸收了ASP以前版本的最大優點並參照Java、VB語言的開發優勢加入了許多新的特色，同時也修正了以前的ASP版本的運行錯誤。
ASP.NET就是屬於WebForm，也就是平時說的B/S模式的開發。而WinForm就是屬於C/S模式。
.NET有很多種語言組成，比如C#、 VB.NET、J#、Jsript、Managed C++，但是都是運行在.NET FrameWork Run Time底下的。
Asp.NET可以用C#或VB.NET來開發。編譯後形成CLR，通過伺服器的IIS+.NET FrameWork再次編譯來運行。
(8)前端命名庫擴展閱讀
ASP.NET和ASP的區別：
ASP.NET和ASP的最大區別在於編程思維的轉換以及功能的增強。
一、ASP使用VB/JS這樣的弱類型、面向結構的腳本語言混合html來編程，而非面向對象，這就明顯產生以下幾個問題：
1、代碼邏輯混亂，難於管理。
2、代碼的可重用性差：由於是面向結構的編程方式，並且混合html，所以可能頁面原型修改一點，整個程序都需要修改,代碼重用性差。
3、弱類型造成潛在的出錯可能。
因此在功能方面ASP同樣存在問題：
1、功能太弱，一些底層操作只能通過組件來完成。
2、缺乏完善的糾錯/調試功能。
二、ASP.NET理論上可以使用任何編程語言包括C#、VB.NET、JS、、J#、Managed C++等等，最合適的編程語言還是MS為.NET Frmaework專門推出的C#。
優點如下：
1、是面向對象的編程語言，簡單易學。
2、具有面向對象編程語言的一切特性，比如封裝性、繼承性、多態性等等,封裝性使得代碼邏輯清晰，並且應用到ASP.NET上就可以使業務邏輯和Html頁面分離；繼承性和多態性使得代碼的可重用性大大提高
9. js中 $符號是什麼意思
$和a 一樣是個字元，可以當做變數。 jquery里用到$封裝函數，所以經常會見到。（jQuery是封裝js的一個函數庫）
10. ios 自己封裝的sdk引入了第三方庫，怎麼防止與外界的沖突
jQuery是目前使用最廣泛的前端框架之一，有大量的第三方庫和插件基於它開發。為了避免全局命名空間污染，jQuery提供了jQuery/ajax/libs/jquery/1/ajax/libs/jquery/1/ajax/libs/jquery/1/ajax/libs/jquery/1.6.4/jquery.min.js"> <!-- jQuery and $ now point to jQuery 1.6.4 --> <script>var jquery164 = jQuery.noConflict( true );</script> <!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 --> 避免第三方庫的沖突 以上的代碼片段展示了如何解決多版本jQuery的沖突。接下來，我們嘗試解決jQuery庫和第三方庫的沖突，下面出現的代碼片段在jQuery的官方文檔中都有，有興趣的程序猿可以仔細閱讀官方文檔體會其中的區別。 直接使用No-Conflict模式 使用No-Conflict模式，其實就是對jQuery進行重命名，再調用。 <!-- 採用no-conflict模式，jquery.js在prototype.js之後被引入. --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // $j 引用了jQuery對象本身. $j(document).ready(function() { $j( "div" ).hide(); }); // $ 被重新指向prototype.js里定義的對象 // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() { var mainDiv = $( "main" ); } </script> 使用自執行函數封裝 使用這種方式，你可以在匿名函數內部繼續使用標準的$對象，這也是眾多jQuery插件採用的方法。需要注意的是，使用這種方法，函數內部無法再使用prototype.js定義的$對象了。 <!-- jquery.js在prototype.js之後被引入. --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function( $ ) { // Your jQuery code here, using the $ })( jQuery ); </script> 使用標准jQuery(document).ready()函數 如果jQuery庫在其它庫之前引入，那麼jQuery內部定義的jQuery和$會被第三方庫覆蓋，這時候再使用noConflict()已經沒有什麼意義了。解決的方法很簡單，直接使用jQuery的標准調用方式。 <!-- jquery.js在prototype.js之前被引入. --> <script src="jquery.js"></script> <script src="prototype.js"></script> <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() { jQuery( "div" ).hide(); }); // 或者 jQuery(function($){ // Your jQuery code here, using the $ }); // Use the $ variable as defined in prototype.js window.onload = function() { var mainDiv = $( "main" ); }; </script> 下面給大家介紹jQuery noConflict() 方法 noConflict() 方法會釋放會 $ 標識符的控制，這樣其他腳本就可以使用它了。 實例 當然，您仍然可以通過全名替代簡寫的方式來使用 jQuery： $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在運行！"); }); }); 實例 您也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變數，以供稍後使用。請看這個例子： var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在運行！"); }); }); 實例 如果你的 jQuery 代碼塊使用 $ 簡寫，並且您不願意改變這個快捷方式，那麼您可以把 $ 符號作為變數傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外，依舊不得不使用 "jQuery"： $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在運行！"); }); });