webpack使用教程

经典入门(推荐):https://github.com/ruanyf/webpack-demos

官方入门教程:http://webpack.github.io/docs/tutorials/getting-started/

React+Babal+WebPack: https://github.com/ruanyf/react-babel-webpack-boilerplate

Gitbook 英文原版:http://christianalfoni.github.io/react-webpack-cookbook/
中文版:https://fakefish.github.io/react-webpack-cookbook/

如果您是 webpack 新手的话,建议学习以下文档:

http://wwsun.github.io/posts/react-with-es6-part-1.html

如何使用webpack
https://github.com/petehunt/webpack-howto(官方英文教程)
http://qiutc.me/post/如何使用webpack—webpack-howto.html(中文教程)

http://segmentfault.com/a/1190000002551952

http://www.cnblogs.com/vajoy/p/4650467.html

Browserify vs Webpack

webpack-dev-server 简介:http://www.jianshu.com/p/941bfaf13be1

入门推荐:
Webpack傻瓜式指南(一): http://zhuanlan.zhihu.com/p/20367175
Webpack傻瓜指南(二)开发和部署技巧: http://zhuanlan.zhihu.com/p/20397902
Webpack傻瓜指南(三)和React配合开发: http://zhuanlan.zhihu.com/p/20522487

 

 

 

js中的基本类型和引用类型的区别

ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型。也有其他的叫法,比如原始类型和对象类型拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两种的类型特点来命名的,大家爱叫啥就叫啥吧 o(╯□╰)o 。

1.基本类型

基本的数据类型有:`undefined,boolean,number,string,null.基本类型的访问是按值访问的,就是说你可以操作保存在变量中的实际的值。基本类型有以下几个特点: Continue reading

React 编程风格指南

推荐先看下ECMAScript 6 的编程风格:http://es6.ruanyifeng.com/#docs/style,再看下面的React编程风格。

本文讨论的是 React.js 编程中的一些编程风格,团队开发中遵循统一的风格有利于提高代码的阅读体验。
本文译自React style guide。下面将从三个方面来讲。

语法

方法顺序遵循生命周期放在前面, render() 方法放在最后

react 组件内部,方法的顺序如下:

  1. 生命周期方法,按照时间先后顺序依次为(https://hulufei.gitbooks.io/react-tutorial/content/component-lifecycle.html):
    getDefaultProps,
    getInitialState,
    componentWillMount,
    componentDidMount,
    componentWillReceiveProps,
    shouldComponentUpdate,
    componentWillUpdate,
    componentDidUpdate,
    componentWillUnmount
  2. 其他的方法
  3. render 方法

事件处理函数的命名

采用 "handle" + "EventName" 的方式来命名 Continue reading

使用Fiddler调试手机程序

转自:http://unclechen.github.io/2015/04/30/使用前端开发利器Fiddler调试手机程序/

Fiddler是一个非常好用的web前端调试工具,它能记录客户端和服务器的http和https所有请求和响应,允许监视、设置断点,修改输入输出数据。与其他的抓包工具,例如wireshark、firebug等不同,Fiddler可以允许你在调试CGI接口时,修改返回的数据,也就是可以构造请求模拟响应

此外,Fiddler还可以支持模拟低速网络(如手机网络)过滤请求等等,安装了Willow插件以后你还可以轻松实现修改Host等操作。可惜的是目前Fiddler只支持Windows系统,没办法,毕竟是基于.net框架开发的嘛。

1. Fiddler的安装和配置

注意:由于Fiddler4是基于.net框架的,所以需要在自己的电脑上先安装.NetFrameWork,安装好了以后,就可以下载Fiddler4进行安装了。 Continue reading

atom编辑器常用插件

先推荐facebook自家的nuclide工具集合包。https://github.com/facebook/nuclide

推荐Packages

很多时候,安装后不能及时就生效,需要重启Atom,这块比较讨厌,略搓:(

  • linter 必备;代码校验工具
  • esformatter 必备;统一代码格式
  • atom-beautify 必备;格式化代码的,快捷键ctrl-alt-b
  • minimap 推荐;就是Sublime右边那一竖块,显示缩小版的代码
  • color-picker 推荐;写CSS时非常方便的调色板
  • autocomplete-paths 填写路径的时候有Sug提示
  • vim-mode 劳资就是喜欢zuo,所以在Atom上用vim写码:)
  • docblockr 方便写注释
  • emmet 必备;前端开发必备,谁用谁知道,入门地址:Emmet使用手册
  • terminal-panel 不是那么好用的CLI,勉强能凑活
  • git-plus Git插件;得先配置邮箱和用户名
  • javascript-snippets 推荐;各种缩写,值得拥有;当然,俺用的最多的是cl命令:)
  • file-icons 推荐:让文件前面有彩色图片,看着非常享受(如果使用着 seti-ui 主题,则体现不了效果哦)

 

基于SourceTree 下的 Git Flow 模型

gitflow 开发流程参考:http://blog.haohtml.com/archives/15317

git_flow
基于SourceTree 下的 Git Flow 模型

1. sourceTree  是一个开源的git 图形管理工具,可下载mac版本,windows版本

2. Git Flow 是一套使用Git进行源代码管理时的一套行为规范和简化部分Git操作的工具。

基本的操作流程

1. 先用sourceTree 创建本地git 项目,xxxProject,

2. 在项目里面先提交一次 commit 一下,默认提交在了 master分支;

3. 然后在 sourceTree工具 右上角,点击 GitFlow,开启git Flow 规范模型的开发

git-flow_1

如上图,在开启gitFlow 之后;

生产环境分支使用:master

开发分支使用:develop

当需要新增加功能,发布版本时,创建补丁修复bug时,分别有对应的 feature,release,hotfix前缀这样的分支 Continue reading

Git忽略文件权限

默认git会记录文件的权限信息,如果文件的权限信息被修改,那么git也作为一个差异保存。但是我们有时候是不需要这方面的差异的(例如在Windows下使用Cygwin),这时需要关闭文件权限的检查。

15122405_7vQg

git中可以加入忽略文件权限的配置,具体如下:

$ git config core.filemode false
$ git config --list

也可以使用以下命令查看是否生效。

cat .git/config

15122405_SsDD

还有一个小问题,在设置这个属性之前权限就混乱的话,是无法自动修复的。这时候,如果仅仅是权限混乱的话,直接git reset --hard恢复吧,git会将项目完全恢复到最近一次提交,包括权限。

git diff命令详解

diff里面a表示前面那个变量,b表示第二个变量

HEAD     commit版本
Index     staged版本

a、查看尚未暂存的文件更新了哪些部分,不加参数直接输入
git diff
此命令比较的是工作目录(Working tree)和暂存区域快照(index)之间的差异
也就是修改之后还没有暂存起来的变化内容。

b、查看已经暂存起来的文件(staged)和上次提交时的快照之间(HEAD)的差异
git diff --cached
git diff --staged
显示的是下一次commit时会提交到HEAD的内容(不带-a情况下)
Continue reading