前端知識補足計劃

惡補進行中…… 記錄下進度，省得過幾天又忘了，跑去看別的，最後一無所得。一步一步走！

某塊內容積累的足夠多了，就把它單獨整理出去，記得這裏留下目錄連接，單獨也留下回主頁連接。

接下來的一段時間將主要用來補充一些進階的前端知識，如npm命令詳解，package.json文件結構詳解，某個知識點如reset.css和normalize.css區別，require使用，cmd和amd區別，sea.js使用規範等等。

儘可能都寫到當前這一個文件中，（特殊需求除外）採用標題的的形式，暫時先不關注先後邏輯性，學到哪裏寫到哪裏。抽空溫習，畢竟記性很差。。。。。

 

1、npm命令詳解

英文官方文檔站點： https://docs.npmjs.com/

npm install <name> 安裝（nodejs依賴）包

例如：npm install express 安裝express的最新版本的包到【當前目錄】

參數： -g 安裝到全局 帶空格

　　　可是在代碼中，是沒有辦法經過require()方法直接調用全局安裝的包的。全局安裝是爲了供命令行使用的，例如全局安裝 vmarket，則能夠在命令行使用vm命令。

　　　（？？因此一些不是在命令行使用的在代碼中使用的包，最好不要全局安裝？？）//我的觀點，待確認

　　　@版本號 安裝指定版本號的包 不帶空格

　　　例如：npm install express@3.0.6

　　　 --save 安裝的同時，將信息寫入package.json中 帶空格

　　　例如：npm install express --save

　　　package.json：項目路徑中若是有package.json文件，直接使用npm install命令就能夠經過dependencies配置安裝全部依賴包。項目發佈到github時，也就不須要提交node_modules文件夾了。

npm init 會引導你建立一個package.json文件，包括包名稱，版本，做者等信息

npm remove <name> 移出包

npm update <name> 更新包

npm ls 列出當前項目（目錄）安裝的包

參數： -g 列出全局安裝的包

　　　 -gl 列出全局安裝的包的詳細信息

npm root 查看當前項目中全部包的安裝目錄 

例如：直接輸入上面命令便可，無需後面添加某個包名，由於沒這個功能和必要

參數： -g 查看全局包的安裝目錄 

npm help npm幫助

npm help install npm install幫助（貌似這個有問題）實際測試使用：npm install -h更好（使用webstorm自帶的terminal終端測試的）

npm下相關（工具|插件|模塊）介紹：

一、bower

官網：https://bower.io/

安裝bower：npm install -g bower

經過npm 安裝bower，後能夠直接使用bower的命令。

使用bower安裝包：bower install <package>。

bower的正確使用方式：

如何使用包由你決定。咱們推薦你使用Bower和 Grunt, RequireJS, Yeoman, and lots of other tools 。或者基於API構建你本身的工做流程。你也能夠直接使用已安裝的包。

像這樣：（用jQuery舉例）

<script src="bower_components/jquery/dist/jquery.min.js"></script>

學習用的demo：

相關問題：

使用Bower安裝模塊時出現問題: ENOGIT git is not installed or not in the PATH。

解決辦法：假如你的git安裝目錄是」C:\Program Files (x86)\Git」，在path中( 系統屬性中)加入git的bin和cmd目錄，如C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd。而後重啓電腦。（bower基於git工做的，沒有正確安裝git會報這個錯。）

 

 

二、gulp.js

gulp.js是什麼：官方答案：基於流的自動化構建工具。

官方給的介紹幻燈片http://slides.com/contra/gulp#/ 

官方中文站點：http://www.gulpjs.com.cn

和grunt區別：http://segmentfault.com/a/1190000002491282

入門：

全局安裝：npm install -g gulp

項目中安裝：npm install --save-dev gulp （-dev表明添加到依賴（package.json的devDependencies））

gulpfile.js：

var gulp = require('gulp');

gulp.task('default',['yilai1','yilai2'],function(){//write your task code});

//default那裏寫task名稱，yilai1，yilai2對應的是task執行前的依賴任務：必須在這些任務執行後才能執行

如今gulp推薦使用ES6來寫gulp代碼:

import gulp from 'gulp';
gulp.task('test',['task1','task2'],()=>{//write your task code})

運行 gulp <task> <othertask> （不寫任何task名稱，則運行默認task==》default）

去gulp官網可查看gulp的API

去npm官網能夠查看gulp用到的插件的API（英文的，耐心閱讀便可使用）

學習用的demo：web-starter-kit。

 

三、browserify.js 

Browserify 可讓你使用相似於 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，經過預編譯讓前端 Javascript 能夠直接使用 Node NPM 安裝的一些庫。 參考

解釋，前端想要模塊化，就必須使用require.js或者sea.js或者其餘的前端模塊發解決方案。可是Browserify可讓你像寫node.js代碼時同樣進行開發，而後使用Browserify 插件編譯一下便可。

官網：http://browserify.org/

學習用的demo：

拓展閱讀：browserify運行原理分析

SeaJS 和 Browserify 的模塊化方案有哪些區別?

前端模塊管理器簡介

 

2、react.js難點 須要記憶的知識

官方中文站點：http://reactjs.cn/

已經學到雙向數據流哪裏了

發現略坑 普通項目可能用不到。大型項目才用獲得吧。先慢慢看吧，把教程看完，在嘗試着寫個demo，或者用哪一個AmazeUI React框架寫個demo而後就放一放

jsx註釋：{/* */} 官方文檔中其餘的多行註釋和單行註釋實際操做發現不能夠，會報錯，就先不用了。

...操做符，展開操做符，返回一個{name:value,name:value} react中的經常使用用法，{...this.props}返回和上面對應的props，一種簡寫方式，記住便可

詳細可見 傳遞Props|React

component生命週期

componentWillMount

componentDidMount

componentWillReceiveProps 注意傳參 (object nextProps)

shouldComponentUpdate 注意傳參 (object nextProp,object nextState) 若是須要在更新組件以前作必定的操做，好比作判斷達到某種限定中止更新組件，須要在這裏處理

componentWillUpdate 注意傳參 (object nextProp,object nextState)

componentDidUpdate 注意傳參 (object prevProp,object nextState)

componentWillUnmount

 

react 的 mixins的目的是就是不一樣的組件共用一些邏輯。

3、CommonJs規範? AMD規範? CMD規範? common.js? require.js? sea.js?

這個必定要研究透徹了，這個是重點。

答案0.1（有更新過）

#問題前提：js模塊化開發

CommonJS、AMD和CMD這三個規範都是爲javascript模塊化加載而生的。

不存在common.js這東西。require.js和sea.js分別是AMD和CMD兩個規範的實現。

Node.js就是原生實現了CommonJS規範。（Node.js是一個Javascript運行環境(runtime)。實際上它是對Google V8引擎進行了封裝。瞭解更多）

 

AMD規範: require.js    ]  http://www.requirejs.cn/

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}瀏覽器端

CMD規範: sea.js         ]  http://seajs.org/docs/

CommonJs規範:                     　　　　　　　　　　　　　　->node端採用

 

CommonJs規範:          　　藉助Browserify工具 　　　　　　 ->瀏覽器端

 

從歷史角度看：（不嚴格，但能夠幫助理解）

JS（ES5如下版本，ES6中有ES6 module）天生不支持模塊化，沒有類，繼承等概念，進行大工程和麪向對象開發很是困難。

而後有人/組織提出了CommonJS規範試圖解決這個困難。

而後就有人基於這個規範搞出了Node.js。還愈來愈火。

Node.js這東西實際上屬於後端的東西。可是它的語言是js啊，前端這幫人呢，又比較閒，研究來研究去，以爲特別好。就想在前端的方面也這樣幹。

他們想，我前端也有大的工程啊，若是我也能模塊化開發多好啊。因而就有人搞出了require.js。

後來有人不服，搞出了sea.js。（還有人搞出了別的……）

可是啊，Node.js是基於瀏覽器內核封裝的一個運行時環境。require.js，sea.js只是一個js的庫。它雖然都作到了前端js的模塊化加載。可是它的實現原理是不同的。

爲了區別開發。因而呢他們/全體開發人員都須要，給這兩命個名，就是AMD規範和CMD規範。

可是呢，由於它們倆只是一個js的庫，就至關於jquery同樣，須要運行的時候，先讓瀏覽器加載進去。而開發時寫的js代碼和普通的js代碼也就有點不一樣了（和JQuery與js的差點小多了，就是須要一些函數嵌套你的全部代碼）。有人不習慣啊。以爲很麻煩。

他習慣了Node.js這種開發方式，他就像能不能讓前端想後端同樣開發。因而就搞出了一個工具，叫Browserify。這貨會幫你把你的代碼編譯一下，讓瀏覽器能夠識別運行。（想知道原理，百度吧）

 

瞭解更多：

http://javascript.ruanyifeng.com/nodejs/module.html 

推薦：http://www.cnblogs.com/qianshui/p/5216580.html

 

答案1.0

個人理解： commonJS是一個模塊加載規範，他在設計之初就是考慮的服務端，因此他是一個同步的模式，主要是用在node.js後端的，

require.js是依據commonJS的這種規範實現的前端模塊化加載工具。然而前端須要的是異步加載，因而AMD（異步加載規範）應運而生。因此說require.js是AMD規範的一個實現。

相關理解https://www.zhihu.com/question/20342350/answer/14828786

 

答案2.0

相關名詞：

CommonJS Modules   ->  Node Modules

AMD(Asynchronous Module Definiton)

CMD(Common Module Definition)

JavaScript 在設計之初不只僅是針對瀏覽器之間的語言。後來因爲WEB的流行，加之Netscape和Microsoft Internet Explorer之間的競爭，致使JavaScript被過早的標準化。因此JavaScript有不少先天缺陷。好比沒有模塊(module)等（注意等：不只是沒有module還有不少其餘方面的缺陷，這裏不冗述）的定義，這致使很難進行大型項目的開發。

因而，CommonJS應運而生！

百度百科給的CommonJS詞條簡介：

CommonJS API定義不少普通應用程序（主要指非瀏覽器的應用）使用的API，從而填補了這個空白。它的終極目標是提供一個相似Python，Ruby和Java標準庫。這樣的話，開發者可使用CommonJS API編寫應用程序，而後這些應用能夠運行在不一樣的JavaScript解釋器和不一樣的主機環境中。在兼容CommonJS的系統中，你可使用 JavaScript程序開發：

服務器端JavaScript應用程序

命令行工具

圖形界面應用程序

混合應用程序（如，Titanium或Adobe AIR）

因此，Module只是CommonJS中的一部分，CommonJS自己很大的。

說到CommonJs，這裏不得不提到NodeJS，NodeJS是CommonJS的一個部分實現。是上面說的開發服務器端JavaScript應用程序的一個工具。

因此Node 的 Modules 部分是遵照CommonJs Modules規範的。可是有一點小區別（什麼區別，不細追究，用到的時候再說）。

因此說，並無common.js這個工具存在。NodeJs的Module部分已經實如今node的編譯器裏了？

說到後端，就要說前端。JavaScript運行最多的地方仍是瀏覽器端。

隨着WEB頁面愈來愈複雜，瀏覽器環境也愈來愈發在，UI和UE需求也變得愈來愈複雜。前端開發不再是之前那種一我的單打獨鬥，甚至美工兼職切圖，後端兼職js可以解決的了。

他們也急需模塊化工具。因而require.js應運而生。

他可讓前端人員也能夠像nodejs開發人員那樣模塊化地寫代碼。

可是前端和後端運行環境不懂：

後端是無需下載，一個文件可能被屢次運行，他的瓶頸是CPU和內存；

前端是須要下載運行的。並且是一個文件被下載到多個客戶端運行，他的瓶頸是網絡帶寬。

因此後端是同步的請求，而前端是須要異步的請求的。

因此require.js的實現方式和node是有所不一樣的。因此它另立門戶了。因而有了一個新的（前端）規範——AMD規範。

說到require.js，就不得不說sea.js了，它被視做（自視做？）require.js的最大競爭對手。緣由在於require.js並非徹底實現commonJS的要求的。他只是依照這個需求自行設計的。

而SeaJS 更簡潔優雅，更貼近 CommonJS Modules/1.1 和 Node Modules 規範（做者原話）。sea.js和AMD是不一樣的，因此它稱本身實現了CMD規範。顯然，這個CMD規範和CommonJS Modules不是一回事！

相關參考連接：

http://www.2cto.com/kf/201401/270303.html

http://www.2cto.com/kf/201412/363524.html

http://www.2cto.com/kf/201411/348276.html

https://www.zhihu.com/question/20342350/answer/14828786

https://www.douban.com/note/283566440/

http://www.commonjs.org/

http://raychase.iteye.com/blog/1463617

http://baike.baidu.com/link?url=WhxqRwGIpJt3AhX7Zwqf4jIqdmKgKq0D_LP9TW9SQxEXNaadiNCNM01i7y9DbyiQnsTH7-nZWN_tbmAWR1mjEK

 

更多問題之後研究：

CommonJS的具體內容是什麼？

Node是若是實現CommonJS (module) 規範的？

require.js和sea.js的具體區別，實現方式，調用方式的區別？

browserify是幹啥的？

 

4、js的對象類型，完全搞清楚，變量，數組，json格式等等

尤爲是 var a = {name1:function(){},name2:function(){},name3:' '}這是什麼結構

百度 js {}對象 w3cschool: javascirpt 對象

初步：這是一個js object 對象，形同：var a = new object({name1:function(){},name2:function(){},name3:' '});

使用a.name1() 訪問其封裝的屬性

var person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

//替代語法（使用對象 literals）：

var person = {firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

引伸：建立數組

var ay = new Array();

ay[0] = 1;
ay[0] = 2;
ay[0] = 3;

//替代語法 （使用數組 literals）
var ay = [1,2,3];

//能夠叫作 簡寫方式？

相關：JavaScript Object Literals & Array Literals

MDN Array_literals    MDN Using_object_initializers

[a]表明什麼？

 引伸:單體模式 見：js高級視頻教程 10.單體模式

JSON：(JavaScript Object Notation) 【javascript對象表示法】

百度百科：JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。

JSON是JS的一個子集，因此能夠在JS中輕鬆地讀寫JSON。讀和寫JSON都有兩種方法，分別是利用」.」操做符和「[key]」的方式。

 

5、瑣碎的一些知識

em 和 rem ，頁面設置font-size:100% 和屏幕尺寸，分辨率等的關係詳細探究

邏輯與：&&，前面的一個爲假時，後面的就不計算（執行）了，例子：$input && $input.trigger('change'); //若$input爲undefined，後面不執行。

知識相關：① 邏輯與，邏輯非，邏輯或，按位與………… 一個連接：講講js中的邏輯與（&&）以及邏輯或（||）

　　　　   ② js中的那些值會返回 true，那些會返回false。   如：undefined返回false，字符串返回true

 font-family:monospace,verdana, helvetica, arial, sans-serif

web字體詳細研究

單元測試 詳細知識

 

6、js高級教程視頻

進度：

最近看了10-單體，11-鏈式調用

進度：已經看完，最後的項目尚未跟着作呢，接下來跟着作完那個項目，而後複習一遍

 

問題：

一、關於js閉包在做用域鏈，內存垃圾回收機制和函數嵌套方面的理解

 

7、git學習

compare with the same repository version 和相同的版本庫比較

compare with the latest repository version 和最新的版本庫比較

解釋：就算懂了字面意思，不懂git原理，仍是不會理解的。

這個相同的版本庫能夠理解爲 svn的 和 當前版本比較。

用途是爲了看本身 在上次commit後改了那些內容。

而和最新的版本庫比較

分兩種，若是當前的版本就是最新的版本（別人沒有提交之類的）

那麼和上面沒有區別

若是別人也有提交，或者你本身恢復到了以前的版本，那麼比較的就不只僅是當前修改未提交的內容了。

 

commit 僅提交到本地庫

commit and push 提交到本地庫，並推送到遠程庫

 

一、git使用指南 速成版

首先看一張圖：

牢記這張圖.

假定你已經有了一個庫後，無論是你從github上clone的仍是本身新建的。

查看 當前狀態 ： git status

（修改的文件是綠色的，一旦被add進緩存區會變成紅色）

查看 當前遠程倉庫地址：git remote -v

查看 當前遠程倉庫：git remote show

查看 當前遠程倉庫信息：git remote show [remote-name] 舉例：git remote show origin

若是沒有指定遠程倉庫，

指定 遠程倉庫地址 git remote add [remote-name] [url]

若是遠程倉庫地址不正確了，

切換 遠程倉庫：git remote set-url origin [url] 舉例：git remote set-url origin https://github.com/xxx/xxxx

(切換了記得在看一遍是否成功了)

添加 已修改的文件進緩存區：git add

（能夠添加多個文件，git add 文件夾，更多需求直接百度）

（添加了記得 查看一下狀態，進了緩存區的文件但是紅色的）

撤銷 add添加的文件：git reset

（這個直接撤銷上一步操做了，具體撤銷add後的文件的方法用的時候百度吧）

提交 文件到本地倉庫：git commit  （若是先要直接備註：git commit -m "comment here"）

輸入這個後，若是有錯誤和警告提示之類的，不要慌，看下去，雖是英文也能看懂的。

沒有問題會直接進入vim界面，就是編輯界面。

按 i 能夠添加comment

添加完了  按 ESC 鍵能夠退出，繼續按 i 還能夠編輯

確認無誤，按 :wq (沒錯須要shift+;鍵輸入:)

敲回車便可。

這是你成功的commit了一個文件了。

把這個文件push到遠程倉庫，直接：git push

（要確保本身的遠程倉庫沒問題啊，不放心參照上面查看一下）

 從遠程倉庫獲取 更新 ：git fetch

查看 當前的分支：git branch

切換到 某一分支： git checkout [branch-name]

新建一個分支：git  branch [branch-name]

記住上面這些就能夠了，主要是看懂那張圖，剩下的命令邊用邊學吧。

 

沒事時候看看這裏：http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 記住裏面的全部命令。

 

二、平時用到的陸續記錄一下

1. 查看用戶名和郵箱地址：

   $ git config user.name
   
   $ git config user.email

2. 修改用戶名和郵箱地址：

   $ git config --global user.name "username"
   
   $ git config --global user.email "email"

 　　3. 強制從遠程倉庫對本地修改進行覆蓋

　　　　有時候本身改着改着改亂套了，整個項目都出問題了，又不知道從哪裏修復。就可使用這個命令。　　

　　　　git fetch --all 

　　　　git reset --hard origin/develop

　　　　第一個命令的意思是取回遠程端全部修改。

　　　　第二句的意思是將版本號置到develop這個版本上。固然若是你須要置的是你本身的私有版本，也能夠置到私有版本號上。

　　　　到這裏再使用git pull去取項目的時候，就不會報修改未提交的問題了。

　　4. git fetch 和 git pull 的區別

　　　　git fetch:至關於從遠程獲取最新版到本地，不會自動merge

　　　　git pull:至關於從遠程獲取最新版到本地，並自動merge

　　　　瞭解更多：http://blog.csdn.net/wfdtxz/article/details/8632811

　　　　深刻了解：http://blog.csdn.net/a19881029/article/details/42245955

　　5.fork以後如何向原做者貢獻代碼（瞭解便可）

　　　　連接：http://www.open-open.com/lib/view/open1420683474953.html

　　6.本地建立倉庫向遠程（github）推送

　　　　先在遠程建立一個同名的倉庫，而後在本地指定遠程倉庫地址，而後再push。

　　　　若是遠程建立倉庫的時候沒有建立README.md，再從本地push會報錯：fatal the current branch master has no upstream branch

　　　　解決辦法：http://blog.csdn.net/qqb123456/article/details/25319659

　　　　上述辦法核心：git push -u origin master

 

……