前端有幾種方法實現一鍵換膚

『壹』 前端需要學什麼

WEB前端我們需要需要掌握以下幾種技術：

第一階段：

Html5＋css3，是最起初的，也是很簡單的入門，需要掌握html的標簽div，span，p，ul，li，input等，需要理解css語法，派生選擇器，ID選擇器，類選擇器，屬性選擇器，css基本樣式：背景，字體，鏈接，列表等。

第二階段：

1、熟練使用javascript，jQuery，Echarts，移動端技術，javascript的面向對象。

2、瀏覽器的兼容問題，需要懂WEB標准，熟練手寫xhtml，css3並符合w3c的標准，代碼能兼容主流瀏覽器Firfox，Chrome，Safari，IE等。

3、熟悉一門後台編程語言如：asp，php，jsp等來擴展以後工作的需求

第三階段：

熟練使用vue框架，node、js，React，Angular，混合式開發/原生開發。

vue：是一套組建用戶界面的，漸進式框架，用於搭建表單繁多，且內容需要根據用戶的操作進行修改的頁面版應用。

Node、js是一個伺服器端的，非阻斷式i/o的，事件驅動的javascript運行環境，能夠使得javascript脫離瀏覽器運行。

React是Facrbool內部的一個javascript類庫，用於創建WEB用戶交互界面。

AngularJS是一個JavaScript框架。它可通過＜script＞標簽添加到HTML。

web前端流程

1、根據設計好的效果圖（一般是一些psd文件）開始利用Photoshop進行切圖，切出需要的圖片。

2、使用HTML、CSS、JS等技術開始實現效果圖的頁面，同時需要和後台人員交流為後台數據留下借口和數據填充的區域等。

3、將最終前端完成的頁面交給後台，由後台人員填充後台數據。

『貳』 前端頁面的插件有哪些

工具類

方便操作對象，數組等的工具庫

• underscore.js

• lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建

• Sugar在原生對象上增加一些工具方法

• functional.js提夠了一些Curry的支持

• Watch.js監視對象或屬性的變化

• bacon.js函數式編程，cool

• streamjs用流的方式來對數組，對象進行系列操作

非同步流程式控制制

• eventproxy朴靈出品

• Arbiter.js詳細

• 發布訂閱

• qPromise風格的

• Async.js

mock

• Mock.js生成隨機數據和mock Ajax 請求

• jquery-mockjaxmockajax請求

時間庫

• moment

• datejs

瀏覽器探測

• Bowser探測具體瀏覽器和版本

• ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等

調試

• console-polyfill能放心的使用 console.log()之類的console方法

• log讓控制台輸出的log有樣式

• Konsole.js在頁面的一個元素里輸出log信息詳細

• uri.jsuri操作

• cookie增刪改cookie的工具庫

• director前端路由庫詳細

• BigDecimal.js提高精度的數字操作

• JSDoc根據javascript文件中注釋的信息，生成API文檔詳細

• hotkeys鍵盤事件的封裝

• MD5用 MD5 的方式加密文件的庫

瀏覽器增強類

讓一些舊瀏覽器變牛逼的庫

• Selectivizr讓IE 6-8一些的css3選擇器

• ieBetter讓ie6-8有高級瀏覽器的特性

• ExplorerCanvas讓IE8-的瀏覽器支持canvas

• CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。

• formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

• https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則

• HTML5 Cross Browser Polyfills一堆Polyfills

• flexibility讓舊的 IE 也支持 Flexbox

選擇器增強

• Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果

未歸類

• prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了

表單類

• jquery-file-upload上傳文件組件詳細

• zTree文件樹形視圖控制項

• Treed樹編輯器。感覺展示的感覺很像思維導圖

• FileAPI對文件選擇框內的文件的一些處理

表單驗證

• .Validate詳細

• jQuery-Validation-Engine

表單元素美化

• uniform提供對下拉框，單，復選框，按鈕等表單元素的美化

• select2多選下拉框

• selectivity和unfirom比較類似

• DropKick下拉框，單，多選。外觀比uniform好

• switcheryios7風格的開關組件

• nouislider用滾動條來設置/控制（音量等）

• range.css美化input[type=range]元素的外觀

圖片類

• holderjs生成占點陣圖片

• lazyload

• imagesLoaded選取的圖片都載入好後執行調回

• CSSgram用CSS3的Filter實現Instagram濾鏡的庫

圖標類

• Icon Font匯總

• SVG做的圖標

• svgicons

• iconic

• HYBICON帶交互效果。如 hover, click

• HTML字元實體圖標

• http://www.amp-what.com/

• transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號

• css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

• fancybox彈出查看圖片，視屏等等demo

• yoxview彈出查看圖片，圖片尺寸縮放很自然

圖片牆

• wookmark

UI 框架

• WeUI由微信官方設計團隊為微信 Web 開發量身設計。

• Framework7

UI 組件類

拖拽

• dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子

• angular-draguladragular 官方的 angular 版本

數據可視化(圖表)

• Echarts網路出品

• highcharts功能強大。是收費的。

• Plottable.JS基於D3的一個圖表庫

• flot文檔不給力

• chartJs中文文檔demo很漂亮，很清晰。比較輕量級。

• ichartJs中國的一個傢伙搞的，感覺還不錯。

時間選取組件

• foundation-datepicker

• DatePicker一個簡單的日歷詳細

• full calendar支持脫放的方式來改變待辦事宜的時間

• Simple Events Calendar外觀很喜歡。收費 5$

• jQuery ui datepicker經典，不是很好看

• pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。

• zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。

• bootstrap-datepickerbootstrap風格。

• dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動條

• perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。

• iscroll在移動設備上用不錯

載入(Loding)效果

• CSS SpinnersCSS做的

• Loaders.cssCSS做的

表格組件

• jsGridData Grid。詳細

• backgrid基於Backbone.js的DataGrid

• excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+

• datatables表格可交互（對內容進行排序，刪除等）

• handsontable生成Excel外觀的數據

• JSpreadsheets表格數據的組件庫

選取顏色

• Spectrum

分享到SNS

• JiaThis生成分享代碼。

編輯器

• ace代碼編輯器，可以用來做demo演示

• ckeditor

• ueditor網路做的

• tinymce對html內容進行實時的編輯

• summernote在移動設備上用不錯

通知組件

• notie.js

HTML5播放器

• jwplayer被大量網站使用

• html5media簡單的h5player，輕量級

• jplayer功能強太，可換膚

展示

• Impress.js各種旋轉，和奇特的體驗

• fullPage全屏顯示。用滾輪來翻頁詳細

• zepto.fullpage專注於移動端的fullPage.js，依賴Zepto

• pagePiling和fullPage類似

• turn.js做一本書，帶漂亮的翻頁的效果

幻燈

• slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細

• iSlider無任何插件依賴的手機平台javascript滑動組件詳細

• bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。

• Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網

• coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。

• wowslider幻燈切換時各種很炫的效果。收費。

• cycle2普通的幻燈，竟然不支持垂直滾動。。。

• jcarousel普通的幻燈，不兼容IE6

• reveal3d滾動。做ppt相當不錯

• nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題

• roundabout3d切換，看的後面圖片的邊

彈出框

• Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star

• layer國人開發的，兼容ie6+。不喜歡其調用方式。

動畫效果

• mixitup用漂亮的動畫效果來完成排序和篩選

• jQuery.Marquee跑馬燈效果

• quickflip卡片翻轉效果

• 卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里

• TheaterJS模擬兩個人在屏幕上對話

• midnight.js文字顏色隨著背景變，屌炸了

• color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。

• transit對元素進行css的變換

• tagcanvas3D標簽雲效果詳細

• iconate圖片切換動畫

• Snap.js左/右側導航的出現效果

• CSS shake抖動動畫

• ClickSpark.js點擊後的一些酷炫的效果

視覺差插件

• scrollorama比較簡單

• superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。

• scrolldeck

flash

• swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細

抽獎

• wScratchPad刮刮卡刮獎效果

• jqueryrotate旋轉插件。可以用來做轉盤抽獎效果

用戶體驗增強類

• Intro.js用來介紹網站的功能很不錯。也可以做新手引導。

• blockUILolding組件。

• simple-hint提示信息。用css做的。兼容性IE 9+。

• dotdotdot文字溢出時，添加在文字末尾加省略號

• jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速

• AnythingZoomer放大鏡功能

• 美化/高亮語法代碼

• google-code-prettify

• DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮

• please按要求隨機舒服的顏色

• Awesomplete輸入的智能提示，自動補全

• proTip提示。感覺比 Bootstrap 的 tip 好

• Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢

動畫

• velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。

SVG

• Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo

• walkway以動畫的方式，漸漸地畫出 SVG 的路徑。

測試

• Mocha

• Chai

• Should

• Snoion

• DeviceMock.jsmock 設備。

其他類

• ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細

• html2canvashtml轉化成canvas，可以用來做截圖。詳細

• Ink響應式html郵件框架

• 性能測試

• 抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）

• jFeed

• jRss簡單版的jFeed

• scriptcam與攝像頭交互

• cylon.js機器人框架，支持35個平台

• Masonry一個瀑布流框架

• devices.css移動設備邊框的外觀。做原型的時候用不錯。

Bootstrap相關類

• Bootbox.js對bootstrap的彈出框做的一些封裝

• 免費皮膚

• AdminLTE

JS Plugins倉庫

• jQuery Cards高質量的 jQuery 插件網站

• jster

• node moles

• npmrankSort npm packages by page rank

• YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。

• awesome-nodejs

• Libraries.io各種語言的庫

• OniUI去哪兒網做的一套基於Avalon的框架

常用的移動端框架

zepto.js

語法與jquery幾乎一樣，會jquery基本會zepto~

最新版本已經更新到1.16

iscroll.js

解決頁面不支持彈性滾動，不支持fixed引起的問題~

實現下拉刷新，滑屏，縮放等功能~

最新版本已經更新到5.0

underscore.js

筆者沒用過，不過聽說好用，推薦給大家~

該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

最新版本已經更新到1.8.2

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~

『叄』 前端幾種跳轉方式

1.onclick跳轉

    設置window的location.href屬性

    onclick="window.location.href='URL'"

    onclick="location='URL'"

2.調用window的open方法

    onclick="window.open('URL','_blank');" // 在新窗口打開

    onclick="window.open('URL','_self');" // 覆蓋當前頁

3.a標簽跳轉

    <a href="URL" target="_blank">Preface</a> // 在新窗口打開

    <a href="URL" target="_self">Preface</a> // 覆蓋當前頁，target屬性默認為_self，此處可省略

『肆』 動態修改css中:root定義的變數-換膚、主題色

前端中有用到需要設置主題顏色，根據用戶喜歡實現換膚的可以使用css中:root定義變數的方式，或者使用動態切換引入的外部css樣式表實現，這里著重記錄下動態修改css中:root定義的變數實現換膚：

這里定義變數必須是以'--'開頭，然後其他頁面的樣式表就可以直接引用這個變數了

至此就完成了動態修改:root變數實現換膚了，具體的應用場景中我們應該是在頁面上操作，選中需要的膚色然後修改:root定義的變數值，考慮到瀏覽器刷新會重置原始狀態的值，這里要結合本地存儲方式記住選中的膚色，具體的實現參考：

『伍』 Android 換膚- 基於databing的一種思路

        說實話，這篇文章的思路呢，其實是前段時間做前端開發的時候，寫網頁，用Vue嘛，數據驅動的方式，不過大部分人應該都知道這個東西了！~   以前換膚的實現呢，要麼就是換主題，要麼呢，就是要麼設置tag或者自定義一些規則，反正網上資料很多了，我也不用多說~然後呢，我看到那個Vue這個東西的時候呢，有個demo  vue-element-admin ，這裡面有個換膚的實現方式，然後看到那個的時候，我一下子就想到了，android裡面不是也有個api是類似的么，雖然好久沒寫android了，不過還是回來翻了下。。。

ok，下面來看實現方式~

先來看下基本頁面（隨便畫的，啥都沒得，反正思路嘛。。。）

o(︶︿︶)o 唉，看出來了，真的隨便畫的~~~

接下來說下思路，換膚的原理就是，用戶選擇皮膚，然後我們整個app，切換皮膚，切換成功之後，保存換膚狀態。

這裡面的難點就是，換膚之後，頁麵皮膚顏色改變，其實，就是一個一個view手動設置而已，比如說什麼顏色啊之類的，對吧，其實就是這么一回事，仔細想想，好簡單~。。。

然後，我們現在呢，我不是說的我的思路是vue這個數據驅動的框架么，然後引申到android來，就是databing這個api了，加入說，我們需要換膚的view啊，比如說這個view的顏色，我們只需要把這個view的顏色，使用databing綁定不就行了嗎？

類似這樣~

這樣子，我們在進入我們的activity啊fragment啊的時候，檢測一次我們的換膚狀態（一般保存到sharepreference里等等），看是否有換膚，有的話，直接把這個換膚的狀態設置到數據裡面去不就可以了么？

設置的話就很簡單啦，一個很簡單的例子

好吧，因為我項目里寫的是個adapter，所以這里這樣設置的。

一般的話，頁面有改變，直接binding.setSkinAttr(skinAttr); 就行了，了解databing的同學應該很熟悉，不知道的去看看也了解啦~

這樣整個頁面的樣式使用的都是databing綁定的值，那些view需要就給那些頁面的屬性設置為上面textview的樣一樣就行了。

這樣我們在頁面開始的時候，只需要獲取一次保存的值，設置到我們頁面綁定的屬性類啊之類的上面就行了。其實嘛，這就是一個思路，給大家擴展下思路~

其實項目裡面應用了databing的同學，可以考慮下這種方式，畢竟簡單嘛，實現方式也很簡單。也不需要修改系統源碼啊之類的，可拓展行也很強。好吧，就提供下思路，原諒我是在看直播的時候抽空寫的，可能不夠詳細~

下面發下項目地址，可以去看看，保存狀態啊之類的都沒做，有興趣的同學可以自行擴展，說的提供思路哈~

項目地址

『陸』 web前端開發都包括哪些技術

1. css，學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。

2. div布局： DIV元素是用來為HTML文檔內大塊的內容提供結構和背景的元素。
   

3. 學習JavaScript的基本語法，以及如何使用。JavaScript編程將會提高開發人員的個人技能。
   

4. 了解Unix和Linux的基本知識雖然這兩點很基礎，但是開發人員了解Unix和Linux的基本知識是有益無害的。
   

5. html5+css3：移動端的網頁製作。在移動設備開發HTML5應用只有兩種方法，要不就是全使用HTML5的語法，要不就是僅使用JavaScript引擎，現在也是前端的一個趨勢。
   

6. 一些框架的應用：angular.js，node.js，bootsttap等框架的應用。
   

7. 了解Web伺服器對Apache的基本配置，並且掌握htaccess配置技巧

8. web前端開發技術，還需要學習一些seo優化技術，因為前端是經常會和網站接觸的。

『柒』 前端項目中常用的幾種方法

新建公共方法js文件（例：public.js）

1、校驗手機號碼

2、校驗是否為空

3、判斷字元串長度，如果是漢字則為1

4、獲取url中參數的值

5、校驗郵箱

6、返回格式化日期

7、返回格式化日期時間

8、數組去重（例：[1,2,3,1,12,3]）

9、根據key排序（例：[{id:  1, value: 'asaa'}]）

10、根據生日計算年齡

11、根據身份證計算年齡

12、計算兩時間差（分鍾）

13、生成指定數值隨機數

14、檢測當前環境是否為手機

15、存儲Cookie

16、刪除Cookie

17、獲取指定名稱Cookie

18、獲取當前日期前後幾天日期

『捌』 前端實現扇形一共有幾種方法

3種。
代碼實現
方法1. border-radius
方法2. canvas + arc
方法3. svg+path
自定義角度、自定義半徑、自定義起始坐標等，封裝一個組件，通過傳遞一個角度畫出對應角度的扇形。

『玖』 前端切換主題顏色的幾種思路

如果主題提前配置好是固定的：
1.採用配置不同theme的css文件，使用scss+替換body的class命名空間進行樣式覆蓋

setting.scss

common.scss

最後形成兩個主題文件後，修改body的class就可達到切換主題的目的

2.引用不同的link文件，與上述同理先形成css文件，通過動態改變link引用達到切換主題目的

如果主題不固定的，可借用webpack插件：webpack-theme-color-replacer實現：
vue-cli3配置

app-config.js文件

配置babel.config.js

在utils文件中定義一個themeColorClient.js 用於初始化主題色和記錄主題色

除了修改elementUI主題色之外，我們還需要配置其他自己寫的樣式，需要用到element ui中定義的一些變數
可通過引用@import "../../../node_moles/element-ui/packages/theme-chalk/src/common/var.scss"; 獲得element-ui中的變數，並使用，這樣可達到一起切換主題效果