React 顶层 API
React.createClass(obj)创建一个 ReactClass(组件类), 参数是一个对象且必须有 render 属性. 该方法必须返回一个封闭的容器或 null/false(表示不渲染)
在该方法中, 所有的 this 都会在最终调用的时候绑定到创建的组件的构造器上.
React.createElement(TYPE(string|ReactClass)[, PROPS[, CHILDREN(ReactElement)]])创建一个指定类型的 React 元素(要区分 ReactClass(通性) 和 ReactElement( 个性) 和 Virtual DOM(实例), 通过 ReactClass 创建 ReactElement, 然后实例化成 Virtual DOM: 比如 ButtonComponent 是 Class, 而<ButtonCompoennt />则是 Element, 最后通过 ReactDOM.render() 生成Virtual DOM)第三个参数 Children 可以是人一个书的 React 元素
React.createEle ...
Updating With React.render
What does React.render do
First, validate the inputs
If there was no previous component, render as a new component
Otherwise, compare the next component to the previous component using “shouldCUpdateComponent”
If “shouldUpdateComponent” is true, update the component using ReactComponent.updateComponent. Otherwise, unmount and continue to render as a new component
React.render gives you a declarative way to use React’s update flow at the top level, similar to how re-rendering works inside a comp ...
React 组件生命周期
Mounting/组件初始化相关componentWillMountcomponentDidMount
Updating/组件更新相关componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate
Unmounting/组件移除相关componentWillUnmount
Initial 相关getDefaultPropsgetInitialState
componentWillMount在组件初始化前执行, 但仅执行一次, 即使多次重复渲染该组件,或者改变组件的 state如果希望该回调能执行多次, 可以使用 React.unmountComponentAtNode 移除已有的组件, 然后重新 render
componentDidMount在组件初始化完成时触发, 同样只能触发一次
componentWillReceiveProps在组件接收到新的 props 的时间点之前调用, 注意初始化的时候不会触发(此时初始化 props, 而不是获得新的 props), 但是如果组件重复 ...
Webpack
Webpack 是一款模块加载兼打包工具, 能把各种资源, 例如 JS(X), coffee, css(sass/less), 图片等都作为模块来使用和处理
可以直接使用 require 的形式来引入各模块, 即时他们可能需要经过编译, webpack 上有各种健全的加载器(loader)会处理这些事情.
Webpack 优势
webpack 是一 commonJS 的形式来书写脚本的, 但对 AMD/CMD 的支持也很全面, 方便就项目进行代码迁移
能被模块化的不仅是 JS 了
开发便捷, 能替代部分 grunt/gulp 工作, 比如打包, 压缩混淆, 图片转 base64等
扩展性强, 插件机制完善, 特别支持 React 热拔插(react-hot-loader).
安装与配置常规使用 npm 安装$npm install -g webpack如果是常规项目, 还是把依赖写入 package.json 更好
$npm init
$npm install --save-dev webpack
`</pre>
### 配置
每个项目下都必须配置一个 webpack ...
Array.from()
Array.from() 方法可以将一个类数组对象或可遍历对象转化为真正的数组.在 ES6 中, Class 语法允许我们为内置类型(比如 Array) 和自定义类新建子类(比如叫 subArray), 这些子类也会继承父类的静态方法, 比如 subArray.from(), 调用该方法后会返回子类 subArray 一个实例, 而不是 Array 的实例.
语法Array.from(arrayLike[, mapFn[, thisArg]])
`</pre>
### 参数
#### arrayLike
想要转换成真实数组的类数组对象或可遍历对象
#### manFn
可选参数, 如果制定了该参数, 则最后生成的数组会经过 map 操作
#### this.Arg
可选参数, 执行 mapFn 时的 this 的值
### 描述
可以使用 Array.from()将下面的两种对象转换成数组
- 类数组对象(拥有 length 属性和若干索引属性的任意对象)
- 可遍历对象(可以迭代出其他对象, 比如有 Map 和 Set)
Array.from(obj, ...
package.json 属性
namepackage.json 中最重要的属性是 name 和 version. 这两个属性是必须要有的, 否则模块无法被安装. 这两个属性一起形成了一个 npm 模块的唯一标识符.模块中内容变化的同时, 模块版本也应该一起变化.name 属性就是你的模块名称, 下面是一些命名规则:
name 必须小于等于214字节, 包括前缀名称在内(如../..module)
name 不能以’_’或’.’开头
不能有大写字母
name 会成为 url 的一部分, 不能有 url 非法字符
不要使用和 node 核心模块一样的名称
name 中不要有 ‘js’ 和 ‘node’
versionversion 必须可以被 npm 依赖的一个 node-server 模块解析
description一个描述, 方便别人了解你的模块的作用, 搜索的时候也有用
keywords一个字符串数组, 方便别人搜到本模块
homepage项目主页 url注意: 这个项目主页 url 和 url 属性不同, npm 注册工具会认为你把项目发布到其他地方了, 获取模块的时候不是从官方仓库后去, 而是去 url ...
使用 Npm 创建新工程
创建一个工程目录, 并 cd 到目录中, 运行$npm init这个工具将引导你创建一个 package.json 文件, 他只覆盖了大多数一般的项目, 并尽量让默认内容全面.运行npm help json 获取 package.json 中的各个字段的文档及其定义后面可以用npm install <pkg> --save来安装一个包并将其存储为 package.json 文件中的一个依赖模块任何时间按下^C 退出.简单来说:npm init 创建或修改一个项目中的 package.json 文件默认名称(显示在括号中)是当前文件夹的名字, 如果对于提示不输入任何字符并按下 Enter 键, npm 会将默认名称当做项目名称.在完成提示内容后, npm init 将会给你一个即将创建的 package.json 文件的预览, 对于我们来说, 他看起来是这样的
{
"name":"project-name",
"version":"0.0.0",
"descri ...
Display:table-Cell
display:table-cell 属性简述display:table-cell 属性让标签元素鞥一表格单元格的形式呈现, 类似于 td 标签.table-cell与float, position:absolute 不兼容.table-cell元素可以设置 width, height, padding, 但是不能设置 margin, 和 td 标签一致.
display:table-cell 与大小不固定元素的垂直居中display:table-cell 与两栏自适应布局display:table-cell 等高布局table 表格中的单元格最大的特点之一就是同一行列表元素都是登高的, 所以等高布局可以借助 table-cell 实现.匿名表格元素创建规则:CSS2中创建表格元素, 其依赖元素(比如 tr 之于 td, table 之于 tr) 会被模拟出来, 从而使得表格模型能够正常工作. 所有的表格元素都会自动在自身周围生成需要的匿名 table 对象, 使其符合 table/inline-table, table-row, table-cell 的三层嵌套关系.要实现等高布局, ...
JavaScript 的闭包
通常情况下, 求和函数的定义是这样的
function sum(arr){
return arr.reduce(function(x,y){
return x+y;
});
}
sum([1,2,3,4,5]); //15
`</pre>
但是, 如果不需要立刻求和, 而是在后面的代码中根据需要进行计算, 可以选择返回一个保存了参数的求和函数
<pre>`function lazy_sum(arr){
var sum = function(){
return arr.reduce(function(x,y){
return x+y;
});
}
return sum;
}
`</pre>
当我们调用`f = lazy_sum()`时会返回保存了参数 arr 的 sum 函数, 直到通过 f()调用 sum 函数前都不会进行求和运算, 可以节约资源.
**需要注意的一点**是每一次调用 la ...
前端工作流
主要操作包含:
CSS 前缀补全, LESS/SASS 编译, CSS 压缩, JS 合并压缩 ,图片压缩, 部署发布
流程分解主要分为
开发过程
和
部署过程
开发过程要求每一次编辑都能在页面上即时相应
部署过程
CSS Autoprefixer
Less/Sass => CSS
CSS 压缩合并
CSS Sprite
Retina @2x & @3x 自动生成适配
imagemin 图片压缩
JS 合并压缩
项目目录结构project //项目目录|____dev //开发目录| |____html| |____images| |____scripts| |____slice //合成的雪碧图| |____styles|____dist //生产目录| |____html| |____images| |____scripts| |____sprite //仅从 src 复制| |____styles|____gulpfile. ...
Mac OS 下 实现 Tree 指令
先安装 zsh进入~/.zshrc, 添加alias tree="find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'"回到目录, 执行source .zshrc 令修改立即生效可以使用tree指令生成文档树
RegExp in JS
Literal/patter/attributes
new RegExpnew RegExp(pattern, attribtues)
patternRegExp Attribtues
g: global
i: ignoreCase
m: multi-lines
source: literal text
lastIndex: mark the index where to start next match
Examplevar re = new RegExp('^[0-9]+$','g');
console.log(re.source); //^[0-9]+$
`</pre>
<pre>`var re = new RegExp('\\d{3}','g');
var str = '123a456b';
console.log(re.lastIndex); // 0
re.exec(str); //return ['123']
console.lo ...
Shell 指令
Shell 在计算机科学中是指”提供用户使用界面”的软件, 通常指的是命令行界面的解析器, 一般来说, 这个词指的是操作系统中提供访问内核所提供服务的程序. Shell 也用于泛指为所有用户提供操作界面的程序, 也就是程序和用户交互的层面. 因此与之相对的是程序内核(Core), 内核不提供和用户的交互功能.
bash (Bourne Again Shell) 是 Linux 标准的默认 shell, 支持 POSIX 标准, 完全兼容 sh.进入 shell: 一般 Linux 系统中, 桌面(GUI)状态下使用快捷键 Ctrl+Alt+T 能打开一个虚拟终端, 输入 shell 命令并执行.退出 shell: 在 shell 中输入 exit 然后回车默认提示符: 普通用户$, 根用户#查看 shell 版本: echo $SHELL查看命令的辅助信息:--help, --version
目录文件指令pwd: 查看当前目录echo $HOME 或者 echo ~: 查看主目录
ls: 列出文件或目录下的文件名
-a(all): 显示所有文件, 包括隐藏文件
-l(long): 显 ...
Mac OS 下前端开发环境配置
安装 homebrew终端下执行ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
配置 iterm2下载后下载配色 solarized, 然后下载 zsh 和 oh-my-zsh, 添加插件 git, osx, ruby, autojump
安装 Nginx终端下执行brew install nginx安装完成后用浏览器打卡 http://localhost:8080, 如果页面显示正常,则表示安装完成nginx 有一下几个操作
#打开 nginx
nginx
#nginx -s 重新加载配置|重启|停止|退出
nginx -s reload|reopen|stop|quit
#测试配置是否有语法错误
nginx -t
`</pre>
Note: 如果执行不成功, 请使用 sudo 提权
默认访问目录是
`/usr/local/Cellar/nginx/1.10.0/html`
nginx 的配置 ...
Component Children
this.props.children
Children allow you to pass components as data to other components, just like any other prop you use. The special thing about children is that React provides support through its ReactElement API and JSX. XML children translate perfectly to React children.
var MyDiv = React.createClass({
render: function(){
return <div>{this.props.children}</div>
}
});
ReactDOM.render(
<MyDiv>
<span& ...
Node
A Node is an interface from which a number of DOM types, and allows these various types to be treated similarly.
Properties
Node.baseURI: return a DOMStirng representing the base URL
Node.childNodes: return a live NodeList containing all the children of this node. NodeList being live means that if the children of the Node change, the NodeList will update automatically.
Node.firstChild: return a Node representing the first direct child Node of this Node, or Null if the node has no child.
Node.las ...
innerHTML and textContext and NodeValue
Summary:
nodeValue is a little more confusing to use, but faster than innerHTML
innerHTML parses content as HTML and takes longer(output text/html)
textContent uses straight text, does not parse HTML, and is faster(output text/plain)
innerText takes styles into consideration. It won’t get hidden text for instance.
node.textContentThe Node.textContent property represents the text content of a node and it descendants.
Syntaxexample.textContent ="<a href='...'>textCont ...
<Script> 小知识
<script> 按照出现顺序被执行
后加载的脚本可以依赖先加载的脚本, 但是先加载的脚本堵塞, 整个网页的加载会堵塞.
当一个脚本被执行时, 可以访问前面的 HTML 元素, 但不能访问后面的元素.
页面元素在他之前的所有脚本都加载完之前是不会执行渲染的.
async 和 deferHTML5 添加了两个工具用于控制脚本的执行
async 表示”不用马上执行”. 定义一个页面需要的变量或函数在async中是不行的, 因为你没法知道什么时候async代码会执行
defer 表示”等待页面解析完成之后执行”, 大致等价于把脚本绑定到window.onload事件. 当这个代码被执行, DOM 中的一切元素都可以访问, 不同于async, 所有加了defer的脚本会按照他们出现在 HTML 中的顺序执行, 只是推迟到页面解析后按顺序执行.
type 属性设定解释器若要修改 type 的默认属性(默认为 javascript), 可以通过一个标记实现:<meta http-equiv = "Content-Script-Type" cont ...
Event
In computing, an event is an action or occurrence recognized by software that may be handled by the software. Computer events can be generated or triggered by the system, by the user or in other ways. Typically, events are handled synchronously with the program flow, that is, the software may have one or more dedicated places where events are handled, frequently an event loop. A source of events includes the user, who may interact with the software by way of, for example, keystroke on the keyboa ...
DOM Events
DOM(Document Object Model) events allow event-driven programming language like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handler/listener on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL, and SVG documents.
EventsHTML EventsThere is a huge collection of events that can be generated by most element nodes:
Mouse events;
Keyboard events;
HTML frame/object events;
HTML form events;
User interface events;
Mutation events(notification of any changes to ...
