前端知识补足计划

时间 2019-11-25

原文原文链接

恶补进行中…… 记录下进度，省得过几天又忘了，跑去看别的，最后一无所得。一步一步走！javascript

某块内容积累的足够多了，就把它单独整理出去，记得这里留下目录连接，单独也留下回主页连接。css

接下来的一段时间将主要用来补充一些进阶的前端知识，如npm命令详解，package.json文件结构详解，某个知识点如reset.css和normalize.css区别，require使用，cmd和amd区别，sea.js使用规范等等。html

尽可能都写到当前这一个文件中，（特殊需求除外）采用标题的的形式，暂时先不关注先后逻辑性，学到哪里写到哪里。抽空温习，毕竟记性很差。。。。。前端

1、npm命令详解

英文官方文档站点： https://docs.npmjs.com/java

npm install <name> 安装（nodejs依赖）包

例如：npm install express 安装express的最新版本的包到【当前目录】node

参数： -g 安装到全局带空格react

　　　可是在代码中，是没有办法经过require()方法直接调用全局安装的包的。全局安装是为了供命令行使用的，例如全局安装 vmarket，则能够在命令行使用vm命令。jquery

　　　（？？因此一些不是在命令行使用的在代码中使用的包，最好不要全局安装？？）//我的观点，待确认git

　　　@版本号安装指定版本号的包不带空格github

　　　例如：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：

二、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

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];

//能够叫作 简写方式？

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 记住里面的全部命令。

二、平时用到的陆续记录一下

查看用户名和邮箱地址：

$ git config user.name

$ git config user.email

修改用户名和邮箱地址：

$ 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

……

前端知识补足计划

1、npm命令详解

npm install <name> 安装（nodejs依赖）包

npm init 会引导你建立一个package.json文件，包括包名称，版本，做者等信息

npm remove <name> 移出包

npm update <name> 更新包

npm ls 列出当前项目（目录）安装的包

npm root 查看当前项目中全部包的安装目录

npm help npm帮助

npm help install npm install帮助（貌似这个有问题）实际测试使用：npm install -h更好（使用webstorm自带的terminal终端测试的）

一、bower

学习用的demo：

相关问题：

二、gulp.js

学习用的demo：

2、react.js难点 须要记忆的知识

3、CommonJs规范? AMD规范? CMD规范? common.js? require.js? sea.js?

4、js的对象类型，完全搞清楚，变量，数组，json格式等等

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

5、琐碎的一些知识

6、js高级教程视频

7、git学习

2、react.js难点须要记忆的知识