前端知识补足计划-白红宇

前端知识补足计划

阅读量：5025 次

发布时间：2019-06-12

本文共 10169 字，大约阅读时间需要 33 分钟。

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

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

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

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

一、npm命令详解

英文官方文档站点：

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下相关（工具|插件|模块）介绍：

1、bower

官网：

安装bower：npm install -g bower

通过npm 安装bower，后可以直接使用bower的命令。

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

bower的正确使用方式：

如何使用包由你决定。我们推荐你使用Bower和。或者基于API构建你自己的工作流程。你也可以直接使用已安装的包。

像这样：（用jQuery举例）

学习用的demo：

2、gulp.js

gulp.js是什么：官方答案：基于流的自动化构建工具。

官方给的介绍幻灯片

官方中文站点：

和grunt区别

入门：

全局安装：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。

3、browserify.js

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

解释，前端想要模块化，就必须使用require.js或者sea.js或者其他的前端模块发解决方案。但是Browserify可以让你像写node.js代码时一样进行开发，然后使用Browserify 插件编译一下即可。

官网：

学习用的demo：

拓展阅读：

二、react.js难点需要记忆的知识

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

已经学到双向数据流哪里了

发现略坑普通项目可能用不到。大型项目才用得到吧。先慢慢看吧，把教程看完，在尝试着写个demo，或者用哪个AmazeUI React框架写个demo然后就放一放

jsx注释：{/* */} 官方文档中其他的多行注释和单行注释实际操作发现不可以，会报错，就先不用了。

...操作符，展开操作符，返回一个{name:value,name:value} react中的常用用法，{...this.props}返回和上面对应的props，一种简写方式，记住即可

详细可见

component生命周期

componentWillMount

componentDidMount

componentWillReceiveProps 注意传参 (object nextProps)

shouldComponentUpdate 注意传参 (object nextProp,object nextState) 如果需要在更新组件之前做一定的操作，比如做判断达到某种限定停止更新组件，需要在这里处理

componentWillUpdate 注意传参 (object nextProp,object nextState)

componentDidUpdate 注意传参 (object prevProp,object nextState)

componentWillUnmount

react 的 mixins的目的是就是不同的组件共用一些逻辑。

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

四、js的对象类型，彻底搞清楚，变量，数组，json格式等等

尤其是 var a = {name1:function(){},name2:function(){},name3:' '}这是什么结构

百度 w3cschool:

初步：这是一个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];//可以叫做 简写方式？

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

百度百科：JSON( Object Notation) 是一种轻量级的数据交换格式。

JSON是JS的一个子集，所以可以在JS中轻松地读写JSON。读和写JSON都有两种方法，分别是利用”.”操作符和“[key]”的方式。

五、琐碎的一些知识

em 和 rem ，页面设置font-size:100% 和屏幕尺寸，分辨率等的关系详细探究

逻辑与：&&，前面的一个为假时，后面的就不计算（执行）了，例子：$input && $input.trigger('change'); //若$input为undefined，后面不执行。

知识相关：① 逻辑与，逻辑非，逻辑或，按位与………… 一个链接：

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

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

web字体详细研究

单元测试详细知识

六、js高级教程视频

进度：

最近看了10-单体，11-链式调用

进度：已经看完，最后的项目还没有跟着做呢，接下来跟着做完那个项目，然后复习一遍

问题：

1、

七、git学习

compare with the same repository version 和相同的版本库比较

compare with the latest repository version 和最新的版本库比较

解释：就算懂了字面意思，不懂git原理，还是不会理解的。

这个相同的版本库可以理解为 svn的和当前版本比较。

用途是为了看自己在上次commit后改了那些内容。

而和最新的版本库比较

分两种，如果当前的版本就是最新的版本（别人没有提交之类的）

那么和上面没有区别

如果别人也有提交，或者你自己恢复到了之前的版本，那么比较的就不仅仅是当前修改未提交的内容了。

commit 仅提交到本地库

commit and push 提交到本地库，并推送到远程库

1、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 记住里面的所有命令。

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

查看用户名和邮箱地址：

$ 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

……

转载于:https://www.cnblogs.com/ferron/p/5129368.html

你可能感兴趣的文章

android 插件形式运行未安装apk

查看>>

ios开发之 manage the concurrency with NSOperation

查看>>

Android权限 uses-permission

python 中的 sys , os 模块用法总结

在使用webView播放flash或视频文件时无法关闭声音的问题

查看>>

redhat 7 源码安装 mysql5.5.49

Learning to rank (software, datasets)

查看>>

git常见问题

查看>>

一、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终端测试的）

1、bower

学习用的demo：

相关问题：

2、gulp.js

学习用的demo：

二、react.js难点 需要记忆的知识

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

四、js的对象类型，彻底搞清楚，变量，数组，json格式等等

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

五、琐碎的一些知识

六、js高级教程视频

七、git学习

二、react.js难点需要记忆的知识