前端知识补足计划

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

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

 

一、npm命令详解

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

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

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

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

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

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

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

　　　例如：npm install [email protected]

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

 

一.1 bower相关问题

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

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

然后重启电脑。

一.2 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 

　　gulpfile.js：var gulp = require('gulp');

　　　　　　　gulp.task('default',['yilai1','yilai2'],function(){//write you task code});  //default哪里写task名称，yilai1，yilai2对应的是task执行前的依赖任务：必须在这些任务执行后才能执行

运行 gulp <task> <othertask> （不写任何task名称，则运行默认task——>default）

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

 

 

 

二、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的目的是就是不同的组件共用一些逻辑。

三、AMD,CMD，common.js require.js sea.js等等，搞清楚

这个一定要研究透彻了，这个是重点

#问题前提：js模块化开发

AMD和CMD是js模块化开发的两个规范。

AMD规范: require.js    ]  http://www.requirejs.cn/

　　　　　　　　　　　　} 浏览器端

CMD规范: sea.js         ]  http://seajs.org/docs/

CommonJs规范:Browserify node端采用

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

四、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）：

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]代表什么？

 

五、琐碎的一些知识

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

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

知识相关：① 逻辑与，逻辑非，逻辑或，按位与………… 一个链接：讲讲js中的逻辑与（&&）以及逻辑或（||）

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