① fis3和webpack有什麼區別
Gulp應該和Grunt比較，他們的區別我就不說了，說說用處吧。Gulp / Grunt 是一種工具，能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說，就是使用Gulp/Grunt，然後配置你需要的插件，就可以把以前需要手工做的事情讓它幫你做了。
說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型，browserify / webpack 是另一種類型。
seajs / require : 是一種在線"編譯" 模塊的方案，相當於在頁面上載入一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、mole 這些東西。也就實現了模塊化。
browserify / webpack : 是一個預編譯模塊的方案，相比於上面 ，這個方案更加智能。沒用過browserify，這里以webpack為例。首先，它是預編譯的，不需要在瀏覽器中載入解釋器。另外，你在本地直接寫JS，不管是 AMD / CMD / ES6 風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。
這樣就知道，Gulp是一個工具，而webpack等等是模塊化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
② iview和element哪個好
iViewMediaPro 是一個可以快速簡單的組織、顯示、播放數碼圖片、字體、影象、聲音或其他多媒體文件，並可以自動劃分圖片格式並整理歸納的軟體。支持超過130種文件格式。還能以PDF的形式對圖片進行電子書一樣的瀏覽，兼容了MicrosoftWard、RTF、WMV、WMA等各個格式和平台的播放，方便快速管理與查找文件。iViewMediaPro 3.1序列號（任選其一，或者用壓縮包中提供的注冊工具）
③ fis3文件壓縮文件指 都沒用，是怎麼回事
其實要支持這種技術選型非常簡單，加上如下配置到fis-conf.js即可。（請注意看注釋）第一步：配置支持es6和jsx語法。//讓moles目錄下面的js和jsx通過typescriptfis.match('{/moles/**.js,*.jsx}',{//要支持es6和jsx，typescript也能勝任，最主要是編譯速度要快很多。parser:fis.plugin('typescript'),//typescript就是編譯速度會很快，但是對一些es7的語法不支持，如果你覺得不爽，可以用babel來解決。用以下內容換掉typescript的parser配置就好了。//parser:fis.plugin('babel-5.x',{//sourceMaps:true,//optional:["es7.decorators","es7.classProperties"]//}),rExt:'.js'});第二步：配置支持npm模塊查找fis.unhook('components');//fis3中預設的是fis-components，這里不需要，所以先關了。fis.hook('node_moles');//使用fis3-hook-node_moles插件。第三步：頁面中引入mod.js，標記目標模塊化文件，啟用loader插件，然後就可以隨意import模塊了。RexTodoMVCexample//設置成是模塊化js,編譯後會被define包裹。fis.match('/{node_moles,moles}/**.{js,jsx}',{isMod:true});fis.match('::package',{//本項目為純前段項目，所以用loader編譯期載入，//如果用後端運行時框架，請不要使用。postpackager:fis.plugin('loader',{useInlineMap:true})});到此，已經可以快速的開發項目了
④ jQuery $(window).scroll事件出現問題
web前端開發 20 年變遷史，讓我們來看看這20年裡，web前端究竟經歷了哪些變革，web前端在這20年裡又有哪些突破和成就，怎麼樣看待這20年的web前端開發！
1990年，第一個Web瀏覽器誕生，而WWW的誕生直接拉開前端史的序幕。
從靜態頁面到Java，從依賴後端到自主開發，前端開發者從不被重視的「頁面仔」逆襲為如今很多前端工程師的薪資比後端還高，從前端技術由國外開發者主導到如今國內自主產生的小程序技術，我們走了20年。
了解web前端：http://www.cnite.cn/qianan/
作者 | 司徒正美
責編 | 伍杏玲
1990 年，第一個Web瀏覽器的誕生；1991 年，WWW誕生，這標志著前端技術的開始。
在這將近20年的前端發展史中，我們經歷了從最早的純靜態頁面，到Java跨時代的誕生；從PC端到移動端；從依賴後端到前端可自由打包開發；從早期的網景Navigator瀏覽器到現在各家瀏覽器百花齊放……
我們經歷了前端的洪荒時代、Prototype時代、jQuery時代 、後jQuery時期、三大框架割據時代，這其中均是由國外開發者主導，直到如今的小程序時代，才是中國開發者獨創的。
這是漫長的技術儲備下的成果，最終促成了良好的技術成長收獲。期間的前端發展之路，崎嶇艱難：
洪荒時代（1990~1994年）
在1990~1994年期間，前端界發生的大事有：WWW（World Wide Web）的誕生、瀏覽器的誕生、Java的誕生，沒有專業的前端，頁面全是由後端開發的。
1990年，萬維網之父蒂姆·伯納斯-李（Tim Berners-Lee）在NeXT電腦上發明了第一個Web瀏覽器。
1991年8月6日，Tim在alt.hypertext新聞組貼出了一份關於World Wide Web的簡單摘要，這標志了Web頁面在Internet上的首次登場。
最早的Web主要被一幫科學家們用來共享和傳遞信息，全世界的Web伺服器也就幾十台。由於僅是用來傳遞信息，從可視化方式或從傳遞數量上看，僅比電報強一點點。
當時還沒有Java，用的是純靜態的頁面。
1993年，CGI（Common Gateway Interface）出現了，人們可以在後端動態生成頁面。
Perl由於跨操作系統和易於修改的特性成為CGI的主要編寫語言。當然，CGI也支持其他支持標准輸入輸出和環境變數的語言編寫，比如Shell腳本、C/C++語言，只要符合介面標准即可。
但顯然，頁面的內容更新完全由後端生成，這帶來一個明顯的缺憾：每次更新都要整頁刷新，加上早期的網速情況，這個操作是非常慢的。因此針對這情況，人們從多方面著手改進：編寫語言的升級、瀏覽器的升級、HTML的升級。
1994年，網景公司成立，發布了第一款商業瀏覽器Navigator。自從這款瀏覽器面世後，微軟推出IE瀏覽器。雖說有競爭才有發展，但這也埋下了Java分裂的種子。
（1994 年，網景瀏覽器的截圖）
同年，php誕生。PHP能將動態的內容嵌入到HTML中，提升了編寫頁面的效率與可讀性，其性能也比一般的CGI高。PHP的界定符、循環語句等的發明，深刻影響了後來的ASP、JSP，乃致後來的Java前端模板引擎。
1994年10月，W3C小組也成立了，他們負責HTML的發展路徑，其宗旨是通過促進通用協議的發展。
待這一切就緒後， Java於1995年誕生了。
傳聞，網景工程師布蘭登·艾克（Brendan Eich）只花了10天時間設計出 Java 語言，近乎上帝七日創造世界那麼高效。但也因為工期太短的緣故，導致許多瑕疵，因此一直被正統傳序員所嫌棄，直到Ajax的出世，才讓人們找到理由忍受它的畸形。早期的瀏覽器都配有一個選項，用來禁止Java語言運行。
Java主要語言特徵[1]：
借鑒C語言的基本語法；
借鑒Java語言的數據類型和內存管理；
借鑒Scheme語言，將函數提升到"第一等公民"（first-class citizen）的地位；
借鑒Self語言，使用基於原型（Prototype）的繼承機制。
時下，靜態語言大行其道，類與介面被證明是構建大工程的最佳實踐，人們想不出沒有類的語言如何編寫業務。因此當時的微軟也打造了另一門運行於瀏覽器的語言——VB。
如果繼續細探Java的能力，你會發現它早期真的非常空洞，一門沒有靈魂的語言，沒有包管理機制，也沒有像Java與C++那樣的打輔助用的SDK，內置的方法也屈指可數。比如說數組方法，早期只有push、pop、shift、unshift、splice、slice、sort、reverse、concat、join等操作。動態調用方面，Function的apply、call操作還沒有出現！
早年的偷懶，導致後來不得不補課：到了2019年，數組上的原型方法，是原來3倍。
除了方法缺乏，還有性能問題，大家討論用eval還是Function，用哪種循環方式，用parseInit還是~~，就是為了那一點點的性能提升。例如jsperf.com，就是一個專門研究Java性能的網站。
因此Java誕生後，其兩大任務就是完善語言特性與提高性能。這兩座大山分別由著名的prototype.js與jQuery來搬掉。
在搬掉之前，前端界還有一個曲折實踐——第一次瀏覽器戰爭，並由其發展而來UA嗅深技術。
瀏覽器戰爭（1994~2005年）
瀏覽器戰爭一共打了三場，IE瀏覽器vs網景瀏覽器、IE瀏覽vs火狐瀏覽器、IE瀏覽器vs谷歌瀏覽器。
第一場瀏覽器之戰打得尤其激烈。
微軟的IE瀏覽器發布於1994年，但此時的網景已經佔領絕對優勢。微軟在落後的情況，反編譯Netscape的源碼，推出IE與J。但是由於Bug非常多，大家不願意為IE開發網站，因此發掘出UA，專門過濾掉IE瀏覽器。
UA即Navigator.userAgent ，是用一個字元串來記錄用戶當前運行在什麼操作系統與瀏覽器中。當前IE3的UA是這樣的：
Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
程序判斷UA信息，假如發現當前運行的環境是IE瀏覽器的話，就提示用戶用網景瀏覽器打開。因此微軟不得不讓自己的UA盡量偽裝成網景的UA，欺騙用於檢測UA的腳本，達到IE瀏覽器可以跑這些網站的目的。
最終，第一次瀏覽器之戰以微軟勝利，Netscape被美國在線收購，而落下帷幕。
第一次瀏覽器戰爭年代非常久遠了，但其結局告訴我們，其實技術強弱並不重要。那時技術保護並沒有這么重視，否則微軟的行為可能會被告（谷歌的openSDK僅抄襲幾十行代碼，被Oracle公司訴訟賠88億）。
第一次瀏覽器戰爭帶來了一個問題：盡管當時有ECMA-262（Java規範文檔）與W3C（HTML與CSS的規範文檔），微軟卻沒有照規范來實現Java、HTML與CSS，導致前端兼容問題的誕生。所以CSS Hack、瀏覽器判定、特性偵測，這些技術就應運而生。
這個時代最著名的人物是Dean Edwrad，他是最早的近乎完美解決事件綁定的兼容性大神，其addEvent()內置於jQuery最早的版本中。jQuery的作者John Resig看到其超強的技藝，最後放棄推出大而全的框架，專攻選擇器引擎。
Dean Edwrad的IE7.js、IE8.js是早期處理瀏覽器兼容的良葯，可以說是一切Polyfill[2]的起源。他寫了大量的Hack， 比如在IE如何測量元素的寬高，許多操作DOM的兼容。
這時期太早，中國基本沒有參與這次瀏覽器戰爭。
Prototype時期（2005~2009年）
Prototype是Sam Stephenson寫的一個非常優雅的Java基礎類庫。他是Ruby的大牛，因此Prototype的許多方法名都是來自Ruby界。
Sam Stephenson最大的貢獻是發掘了Prototype與創造了Function.prototype.bind，在數組上也寫了一大堆方法，其中許多被標准化了。
同期的MooTools也是Prototype的方法，當時，大家還在前端論壇為這個爭吵。還有前端工程師喜歡在當時很出名的前端聚集地——藍色理想（現淪為設計師網站）上，討論如何扒腳本、分享彈層、日歷等小組件的技術，這在當時已經是非常了不起的事。
Prototype當時還解決兩大問題：動畫特效與Ajax請求。動畫特效是由aculous提供，我們現在所熟知的各種緩動函數，各種特效的命名與大致的運行形態，都是由aculous確定下來的。
在早期，谷歌就開始使用iframe實現頁面刷新。
2005 年2月，傑西·詹姆士·賈瑞特（JesseJamesGarrett）發表了一篇名為《Ajax：一種Web應用程序開發的新方法》的文章後，Ajax被挖掘出，大家才開始重視起這技術的應用。
例如IE下的ActiveXObject("Microsoft.XMLHTTP")，這是IE創建Ajax引擎的。假如當時有工程師開發出一個核心庫，如果不包含Ajax的封裝，便不好意思發布出來。
一些Ajax書藉
當時前端開發模式是選擇一個核心庫，找一些組件，或者扒別人的腳本進行開發
Prototype的源碼挺好理解的，代碼量也少，只有5000多行，裡面的每個方法也很易扒出來，因此一些大公司總有高手能創造自己的Prototype。
但前端開發還是離不開後端，因為前端沒有模塊機制，當時我們需要用PHP進行打包。打包是雅虎34條軍規之一，可以減少請求數。打包的同時也可以進行混淆，防止代碼小偷來窺探。
N年前，前端面試必問的題目：
模塊化的雛型， 在注釋中標注它的依賴
這個時期，還沒有前後端分離，可國內一些帶著深厚後端背景的高手已經入場。
jQuery 時期（2009~2012年）
2006年，jQuery發布，它當時的競爭對手很多：Dojo、Prototype、ExtJS、MooTools。
所以那時jQuery的宣傳口號僅能說是它的性能上升了100%、200%、300%。直到2009年，Sizzle選擇器引擎研發成功，jQuery才取得壓倒性的優勢。
當時前端界首要面對的是瀏覽器兼容性問題，jQuery在處理DOM兼容上真是知微見著, 發掘出大量的DOM/BOM兼容方案（例如Dean Edwrad的addEvent()， IE的px轉換方案，domReady的doScroll方案，globalEval的兼容方案等）
jQuery也打破了前端開發者的編程思維，之前是按照後端的開發思路來的：做一個業務就先封裝一個類，有了這個類後，再想辦法傳入一個DOM，然後再通過類方法操作DOM。而jQuery是DOM為中心，開發者可以選一個或多個DOM，變成jQuery對象，然後進行鏈式操作。當時為了改變用戶的思維，國內的高手寫了不少文章來引導大家。
其次，開發者們已開始注重前後端分離，並要求不能污染Object原型對象，不能污染window全局變數。這樣，jQuery只佔用兩個全局變數。
再次，jQuery非常輕量級，採用Dean Edwards編寫的Packer壓縮後， 大小不到30KB。並且裡面實現得非常精妙，以令人瞠目的手段解決各種兼容痼疾。
為了學習這些技巧，高手們翻了一遍遍jQuery的源碼，所以網上有大量關於其源碼詳解的書藉。甚至前端工程師在面試時也會被考到jQuery的源碼實現，這樣，jQuery在國內更加流行。
jQuery的流行間接帶來以下的發展：
促使人們對CSS1~CSS3選擇器的學習
促進了瀏覽器原生選擇器引擎document.querySelectorAll、Element.matches的誕生
提高人們對domReady（DOMContentLoaded事件）的認識
促進了Promise與requestAnimateFrame 的誕生
最重要的是降低前端門檻，讓更多人進入這行業，前端工程師的隊伍越來越壯大。
這樣的話，不斷涌現出優秀的工程師，他們創造了大量jQuery插件與UI庫。為後jQuery時代，人們研發前端模塊載入、統一非同步機制、 打造大型MVC框架， 甚至伸向後端，接管打包腳本而發明Node.js，來騰出大量時間。
這個時期涌現了大量jQuery-like的庫，其中最著名的是Zepto.js。Zepto的出現也標志著我們進入移動互聯網時代。那時配套出的著名庫還有iScroll、fastclick、Lazy Load、Modernizr、fullPage。
jQuery的鏈式操作風麾一時，也帶來許多問題，當Ajax出現依賴時，就不可避免就出現回調地獄。因此針對這方面的討論，誕生Deffered與Promise。有關回調地獄的討論，在後來講Node.js非同步處理時，將會再一次熱烈地討論。因此太陽下沒有新事，我們總是遇到相似的問題。
jQuery如此多的選擇器也法維護，隨著越來越多人涌現這行業，頁面的交互也越來越復雜，從Web Page向Web App進化，新的趨勢帶來新的開發方式。
後jQuery時期（2012~2016年）
這時期以RequireJS的誕生為起點，以RN的出現結束。同時解決了前端的模塊定義問題，模塊打包問題（通過Node.js），Java不依靠其他語言創造了一套自己的工具鏈。
jQuery的出現讓前端工程師開發更加輕松，假如工程師想實現一個功能，現搜索出一個jQuery插件來實現。那時候大家在前端網站就整天介紹jQuery插件，很少討論一些底層的實現。
前端工程師通常編寫一個頁面，會引入十多個乃至幾十個jQuery插件，頁面上塞滿了標簽。眾所周知，瀏覽器是單線程，的載入，會影響到頁面的解析與呈現，導致著名的白屏問題（當時前端用力過勐，body中的所有東西都是動態生成的）。
jQuery另一個問題是全局污染，由於插件的質量問題，或者開發的素質問題，這已經是IIEF模塊或命名空間等傳統手段無法解決了。
於是一些優秀的前端工程師們決定從取經後端，引入模塊機制。早期，這種模塊機制在Dojo、EXT這些框架中都是內置的，但是顯然說服不了另一個框架的用戶用對方的模塊機制，於是有人立志要統一這種模塊定義方式，成立了CommonJS。
但不料，CommonJS內部也有派系，誰也說不服對方。終於有一個人忍不住自己獨立開發出RequireJS，其模塊規范即為AMD。 AMD最大的優勢是它支持各種插件，且簡單明了，並且提供shim機制載入以非AMD規范編寫的Java代碼。
但在CommonJS誕生很久一段時間後，在後端的Node.js出現時才有用武之地。而國內，則流行另一種規范風格，背靠阿里的大旗，有人推出了SeaJS，號稱其規范為CMD。其實無論國內還是國外，都產生許多模塊載入器，但最後還是被淘汰了，規范一個就夠了，不宜過多。
但是前端工程師的創造力就是這么驚人，從無到有，再到泛濫成災，一年足矣。這可能與前端代碼是開源的原因。最後有人統一了前兩種規范（AMD、Node.js模塊），同時還支持老式的「全局」變數規范。
自此，Java開發模式煥然一身了，大家只要在代碼外麵包一層就可以全世界通用，不用提心全局污染的問題。
其次，jQuery開發者需要解決大段HTML的生成問題，之前jQuery有$.html, $.append, $before等方法，可以將一大段符合HTML結構的字元串轉換成DOM再插入到頁面上。
但現在我們想分離出來，讓HTML獨立到不同的文件中，然後插數據，這就是前端模板。前端模板的情況與模板規范一樣，從沒有到多如芝麻的境地。這時篩選一個好用且性能高的模板是一件讓前端工程師頭疼的問題，那時網上有許多評測文章來介紹它們。
前端模板技術可以用一個公式來描述：
HTML = template(vars)
有了前端模板後，又誕生了前端路由，基於它們，人們發明一個新詞彙SPA。作為這個時代的尾聲，來自Ruby界的高手Ryan Dahl發明了Node.js。 前端工程師們歡唿：可以不用傳統的後端就能自己寫一個網站了！
Node.js的發展就不詳述上，很快它就冒出海量模塊、路由、狀態管理、資料庫、MVC框架都有了。這時，前端就缺自己的MVC框架了。Node.js轉眼就十歲生日了。
著名的MEAN架構，是Java全棧開發的先鋒。當時涌現了大量的MVC與MVVM框架。最先火起來的是Backbone.js，使用純正的MVC模型， Backbone.js是jQuery最後的支持者，它強依賴於jQuery。
Backbone.js的作者還搞了另一套編譯語言Coffee, 裡面的箭頭函數、類機制、 解構賦值等語法糖都深深影響了後來的ES6。
接著下來是谷歌的Angular，微軟的Knockout.js，蘋果的Ember.js這三個MVVM框架，MVVM就是比MVC多一個數據綁定功能，但這數據綁定功能是非常難實現。Knockout是使用函數代替屬性的技巧實現，它的設計影響到後來的Mobx；Ember.js是基於Object.defineProperty；Angular是將函數體轉譯成setter()、getter()函數。
大公司的介入，對個人開發者影響是很大，畢竟大家都愛迷信大公司，因此局面一下子就穩定下來。大公司還帶來了全新的開發模式，早期都是找一個核心庫，再搜刮一大堆插件，然後自己寫業務代碼，最後後端打包。
大公司將後端開發經驗挪用過來，用Node.js開發了一套CLI，裡麵包含了腳手架生成， 打包腳本、語法風格檢測、環境變數插入，代碼復雜度檢測，代碼提交時自動跑單元測試， 圖片與JS壓縮等功能。ESLint、JSLint、JSHint、CSS Lint、 htmllint等就是那時期出現的。
但CLI的出現導致了前端的分裂，以前大家都使用jQuery，但自CLI幫你建好項目的那一刻起，就將你劃歸某一子陣營，你是Angular？Ember.js？還是jQuery？對了，jQuery沒有大公司支撐的陣營被快速邊緣化。
對於個人開發者，他們是沒有能力開發這么功能完備的CLI，於是出現了Code Climate、Travis CI、CircleCI這樣的平台。它們的出現標志著jQuery小作坊時代的終結了。
CircleCI官網
前端開發者也出現分化：有些人轉向後端，出現了CNode的門戶網站。另外一些人開始搞工程化。一時間出現上百種構建工具，出名的有Grunt、Gulp、FIS3、webpack、 Rollup、npm-。
你方唱罷我登場，這些構建工具均會經歷時代的考驗，如大浪淘沙般，最後存活得僅為寥寥。
因此在這場工程化得盛宴中，註定把許多低層次的jQueryer淘汰掉。jQueryer在空閑之餘培育出的前端模板、前端路由、MVC框架、模塊載入器、Node.js構建工具，卻不料最終成為它自己的挖墓人。
jQuery的時代一去不返了，再沒有人關心拖堂拖了N年的Bootstrap 4終於發布了，沒有人知道jQuery3.5的瘦身計劃，也沒有人問jQuery的源碼，漸漸地，大家不關注jQuery的工具鏈了。
三大框架割據時代（2016~至今）
React是突然爆發的，雖然它是與Angular是同時期發布，但因為JSX怪異的語法讓人們遠離它。此時已經進入移動互聯網的中期，大公司都有自己的App，或者基於原生，或者基於Hybird。
Hybird是用WebView載入一個網站或一個SPA。
由於原生成本太貴，需要招兩套班子，一套安卓的，一套iOS的；而Hybird則一直存在性能問題。於是在2017年，Facebook推出了React Native（RN）。
RN的性能不比原生差多少，比Hybird能好些， 其次使用JSX開發界面比原生的快； RN 只需要低成本的前端開發人員就能上手了。中國國內經過瀑布流（圖片導購）、團購、P2P、區塊鏈等全新商業模式的開發浪潮後，前端人員數量大增。現在，他們只要稍微培訓就可以轉型為App開發。
在開發RN的過程中，人們開始了解React一系列的優勝之處。比如JSX背後的虛擬DOM技術，雖然事實證明虛擬DOM不會帶來性能的巨大優勢，但保證了你怎麼寫其性能不會太差。
React為了引入JSX，必須需要引入編譯，這又間接促成Babel與webpack的壯大。尤其是Babel， 讓我們在很舊的瀏覽器中使用非常新的語法，甚至一些還沒有定案的語法。React從14升級到React 15，強制使用class語法，讓這個推了好久的語法糖終於大規模落地。
之前如果Java想使用類，只能自己模擬類，由於沒有官方的實現，只能任由各優秀工程師發揮。而普通人想用好類，需要了解很復雜的Prototype機制。
現在只用幾個新關鍵字就可以得到這一切。
如果對比Python 2與Python 3間的升級，Java實在太辛運了！針對CSS邏輯功能過弱的問題，我們也有了新的解決方案：Less、Sass、PostCSS與CSS Moles！
谷歌在發布Angular的同時，也發布了一個叫Polymer的框架，那時它想推廣一種叫Web Components的瀏覽器自定義組件技術。這其實是微軟在IE5就玩剩的HTC技術的升級版。雖然它沒有火起來，但它將、Style、Template三種內容混在一個文件的設計，啟發一個留美華人，再結合當時的Backbone.js、Angular等設計，Vue.js橫空出世。目前，這是國人最成功的前端框架了。
除此之外，國人也弄了好幾套迷你React框架與迷你Vue框架。這有點像jQuery時代，大家瘋狂做迷你jQuery框架一樣。
總的來說，最有創造力的是React團隊，做出狀態管理器、CSS-in-JS、Flow靜態類型檢查、devTool、Fetch、前後端同構、Fiber、suspend、並發渲染等名詞層出不窮。其中，狀態管理器擁有上百套， CSS-in-JS也擁有上百套，Flow則讓前端嘗鮮到介面編程的好處，間接推動發Type發展。這三大框架無法比拼個一二出來：Vue.js有國人的擁躉，React與Angular有大公司光環。
三大框架的纏斗從PC領域擴展到移動端：React有RN， Vue.js有Weex，Angular有ionic。想當年我們為了兼容瀏覽器，攢了一大堆瀏覽器偵探的Hack，全部貶值為垃圾了。
在這時期，一種全新的後端渲染崛起，稱之為前後同構，既擁有早期SEO的功效，又能復用大量的業務邏輯。隨著國內移動互聯網的發展，獲客成本提高，各種有效的商業模式都進入紅海，但只有頭部用戶能賺到錢，馬太效應越來越嚴重，純粹的技術解決方案已經無法滿足商業訴求了。
小程序時代（2017~至今）
小程序時代與三大框架的時代幾乎重合，但是出自不同一批人，決戰的平台也不一樣。
一直以來前端技術都是由國外開發者主導的，即便是Vue.js也是由美國的華人創造的。但是國內外的技術更新是存在代差，國內通常延期兩三年，這個時間差可以讓一些模仿者得以生存（如SeaJS、FIS、avalon）。但隨著封閉的時間越來越長，國內肯會也會誕生自己的轉有物種。小程序就是其中之一。
小程序的出現有著明顯的商業訴求，因為馬太效應，一些超大流量的App誕生了。這些大流量App集成了許多功能，但顯然公司再多員工，也無法所有功能全是自己弄，於是產生小程序這種「外包」的手段。
小程序是國內前端技術的一次厚積薄發：底層運行的迷你React的虛擬DOM， 內置組件是使用Web Component，API來源於Hybird的橋方法，打包使用webpack，調試台是Chrome console的簡化版， WXML、WXSS的語法高亮也應該是webpack或VS Code的插件， 模塊機制是Node.js的CommonJS……其中最值得一提的是微信開發者工具，以後開發者工具成了各種小程序/快應用的標配。
但微信小程序一開始的復用能力非常弱，沒有類繼承，不能使用npm, 不支持Less、Sass， 因此基於它的轉譯框架就應運而生。第一代譯轉框架是wept、WePY、mpvue，它們無一例外是Vue風格的。因為WXML的模板指令與Vue非常相似，只是改一下就能兼容。當時也出現了一個MINA的框架，聽說是微信團隊開發的，可以單獨架起Node.js後端，讓小程序運於瀏覽器中，方便做單元測試。
第一代轉譯框架主要是基於Template標簽實現組件機制，自定義組件機制是很後的事了。這就造成了利用第一代轉譯框架編寫的小程序項目很難升級。那時候是個人開發者的天堂，這些框架都是某一大牛獨力開發的。
第二代轉譯框架是大公司主導的，因為需要兼容的小程序越來越多，網路、支付寶、位元組跳動、小米、華為等公司都推出自己的小程序和快應用。個人開發者很難憑個人力量去開發轉譯框架，這時候各大團隊紛紛推出自己的輪子：如京東的Taro、滴滴的Chameleon網易的Megalo、去哪兒網的nanachi、網路的Okam等。
在這個時期，Angular顯然落伍了，一是Angular升級太快，國內的高手還沒有消化好，新一版的Angular又發布了。二是國內缺乏迷你Angular的輪子，導致龐大的Angular無法塞進小程序中。
國外谷歌發布了Flutter跨平台轉譯框架，但是它的編寫語言是Dart，它也無法跨界到小程序中。
未來不僅國內一線巨頭爭奪小程序，二三線的巨頭也可能會加入小程序的混戰中，例如有人稱360也在打造自己的小程序平台。小程序這種新的流量變現模式深刻地影響了國內的互聯網布局。
結語
當初Java被誤解為最糟糕的語言，時至今日它是最流行的語言：GitHub 60%的開源項目都是與Java有關。
以前，從事這行業的人被稱為頁面仔，現在他們的起薪有的比PHP、JAVA、C++等後端還高。甚至有人說，「任何可以使用Java來編寫的應用，最終會由Java編寫。」
我們前端開發者觸及的領域不僅僅是瀏覽器，還可以做後端，做桌面端，做手機端，做小程序端，前端開發者的性價比越來越高，越來越重要。可謂是時代造英雄。
筆者有幸成為前端開發者大隊伍中的一員，也堅信我們前端開發者以後的路會越來越寬，越來越好走。
資料：
[1]：計算機和編程語言的發展歷史
[2]：Polyfill是一塊代碼（通常是 Web 上的 Java），用來為舊瀏覽器提供它沒有原生支持的較新的功能。
作者簡介：司徒正美，擁有十年純前端經驗，著有《Java框架設計》一書，去哪兒網公共技術部前端架構師。愛好開源，擁有mass、Avalon、nanachi等前端框架。目前在主導公司的小程序、快應用的研發項目。
本文鏈接：http://www.cnite.cn/qianan/share/20198308.html
⑤ fis3 package，這種匹配符是什麼意思
如果fis3匹配(match)到了文件， 並且文件中的路徑是有效路徑， 那麼它都會把這個路徑轉換成絕對路徑。 這是fis3的一大特色——資源定位 如果你只是想簡單的合並壓縮資源。
⑥ 請教各位 FOSTER壓縮空氣快速接頭中國有代理嗎
有，深圳市羅傑科技有限公司。以下是相關的型號規格。
Part Number 、1513 、1713 、1714 、1814 、1815 、2022 、2032 、2042 、2202 、2302 、2402 、2702 、2803 、2903 、3003 、3103 、3203 、3303 、3603 、3653 、3703 、4004 、4015 、4104 、4204 、4304 、4404 、4504 、4604 、4704 、4804 、4904 、4905 、5005 、5105 、5205 、5305 、5405 、5505 、5605 、5705 、5805 、5905 、02-2 、03-2 、04-2 、10-3 、11-3 、12-3 、190012 、190028 、190040 、190041 、190042 、100FP 、100FPB 、100FPS 、100FS 、100FS-101 、100FSS 、100MP 、100MPB 、100MPS 、100MS 、10-3B 、10-3D 、10-3DB 、10-3G 、10-3GB 、10-3GS 、10-3GS/S 、10-3M 、10-3S/S 、10-4M 、10FFPDC 、10FFSDC 、10P13-S 、10P15-S 、10P17-S 、10P19-S 、10S-3 、11-3B 、11-3S/S 、12-3B 、12-3S/S 、125FP 、125FPB 、125FS 、125FS-103 、125MP 、125MPB 、12FFPDC 、12FFSDC 、12FPB 、12FPS 、12FS 、12FS-101 、12FSS 、12FSS-101 、12FSS-103 、1-2M 、12MP 、12MPB 、12MPS 、12MS 、12S-3 、13-3 、13-3B 、13-3S/S 、1-3M 、14-3 、14-3B 、14-3GB 、14S-3 、150FP 、150FPB 、150FS 、150MP 、150MPB 、1513GB 、1513W 、15-3 、16-3 、16-3B 、165-3 、16FFPDC 、16FFSDC 、1713GB 、1713W 、1714W 、17-3 、17-3B 、17-3S/S 、1814W 、1815W 、190010A 、190011A 、190026A 、190027A 、190029A 、19FFPDC 、19FFSDC 、1B3 、1B3-S 、1B5 、1B5-S 、1B7 、1B7-S 、1C5-S 、1C7-S 、1D11-S 、1D13-S 、1D7-S 、1D9-S 、1M1M 、1M2M 、2022W 、2032HW 、2032S 、2042HW 、210-10 、210-10S/S 、210-11 、210-11S/S 、210-12 、210-1513 、210-16 、210-165 、210-17 、210-1713 、210-2803 、210-2803S/S 、210-2903 、210-2903S/S 、210-3003 、210-3003S/S 、210-3103 、210-3103S/S 、210-3203 、210-3203S/S 、210-3303 、210-3303S/S 、210-3603 、210-3603S/S 、210-3653 、210-3703 、210-3703S/S 、210-51 、210M-2803 、210M-2803NP 、210M-2803S/S 、210M-2903 、210M-2903NP 、210M-2903S/S 、210M-3003 、210M-3003NP 、210M-3003S/S 、210M-3103 、210M-3103NP 、210M-3103S/S 、210M-3203 、210M-3203S/S 、210M-3303 、210M-3303S/S 、210M-3603 、210M-3603NP 、210M-3603S/S 、210M-3653 、210M-3653S/S 、210M-3703 、210M-3703S/S 、210-SB3 、210-SB3S/S 、210-SB5 、210-SB7 、210-SB7S/S 、210-SC5 、210-SC7 、210-SD11 、210-SD13 、210-SD7 、210-SD9 、2202H 、2202S 、2202S/S 、2202W 、22-2 、22-2B 、22-2S/S 、2302H 、2302HW 、2302S/S 、2302S/SH 、2302W 、23-2 、2402H 、24-2 、25FFPDC 、25FFSDC 、25FP 、25FPB 、25FPS 、25FS 、25FS-101 、25FSS 、25FSS-101 、25FSS-103 、25HP 、25MP 、25MPB 、25MPS 、25MS 、25MS-101 、25US 、25US36 、25US90 、25US90-101 、2702H 、2702HW 、27-2 、2803GB 、2803GS 、2803H 、2803S 、2803S/S 、2803W 、2903GB 、2903GS 、2903H 、2903S 、2903S/S 、2B3 、2B3MS 、2B3-S 、2B5 、2B5MS 、2B5-S 、2B7 、2B7MS 、2B7-S 、2B7S/S 、2C5 、2C7 、2D11 、2D11-S 、2D13 、2D13-S 、2D7 、2D7-S 、2D9 、2D9-S 、2L38 、2L40 、2L41 、2L42 、2L43 、2L44 、2L45 、2L46 、2L48 、2L49 、2LPD11 、2LPD13 、2LPD7 、2LPD9 、2LPP13 、2LPP15 、2LPP17 、2LPP19 、2M2M 、2M3M 、2P13 、2P15 、2P17 、2P19 、2R1714 、2R1814 、2R4004 、2R4104 、2R4204 、2R4304 、2R4404 、2R4504 、2R4604 、2R4704 、2R4804 、2R4904 、2RSD11 、2RSD13 、2RSD7 、2RSD9 、3003D 、3003GB 、3003GS 、3003H 、3003HW 、3003LV 、3003S 、3003S/S 、3003S/SH 、3003W 、310-1714 、310-1814 、3103D 、3103GB 、3103GS 、3103H 、3103LV 、3103S 、3103S/S 、3103S/SH 、3103S/SLV 、3103W 、310-4004 、310-4104 、310-42 、310-4204 、310-43 、310-4304 、310-4404 、310-4504 、310-4604 、310-4704 、310-48 、310-4804 、310-49 、310-4904 、310M-4004 、310M-4104 、310M-4204 、310M-4204NP 、310M-4304 、310M-4304NP 、310M-4404 、310M-4504 、310M-4604 、310M-4704 、310M-4804 、310M-4804NP 、310M-4904 、310-SB3 、310-SB5 、310-SB7 、310-SD11 、310-SD13 、310-SD7 、310-SD9 、3203GB 、3203GS 、3203H 、3203LV 、3203S/S 、3203S/SLV 、3203W 、3303GB 、3303GS 、3303H 、3303S/S 、3303W 、3603GB 、3603GS 、3603S 、3603S/S 、3603W 、3653GB 、3653GS 、3703GB 、3703GS 、3703S 、3703S/S 、3703W 、38-4 、38FP 、38FPB 、38FPS 、38FS 、38FS-101 、38FS-103 、38FSS 、38FSS-101 、38FSS-103 、38HPB 、38HS 、38MP 、38MPB 、38MPS 、38MS 、38MS-101 、38US 、3L50 、3L51 、3L52 、3L52G 、3L54 、3L54G 、3L55 、3L55G 、3L56 、3L57 、3L58 、3L59 、3L59G 、3L60 、3L60G 、3L61 、3L61G 、3M3M 、3M4M 、3PDC 、3R1815 、3R4015 、3R4905 、3R5005 、3R5105 、3R5205 、3R5305 、3R5405 、3R5505 、3R5605 、3R5705 、3R5805 、3R5905 、3RSD11 、3RSD13 、3RSD7 、3RSD9 、3RSP13 、3RSP15 、3RSP17 、3RSP19 、3SDC 、3W125 、3W250 、3W375 、3W500 、40-4 、40-4B 、40-4S/S 、40S-4 、4104H 、4104S 、4104W 、41-4 、4204H 、4204S 、4204S/S 、4204W 、42-4 、42-4B 、42-4S/S 、42S-4 、4304S 、4304S/S 、4304W 、43-4 、43-4S/S 、44-4 、44S-4 、4504H 、4504S 、4504W 、45-4 、4604W 、46-4 、47-4 、4804S 、4804S/S 、4804W 、48-4 、48-4B 、48-4S/S 、4904S 、49-4 、4B3 、4B5 、4B7 、4D11 、4D11MS 、4D13 、4D13MS 、4D7 、4D7MS 、4D9 、4D9MS 、4M4M 、4P13 、4P15 、4P17 、4P19 、5005H 、5005W 、50-5 、50FP 、50FPB 、50FPS 、50FS 、50FS-101 、50FS-103 、50FSS 、50FSS-101 、50FSS-103 、50HS 、50MP 、50MPB 、50MPS 、50MS 、50MS-101 、50US 、51-3 、51-4 、5205H 、5205LV 、5205S/S 、5205W 、52-5 、52-5B 、5-2M 、52S-5 、5305H 、5305S/S 、5305W 、53-5 、5405W 、54-5 、54-5B 、54-5CA 、54-5G 、54-5GB 、54-5S/S 、54S-5 、55-5 、55-5S/S 、56-5 、56-5S/S 、5705H 、57-5 、5805H 、5805HW 、5805W 、5905W 、59-5 、59-5B 、5B3-S 、5B5-S 、5B7-S 、5C5-S 、5C7-S 、5D11-S 、5D13-S 、5D7-S 、5D9-S 、60-5 、60-5B 、60-5G 、61-5 、61-5B 、64-6 、64-6CA 、65-6 、66-6 、66-6CA 、66S-6 、67-6 、68-6 、69-6 、6D11 、6D13 、6D7 、6D9 、6FFPDC 、6FFSDC 、6M6M 、6P13 、6P13MS 、6P15 、6P15MS 、6P17 、6P17MS 、6P19 、6P19MS 、70-6 、71-3 、71-4 、71-4B 、71-5 、71-6 、72-6 、75FP 、75FPB 、75FPS 、75FS 、75FS-101 、75FS-103 、75FS-104 、75FSS 、75FSS-101 、75FSS-103 、75HPB 、75MP 、75MPB 、75MPS 、75MS 、81-4 、81-5 、81-5B 、8D11-S 、8D13-S 、8D7-S 、8D9-S 、A04DC-DP 、A06DC-DP 、A-10 、A-11 、A-12 、A12DC-DP 、A-16 、A16DC-DP 、A-17 、A-2803 、A-2903 、A-3003 、A-3103 、A-3203 、A-3303 、A-3603 、A-3653 、A-3703 、A-SB3 、A-SB5 、A-SB7 、A-SC5 、A-SC7 、A-SD11 、A-SD13 、A-SD7 、A-SD9 、B1DC 、B1DP 、B2DC-DP 、B3DC-BLUE 、B3DC-DP 、B3DP-BLUE 、B4DC-BLUE 、B4DC-DP 、B4DP-BLUE 、B6DC-BLUE 、B6DC-DP 、B6DP-BLUE 、B8DC-BLUE 、B8DC-DP 、B8DP-BLUE 、BG2-30P 、BG2-30STP 、BG2-30STT 、BG2-30T 、BG2L-30P 、BG2L-30STP 、BG2L-30STT 、BG2L-30T 、BG-KIT-F1 、BG-KIT-F2 、BHS81 、BHS82 、BHS83 、BHS84 、BHS85 、BL100FS 、BL100FSS 、BL100MS 、BL125FS 、BL12FS 、BL12FSS 、BL12MS 、BL150FS 、BL1513 、BL1713 、BL1714 、BL1814 、BL1815 、BL2022 、BL2032 、BL2042 、BL2202 、BL2202S/S 、BL2302 、BL2302S/S 、BL2402 、BL25FS 、BL25FSS 、BL25MS 、BL2702 、BL2803 、BL2803S/S 、BL2903 、BL2903S/S 、BL3003 、BL3003S/S 、BL3003W 、BL3103 、BL3103S/S 、BL3103S/S-104 、BL3103W 、BL3203 、BL3203S/S 、BL3303 、BL3303S/S 、BL3603 、BL3603S/S 、BL3653 、BL3703 、BL3703S/S 、BL38FS 、BL38FSS 、BL38HS 、BL38MS 、BL4004 、BL4015 、BL4104 、BL4204 、BL4204S/S 、BL4304 、BL4304S/S 、BL4404 、BL4504 、BL4604 、BL4704 、BL4804 、BL4904 、BL4905 、BL5005 、BL50FS 、BL50FSS 、BL50HS 、BL50MS 、BL5105 、BL5205 、BL5305 、BL5405 、BL5505 、BL5605 、BL5705 、BL5805 、BL5905 、BL75FS 、BL75FSS 、BL75MS 、BLA-2803 、BLA-2903 、BLA-3003 、BLA-3103 、BLA-3203 、BLA-3303 、BLA-3603 、BLA-3653 、BLA-3703 、BLA-SB3 、BLA-SB5 、BLA-SB7 、BLA-SD11 、BLA-SD13 、BLA-SD7 、BLA-SD9 、BLFHS2B 、BLFHS2F2 、BLFHS2F2B 、BLFHS2M2 、BLFHS2M2B 、BLFHS3 、BLFHS3F3 、BLFHS3M3 、BLFHS3M3B 、BLFHS4 、BLFHS4B 、BLFHS4F4 、BLFHS4F4B 、BLFHS4M4 、BLFHS4M4B 、BLFIS3F3 、BLFIS4F4 、BLFS200 、BLFS200V 、BLFS204 、BLFS204V 、BLFS204VP 、BLFS205 、BLFS205V 、BLFS206 、BLFS206V 、BLFS214 、BLFS214P 、BLFS214V 、BLFS214VP 、BLFS215 、BLFS215V 、BLFS216 、BLFS216P 、BLFS216V 、BLFS216VP 、BLFS224 、BLFS224P 、BLFS224V 、BLFS224VP 、BLFS225 、BLFS225V 、BLFS226 、BLFS226P 、BLFS226V 、BLFS226VP 、BLFS300 、BLFS300HF 、BLFS300V 、BLFS300V2 、BLFS306 、BLFS306P 、BLFS306V 、BLFS306V2 、BLFS306VP 、BLFS308 、BLFS308HF 、BLFS308HFP 、BLFS308P 、BLFS308V 、BLFS308V2 、BLFS308VP 、BLFS308VP2 、BLFS316 、BLFS316P 、BLFS316V 、BLFS316VP 、BLFS318 、BLFS318HF 、BLFS318HFP 、BLFS318P 、BLFS318V 、BLFS318VP 、BLFS326 、BLFS326P 、BLFS326V 、BLFS326VP 、BLFS328 、BLFS328P 、BLFS328V 、BLFS328VP 、BLFS500 、BLFS504 、BLFS504P 、BLFS506 、BLFS506P 、BLFS514 、BLFS514P 、BLFS516 、BLFS524 、BLFS524P 、BLFS526 、BLH1B 、BLH1S 、BLH1S/S 、BLH1S4 、BLH2B 、BLH2S 、BLH2S/S 、BLH2S/S316 、BLH2S6 、BLH3B 、BLH3S 、BLH3S/S 、BLH3S/S316 、BLH3S8 、BLH4B 、BLH4S 、BLH4S/S 、BLH4S/S316 、BLH4S10 、BLH6B 、BLH6S 、BLH6S/S 、BLH6S/S316 、BLH6S12 、BLH8B 、BLH8S 、BLH8S/S 、BLH8S/S316 、BLH8S16 、BLO-1513 、BLO-1713 、BLO-2803 、BLO-2903 、BLO-3003 、BLO-3103 、BLO-3203 、BLO-3303 、BLO-3603 、BLO-3653 、BLO-3703 、BLO-SB3 、BLO-SB5 、BLO-SB7 、BLO-SD7 、BLO-SD9 、BLSB3-3W 、BLSB5-3 、BLSB5-3W 、BLSB7-3 、BLSB7-3S/S 、BLSB7-3W 、BLSC5-3 、BLSC7-3 、BLSD11-3 、BLSD11-5 、BLSD13-3 、BLSD7-3 、BLSD7-4 、BLSD9-3 、BLSD9-4 、BLSD9-5 、BLSJ8-2 、BLSJ8P-2 、BLSP13-5 、BLSP15-5 、EHF10 、EHF11 、EHF14 、EHF15 、EHF17 、EX10DH 、EX12 、EX2 、EX2RT 、EX2RT-104 、EX2ST 、F180 、F184LV 、F185 、F189 、F33 、F36 、F38 、F40 、F41 、F42 、FF10CUPP-06 、FF10CUPP-08 、FF10P-06 、FF10P-06SS 、FF10P-08 、FF10P-08SS 、FF10P-75ORB 、FF10S-06 、FF10S-06SS 、FF10S-08 、FF10S-08SS 、FF10S-75ORB 、FF12CUPP-08 、FF12CUPP-12 、FF12P-08 、FF12P-08SS 、FF12P-106ORB 、FF12P-12 、FF12P-12SS 、FF12P-75ORB 、FF12P-87ORB 、FF12S-08 、FF12S-08SS 、FF12S-106ORB 、FF12S-12 、FF12S-12SS 、FF12S-75ORB 、FF12S-87ORB 、FF16P-12 、FF16P-12SS 、FF16S-12 、FF16S-12SS 、FF19CUPP-16 、FF19P-12 、FF19P-12SS 、FF19P-131ORB 、FF19P-16 、FF19P-16SS 、FF19S-12 、FF19S-12SS 、FF19S-131ORB 、FF19S-16 、FF19S-16SS 、FF25P-16 、FF25P-162ORB 、FF25P-16SS 、FF25P-20 、FF25P-20SS 、FF25S-16 、FF25S-162ORB 、FF25S-16SS 、FF25S-20 、FF25S-20SS 、FF32P-24 、FF32S-24 、FF40P-32 、FF40S-32 、FF6P-04 、FF6P-04SS 、FF6S-04 、FF6S-04SS 、FH21F 、FH22F 、FH22FB 、FH22M 、FH22MB 、FH33F 、FH33FB 、FH33M 、FH33MB 、FH44F 、FH44FB 、FH44M 、FH44MB 、FHP2F2 、FHP2F2-101 、FHP2F2B 、FHP2F2B-101 、FHP2M2 、FHP2M2-103 、FHP2M2B 、FHP2M2B-103 、FHP3F3 、FHP3F3B 、FHP3M3 、FHP3M3B 、FHP4F4 、FHP4F4B 、FHP4M4 、FHP4M4-101 、FHP4M4B 、FHS2 、
⑦ fis3 版本相同但是壓縮css和js後出現版本沖突。
通過一個url地址里寫上每個js或者css 路徑，然後插件通過路徑將js/css 進行gzip形式壓縮，最後組合成一個文件輸出。你能看到的輸出格式是php後綴，但是輸出文件的表頭是js/CSS 這樣瀏覽器也就當是js/css來解析了。
簡單說說 JS壓縮：
1. 長變數變數名 壓縮為短變數名，去空格，去注釋
2. 可以將 new Array() 改寫為 []， new Object 改寫為{} 雲雲
3. 使用eval， 關鍵詞等等 的復雜邏輯 也可以壓縮
這樣處理過後，如果覺得還是太大了，還可以採用服務端的gzip壓縮傳輸