1. 的前端開發社區有哪些
MDN
MSDN
StackOverflow
Github
Google Developer/web
各個庫/框架的官方網站、文檔和 demo
2. web前端開發論壇社區有哪些
推薦一個前端開發者的常用工具列表：
1. lodash：一個一致性、模塊化、高性能的 JavaScript實用工具庫。
2.ramda：一個很重要的庫,提供了許多有用的方法,每個 javaScript程序員都應該掌握這個工具。
3.dayjs：一個輕量的處理時間和日期的 JavaScript庫,js工具類和 Moment js的AP設計保持完全一樣,體積 只有2kb。
4.big.js：一個小型,快速的 JavaScript庫,用於任意精度 的十進制算術運算。
5.qs：一個url參數轉化 (parse和stringify)的輕量級js 庫。
6.three.js：基於webgl的開源3D框架，對webgl進行封裝，需要專業的3D開發知識。
7.thingjs: 一款新興的3D框架，封裝物聯網3D開發概念（建築、樓層等），僅要求初級js基礎。
常見的技術社區，都會有【大前端】學習資源和社區討論，推薦spring4all、博客園、開源中國、思否、CSDN、V2ex、騰訊雲、阿里雲、spring4all、掘金、ITPUB，總有合適你的學習氛圍。
如果有一定的美術能力，3D可視化是不錯的發展方向！審美在線，又有開發基礎的話，轉行3D開發師不用愁。我所處的物聯網3D可視化領域，這個職業很有前景哦~thingjs官網-資源中心提供視頻教程、demo案例、下載插件和3D模型，好好實操一下，初學者有破了一周開發3D項目的記錄！
ThingJS教程(2019版)
ThingJS教程(2020版)
CampusBuilder教程
ChartBuilder教程
ThingJS行業案例
看一下模型效果杠杠滴！
3. 前端開發有哪些社區推薦一下
前端開發有w3c，這個網站比較好用，適合新手用
4. 前端開發的基本方法
CSS部分
盒子邊傾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止點擊事件/滑鼠事件「穿透」
div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }
用來控制元素在移動設備上使用滾動回彈效果
.main{
-webkit-overflow-scrolling: touch;
}
可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況
文字漸變效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
實現圓弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中檢測數組的方法
(1)、typeof操作符
這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符
這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字元串操作
字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳過第一個索引。如果提供initialValue，從索引0開始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加參數
- * @function stringifyUrlArgs
- * @param {string} url - URL路徑
- * @param {object} params - 參數對象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL參數
- * @function parseUrlArgs
- * @param {string} url - 字元串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重
常用的數組操作
1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：
callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，
數組去重：
常用對象方法
1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性
5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf
安卓監聽可視區域變化，讓輸入框移動至可視區域
vue中平滑滾動到某個位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加參數
解析URL參數
好用的JavaSrcipt庫與模塊（包）
日期時間處理庫
1、monent.js
2、day.js
day相對於monent要輕量許多
高精度數學運算
number-precision
實用工具庫
Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等
5. 零基礎可以做哪些前端工作
零基礎如果想從事前端工作，要去學習一下。隨著互聯網技術的不斷發展，在互聯網的背景下電腦早已成為人們工作、學習、生活、娛樂不可少的工具，大家電腦辦公、網上購物，手機聊天等等，計算機技術已經滲透到我們生活的方方面面了。前端作為計算機熱門課程之一，就業前景是很好的。
前端要學的內容主要有：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
web前端工程師是程序員裡面入行門檻較低的一個職業，有意轉行web前端的小夥伴可以對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，建議實地考察對比一下。
祝你學有所成，望採納。
北大青鳥學生課堂實錄
6. 大前端的前景如何
web前端開發開發的發展前景還是非常廣闊的。隨著互聯網和移動終端的普及，雨後春筍般的互聯網項目的發展，用戶對於用戶體驗的需求不斷提升，Web前端工程師逐漸成為介於視覺工程師和後端工程師之間必不可少的角色，備受大家的追捧和關注。
前端要學的主要內容：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，建議實地考察對比一下。
祝你學有所成，望採納
北大青鳥學生課堂實錄
7. 前端開發中技術支持能幫助什麼東西
網站
網站是前端最基本的形態了，最基本的是PC端網站、移動端網站。可以在瀏覽器上打開，也可以在微信或各種APP內打開（這也是一直APP內webview打開的方式）
H5游戲
H5游戲已經見怪不怪了，當年微信退出打飛機游戲的時候，推動了H5游戲的大發展。它無需安裝，通過手機瀏覽器即可訪問，最大的特點就是：輕量、簡單。
H5游戲的開發採用HTML5的canvas等製作，或者也可以使用webgl來做3D的H5游戲。
移動APP
原生的移動APP，是用Native的開發語言做的，比如要開發IOS APP，你可以用Object-c，swift等，要開發Android APP，你可以用JAVA或Kotlin等。
我們這里說的移動APP，是指使用前端技術來做的。前幾年，比較火的Hybird APP框架是ionic，也有國內開發者做的mui和HTML5+框架，這些框架的技術是將html、css和JavaScript打包成一個文件，將文件放到webview中訪問，最後再在外層套上原生應用的殼，生成IOS和Android的安裝文件。這種APP可以做很多簡單的APP，不適合交互比較復雜的APP，因為webview的性能還是存在一定的問題，在Android設備上的卡頓變現比較明顯。
這兩年，以React為語法基礎的React Native和以Vue為語法基礎的Weex框架，成為新一代使用前端技術開發移動APP的框架，它們拋棄webview使用新的渲染機制，極大的提升了APP的性能和體驗。目前這兩者都處在完善階段，在未來很被看好。
桌面應用
以Nodejs和Chromium為基礎的框架Electron，使得使用HTML、CSS、JavaScript開發跨操作系統的桌面應用成為可能，應用可以運行在windows、maxOS和linux系統上。
Chrome APP
Chrome瀏覽器上運行的插件，是運行在Chrome上的HTML應用，完全使用前端技術開發製作。
2010年Google推出了基於Chrome開發的PC端操作系統Chrome OS，特點就是速度快，設計簡潔等，相對應的市場上也推出了很多基於Chrome OS的筆記本電腦，廠商有三星和戴爾等。
微信小程序
2017年1月，微信退出小程序，曾一度引爆前端行業。
小程序按照前端技術來設計開發，也做好了系統的兼容和不同設備的適配的設計，開發者只需要專注於實現業務代碼即可。所以，只要熟悉前端技術就可以很快的做出一個小程序。
Web VR、Web AR
這兩年，新興並大火的技術是人工智慧和機器學習，緊接著的應該就是VR、AR了吧，去年年底QQ和支付寶都在AR和VR方面做出嘗試，在搶紅包上進行實踐。
前端技術webgl，可以在瀏覽器上很好的實現3D場景，Three.js是這方便很好的JavaScript框架。Chrome瀏覽器已經兼容Web VR，配合Daydream View，可以瀏覽Web VR頁面。
8. 國內比較好的web前端技術社區有哪些
一直想寫這篇“十日談”，聊聊我對Web前端開發的體會，順便解答下周圍不少人的困惑和迷惘。我不打算聊太多技術，我想，通過技術的歷練，得到的反思應當更重要。 我一直認為自己是“初級”前端開發工程師，一方面我入道尚淺，只有短短幾年，另一方面我自知對技術的鑽研並不深入，可能是由於環境的原因，當然最重要的是，我幸運的參與到互聯網崛起的浪潮之巔。時勢造就了一批技能薄弱但備受追捧的“弄潮者”，這在很大程度上影響我們對“技術本質”的洞察力，多年來也一直未有成體系的“前端技術”佈道佳作，以至於當下多數人對前端技術的了解，蓋始於表述並不嚴謹的崗位招聘描述，而這正恰恰反映了Web前端開發對自身的模糊定位。對於很多Web前端工程師來說，初嘗禁果的快感無法持續很久，就陷入一輪又一輪的迷惘，思索自己的職業規劃，試圖尋找到適合自己的成長道路、看清自身技能的瓶頸，尋找突破。但遺憾的是，Web前端技術被廣泛接納時日尚短，沒有多少勵志的成功樣板可供遵循。然而情況不總是這么糟，畢竟Web前端技術是一門“技術”，和計算機科學系出同門，只是因為互聯網的高速崛起而被蒙上了迷霧，遮住了雙眼，讓我們傻傻看不清時局。 那麼，如何定義Web前端技術崗位邊界?Web前端技術的價值體現在何處?前端工程師的價值僅僅體現在物以稀為貴嗎?前端工程師的初級、中級、高級和專家之間到底如何界定?當前“我”處在什麼位置?接下來的路子應當怎樣走?何謂前端技術之“道”?我想多數人都思考過這些問題，本篇“十日談”里的觀點可能有些偏激，但拋磚引玉，讀者權且把這些言論當作一個引子吧。 第一日：初嘗禁果 【上帝說：“要有光!”便有了光】 萬物生靈、陽光雨露蓋源於造物之初的天工開物，我們無法想像上帝創造光明之前的世界模樣。但幸運的是，前端開發沒有神祗般的詭魅。這個技術工種的孕育、定型、發展自有軌跡，也頗有淵源，當然，這非常容易理解。不嚴格的講，在楊致遠和費羅在斯坦福大學的機房裡攛掇出Yahoo!時，Web前端技術就已經開始進入公眾視野，只不過當時沒有一個響亮的名字。從那時起，“基於瀏覽器端的開發”就成了軟體開發的新的分支，這也是Web前端技術的核心，即不論何時何地何種系統以及怎樣的設備，但凡基於瀏覽器，都是Web前端開發的范疇(當然，這個定義很狹隘，下文會提到)。 在2000年之後瀏覽器技術漸漸成熟，Web產品也越來越豐富，中國有大批年輕人開始接觸互聯網，有一點需要注意，大部分人接觸互聯網不是始於對瀏覽器功能的好奇，而是被瀏覽器窗口內的豐富內容所吸引，我們的思維模式從一開始就被限制在一個小窗口之內，以至於很長時間內我們將“視覺”認為是一種“功能”，Web產品無非是用來展現信息之用。起初的入行者無一例外對“視覺”的關注超過了對“內容”的重視，先讓頁面看起來漂亮，去關注html/css，沿著“視覺呈現”的思路，繼續深入下去。因此，這類人是被“視覺”所吸引，從切頁面入行，著迷於結構化的html和書寫工整的css，喜歡簡潔優雅的UI 和工整的頁面設計，之後開始接觸視覺特效，並使用jQuery來實現視覺特效，以此為線索，開始深入研究Dom、Bom和瀏覽器的渲染機制等，html/css在這些人手中就像進攻兵器，而JavaScript則更如防守的盾牌。 還有另外一群人從另一條道路接觸Web前端，即工程師轉行做前端，他們有較多的後台語言開發背景，從讀寫數據開始，漸漸觸及瀏覽器端，接觸 JavaScript庫，起初是在html代碼上加js邏輯，後來開始涉及html和css，他們喜歡OO、邏輯清晰、結構悅目的代碼，更關注界面背後的 “程序語言”和數據邏輯。html/css在這些人手中則更像盾牌，而JavaScript更如進攻的兵器。 應當說這兩類人是互補的，他們各自了解瀏覽器本質的一部分，一撥人對渲染引擎了如指掌，另一撥人則將JS引擎奉為至寶，其實任何一部分的優勢發揮出來都能做出精品。大部分前端工程師都能從這兩條淵源中找到自己的影子。但，這兩類人的思維模式和觀點是如此不同，以至於形成了一些不必要的對抗，比如在某些公司，乾脆將Web前端技術一分為二，“切頁面的”和“寫js的”。這樣做看上去明確了分工提高了效率，但他對員工的職業發展帶來巨大傷害。在第二日 “科班秀才”中會有進一步討論。 我應該屬於第二類，即在學校正兒八經的學習C/Java和C#之類，以為大學畢業後能去做ERP軟體、桌面軟體或者進某些通信公司寫TCP/IP相關的程序。校園招聘時選擇了中國雅虎，因為當年(08年)雅虎還是有一點兒名氣，而且我聽說雅虎比較算技術流的公司……自此就上了賊船，一發不可收拾。 在雅虎的這段時間，我有幸接觸到一股正氣凜然的技術流派，也形成了我對前端技術的一些基本看法，這些基本觀點一直影響我至今。 【優雅的學院派】 當年雅虎的技術流派正如日中天，擁有眾多“之父”級的高人，所營造出的Hack氛圍實在讓人陶醉的無法自拔，那段時間我甚至寧願加班到深夜閱讀海量的文檔和源代碼，感覺真的很舒服，我深深的被雅虎工程師這種低調務實、精工細琢的“服務精神”所打動，而這種不起眼的優秀品質很大程度的影響雅虎產品的用戶體驗和高質量的技術輸出。那麼，何謂“服務精神”?即你所做的東西是服務於人的，要麼是產品客戶、要麼是接手你項目的人、要麼是使用你開發的功能的人，所以技術文檔成為伴隨代碼的標配。因此，工程師之間通過代碼就能做到心有靈犀的溝通。這是工程師的一項基本素質，即，思路清晰的完成項目，且配備了有價值的技術文檔，如果你的程序是給其他程序員用的，則更要如此，就好比你製造一款家電都要配備說明書一樣。因此，YDN成了當時最受全球程序員最喜愛的技術文檔庫，這種優雅務實的“學院氣息”讓人感覺獨具魅力。 讓人感覺奇怪的是，在中文社區始終未見這種學院派。甚至在具有先天開源優勢的Web前端技術社區里也是波瀾不驚，可見寫一篇好的技術文案真的比登天還難。我所見到的大部分所謂文檔索性把代碼里輸出數據的語句塊拷貝粘貼出來，至於為什麼數據格式要設計成這樣、如果欄位有修改怎麼做、編碼解碼要求如何等等關鍵信息隻字不提，或者開發者也沒想過這些問題呢。因此，我們一直在強調代碼的質量和可維護性，但一直以來都未見效，蓋源於缺少這種“服務”意識的灌輸。這種意識在下文中還會多次提到，因為它能影響你做事的每個細節，是最應當首先突破的思想糾結。 除了意識問題，另一方面是技術問題，即文筆。這也是工程師最瞧不上眼的問題，難以置信這竟然是阻礙工程師突破瓶頸的關鍵所在。我已看到過數不清的人在晉升這道關卡吃了大虧，很多工程師技術實力很強，但就是表達不出來，要麼羅列一大堆信息毫無重點、要麼毫無趣味的講代碼細節，不知雲雲。除非你走狗屎運碰到一個懂技術的老闆，否則真的沒辦法逃脫碼農的宿命。但大部分人還振振有詞不以為然。而在Web前端開發領域情況更甚。前端工程師是最喜歡搞重構的，但在快節奏的需求面前，你很難用“提高了可維護性”、“提升了性能”這類虛無縹緲的詞藻為自己爭取到時間來搞重構，說的露骨一點，可能你真的對某次重構帶來的實際價值無法量化，只是“感覺代碼更整潔了”而已。我會在下文的“偽架構”中會分析前端工程師的這種浮躁獻媚的技術情結。而這正是前端工程師最欠缺的素質之一：用數據說話，用嚴謹科學的論據來支撐你的觀點，老闆不傻，有價值的東西當然會讓你去做。 當然，情況不總是這么糟糕，我們看到中文社區中已經鍛煉出了很多寫手，他們在用高質量的文字推銷自己的技術理念，這是一個好兆頭，好的文筆是可以鍛煉出來的。而在職場，特別是對前端工程師這個特殊職位來講，這種基本技能可以幫你反思梳理需求的輕重緩急，從凌亂的需求中把握七寸所在。因為當你開始認真寫一封郵件的時候，這種思考已經包含其中了。 所以，雅虎技術的推銷是相對成功和遠播的。關鍵在於兩方面，扎實的技術功底和高超的寫手。而真正的技術大牛一定是集兩者與一身，不僅鑽研劍道，還能產出秘籍。這也是Yahoo!優雅的學院派氣息的動力源泉。國內很多技術團體想在這方面有所建樹，應當首先想清楚這一點。 【規范的破與立 1】 雅虎的技術運作非常規范，剛才已經提到，包括技術、組織、文化，一切看起來有模有樣，也堪稱標桿，自然成了國內很多技術團隊和社區的效仿對象。一時間各種“規范“成風、各色“標准“大行其道，結果是質量參差不齊。 我們到底需要什麼樣的規范?雅虎的技術規范到底有何種魔力?以何種思路構建的規范才是貨真價實的?規范有著怎樣的生命周期?想清楚這些問題，能很大程度減輕很多Web前端工程師的思想負擔，看清一部分技術本質，避免盲目跟風。