學js很簡單，就是有點頭冷（0，大概是緒論）

學js很簡單，就是有點頭冷

對老angularjs項目進行改造以及遷移到vue，其中遇到了不少困難點以及不少js原理性的東西，在這裏進行收集以及彙總

一些工具網站的推薦

在我剛入行的2016年，前端js的工程化也纔剛剛興起，雖然仍是有不少網站還在徹底使用jquery，css和js的引入方法仍然靠手工往html文件裏插，如今徹底都不同了，node.js的出現，催生了express,gulp，webpack等等，整個前端開始徹底工程化，源代碼，生成，開發測試服務器，代碼格式化，自動生成註釋，甚至連編輯器都，固然啦，這樣也催生了不少問題，好比webpack的另外一面也是以配置繁瑣而出名，如下順便介紹幾個小網站，能夠自動生成新建一個項目的經常使用配置

• gitignore 告知git系統中哪些文件不須要進入git，推薦gitignore.io,只要輸入目標語言以及編輯器便可 一個vue的例子
• license 受權文件，有時候這個是維權的好東西choosealicense.com/
• 兼容性檢查 查看你要用的特性是否支持，萬惡的ie基本都是紅的caniuse,雖然不少能夠經過各類polyfill進行解決，不過老是有幾個漏網之魚不是麼
• polyfill babel的轉碼只會轉語法，一些基於瀏覽器的特性是不會進行轉碼的，好比Promise須要引入專用的promise-polyfill，推薦一個可以自動注入的網站polyfill.io
• 漸變生成 生成css漸變色很麻煩？ 試試這個
• 其餘輔助 從正則到css到box-shadow，這個網站應有盡有tools.jb51.net/aideddesign…

基本知識

js版本

js有幾個主要階段，ES3，ES5，ES6，ES7，ES8，其中最爲重要的大概就是es5，es6了，es5是目前瀏覽器支持最爲普遍的一個版本（由於IE），es6至關於現代瀏覽器的一個標誌，ES6中大量新特性的加入，使得自己不少困惱前端的問題，好比做用域提高啊，回調地獄啊等，都有了很大程度的提高以及彌補，固然由於不是全部瀏覽器都實現了這些es6的規範，爲了兼容考慮，咱們都會使用babel將其轉回ES5，記住，由於babel只會轉譯語法糖和一部分實現，像新的類（Promise）仍是須要使用polyfill來進行實現的。

跨域

跨域的詳細介紹能夠參考ruanyifeng的博客 簡單來講，端口，域名，子域名，只要有一點不同，瀏覽器就會自動幫咱們把請求返回的數據給攔截，因此開發過程當中收不到後端小夥伴給的數據也請不要着急，開發中咱們可使用webpack的dev-server的proxy功能，正式版用nginx代理api和前端到同一個域名，固然直接上cors進行跨域也是能夠的，不過這個主要仍是後端的工做啦，並且記住，options請求也讓後端處理一下

工程化

最先的時候，整個前端項目的開發是很是無序的，新建一個html，而後經過連接往裏面不停的塞js，塞css，那個時候整個項目基本都是靜態網頁，而動態的部分通常交由php或者java的jsp進行動態生成html代碼，而後經過服務器生成後扔回給用戶的瀏覽器，可是隨着nodejs的出現以及html5的出現，前端開始逐漸承擔起和用戶交互的工做，而不是原先僅僅製做出一些簡單的動效以及佈局，前端也由一我的進行開發而變成了多人協做，甚至在今天，前端不只僅能夠運行在瀏覽器上，做爲服務器以及app也再也不是什麼難事

事件循環

簡單來講，js爲了防止多個線程修改同一個dom這一類的操做，是隻有一個線程的（webworker，serviceworker是後來出的，並且不能和dom通訊），js就設計了一個回調機制，事件循環，最簡單來講，有兩個循環，main循環，micro循環，當js有空閒的時候，優先從micro循環中取下一個要調用的函數，而後纔是main循環中，而main循環只有三種方式插入

1. 新的js文件引入
2. setTimeout
3. setInterval

記住，有時候js一些奇怪的行爲就是由於時間循環，以及。。。這是面試考點，問你數據輸出順序的

其餘連接

從工程化提及