前端知识补足计划
2016-03-11 10:04
302 查看
恶补进行中…… 记录下进度,免得过几天又忘了,跑去看别的,最后一无所获。一步一步走!
接下来的一段时间将主要用来补充一些进阶的前端知识,如npm命令详解,package.json文件结构详解,某个知识点如reset.css和normalize.css区别,require使用,cmd和amd区别,sea.js使用规范等等。
尽量都写到当前这一个文件中,(特殊需求除外)采用标题的的形式,暂时先不关注前后逻辑性,学到哪里写到哪里。抽空温习,毕竟记性不好。。。。。
参数: -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文件夹了。
-gl 列出全局安装的包的详细信息
参数: -g 查看全局包的安装目录
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
然后重启电脑。
和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 安装的一些库。 参考
已经学到双向数据流哪里了
发现略坑 普通项目可能用不到。大型项目才用得到吧。先慢慢看吧,把教程看完,在尝试着写个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的目的是就是不同的组件共用一些逻辑。
#问题前提: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 {}对象 w3cschool: javascirpt 对象
初步:这是一个js object 对象,形同:var a = new object({name1:function(){},name2:function(){},name3:' '});
使用a.name1() 访问其封装的属性
相关:JavaScript Object Literals & Array Literals
MDN Array_literals MDN Using_object_initializers
[a]代表什么?
引申:单体模式 见:js高级视频教程 10.单体模式
JSON是JS的一个子集,所以可以在JS中轻松地读写JSON。读和写JSON都有两种方法,分别是利用”.”操作符和“[key]”的方式。
逻辑与:&&,前面的一个为假时,后面的就不计算(执行)了,例子:$input && $input.trigger('change'); //若$input为undefined,后面不执行。
知识相关:① 逻辑与,逻辑非,逻辑或,按位与………… 一个链接:讲讲js中的逻辑与(&&)以及逻辑或(||)
② js中的那些值会返回 true,那些会返回false。 如:undefined返回false,字符串返回true
font-family:monospace,verdana, helvetica, arial, sans-serif
web字体详细研究
单元测试 详细知识
最近看了10-单体,11-链式调用
问题:
1、关于js闭包在作用域链,内存垃圾回收机制和函数嵌套方面的理解
接下来的一段时间将主要用来补充一些进阶的前端知识,如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 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终端测试的)
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): 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]”的方式。
五、琐碎的一些知识
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字体详细研究
单元测试 详细知识
六、js高级教程视频
进度:最近看了10-单体,11-链式调用
问题:
1、关于js闭包在作用域链,内存垃圾回收机制和函数嵌套方面的理解
七、git学习
……相关文章推荐
- [Sencha ExtJS & Touch] 在Sencha(Extjs/Touch)应用程序中使用plugins(插件)和mixins(混入)
- Web报表工具FineReport中JavaScript的使用
- 【死记硬背】javascript常用代码或注意事项
- 【死记硬背】CSS常用属性和注意事项
- 大锅乱炖10大 H5 前端框架
- 【jquery】jquery的各种方法的积累
- JSON.NET与LINQ序列化示例教程
- IE中的CSS3不完全兼容方案
- css动画——transition和animation
- jsp : 网页提交验证
- css后代选择器和属性选择器
- HTML5页面跳转的几种方法
- 如果你喜欢 Fedora,那你肯定也喜欢 Korora
- HTML5实现本地数据持久化
- CSS3:nth-child()伪类选择器…
- HTML5表单中password输入的显示与…
- HTML5中实现滑动条调节div透明度
- HTML5与JQuery混合应用:选座功能…
- 使用过的CSS小技巧笔记
- Javascript的精华