跨域资源共享 CORS
CORS 是一个 W3C 标准, 全称是”跨域资源共享”(cross-origin resource sharing)
他允许浏览器向跨域服务器发出 XMLHttpRequest, 从而克服了 AJAX 只能同源使用的限制
简介CORS 需要浏览器和服务器同时支持. 目前所有浏览器都支持该功能, IE 浏览器不能低于 IE10.
整个 CORS 通信过程, 都是浏览器自动完成, 不需要用户参与, 对于开发者而言, CORS 通信与同源的 AJAX 通信没有差别, 代码完全一样. 浏览器一旦发现 AJAX 跨域请求, 就会自动添加一些附加的头信息. 有时还会多出一次附加的请求, 但是用户不会有感觉.
因此, 实现 CORS 的关键是服务器, 只要服务器实现了 CORS 接口, 就可以跨域通信
两种请求CORS 请求分两类: 简单请求(simple request)和非简单请求(not-so-simple request)
只要同时满足以下两大条件, 就属于简单请求:
请求方法是: HEAD, GET 或者 POST
HTTP 头信息不超出以下几种字段: Accept, Accept-L ...
浏览器同源政策及其规避方法
浏览器安全的基石是”同源政策”(same-origin policy).
概述所谓”同源”, 是指三个”相同”.
协议相同: http:\\
域名相同: www.example.com 与 example.com 不同
端口相同
目的同源政策的目的是为了保证用户信息安全, 防止恶意的网络窃取数据
限制范围如果非同源, 共有三种行为受到限制
Cookie, LocalStorage 和 IndexDB 无法读取
DOM 无法获得
AJAX 请求无法发送
CookieCookie 是服务器写入浏览器的一小段信息, 只有同源的网站才能共享. 但是两个网页一级域名相同, 只有二级域名不同, 浏览器允许通过设置 document.domain 共享 Cookie.
举例来说, A 网页是 http://w1.example.com/a.html, B 网页是 http://w2.example.com/b.html, 那么只要设置相同的 document.domain, 这两个网页可以共享 Cookie.
document.domain = 'example.com';
...
Node.js URL 模块的使用
Node.js 中的 URL 模块, 用于将 URL 字符串解析为对象或将对象格式化为 URL 字符串, 该模块比较简单, 共包括 3 个方法:
URL 各部分说明对于一个 URL 字符串, 其组成部分会有所不同. 其中有些部分只有在 URL 字符串中存在时, 对应字段还才会出现在解析后的对象中. 以下是一个 URL 例子
http://user:[email protected]:8080/path/to/file?query=string#hash
`</pre>
解析后的字段如下:
- `href`: 解析前的完整原始 URL, 协议名和主机名已经转为小写
- `protocol`: 请求协议, 小写, 例如`http:`
- `slashes`: 协议的`:`后面是否有`\`, 返回`true`或`false`
- `host`: URL 主机名, 包括端口信息, 小写, 例如`host.com:8080`
- `auth`: URL 中的认证信息, 例如`user:pass`
- `hostname`: 主机名, 小写, 例如`host.com`
- `port`: ...
Promise in ES6
在 JavaScript 世界中, 所有代码都是单线程执行的
异步执行可以可以用回调函数实现
function callback() {
console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000);
console.log('after setTimeout()');
`</pre>
先看一个简单的 Promise 例子: 生成0-2之间的随机数, 如果小于1, 则等待一段时间后返回成功, 否则返回失败
<pre>`function test(resolve, reject){
var timeOut = Math.random() * 2;
log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function(){
if(timeOut ...
CO Module
Co [email protected] has been released, which now relies on promises. It is a stepping stone towards the aysnc/await proposal. The primary API change is how co() is invoked. Before, co returned a “thunk”, which you then called with a callback and optional arguments. Now, co() return s a promise.
co(function* (){
var result = yield Promise.resolve(true);
return result;
}).then(function (value) {
console.log(value);
}, function(err) {
console.error(err.stack);
});
`& ...
JavaScript Generator
作用迭代器
function* argumentsGenerator() {
for (let i = 0; i < arguments.length; i++) {
yield arguments[i];
}
}
`</pre>
我们希望迭代传入的每个实参
<pre>`var argumentsIterator = argumentsGenerator('a','b','c','d');
// Prints "a,b,c,d"
console.log(
argumentsIterator.next().value,
argumentsIterator.next().value,
argumentsIterator.next().value,
argumentsIterator.next().value
)
`</pre>
我们可以简单的理解
- Generator 其实是生 ...
Generator 101
function * HelloGen(){
yield 100;
yield 400;
}
var gen = HelloGen();
console.log(gen.next()); // {value: 100, done: false}
console.log(gen.next()); // {value: 400, done: false}
console.log(gen.next()); // {value: undefined, done: true}
`</pre>
<pre>`function * HelloGen2() {
var a = yield 100;
var b = yield a + 100;
console.log(b);
}
var gen2 = HelloGen2();
console.log(gen2.next()); // {value: 100, done: false} ...
__Proto__与 Prototype
简而言之,
x.__proto__ === x.constructor.prototype
`</pre>
在 JS 世界里, 万物皆对象
Function 是对象, Function.prototype 也是对象, 因此他们具有对象的共性: **proto**属性
<pre>`Function.__proto__ === Function.prototype; // Function 的构造函数还是 Function
Function.prototype.__proto__ === Object.prototye; Function.prototype 的构造函数是 Object()
`</pre>
而 Object 的构造函数也是 Function, 所以
<pre>`Object.__proto__ === Function.prototype
彻底理解 Thunk 函数
生成器函数生成器(Generator)函数写成:
function* func () {}
`</pre>
其本质也是一个函数, 所以他具备普通函数所具有的所有特性, 除此以外, 他还具有以下特性
执行生成器函数后返回一个迭代器(Iterator)
生成器函数内部可以使用 yield 或 yield*, 函数执行到 yield 的时候会暂停执行, 并返回 yield 后面表达式的值, 通过迭代器的 next() 方法返回一个对象, 该对象由 value 和 done 属性组成, 其中, value 属性值为 yield 后面表达式的值, done 属性表示生成器的执行状态
迭代器 next() 方法的参数是 yield 表达式的值
当 next 指向最后一个 yield 的时候, 再次执行 next() 方法, 返回的对象中 done: true, 而 value 的值为 return 后面的表达式(默认为 undefined)
例一`function test() {
return 'b';
}
function* func() {
...
CSS 动画之硬件加速
触发硬件加速的 CSS 属性
transform
opacity
filter
硬件加速的工作原理浏览器解析得到 DOM 树后, 与 CSS 形成渲染树, 渲染树上有大量的渲染元素, 每一个渲染元素都被分到一个图层中, 每个图层被加载到 GPU 形成渲染文理.
然而, transform 等 CSS 属性不会触发 GPU 的 repaint, 这些使用 transform 属性的图层都会有独立合成器进行处理.
比如某个元素具有 transform 属性, 那么会为他创建一个新的复合图层, 可以被 GPU 直接用来执行 transform 操作.
一般浏览器会在以下几种情况下创建一个独立的复合图层:
3D 或 transform
<video 和<canvas>标签
CSS Filters
元素覆盖时(比如 z-index)
3D 和 2D 的 transform 区别在于, 浏览器在页面渲染前为 3D 动画创建独立的复合图层, 而在运行期间为 2D 动画创建独立复合图层. 2D transform 在动画开始和结束的时候依旧出现了初始化和 ...
生成器 Function*
function* 声明定义一个 generator( 生成器), 返回一个 Generator 对象
语法
function* name([param[, param[, ...param]]]){ statements }
`</pre>
### 描述
Generator 是一种可以从中退出并在之后重新进入的函数, 其环境(绑定的变量)会在每次执行后被保存, 下次进入时可以继续使用
调用一个 Generator 并不马上执行它的主体, 而是返回一个 迭代器对象, 这个迭代器的 next() 方法被调用的时候, Generator 的主体会被执行至下一个 yield 表达式, 该表达式定义了迭代器的返回值
### 示例
<pre>`function* idMaker(){
var index = 0;
while(index < 3){
yield index++;
}
}
var gen = idMaker(); //返回一个迭代器对象
console ...
Webpack 杂
loaders在 React 里会用到 JSX, ES6, js, 统一使用 .js 作为后缀, 便于 babel 配置
npm install --save babel-loader
//
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query:{
presets: ['es2015', 'react']
}
}
`</pre>
CSS, SCSS, ICONFONT 字体文件
<pre>`npm install --save style-loader css-loader sass-loader node-sass url-loader, file-loader
//
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.(png|jpg)$/, ...
JavaScript 提高性能
针对 js 文件的加载位置在 HTML 文件中, <script>标签是可以加载<head>或<body>区域的, 由于 JavaScript 执行和 UI 渲染的是单线程的, 如果加载不顺畅可能导致堵塞, 造成页面空白或卡顿.1. 如果 js 文件没有特殊要求致命需要在页面渲染之前加载, 那么应当将 <script>放在</body>之前2. 如果这些 js 文件有明确需求先于 body 执行, 那么就在第一个 js 或者页面上先放一个载入动画
针对 js 文件的合并更快速的数据访问对于浏览器而言, 一个标识符所处的位置约深, 去读写他的速度也越慢.
如果我们需要在当前函数内多次用到某一个值, 应当用一个局部变量将其保存
DOM 操作的优化DOM 操作远比 JavaScript 的执行更耗性能, 应当尽量减少该操作对性能的消耗.
function innerLi_s(){
var i = 0;
for(;i<20;i++){
document.getElementById(& ...
CommonJS 规范
概述CommonJS 是服务器端模块的规范, Node.js 采用了这个规范
根据 CommonJS 规范, 一个单独的文件就是一个模块
加载模块使用 require 方法, 该方法读取一个文件并执行, 最后返回文件内部的 exports 对象.
// example.js
console.log('evaluating example.js');
var invisible = function(){
console.log('invisible');
}
exports.message = 'h1';
exports.say = function(){
console.log(message)
}
`</pre>
使用 require 方法, 加载 example.js 模块
<pre>`var example = require('./example.js');
`</pre>
这时变量 example 就对应模块中 e ...
Webpack 开发和部署
Thanks to Webpack 傻瓜指南
启用 Source Map在 webpack.config.js 中添加字段
devtool: 'eval-source-map',
`</pre>
这样出错后会采用 sourceMap 直接显示出错位置
### 配置 webpack-dev-server
在 webpack.config.js 中添加字段
<pre>`devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
}
`</pre>
### 使用 preLoaders 和 postLoaders
preLoaders 在 loaders 之前执行, 总体顺序是 preLoader -> loaders -> postLoaders
#### 安装 jshint
<pre>`npm install --save-dev jshint-loader
`&l ...
Webpack简明指南
Thanks to Webpack 傻瓜式指南
安装npm install -g webpack
`</pre>
### 建立项目
<pre>`mkdir webpack
cd webpack
npm init
touch .gitignore
`</pre>
#### 项目结构
<pre>`project
|
|---app
| |
| |---index.js
| |---sub.js
|
|---package.json
|
|---webpack.config.js
`</pre>
<pre>`//sub.js
function generateText(){
var element = document.createElement('h2');
element.innerHTML = "Hello, I'm h2";
return element;
}
module.exports = generate ...
Webpack.config.js
entryThe entry point for the bundle.
If you pass a string: The string is resolved to a module which is loaded upon startup.
If you pass an array: All modules are loaded upon startup. The last one is exported.
entry:['./entry1','./entry2']
`</pre>
If you pass an object: Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array
<pre>`{
entry:{
page1: './pages1',
page2: ['./entry1','./en ...
Webpack
Use webpack in a projectIt’s best to have webpack as a dependency in your project, through this you can choose a local webpack version and will not be forced to use the single global one.Add a package.json configuration file or npm with:
$ npm init
`</pre>
The answers to the question are not so important if you don't want to publish your project to npm.
Install and add `webpack` to the `package.json` with:
<pre>`$ npm install --save-dev webpack
`</pre>
### Create a modu ...
Refs to Components
The DOM returned from render() is virtual, so called Virtual DOM, and we can get any factual input(value) from a virtual object, such as access to value from a component.
The ref returned from ReactDOM.renderReactDOM.render() will return a reference to your component’s backing instance(or null for stateless components)
var myComponent = ReactDOM.render(<MyComponent />, myContainer)
However, that the JSX doesn’t return a component. It’s just a ReactElement: a lightweight representa ...
Component API
setState(nextState(obj)[, callback(function)])设置 nextState 的某个键值, 然后下一次 EventLoop 的时候 this.state 会被更新注意, setState 方法中的回调函数在组件重新渲染后才被调用
replaceState(nextState(obj)[, callback(function)])类似于 setState(), 但是会删除已存在的 state 键, 相当于重新初始化State
forceUpdate([callback(function)])强制渲染组件注意该方法的回调函数也是在组件重新渲染完成后调用
getDOMNode()返回组件所处的 DOM 元素
isMounted()返回一个 Boolean 值, 如果组件加载到了 DOM, isMount() 返回 true.
