AllProjects

+# ECMAScript 6 语法
+
+### 1.let 命令
+
+##### 代码作用域
+ES6新增 **let** 命令，用来声明变量，用法类似于 **var**。
+但其声明的变量，只在let命令所在的代码块有效。
+
+```
+{
+  let a = 10;
+  var b = 1;
+}
+
+a // ReferenceError: a is not defined.
+b // 1
+```
+
+for循环的计数器，就很合适使用let命令。
+
+```
+for (let i = 0; i < arr.length; i++) {}
+console.log(i); //ReferenceError: i is not defined
+```
+
+
+##### 不存在变量提升
+
+let不像var那样会发生“变量提升”现象。所以，变量一定要在声明后使用，否则报错。
+
+```
+console.log(foo); // 输出undefined
+console.log(bar); // 报错ReferenceError
+var foo = 2;
+let bar = 2;
+```
+
+##### 不允许重复声明
+
+let不允许在相同作用域内，重复声明同一个变量。
+
+```
+// 报错
+function () {
+  let a = 10;
+  var a = 1;
+}
+```
+
+
+---
+
+### 2.const命令
+
+const 声明一个只读的常量。一旦声明，常量的值就不能改变。
+
+```
+'use strict';
+const PI = 3.1415;
+PI // 3.1415  
+PI = 3; // TypeError: "PI" is read-only
+```
+
+---
+
+### 3.数组解构赋值
+    
+    [参考链接](http://es6.ruanyifeng.com/#docs/destructuring)
+
+ES6允许以下方式赋值变量
+    `var [a, b, c] = [1, 2, 3];`
+
+##### 嵌套解构
+下面是一些使用嵌套数组进行解构的例子。
+
+```
+let [foo, [[bar], baz]] = [1, [[2], 3]];
+let [ , , third] = ["foo", "bar", "baz"];
+let [x, , y] = [1, 2, 3];
+x // 1
+y // 3
+let [head, ...tail] = [1, 2, 3, 4];
+head // 1
+tail // [2, 3, 4]
+```
+
+##### 解析缺少
+
+如果解构不成功，变量的值就等于undefined。
+
+```
+var [foo] = [];
+var [bar, foo] = [1];
+// 以上两种情况都属于解构不成功，foo的值都会等于undefined。
+```
+
+
+##### 不完全解析
+等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
+
+```
+let [x, y] = [1, 2, 3];
+x // 1
+y // 2
+
+let [a, [b], d] = [1, [2, 3], 4];
+a // 1
+b // 2
+d // 4
+```
+
+---
+
+
+### 4. 对象的解构赋值
+
+    解构不仅可以用于数组，还可以用于对象。
+
+```
+var { foo, bar } = { foo: "aaa", bar: "bbb" };
+foo // "aaa"  ; bar // "bbb"
+```
+
+对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而 **对象的属性没有次序，变量必须与属性同名**，才能取到正确的值。
+
+```
+var { bar, foo } = { foo: "aaa", bar: "bbb" };
+foo // "aaa"
+bar // "bbb"
+```
+
+如果变量名与属性名不一致，必须写成下面这样。
+
+```
+var { foo: baz } = { foo: "aaa", bar: "bbb" };
+baz // "aaa"
+```
+
+这实际上说明， **对象的解构赋值是下面形式的简写**
+对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
+    `var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };`
+
+
+---
+
+### 5. 字符串的解构赋值
+
+字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
+
+```
+const [a, b, c, d, e] = 'hello';
+a // "h"
+b // "e"
+c // "l"
+d // "l"
+e // "o"
+```

+# NPM 使用帮助
+
+### 1.使用npm其它源
+
+    可以使用nrm工具，具体链接参考： 
+       [nrm](https://github.com/Pana/nrm)
+
+```
+    npm install -g nrm
+    nrm use rednpm
+```
+
+
+### 2.npm 安装库到devDependencies和dependencies
+devDependencies是开发时所需要用的库
+dependencies 是开发和运行都需要运行的库
+
+> devDependencies
+
+    `npm i npm_module -D || npm install npm_module --save-dev`
+
+> dependencies
+
+    `npm i npm_module -S || npm install npm_module --save`
+
+
+### 3. 查看npm配置
+
+`$ npm config list -l`
+
+### 4. 设置环境变量。
+
+```
+$ npm set init-author-name 'Your name'
+$ npm set init-author-email 'Your email'
+$ npm set init-author-url 'http://yourdomain.com'
+$ npm set init-license 'MIT'
+```
+
+### 5. 查看已安装模块
+
+> 列出当前项目安装的所有模块及全局模块
+  `npm list | npm list --global`
\ No newline at end of file

+# 前端组件化的一些学习资料
+
+### 前端整体
+
+>[Vue+ES6+Jade+Scss+Webpack+Gulp 编程](https://segmentfault.com/a/1190000005115926)
+
+>[2016年后Web 开发趋势是什么](http://yafeilee.me/blogs/86)
+
+>[AlloyTeam腾讯全端Blog](http://www.alloyteam.com/)
+
+>[前端开发者手册](https://dwqs.gitbooks.io/frontenddevhandbook/content/)
+
+>[CommonJS规范](http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-commonjs/)
+
+>[浅淡Javascript模块化编程](https://segmentfault.com/a/1190000000492678)
+
+---
+
+## ECMAScript6 
+
+>[-- ES6初探](https://github.com/shipfi/es6features)
+
+>[-- ES6相关学习资源](https://segmentfault.com/a/1190000003739409)
+
+>[-- ECMAScript6入门-阮一峰](http://es6.ruanyifeng.com/#docs/intro)
+
+>[-- ECMAScript6入门-木头人](http://www.hubwiz.com/course/5594e91ac086935f4a6fb8ef/)
+
+>[-- ES6 in depth](https://hacks.mozilla.org/category/es6-in-depth/)
+
++
+
+----
+
+### Webpackt篇
+
++ 说明:
+
+>[-- Webpack Doc中文](https://github.com/liunian/webpack-doc/blob/master/SUMMARY.md)
+
+>[-- Webpack入门指南](http://www.cnblogs.com/vajoy/p/4650467.html#!/follow)
+
+>[-- Webpack入门指南2](https://segmentfault.com/a/1190000002551952)
+
+>[-- Webpack怎么用](https://segmentfault.com/a/1190000002552008)
+
+>[-- webpack中文指南](http://zhaoda.net/webpack-handbook/index.html)
+
+>[-- webpack傻瓜式指南****](https://github.com/vikingmute/webpack-for-fools)
+
+>[-- webpack loader](http://guowenfh.github.io/2016/03/24/vue-webpack-02-deploy/)
+
+>[-- webpack 使用](http://fakefish.github.io/react-webpack-cookbook/index.html)
+
+
++ Webpack 套件 (可通过npm安装)
+
+>[-- 一个webpack插件，用于打包css资源文件](https://github.com/webpack/extract-text-webpack-plugin)
+
+>[-- css-loader,style-loader](https://github.com/liunian/webpack-doc/blob/master/tutorials/getting-started/index.md)
+
+```
+css-loader 是处理css文件中的url()等
+style-loader 将css插入到页面的style标签
+less-loader 是将less文件编译成css
+sass-loader 是将sass文件编译成css
+```
+
++ 示例:
+
+>[-- webpack_JS_CSS数据打包及对生产环境html模板的生成](https://github.com/qianjiahao/webpack-babel-react-development-tools)
+
+>[-- webpack Samples](https://github.com/ruanyf/webpack-demos)
+
+>[-- Webpack+React+ES6开发模式入门](http://www.cnblogs.com/skylar/p/React-Webpack-ES6.html)
+
+---
+
+### Vue篇
+
++ 实践
+
+>[-- Vue组件化开放实践](http://gold.xitu.io/entry/55f77eb460b28e6a6f0f4f86)
+
+>[-- Webpack + vue-loader入坑之旅](https://segmentfault.com/a/1190000004690338)
+
+>[-- Vue + webpack 项目实践](http://ju.outofmemory.cn/entry/195573)
+
+
++ 组件篇
+
+> [Vue-Router](https://github.com/vuejs/vue-router)
+> 官方Vue Router
+> [flatiron/director](https://github.com/flatiron/director)
+> a tiny and isomorphic URL router for JavaScript
+> [vuejs/vue-resource](https://github.com/vuejs/vue-resource)
+> 网络请求库
+> [vuejs/vue-validator](https://github.com/vuejs/vue-validator)
+> 表单验证库
+> [vuejs/vue-touch] (https://github.com/vuejs/vue-touch)
+> 事件模拟
+
++ Github示例
+
+>[-- vuejs/vue-webpack-example](https://github.com/vuejs/vue-webpack-example/blob/master/package.json)
+
+
+>[-- Vue官方Examples](https://github.com/vuejs/vue/tree/dev/examples)
+
+>[-- Vuewjs-templates/webpack](https://github.com/vuejs-templates/webpack/tree/dist/template)
+
+>A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. 
+
+>[-- Just Vue](https://github.com/JustClear/just-vue)
+    
+> A quick starter for Vue and Webpack
+
+
+
+---
+
+### Gulp篇
+
+
+---
+
+### Jade篇
+
+>[Jade —— 源于 Node.js 的 HTML 模板引擎](https://segmentfault.com/a/1190000000357534)
+
+>[Jade Document](http://naltatis.github.io/jade-syntax-docs/)
+
+---
+
+### 其它工具篇
+
+>[-- Mobile Web Developer Tool:AlloyLever](http://www.alloyteam.com/2016/05/mobile-web-development-debugging-tools-alloylever-introduced/)
+
+
+
+---
+
+### Javascript 语言篇
+
+>[-- 从作用域链谈闭包](http://www.ido321.com/1641.html)
+
+    闭包是指有权访问另外一个函数作用域中的变量的函数
+
+---
+
+
+### Nodejs篇
+
+>[Nodejs资源汇总](https://www.douban.com/group/topic/35067110/)
+>[Nodejs手册文档](http://nodeapi.ucdok.com/#/api/)
+
+##### QA
+>[nodejs中exports与module.exports的区别](http://www.cnblogs.com/pigtail/archive/2013/01/14/2859555.html)
+
+### NPM
+
+> [npm源](https://github.com/Pana/nrm)
+> 使用nrm工具来切换npm源
+

+# Webpack QA
+
+###  ReferenceError: webpackJsonp is not defined #606 
+
+[Linke](https://github.com/webpack/webpack/issues/606)
+
+### Webpack 使用Bower
+
+[Link](http://webpack.github.io/docs/usage-with-bower.html)
\ No newline at end of file

+# Laravel中的User模型
+
+分析在laravel中的User Model，会发现一些很有意思的事情
+
++ **User模型**
+
+```
+use Illuminate\Auth\Authenticatable;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Auth\Passwords\CanResetPassword;
+use Illuminate\Contracts\Auth\Authenticatable as AuthenticatableContract;
+use Illuminate\Contracts\Auth\CanResetPassword as CanResetPasswordContract;
+
+// 实现了AuthenticatableContract，CanResetPasswordContract
+// 但是在模型类中不实现，只是
+// 通过trait class = (Authenticatable,CanResetPassword)实现。
+
+class User extends Model 
+     implements AuthenticatableContract, CanResetPasswordContract 
+{
+
+    use Authenticatable, CanResetPassword;
+
+    /**
+     * The database table used by the model.
+     *
+     * @var string
+     */
+    protected $table = 'users';
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = ['name', 'email', 'password'];
+
+    /**
+     * The attributes excluded from the model's JSON form.
+     *
+     * @var array
+     */
+    protected $hidden = ['password', 'remember_token'];
+
+}
+```
+
++ **AuthenticatableContract接口定义**
+
+```
+namespace Illuminate\Contracts\Auth;
+
+// 约定，namespace带有Contracts的，表示接口
+
+interface Authenticatable {
+
+    /**
+     * Get the unique identifier for the user.
+     *
+     * @return mixed
+     */
+    public function getAuthIdentifier();
+
+    /**
+     * Get the password for the user.
+     *
+     * @return string
+     */
+    public function getAuthPassword();
+
+    /**
+     * Get the token value for the "remember me" session.
+     *
+     * @return string
+     */
+    public function getRememberToken();
+
+    /**
+     * Set the token value for the "remember me" session.
+     *
+     * @param  string  $value
+     * @return void
+     */
+    public function setRememberToken($value);
+
+    /**
+     * Get the column name for the "remember me" token.
+     *
+     * @return string
+     */
+    public function getRememberTokenName();
+
+}
+```
+
++ **Authenticatable的实现**
+
+```
+namespace Illuminate\Auth;
+
+trait Authenticatable {
+
+    /**
+     * Get the unique identifier for the user.
+     *
+     * @return mixed
+     */
+    public function getAuthIdentifier()
+    {
+        return $this->getKey();
+    }
+
+    /**
+     * Get the password for the user.
+     *
+     * @return string
+     */
+    public function getAuthPassword()
+    {
+        return $this->password;
+    }
+
+    /**
+     * Get the token value for the "remember me" session.
+     *
+     * @return string
+     */
+    public function getRememberToken()
+    {
+        return $this->{$this->getRememberTokenName()};
+    }
+
+    /**
+     * Set the token value for the "remember me" session.
+     *
+     * @param  string  $value
+     * @return void
+     */
+    public function setRememberToken($value)
+    {
+        // 用这样的方式很灵活....
+        $this->{$this->getRememberTokenName()} = $value;
+    }
+
+    /**
+     * Get the column name for the "remember me" token.
+     *
+     * @return string
+     */
+    public function getRememberTokenName()
+    {
+        return 'remember_token';
+    }
+
+}
+```
\ No newline at end of file

+# Laravel & Lumen 中整体配置的说明
+
+### 1. Lumen使用自定义的配置文件
+在laravel当中，默认是存在config文件夹，按照规则，相应的库需要配置文件，都是在config中以独立的一个php config文件存在的。
+而在Lumen当中，是没有config文件夹，配置文件统一放到.env文件中。
+
+- 以下是Laravel中使用的结构文件:
+![Alt text](../imgs/laravel_st1.png)
+
+- 以下是Lumen中使用的文件结构
+![Alt text](../imgs/lumen_st1.png)
+
+如果在Lumen当中需要启用config文件夹，并且按库去设定相应的配置文件。那么就需要以下两个步骤:
+
+1. 在项目根目录中，建立config文件夹
+2. 创建相应的.php配置文件，这些配置文件返回的是一个key=>value组成的数组结构
+3. 在bootstrap/app.php中指定使用相应的配置文件,但是有一个config/database.php配置文件不需要configure指定，就可以默认加载。
+
+
+```
+$app->configure('api');
+$app->configure('jwt');
+$app->configure('auth');
+```
+
+---
+
+### 2. 入口文件、启动文件和配置文件
+[参考链接](https://segmentfault.com/a/1190000002902055)
+
+应用程序的入口文件是:
+    /index.php ==> /public/index.php ==> /bootstrap/app.php
+
+应用程序最基本的启动是:
+
+- public/index.php
+    `$app = require(bootstrap/app.php)`
+- bootstrap/app.php
+```
+Dotenv\Dotenv(__DIR__.'/../'))->load(); // load env
+$app = new Laravel/Lumen/Application();  
+// 如果是Laravel，则是 new Illuminate/Foundation/Application
+
+// Register Singleton Container Bindings
+$app->singleton(...);
+
+// Register Middleware
+$app->middleware(...);
+$app->routeMiddleware(...);
+
+// Register Service Provider
+$app->register(...);
+
+// 加载路由
+require app/Http/routes.php
+```
+- router定义
+```
+$app->get('/', function () use ($app) {
+    return $app->version();
+});
+```
+- 程序运行(public/index.php)
+`$app->run();`
+
+
+Lumen的配置文件是根目录下的.env文件，.env文件的载入是bootstrap/app.php中的一行代码：
+`new Dotenv\Dotenv(__DIR__.'/../'))->load()`
+
+---
+
+### 3. Facades
+
+>Facades 提供一个静态接口给在应用程序的服务容器中可以取用的类
+
+在配置文件中，有一个`$app->withFacades();`是表示启用Facades.
+启用和不启用的区域在于：
+
+- 启用前:
+```
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\DB;
+
+Cache::put('key', 'value', $minutes);
+DB::getQueryLog();
+```
+- 启用后
+```
+use Cache;
+use DB;
+Cache::put('key', 'value', $minutes);
+DB::getQueryLog();
+```
+
+通过查看withFacades，可以看出玄机：
+```
+public function withFacades()
+{
+    Facade::setFacadeApplication($this);
+
+    if (! static::$aliasesRegistered) {
+        static::$aliasesRegistered = true;
+
+        class_alias('Illuminate\Support\Facades\App', 'App');
+        class_alias('Illuminate\Support\Facades\Auth', 'Auth');
+        class_alias('Illuminate\Support\Facades\Bus', 'Bus');
+        class_alias('Illuminate\Support\Facades\DB', 'DB');
+        class_alias('Illuminate\Support\Facades\Cache', 'Cache');
+        class_alias('Illuminate\Support\Facades\Cookie', 'Cookie');
+        class_alias('Illuminate\Support\Facades\Crypt', 'Crypt');
+        class_alias('Illuminate\Support\Facades\Event', 'Event');
+        class_alias('Illuminate\Support\Facades\Hash', 'Hash');
+        class_alias('Illuminate\Support\Facades\Log', 'Log');
+        class_alias('Illuminate\Support\Facades\Mail', 'Mail');
+        class_alias('Illuminate\Support\Facades\Queue', 'Queue');
+        class_alias('Illuminate\Support\Facades\Request', 'Request');
+        class_alias('Illuminate\Support\Facades\Schema', 'Schema');
+        class_alias('Illuminate\Support\Facades\Session', 'Session');
+        class_alias('Illuminate\Support\Facades\Storage', 'Storage');
+        class_alias('Illuminate\Support\Facades\Validator', 'Validator');
+    }
+}
+```
+
+---
+
+### 4. Session
+Session 默认未开启。
+开启方式：去掉 bootstrap/app.php 中 $app->middleware(); 的 StartSession中间件的注释。
+
+在 .env 文件中，Session 的默认驱动是：memcached。
+目前支持的驱动有：file、cookie、database、memcached、redis、array
+
+[Session参考](http://lumen.laravel-china.org/docs/session#session-drivers)
+
+
+### 5. Laravel的一些package
+[参考](https://segmentfault.com/a/1190000002889864)
+

+# Laravel 
\ No newline at end of file

+# 一些Laravel中的代码说明
+
+### 1.在Controller中函数参数使用Request
+首先需要引用Illuminate\Http\Request命名空间，才能使用$request变量
+
+```
+use Illuminate\Http\Request
+use dump;
+class ProjectController extends Controller
+{
+    public function index(Request $request) {
+        dump($request);
+    }
+}
+```
+
+也可以在bootstrap/app.php中使用class_alias将Illuminate\Http\Request定义为Request.
+
+```
+// in bootstrap/app.php 
+class_alias('Illuminate\Http\Request','Request');
+
+// in controller.php
+use Request;
+public function index(Request $request) {...}
+```
+
+---
+
+### 2.Request操作
+
+>[参考链接](http://laravel-china.org/docs/5.1/requests)
+
++ 验证
+
+```
+ $this->validate($request, [
+                'email' => 'required|email|max:255',
+                'password' => 'required',
+        ]);
+```
+
++ 获得请求字段
+
+```
+- 方式1:
+        $order_state = Request::input('order_state');
+        $evaluation_state = Request::input('evaluation_state');
+        $orderId = $request->input('order_id',1);
+
+- 方式2:
+        $request->only('email', 'password');
+```
+
+---
+
+### 3.Response操作
+
+Response默认使用的类为 `Illuminate\Http\Response`
+当然，也可以实现一个自定义的Response,作为ServiceProvider,注册到容器中。
+具体自定义Response,可以查看Lumen-Api这本书。
+
+>[Response文档](http://laravel-china.org/docs/5.1/responses)
+>[Response详细API](http://laravel-china.org/api/master/Illuminate/Http/Response.html)
+
+
++ **基本响应**
+
+```
+return (new Response($content, $status))
+                  ->header('Content-Type', $value);
+
+return response($content, $status)
+                  ->header('Content-Type', $value);
+```
+
++ **标头定义响应**
+
+```
+return response($content)
+            ->header('Content-Type', $type)
+            ->header('X-Header-One', 'Header Value')
+            ->header('X-Header-Two', 'Header Value');
+```
+
++ **附加Cookies**
+
+```
+return response($content)->header('Content-Type', $type)
+                 ->withCookie('name', 'value');
+
+- Cookie的可定义属性
+->withCookie($name, $value, $minutes, $path, $domain, $secure, $httpOnly)
+```
+
++ **视图响应**
+
+```
+return response()->view('hello', $data)->header('Content-Type', $type);
+```
+
+
++ **JSON响应**
+
+```
+return response()->json(['name' => 'Abigail', 'state' => 'CA']);
+
+- JSONP 响应
+return response()->json(['name' => 'Abigail', 'state' => 'CA'])
+                 ->setCallback($request->input('callback'));
+```
+
++ **文件下载**
+
+```
+return response()->download($pathToFile);
+return response()->download($pathToFile, $name, $headers);
+```
+
++ **重定向**
+
+```
+return redirect('home/dashboard');
+// 重定向到某个位置
+return back()->withInput();
+// 重定向至命名路由
+return redirect()->route('login');
+// 重定向至路由，路由带有参数
+return redirect()->route('profile', [1]);
+return redirect()->route('profile', [$user]);
+// 重定向至控制器行为
+return redirect()->action('HomeController@index');
+return redirect()->action('UserController@profile', [1]);
+```
+
+
+### 4.注册中间件(Middleware)
+中间件的注册，在laravel和Lumen中的方式是不一样的。
+
++ 在Laravel中，通过app/Http/Kernal.php进行注册
+
+```
+protected $middleware = [
+        'Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode',
+        'Illuminate\Cookie\Middleware\EncryptCookies',
+        'Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse',
+        'Illuminate\Session\Middleware\StartSession',
+        'Illuminate\View\Middleware\ShareErrorsFromSession',
+        'App\Http\Middleware\VerifyCsrfToken',
+    ];
+protected $routeMiddleware = [
+        'auth' => 'App\Http\Middleware\Authenticate',
+        'auth.basic' => 'Illuminate\Auth\Middleware\AuthenticateWithBasicAuth',
+        'guest' => 'App\Http\Middleware\RedirectIfAuthenticated',
+    ];
+```
+
+
++ 而在Lumen中，则是通过bootstrap/app.php注册
+
+```
+$app->middleware([
+    App\Http\Middleware\ExampleMiddleware::class
+ ]);
+
+ $app->routeMiddleware([
+     'auth' => App\Http\Middleware\Authenticate::class,
+     'jwt.auth'    => Tymon\JWTAuth\Middleware\GetUserFromToken::class,
+     'jwt.refresh' => Tymon\JWTAuth\Middleware\RefreshToken::class,
+ ]);
+```
+
+---
+
+### 5. 服务提供者和服务容器
+应用程序通过 bootstrap/app.php 文件中所生成的 Laravel 应用程序实例。
+通过调用以下代码，创建应用程序Application的实例app,app中创建了服务容器(loadedProviders).
+
+```
+-- in bootstrap/app.php
+$app = new Laravel\Lumen\Application()
+
+-- in Application.php
+protected $serviceProviders = array();
+protected $loadedProviders = array();
+protected $deferredServices = array();
+...
+$this->registerBaseBindings();
+$this->registerBaseServiceProviders();
+$this->registerCoreContainerAliases();
+...
+```
+
+### 6.服务的注册(ServiceProvider)
+ServiceProvider的注册，在Laravel和Lumen中情况不一样。
+
++ Laravel
+
+> Laravel中的服务提供是，都在config/app.php配置文件的providers数组
+
+```
+'providers' => [
+
+        /*
+         * Laravel Framework Service Providers...
+         */
+        'Illuminate\Foundation\Providers\ArtisanServiceProvider',
+        'Illuminate\Auth\AuthServiceProvider',
+        'Illuminate\Bus\BusServiceProvider',
+        'Illuminate\Cache\CacheServiceProvider',
+        'Illuminate\Foundation\Providers\ConsoleSupportServiceProvider',
+        'Illuminate\Routing\ControllerServiceProvider',
+        'App\Providers\AppServiceProvider',
+        'App\Providers\BusServiceProvider',
+        'App\Providers\ConfigServiceProvider',
+        ...
+];
+```
+
++ Luemn
+
+> Lumen中直接使用register进行注册
+
+```
+$app->register(Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class);
+// Dingo API Register
+$app->register(Dingo\Api\Provider\LumenServiceProvider::class);
+// $app->register(App\Providers\AuthServiceProvider::class);
+$app->register(App\Providers\EventServiceProvider::class);
+```
+
+

+# 一些Laravel站点
+
+帮助参考学习用:
+
++ [基本文档](http://laravel-china.org/)
++ [Laravel不权威导航](https://segmentfault.com/a/1190000004086565)
++ [Laravel学院](http://laravelacademy.org/)
++ [Laravel函数和命令](http://cheats.jesse-obrien.ca/)
\ No newline at end of file

+# Introduction
+
+<div style="color:#333">本知识库为 <strong>青鸽攻城狮</strong> 在项目中的点滴技术分享、工作积累、学习成果合集！</div>
+
+<p></p>
+
+>众奇开放文档知识库
+> **## 开放.分享.学习 ##**
+>祝学习愉快 !!!
+
+---
+
+**众奇信息技术有限公司 &copy; Qingger Team** 
\ No newline at end of file

+# Summary
+
+- [README](.\README.md)
+- Thinkphp
+  - Controller
+    - [evshop_controller](Thinkphp\Controller\evshop_controller.md)
+  - DB
+    - [db_sqls](Thinkphp\DB\db_sqls.md)
+  - Others
+    - [functions](Thinkphp\Others\functions.md)
+    - [UsefulCodes](Thinkphp\Others\UsefulCodes.md)
+  - Structure
+    - [evshop_structure](Thinkphp\Structure\evshop_structure.md)
+  - View
+    - [evshop_view](Thinkphp\View\evshop_view.md)
+  - Javascript
+    - [evshop_dialog](Thinkphp\Javascript\evshop_dialog.md)
+    - [evshop_js](Thinkphp\Javascript\evshop_js.md)

+# Summary
+
+- [简介](.\README.md)
+- Thinkphp
+  - Structure
+    - [EVShop框架结构图](Thinkphp\Structure\evshop_structure.md)
+  - Controller
+    - [EVShop之Controller篇](Thinkphp\Controller\evshop_controller.md)
+  - View
+    - [EVShop之View篇](Thinkphp\View\evshop_view.md)
+  - Javascript
+    - [EVShop之Dialog篇](Thinkphp\Javascript\evshop_dialog.md)
+    - [EVShop之Javascript篇](Thinkphp\Javascript\evshop_js.md)
+  - DB
+    - [Thinkphp中SQL的写法](Thinkphp\DB\db_sqls.md)
+  - Others
+    - [Thinkphp中常用功能](Thinkphp\Others\functions.md)
+    - [EVShop中备用代码片段](Thinkphp\Others\UsefulCodes.md)
+- Laravel
+  - 其它
+    - [artisan命令行](Laravel\Others\artisan.md)
+    - [laraval学习站点](Laravel\Others\laravel_sites.md)
+  - 配置
+    - [整体配置说明](Laravel\Configs\configs.md)
+- Javascript
+  - 学习
+    - [前端各工具集学习链接](Javascript\Learn\webfront.md)
+    - [NPM使用](Javascript\Learn\npm_cmd.md)
+    - [ES6学习](Javascript\Learn\ES6.md)
\ No newline at end of file

+# EVShop编程规则之Controller篇
+
+### 1. Controller中成功和错误的处理
+不涉及对话框处理，只在Controller页面跳转的情况下，针对错误处理和成功处理规则如下:
+
+1. 错误和异常情况下,使用 `$this->error(message);` 
+2. 成功的情况下，使用 `$this->success(message);`
+
+而具体error,success函数调用后所显示的画面的样式，可以在conf/config.php中进行定义
+```
+//默认错误跳转对应的模板文件(View/Public/error.html)
+'TMPL_ACTION_ERROR' => 'Public:error',
+//默认成功跳转对应的模板文件' (View/Public/success.html)
+'TMPL_ACTION_SUCCESS' => 'Public:success',
+```
+
+
+---
+
+
+### 2. Controller中成功或者失败返回JSON数据格式
+Controller返回JSON数据，一般用于前端JS异步调用Controller方法的场合。
+返回JSON,为了后期扩展，统一使用以下函数生成json返回
+
+1. 成功的场合:
+
+        json_return_success('successMessage');
+        // will return { 'errCode':0, 'info':'successMessage'}
+
+2. 失败的场合:
+
+        json_return_error('errorMessage');
+        // will return {'errCode':1, 'info':'errorMessage'}
+
+3. 需要自定义errorCode的场合:
+
+        json_return_err_code(4001,'errorMessage');
+        // will return {'errCode':4001, 'info':'errorMessage'}
+
+4. 需要自定义多个数据字段的场合:
+
+        json_return_customer([
+            'errCode'=>4002,
+            'Message'=>'Customer Message',
+            'OtherInfo'=>'Other Infomation'
+        ]);
+
+5. 对于微页面(weipage)，有其自定义的JSON定义，在微页面编辑中，涉及到的JSON返回一般使用:
+
+        json_return_for_weipage($err_code,$err_msg='',$err_dom='');
+
+
+---
+
+### 3. 页面中分页显示的设置
+设置数据的分页需要以下步骤:
+
++ 在Controller中导入以下命名空间
+`use Library\MyPage;`
++ 在对应的Controller方法中，调用MyPage类
+```php
+public function album_pic_list() {  
+    $where_condition = Array('aclass_id'=>$_GET['id'],'app_id'=>$this->app_id);   // 查询条件
+    $pic_count = M('album_pic')->where($where_condition)->count();  // 获得显示的总数目
+    $pic_page = new MyPage($pic_count,6);       // 创建MyPage类，参数1表示显示的总数，参数2表示一页中显示的数目   
+    $pic_list = M('album_pic')->where($where_condition)     
+        ->order('create_timedesc')  
+        ->limit($pic_page->firstRow.','.$pic_page->listRows)
+        ->select();     // 查询时注意加入limit进行限定
+    $this->assign('pic_list',$pic_list);// 向页面赋值列表
+    $pagebar = $pic_page->show();
+    $this->assign('show_page',$pagebar); // 向页面赋值pagebar元素
+    $this->display('gp02_goods_album_pic_list');  // 视图显示
+}
+```
++ 在视图中，通过以下代码显示Pager导航
+`<div class="pagination"><?php echo $show_page; ?></div>`
+
+---
+

+# Thinkphp中复杂SQL的写法
+
+### 1. SQL 多表联接的写法：
+```
+$spc_common_default = D("spc_common_default");
+$filter['S.spc_common_id'] = array('eq',71);
+$model_list  = $spc_common_default->table('__SPC_COMMON_DEFAULT__ S')
+    ->join('LEFT JOIN __SPC_PGROUP_DEFAULT__ U ON S.spc_common_id = U.spc_common_id')
+    ->field('S.*')
+    ->where($map)
+    ->select();
+```
+以上代码相当于以下SQL语句：
+```
+SELECT S.* FROM ev_spc_common_default as S
+LEFT JOIN ev_spc_group_default as U
+ON S.spc_common_id=U.spc_common_id
+WHERE s.spc_common_id=71
+```
+
+### 2. SQL Group 写法:
+```
+$model_list = $this->table('__ALBUM_CLASS__ A')->join('LEFT JOIN __ALBUM_PIC__ B ON A.aclass_id=B.aclass_id')
+    ->field('A.aclass_id,A.app_id,A.aclass_name,A.aclass_des,A.aclass_conver,A.aclass_dic,A.is_default,A.create_time,count(B.aclass_id) as ClassCount')
+    ->where($condition)
+    ->group('A.aclass_id')
+    ->order('A.create_time')
+    ->select();
+```
+
+
+### 3. 统计查询(count,sum...)
+```
+$model->table('__ALBUM_CLASS__')->where($condition)->count();
+$model->table('__ALBUM_CLASS__')->count('columnName');
+$sumScore = $User->sum('score');
+```
\ No newline at end of file

+# EVShop编程规则之Dialog篇
+
+> 在Evshop中，对话框是使用artDialog控件，关于artDialog的使用方式，可以参考:
+> [artDialog文档](http://aui.github.io/artDialog/doc/index.html)
+> 我们在artDialog基础上，做了一些基础的封装，封装参考代码:
+>  `/data/application/common/myDialog.js`
+> 对话框的基本使用示例，参考:
+>  `/data/application/shop/sample_list.js`
+
+### 对话框(myDialog)的使用
+
++ 要使用对话框，需要在前端js中引入: 
+`var myDialog = require("myDialog");`
+
++ 使用基本的 **Success/Error/Info** 对话框:
+```
+myDialog.showSucc("Success");       
+myDialog.showError("Failed");       
+myDialog.showInfo("title","你好啊");
+```
+
++ 对话框中显示本页面中元素内的内容:
+```
+$("#opelem").bind("click",function(){
+    var dialog= myDialog.showMoreDialog(this,{
+        width:400,
+        height:$("#dlg_element").height+200,
+        title:$(this).attr("dialog_title"),
+        content:$("#dlg_element").html(),
+    },true);
+});
+```
+
++ 显示自定义confirm对话框
+```
+myDialog.showConfirm("提示信息","删除相册？注意：相册内的图片将转移到默认相册",function(){
+    $(this).ajaxSubmit({
+        data: {"id":album_id},
+        dataType:'json',
+        type:'get',
+        url:process_uri,
+        success:function(responseText,stsText,xhr){
+            commonFunc.showAjaxProcessInfo(responseText);
+        },
+        error:function(error) {
+            myDialog.showError(error);
+        }
+    });
+    //alert('xxx');
+});
+```
+
+
++ 对话框中显示指定URL的内容  
+```
+    $("#opelurl2").bind('click',function(){
+        // support param:  width,
+       var dialog = myDialog.showFormDialog(this,{
+            width:500,
+            title:"Open Dialog",
+            url:$(this).attr("dialog_url"),
+            okValue : "确定", // 确定按钮文件，如果不设定，则默认为"确定"
+            extraSubmitData : {"param1":"1","param2":"2"},
+            success: function(dialogObj,responseText) {
+                console.log(responseText); // responsetext后端返回的JSON对象
+                myDialog.showSucc("Success");
+                //dialogObj.close().remove();
+            },
+            error: function(dialogObj,errorText) {
+                console.log(errorText);
+                myDialog.showError(errorText);
+                //dialogObj.close().remove();
+            }
+       });
+    });
+```
+
+    > 注：一般来说，指定URL内容包含的是FORM表单，表单提交的Button不需要在页面中定义，
+    > 而是使用对话框提供的OK/Cancel按钮 
+
+
++ 对话框URL方式打开后，支持对话框内元素事件的监听
+在myDialog.showFormDialog函数内，
+可以使用eventListeners来监听对话框内元素的事件监听。方式如下：
+```
+$("#opelurl2").bind('click',function(){
+    // support param:  width,
+   var dialog = myDialog.showFormDialog(this,{
+        width:500,
+        title:"Open Dialog",
+        url:$(this).attr("dialog_url"),
+        eventListeners : [{
+           selector:'input[type="text"]',  // Dialog中事件绑定的选择器
+           eventName:'change',              // Dialog中需要监测的事件
+           eventFunction : function($sender,$dlgDocument) {  // 事件产生后所回调的函数
+               // $sender是触发此事件的jquery对象,$document是页面中document的jquery对象
+               console.log($sender.attr("name"));
+               //console.log($dlgDocument);
+           }
+        }],
+        okValue : "确定", // 确定按钮文件，如果不设定，则默认为"确定"
+        ...
+}
+```

+# EVShop编程规则之Javascript篇
+
+### 1. HTML中添加sevent/saction/sparams 对元素进行事件的绑定
+
+    > 事件绑定是通过jquery的on方法，绑定在document元素上，基于事件的冒泡实现的。
+
++ 在视图html中，可以通过以下方式进行事件的绑定动作：
+
+```
+<a href="JavaScript:void(0);" class="ncsc-btn-mini" sevent="click" saction="picAction" stype="multiDel" sparams="1,2" ></a>
+<a href="JavaScript:void(1);" class="ncsc-btn-mini" id="img_move" sevent="click" saction="picAction" stype="multiMov" sparms="3,4"></a>
+```
+
++ 在此视图对应的js文件中，只需要定义以下事件：
+```
+PageModel.prototype.picAction = function(sender,param1,param2) {
+     if($(sender).attr("stype")==="multiDel") {
+        //具体事件的动作
+     }
+}
+```
+
+在绑定的过程中，支持的事件行为(sevent)有：
+
+        "click", "change", "blur", "dbclick", "focus", "hover", "resize"
+
+---
+
+### 2. JSON.Parse函数的参数存在特殊字符的处理
+
+> JSON.Parse()函数，使用的参数是一个字符串，
+> 该字符串中存在"\"时，函数转换就会出错，出错提示为：
+>   `JSON.parse: expected ',' or '}' after property value in object`
+> 所以，需要将字符串进行转换，为"\"符号进行转义
+
+__具体实现__:
+
+1. 在PHP中，针对字符串，使用addslashes函数:
+    `$this->assign('customField', addslashes(json_encode($customField)));`
+2. 在JS中，使用replace将"\"转换成"\\"格式 
+
+---
+
+### 3. 使用jquery-form 进行异步提交
+
+> jquery-form是一种js的异步提交，提交时，除了把指定的form数据进行提交，
+> 还支持额外自定义数据的提交
+
+实现方式:
+```
+var jquery_form = require("jquery-form");
+$(selector).ajaxSubmit({
+    data:[extraSubmitdata]
+    dataType:'json',
+    type:'post',
+    timeout:5000,
+    success:function(responseText,stsText,xhr,element) {
+
+    },
+    error:function(error) {
+
+    }
+});
+```
+

+# EVShop中备用代码片段
+
+> 此文件记录了Evshop实现过程中的一些经常被使用到的代码。
+> 记录于此，需要时以备查询。
+

+# Thinkphp中一些常用功能
+
+### 1. 加入验证码功能
+Think\Verify类可以支持验证码的生成和验证功能。
+
+> 参考：[Thinkphp验证码](http://document.thinkphp.cn/manual_3_2.html#verify)
+
+下面是最简单的方式生成验证码：
+```
+$Verify = new \Think\Verify();
+$Verify->entry();
+```
+
+---
+
+### 2. 文件上传(后台)
+```
+use Library\UploadFile; 
+if (!empty($_FILES['group_logo']['name'])){ 
+    $upload = new UploadFile();
+    $upload->set('default_dir',ATTACH_COMMON);
+    $upload->set('file_name','category-pic-'.$newClassId.'.jpg');
+    $upload->set('ifremove',false);
+    $upload->set('fprefix','fprefix');
+    $upload->set('ext','ext');
+    if ($result){
+            $this->success("上传图片成功");
+        }else {
+            $this->error("上传图片失败");
+        }
+}
+```
+
+---
+
+### 3. 图像处理
+Todo : write here
+
+---
+
+### 4. IP获取
+内置了get_client_ip方法用于获取客户端的IP地址
+
++ 获取IP示例：
+`$ip = get_client_ip();`
++ IP定位示例:
+```
+$Ip = new \Org\Net\IpLocation('UTFWry.dat'); // 实例化类 参数表示IP地址库文件
+$area = $Ip->getlocation('203.34.5.66'); // 获取某个IP地址所在的位置
+```
+
+---
+
+### 5. 字符转换成二维码
+
+生成带有LOGO的二维码，可以参考:
+
+> 参考： [带有LOGO二维码]( http://www.cnblogs.com/txw1958/p/phpqrcode.html)
+
+二维码转换实现:
+```
+use Library\QRcode;
+include_once  '/app/Library/phpqrcode.php';
+
+$test="http://www.evate-soft.com/";
+$filename = "baidu.png";
+$level='L';
+$size = '6';
+$margin=4;
+QRcode::png($test, false, $level, $size, $margin);
+```
\ No newline at end of file

+# EVShop程序框架整体结构图
+
+> 待完成
\ No newline at end of file

+# EVShop编程规则之View篇
+
+### 1. 系统变量和配置变量
+系统变量的输出通常以$Think 打头,比如:
+```
+1. {$Think.server.script_name} // 输出$_SERVER['SCRIPT_NAME']变量
+2. {$Think.session.user_id} // 输出$_SESSION['user_id']变量
+3. {$Think.get.pageNumber} // 输出$_GET['pageNumber']变量
+4. {$Think.cookie.name}  // 输出$_COOKIE['name']变量
+5. {$Think.const.MODULE_NAME}  输出常量
+6. {$Think.config.url_model}  // 配置参数（在config.php)中设定
+7. {$Think.MODULE_NAME}  // 模块名称
+```
+
+---
+
+
+### 2. View中将php变量值传递到前端JS文件
+需要两个步骤:
+
+1. View中定义pageParam字面量对象
+```
+<script>
+    var pageParam = {
+        s:"page1",
+    };
+</script>
+```
+2. 在js的initialize()函数中直接使用options.pageParam属性
+```
+var PageModel = function (options) {
+    this.pageName = options.page;
+    this.module = options.module;
+    this.pageParam = options.pageParam;
+    this.languageData = new LanguageData("member_group_index");
+}
+```
+
+如果需要将变量转换成JSON传递到前端js中:
+```
+<script>
+    var pageParam = {
+        language: <?php echo json_encode($lang) ?>,
+    };
+</script>
+```
\ No newline at end of file

+# Summary
+
+- [README](.\README.md)
+- Thinkphp
+  - Controller
+    - [evshop_controller](Thinkphp\Controller\evshop_controller.md)
+  - DB
+    - [db_sqls](Thinkphp\DB\db_sqls.md)
+  - Others
+    - [functions](Thinkphp\Others\functions.md)
+    - [UsefulCodes](Thinkphp\Others\UsefulCodes.md)
+  - Structure
+    - [evshop_structure](Thinkphp\Structure\evshop_structure.md)
+  - View
+    - [evshop_view](Thinkphp\View\evshop_view.md)
+  - Javascript
+    - [evshop_dialog](Thinkphp\Javascript\evshop_dialog.md)
+    - [evshop_js](Thinkphp\Javascript\evshop_js.md)

+require(["gitbook", "lodash", "jQuery"], function(gitbook, _, $) {
+    var fontState;
+
+    var THEMES = {
+        "white": 0,
+        "sepia": 1,
+        "night": 2
+    };
+
+    var FAMILY = {
+        "serif": 0,
+        "sans": 1
+    };
+
+    // Save current font settings
+    function saveFontSettings() {
+        gitbook.storage.set("fontState", fontState);
+        update();
+    }
+
+    // Increase font size
+    function enlargeFontSize(e) {
+        e.preventDefault();
+        if (fontState.size >= 4) return;
+
+        fontState.size++;
+        saveFontSettings();
+    };
+
+    // Decrease font size
+    function reduceFontSize(e) {
+        e.preventDefault();
+        if (fontState.size <= 0) return;
+
+        fontState.size--;
+        saveFontSettings();
+    };
+
+    // Change font family
+    function changeFontFamily(index, e) {
+        e.preventDefault();
+
+        fontState.family = index;
+        saveFontSettings();
+    };
+
+    // Change type of color
+    function changeColorTheme(index, e) {
+        e.preventDefault();
+
+        var $book = $(".book");
+
+        if (fontState.theme !== 0)
+            $book.removeClass("color-theme-"+fontState.theme);
+
+        fontState.theme = index;
+        if (fontState.theme !== 0)
+            $book.addClass("color-theme-"+fontState.theme);
+
+        saveFontSettings();
+    };
+
+    function update() {
+        var $book = gitbook.state.$book;
+
+        $(".font-settings .font-family-list li").removeClass("active");
+        $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")").addClass("active");
+
+        $book[0].className = $book[0].className.replace(/\bfont-\S+/g, '');
+        $book.addClass("font-size-"+fontState.size);
+        $book.addClass("font-family-"+fontState.family);
+
+        if(fontState.theme !== 0) {
+            $book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, '');
+            $book.addClass("color-theme-"+fontState.theme);
+        }
+    };
+
+    function init(config) {
+        var $bookBody, $book;
+
+        //Find DOM elements.
+        $book = gitbook.state.$book;
+        $bookBody = $book.find(".book-body");
+
+        // Instantiate font state object
+        fontState = gitbook.storage.get("fontState", {
+            size: config.size || 2,
+            family: FAMILY[config.family || "sans"],
+            theme: THEMES[config.theme || "white"]
+        });
+
+        update();
+    };
+
+
+    gitbook.events.bind("start", function(e, config) {
+        var opts = config.fontsettings;
+
+        // Create buttons in toolbar
+        gitbook.toolbar.createButton({
+            icon: 'fa fa-font',
+            label: 'Font Settings',
+            className: 'font-settings',
+            dropdown: [
+                [
+                    {
+                        text: 'A',
+                        className: 'font-reduce',
+                        onClick: reduceFontSize
+                    },
+                    {
+                        text: 'A',
+                        className: 'font-enlarge',
+                        onClick: enlargeFontSize
+                    }
+                ],
+                [
+                    {
+                        text: 'Serif',
+                        onClick: _.partial(changeFontFamily, 0)
+                    },
+                    {
+                        text: 'Sans',
+                        onClick: _.partial(changeFontFamily, 1)
+                    }
+                ],
+                [
+                    {
+                        text: 'White',
+                        onClick: _.partial(changeColorTheme, 0)
+                    },
+                    {
+                        text: 'Sepia',
+                        onClick: _.partial(changeColorTheme, 1)
+                    },
+                    {
+                        text: 'Night',
+                        onClick: _.partial(changeColorTheme, 2)
+                    }
+                ]
+            ]
+        });
+
+
+        // Init current settings
+        init(opts);
+    });
+});
+
+

+/*
+ * Theme 1
+ */
+.color-theme-1 .dropdown-menu {
+  background-color: #111111;
+  border-color: #7e888b;
+}
+.color-theme-1 .dropdown-menu .dropdown-caret .caret-inner {
+  border-bottom: 9px solid #111111;
+}
+.color-theme-1 .dropdown-menu .buttons {
+  border-color: #7e888b;
+}
+.color-theme-1 .dropdown-menu .button {
+  color: #afa790;
+}
+.color-theme-1 .dropdown-menu .button:hover {
+  color: #73553c;
+}
+/*
+ * Theme 2
+ */
+.color-theme-2 .dropdown-menu {
+  background-color: #2d3143;
+  border-color: #272a3a;
+}
+.color-theme-2 .dropdown-menu .dropdown-caret .caret-inner {
+  border-bottom: 9px solid #2d3143;
+}
+.color-theme-2 .dropdown-menu .buttons {
+  border-color: #272a3a;
+}
+.color-theme-2 .dropdown-menu .button {
+  color: #62677f;
+}
+.color-theme-2 .dropdown-menu .button:hover {
+  color: #f4f4f5;
+}
+.book .book-header .font-settings .font-enlarge {
+  line-height: 30px;
+  font-size: 1.4em;
+}
+.book .book-header .font-settings .font-reduce {
+  line-height: 30px;
+  font-size: 1em;
+}
+.book.color-theme-1 .book-body {
+  color: #704214;
+  background: #f3eacb;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section {
+  background: #f3eacb;
+}
+.book.color-theme-2 .book-body {
+  color: #bdcadb;
+  background: #1c1f2b;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section {
+  background: #1c1f2b;
+}
+.book.font-size-0 .book-body .page-inner section {
+  font-size: 1.2rem;
+}
+.book.font-size-1 .book-body .page-inner section {
+  font-size: 1.4rem;
+}
+.book.font-size-2 .book-body .page-inner section {
+  font-size: 1.6rem;
+}
+.book.font-size-3 .book-body .page-inner section {
+  font-size: 2.2rem;
+}
+.book.font-size-4 .book-body .page-inner section {
+  font-size: 4rem;
+}
+.book.font-family-0 {
+  font-family: Georgia, serif;
+}
+.book.font-family-1 {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal {
+  color: #704214;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal a {
+  color: inherit;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h1,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h2,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h3,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h4,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h5,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h6 {
+  color: inherit;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h1,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h2 {
+  border-color: inherit;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h6 {
+  color: inherit;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal hr {
+  background-color: inherit;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal blockquote {
+  border-color: inherit;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal pre,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal code {
+  background: #fdf6e3;
+  color: #657b83;
+  border-color: #f8df9c;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal .highlight {
+  background-color: inherit;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table th,
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table td {
+  border-color: #f5d06c;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table tr {
+  color: inherit;
+  background-color: #fdf6e3;
+  border-color: #444444;
+}
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) {
+  background-color: #fbeecb;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal {
+  color: #bdcadb;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal a {
+  color: #3eb1d0;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h1,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h2,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h3,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h4,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h5,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h6 {
+  color: #fffffa;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h1,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h2 {
+  border-color: #373b4e;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h6 {
+  color: #373b4e;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal hr {
+  background-color: #373b4e;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal blockquote {
+  border-color: #373b4e;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal pre,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal code {
+  color: #9dbed8;
+  background: #2d3143;
+  border-color: #2d3143;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal .highlight {
+  background-color: #282a39;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table th,
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table td {
+  border-color: #3b3f54;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table tr {
+  color: #b6c2d2;
+  background-color: #2d3143;
+  border-color: #3b3f54;
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) {
+  background-color: #35394b;
+}
+.book.color-theme-1 .book-header {
+  color: #afa790;
+  background: transparent;
+}
+.book.color-theme-1 .book-header .btn {
+  color: #afa790;
+}
+.book.color-theme-1 .book-header .btn:hover {
+  color: #73553c;
+  background: none;
+}
+.book.color-theme-1 .book-header h1 {
+  color: #704214;
+}
+.book.color-theme-2 .book-header {
+  color: #7e888b;
+  background: transparent;
+}
+.book.color-theme-2 .book-header .btn {
+  color: #3b3f54;
+}
+.book.color-theme-2 .book-header .btn:hover {
+  color: #fffff5;
+  background: none;
+}
+.book.color-theme-2 .book-header h1 {
+  color: #bdcadb;
+}
+.book.color-theme-1 .book-body .navigation {
+  color: #afa790;
+}
+.book.color-theme-1 .book-body .navigation:hover {
+  color: #73553c;
+}
+.book.color-theme-2 .book-body .navigation {
+  color: #383f52;
+}
+.book.color-theme-2 .book-body .navigation:hover {
+  color: #fffff5;
+}
+/*
+ * Theme 1
+ */
+.book.color-theme-1 .book-summary {
+  color: #afa790;
+  background: #111111;
+  border-right: 1px solid rgba(0, 0, 0, 0.07);
+}
+.book.color-theme-1 .book-summary .book-search {
+  background: transparent;
+}
+.book.color-theme-1 .book-summary .book-search input,
+.book.color-theme-1 .book-summary .book-search input:focus {
+  border: 1px solid transparent;
+}
+.book.color-theme-1 .book-summary ul.summary li.divider {
+  background: #7e888b;
+  box-shadow: none;
+}
+.book.color-theme-1 .book-summary ul.summary li i.fa-check {
+  color: #33cc33;
+}
+.book.color-theme-1 .book-summary ul.summary li.done > a {
+  color: #877f6a;
+}
+.book.color-theme-1 .book-summary ul.summary li a,
+.book.color-theme-1 .book-summary ul.summary li span {
+  color: #877f6a;
+  background: transparent;
+  font-weight: normal;
+}
+.book.color-theme-1 .book-summary ul.summary li.active > a,
+.book.color-theme-1 .book-summary ul.summary li a:hover {
+  color: #704214;
+  background: transparent;
+  font-weight: normal;
+}
+/*
+ * Theme 2
+ */
+.book.color-theme-2 .book-summary {
+  color: #bcc1d2;
+  background: #2d3143;
+  border-right: none;
+}
+.book.color-theme-2 .book-summary .book-search {
+  background: transparent;
+}
+.book.color-theme-2 .book-summary .book-search input,
+.book.color-theme-2 .book-summary .book-search input:focus {
+  border: 1px solid transparent;
+}
+.book.color-theme-2 .book-summary ul.summary li.divider {
+  background: #272a3a;
+  box-shadow: none;
+}
+.book.color-theme-2 .book-summary ul.summary li i.fa-check {
+  color: #33cc33;
+}
+.book.color-theme-2 .book-summary ul.summary li.done > a {
+  color: #62687f;
+}
+.book.color-theme-2 .book-summary ul.summary li a,
+.book.color-theme-2 .book-summary ul.summary li span {
+  color: #c1c6d7;
+  background: transparent;
+  font-weight: 600;
+}
+.book.color-theme-2 .book-summary ul.summary li.active > a,
+.book.color-theme-2 .book-summary ul.summary li a:hover {
+  color: #f4f4f5;
+  background: #252737;
+  font-weight: 600;
+}

+pre,
+code {
+  /* http://jmblog.github.io/color-themes-for-highlightjs */
+  /* Tomorrow Comment */
+  /* Tomorrow Red */
+  /* Tomorrow Orange */
+  /* Tomorrow Yellow */
+  /* Tomorrow Green */
+  /* Tomorrow Aqua */
+  /* Tomorrow Blue */
+  /* Tomorrow Purple */
+}
+pre .hljs-comment,
+code .hljs-comment,
+pre .hljs-title,
+code .hljs-title {
+  color: #8e908c;
+}
+pre .hljs-variable,
+code .hljs-variable,
+pre .hljs-attribute,
+code .hljs-attribute,
+pre .hljs-tag,
+code .hljs-tag,
+pre .hljs-regexp,
+code .hljs-regexp,
+pre .ruby .hljs-constant,
+code .ruby .hljs-constant,
+pre .xml .hljs-tag .hljs-title,
+code .xml .hljs-tag .hljs-title,
+pre .xml .hljs-pi,
+code .xml .hljs-pi,
+pre .xml .hljs-doctype,
+code .xml .hljs-doctype,
+pre .html .hljs-doctype,
+code .html .hljs-doctype,
+pre .css .hljs-id,
+code .css .hljs-id,
+pre .css .hljs-class,
+code .css .hljs-class,
+pre .css .hljs-pseudo,
+code .css .hljs-pseudo {
+  color: #c82829;
+}
+pre .hljs-number,
+code .hljs-number,
+pre .hljs-preprocessor,
+code .hljs-preprocessor,
+pre .hljs-pragma,
+code .hljs-pragma,
+pre .hljs-built_in,
+code .hljs-built_in,
+pre .hljs-literal,
+code .hljs-literal,
+pre .hljs-params,
+code .hljs-params,
+pre .hljs-constant,
+code .hljs-constant {
+  color: #f5871f;
+}
+pre .ruby .hljs-class .hljs-title,
+code .ruby .hljs-class .hljs-title,
+pre .css .hljs-rules .hljs-attribute,
+code .css .hljs-rules .hljs-attribute {
+  color: #eab700;
+}
+pre .hljs-string,
+code .hljs-string,
+pre .hljs-value,
+code .hljs-value,
+pre .hljs-inheritance,
+code .hljs-inheritance,
+pre .hljs-header,
+code .hljs-header,
+pre .ruby .hljs-symbol,
+code .ruby .hljs-symbol,
+pre .xml .hljs-cdata,
+code .xml .hljs-cdata {
+  color: #718c00;
+}
+pre .css .hljs-hexcolor,
+code .css .hljs-hexcolor {
+  color: #3e999f;
+}
+pre .hljs-function,
+code .hljs-function,
+pre .python .hljs-decorator,
+code .python .hljs-decorator,
+pre .python .hljs-title,
+code .python .hljs-title,
+pre .ruby .hljs-function .hljs-title,
+code .ruby .hljs-function .hljs-title,
+pre .ruby .hljs-title .hljs-keyword,
+code .ruby .hljs-title .hljs-keyword,
+pre .perl .hljs-sub,
+code .perl .hljs-sub,
+pre .javascript .hljs-title,
+code .javascript .hljs-title,
+pre .coffeescript .hljs-title,
+code .coffeescript .hljs-title {
+  color: #4271ae;
+}
+pre .hljs-keyword,
+code .hljs-keyword,
+pre .javascript .hljs-function,
+code .javascript .hljs-function {
+  color: #8959a8;
+}
+pre .hljs,
+code .hljs {
+  display: block;
+  background: white;
+  color: #4d4d4c;
+  padding: 0.5em;
+}
+pre .coffeescript .javascript,
+code .coffeescript .javascript,
+pre .javascript .xml,
+code .javascript .xml,
+pre .tex .hljs-formula,
+code .tex .hljs-formula,
+pre .xml .javascript,
+code .xml .javascript,
+pre .xml .vbscript,
+code .xml .vbscript,
+pre .xml .css,
+code .xml .css,
+pre .xml .hljs-cdata,
+code .xml .hljs-cdata {
+  opacity: 0.5;
+}

+.book .book-summary .book-search {
+  padding: 6px;
+  background: transparent;
+  position: absolute;
+  top: -50px;
+  left: 0px;
+  right: 0px;
+  transition: top 0.5s ease;
+}
+.book .book-summary .book-search input,
+.book .book-summary .book-search input:focus,
+.book .book-summary .book-search input:hover {
+  width: 100%;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  outline: none;
+  line-height: 22px;
+  padding: 7px 4px;
+  color: inherit;
+}
+.book.with-search .book-summary .book-search {
+  top: 0px;
+}
+.book.with-search .book-summary ul.summary {
+  top: 50px;
+}

+require([
+    "gitbook",
+    "lodash"
+], function(gitbook, _) {
+    var index = null;
+    var $searchInput, $searchForm;
+
+    // Use a specific index
+    function loadIndex(data) {
+        index = lunr.Index.load(data);
+    }
+
+    // Fetch the search index
+    function fetchIndex() {
+        $.getJSON(gitbook.state.basePath+"/search_index.json")
+        .then(loadIndex);
+    }
+
+    // Search for a term and return results
+    function search(q) {
+        if (!index) return;
+
+        var results = _.chain(index.search(q))
+        .map(function(result) {
+            var parts = result.ref.split("#")
+            return {
+                path: parts[0],
+                hash: parts[1]
+            }
+        })
+        .value();
+
+        return results;
+    }
+
+    // Create search form
+    function createForm(value) {
+        if ($searchForm) $searchForm.remove();
+
+        $searchForm = $('<div>', {
+            'class': 'book-search',
+            'role': 'search'
+        });
+
+        $searchInput = $('<input>', {
+            'type': 'text',
+            'class': 'form-control',
+            'val': value,
+            'placeholder': 'Type to search'
+        });
+
+        $searchInput.appendTo($searchForm);
+        $searchForm.prependTo(gitbook.state.$book.find('.book-summary'));
+    }
+
+    // Return true if search is open
+    function isSearchOpen() {
+        return gitbook.state.$book.hasClass("with-search");
+    }
+
+    // Toggle the search
+    function toggleSearch(_state) {
+        if (isSearchOpen() === _state) return;
+
+        gitbook.state.$book.toggleClass("with-search", _state);
+
+        // If search bar is open: focus input
+        if (isSearchOpen()) {
+            gitbook.sidebar.toggle(true);
+            $searchInput.focus();
+        } else {
+            $searchInput.blur();
+            $searchInput.val("");
+            gitbook.sidebar.filter(null);
+        }
+    }
+
+    // Recover current search when page changed
+    function recoverSearch() {
+        var keyword = gitbook.storage.get("keyword", "");
+
+        createForm(keyword);
+
+        if (keyword.length > 0) {
+            if(!isSearchOpen()) {
+                toggleSearch();
+            }
+            gitbook.sidebar.filter(_.pluck(search(keyword), "path"));
+        }
+    };
+
+
+    gitbook.events.bind("start", function(config) {
+        // Pre-fetch search index and create the form
+        fetchIndex();
+        createForm();
+
+        // Type in search bar
+        $(document).on("keyup", ".book-search input", function(e) {
+            var key = (e.keyCode ? e.keyCode : e.which);
+            var q = $(this).val();
+
+            if (key == 27) {
+                e.preventDefault();
+                toggleSearch(false);
+                return;
+            }
+            if (q.length == 0) {
+                gitbook.sidebar.filter(null);
+                gitbook.storage.remove("keyword");
+            } else {
+                var results = search(q);
+                gitbook.sidebar.filter(
+                    _.pluck(results, "path")
+                );
+                gitbook.storage.set("keyword", q);
+            }
+        });
+
+        // Create the toggle search button
+        gitbook.toolbar.createButton({
+            icon: 'fa fa-search',
+            label: 'Search',
+            position: 'left',
+            onClick: toggleSearch
+        });
+
+        // Bind keyboard to toggle search
+        gitbook.keyboard.bind(['f'], toggleSearch)
+    });
+
+    gitbook.events.bind("page.change", recoverSearch);
+});
+
+

+require(["gitbook", "lodash"], function(gitbook, _) {
+    var SITES = {
+        'facebook': {
+            'label': 'Facebook',
+            'icon': 'fa fa-facebook',
+            'onClick': function(e) {
+                e.preventDefault();
+                window.open("http://www.facebook.com/sharer/sharer.php?s=100&p[url]="+encodeURIComponent(location.href));
+            }
+        },
+        'twitter': {
+            'label': 'Twitter',
+            'icon': 'fa fa-twitter',
+            'onClick': function(e) {
+                e.preventDefault();
+                window.open("http://twitter.com/home?status="+encodeURIComponent(document.title+" "+location.href));
+            }
+        },
+        'google': {
+            'label': 'Google+',
+            'icon': 'fa fa-google-plus',
+            'onClick': function(e) {
+                e.preventDefault();
+                window.open("https://plus.google.com/share?url="+encodeURIComponent(location.href));
+            }
+        },
+        'weibo': {
+            'label': 'Weibo',
+            'icon': 'fa fa-weibo',
+            'onClick': function(e) {
+                e.preventDefault();
+                window.open("http://service.weibo.com/share/share.php?content=utf-8&url="+encodeURIComponent(location.href)+"&title="+encodeURIComponent(document.title));
+            }
+        },
+        'instapaper': {
+            'label': 'Instapaper',
+            'icon': 'fa fa-instapaper',
+            'onClick': function(e) {
+                e.preventDefault();
+                window.open("http://www.instapaper.com/text?u="+encodeURIComponent(location.href));
+            }
+        },
+        'vk': {
+            'label': 'VK',
+            'icon': 'fa fa-vk',
+            'onClick': function(e) {
+                e.preventDefault();
+                window.open("http://vkontakte.ru/share.php?url="+encodeURIComponent(location.href));
+            }
+        }
+    };
+
+
+
+    gitbook.events.bind("start", function(e, config) {
+        var opts = config.sharing;
+
+        // Create dropdown menu
+        var menu = _.chain(opts.all)
+            .map(function(id) {
+                var site = SITES[id];
+
+                return {
+                    text: site.label,
+                    onClick: site.onClick
+                };
+            })
+            .compact()
+            .value();
+
+        // Create main button with dropdown
+        if (menu.length > 0) {
+            gitbook.toolbar.createButton({
+                icon: 'fa fa-share-alt',
+                label: 'Share',
+                position: 'right',
+                dropdown: [menu]
+            });
+        }
+
+        // Direct actions to share
+        _.each(SITES, function(site, sideId) {
+            if (!opts[sideId]) return;
+
+            gitbook.toolbar.createButton({
+                icon: site.icon,
+                label: site.text,
+                position: 'right',
+                onClick: site.onClick
+            });
+        });
+    });
+});

+### 1. Markdown: Syntax
+* [MarkDown中文网](http://www.markdown.cn/ "MarkDown中文网")
+	
+### 2. 解决ios设备页面滚动条卡顿 ###
+* CSS
+
+		overflow: auto;
+		-webkit-overflow-scrolling: touch;
+### 3. 单行文本溢出显示省略号(...) ###
+* CSS
+
+		overflow: hidden;
+		text-overflow: ellipsis;//  显示省略符号来代表被修剪的文本。
+    	white-space: nowrap;//	文本不会换行, 在同一行上继续，直到遇到 <br> 标签为止。
+### 4. 多行文本溢出显示省略号(...) ###
+* CSS
+
+		overflow : hidden;
+    	text-overflow: ellipsis;
+		-webkit-line-clamp: 2; //  限制文本行数2行(webkit私有属性)
+    	display: -webkit-box;
+    	-webkit-box-orient: vertical;
+### 5. 手机软键盘遮挡input ###
+1. 方案一 
+	* JS
+	 
+			$('INPUT').focus(function () {
+				var SCROLLY = 100;
+				var TIMER_NAME = 500; // focus事件中500ms后进行判断
+				var MAX_SCROLL = 9999; // 越大越好
+				setTimeout(function () {
+					if (window.scrollY < SCROLLY) {
+						window.scrollTo(0, MAX_SCROLL);
+					}
+				}, TIMER_NAME)
+			})
+
+
+2. 方案二
+	* JS
+	
+			var setScroll = function(obj){
+		        var ua = navigator.userAgent;
+		        if(ua.match(/(iPhone|iPod|iPad|iPhone\s+Simulator)/i)){
+					setTimeout(function () {
+						obj.scrollIntoViewIfNeeded(); //obj指元素本身
+					}, 500)
+		        }
+		    };
+			//只在当前元素在视窗的可见范围内不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视窗中可见，这个方法不做任何处理。如果将可选参数alignCenter设置为true，则表示尽量将元素显示在视窗中部（垂直方向）------Safari、Chrome实现了这个方法
+
+	* 扩展
+	
+			scrollIntoView(alignWithTop);//  滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持
+
+			scrollByLines(lineCount);// 将元素的内容滚动指定的行数的高度，lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法
+
+			scrollByPages(pageCount);// 将元素的内容滚动指定的页面的高度，具体高度由元素的高度决定。---Safari、Chrome实现了这个方法
+### 6. 禁止移动端页面的拷贝功能 ###
+* CSS
+
+		*{   
+			-webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
+			-webkit-user-select:none; /*webkit浏览器*/   
+			-khtml-user-select:none; /*早期浏览器*/   
+			-moz-user-select:none;/*火狐*/   
+			-ms-user-select:none; /*IE10*/   
+			user-select:none;   
+		} 
+
+	* *IE6-9不支持user-select:none属性，但支持使用标签属性 onselectstart="return false";*  
+	* *在添加完上述代码后，在IOS 上会有问题的，input 框无法正常输入了内容了,添加如下样式*
+
+			input {      
+				-webkit-user-select:auto; /*webkit浏览器*/     
+			}
+### 7. css模拟'<' '>'符号 ###
+* HTML && CSS
+
+		<span style='display: inline-block;width: 10px;height: 10px;border-top: 2px solid #ddd;border-left: 2px solid #ddd;transform: rotate(-45deg);'></span>
+### 8. css模拟三角
+* HTML && CSS
+
+		<div style="width: 0;height: 0;border: 10px solid transparent;top: 5px;border-left-color: #ddd"></div>
+### 9. 根据设备宽度，设置页面字体大小
+* JS
+
+		(function (doc, win) {
+			var docEl = doc.documentElement,
+				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+				recalc = function () {
+					var clientWidth = docEl.clientWidth;
+					if (!clientWidth) return;
+					docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
+				};
+				if (!doc.addEventListener) return;
+				win.addEventListener(resizeEvt, recalc, false);
+				doc.addEventListener('DOMContentLoaded', recalc, false);
+		})(document, window);
+### 10. 各类元标签
+* 设置编码信息 
+
+		<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8" /> 
+* 设置语言 
+
+		<meta http-equiv="Content-Language" Content="zh-CN" /> 
+* 设置重定向
+
+		<meta http-equiv="Refresh" Content="15; Url=http://www.baidu.com" /> 
+* 设置缓存时间 
+
+		<meta http-equiv="Expires" Content="Web, 26 Jun 2015 18:21:57 GMT" /> 
+* 不使用缓存 
+
+		<meta http-equiv="Pragma" Content="No-cach" /> 
+* 设置关键字 
+
+		<meta name="Keywords" Content="key1,key2,..." /> 
+* 设置描述信息 
+
+		<meta name="Description" Content="description abc" /> 
+* 设置对搜索引擎抓取 
+
+		<meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow" />
+* 设置可视区域 
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
+* 针对浏览器使用
+
+	* 国产浏览器内核选择
+
+			<meta name="renderer" content="webkit|ie-comp|ie-stand"> 
+	* 使用最新版的ie浏览器，或者chrome
+
+			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+	* 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
+
+			<meta name="HandheldFriendly" content="true">
+	* 微软的老式浏览器
+
+			<meta name="MobileOptimized" content="320"> 
+	* uc强制竖屏
+
+			<meta name="screen-orientation" content="portrait"> 
+	* QQ强制竖屏
+
+			<meta name="x5-orientation" content="portrait"> 
+	* UC强制全屏
+
+			<meta name="full-screen" content="yes"> 
+	* QQ强制全屏
+
+			<meta name="x5-fullscreen" content="true">
+	* UC应用模式
+
+			<meta name="browsermode" content="application"> 
+	* QQ应用模式
+
+			<meta name="x5-page-mode" content="app"> 
+	* windows phone 点击无高光
+
+			<meta name="msapplication-tap-highlight" content="no"> 
+	* 禁止转码
+
+			<meta http-equiv="Cache-Control" content="no-siteapp" /> 
+	* 禁止数字自动识别为电话号码 
+
+			<meta name="format-detection" content="telephone=no" />
+	* 禁止识别邮箱 
+
+			<meta name="format-detection" content="email=no" />
+### 11. 金额格式化: '12345678' --> '12,345,678'
+	var numStr = '12345678';
+	console.log(numStr.split('').reverse().join('').replace(/(\d{3})/g,'$1,').replace(/,$/,'').split('').reverse().join(''));
+### 12. 移动端拖拽demo
+* HTML
+
+		<body>
+			<img src='homepage.svg' onclick='window.location.href="http://example.com/"' id="link">
+		</body>
+* CSS
+
+		html,body { height:100%; }
+	   	#link { width:50px;height:50px;position: absolute;left: 0;top: 0; }
+* JS
+	
+		<script>
+			window.onload = function(){
+				drag('link')
+			};
+			function drag(obj){
+				var block = document.getElementById(obj);
+				var oW,oH;
+				// 绑定touchstart事件
+				block.addEventListener("touchstart", function(e) {
+					var touches = e.touches[0];
+					oW = touches.clientX - block.offsetLeft;
+					oH = touches.clientY - block.offsetTop;
+					//阻止页面的滑动默认事件
+					document.addEventListener("touchmove",defaultEvent,false);
+				},false)
+	
+				block.addEventListener("touchmove", function(e) {
+					var touches = e.touches[0];
+					var oLeft = touches.clientX - oW;
+					var oTop = touches.clientY - oH;
+					if(oLeft < 0) {
+						oLeft = 0;
+					}else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) {
+						oLeft = (document.documentElement.clientWidth - block.offsetWidth);
+					}
+					block.style.left = oLeft + "px";
+					block.style.top = oTop + "px";
+					},false);
+					block.addEventListener("touchend",function() {
+						document.removeEventListener("touchmove",defaultEvent,false);
+					},false);
+				function defaultEvent(e) {
+					e.preventDefault();
+				}
+			}
+
+### 13.判断是否为苹果手机
+	var ua = navigator.userAgent;
+    if(ua.match(/(iPhone|iPod|iPad|iPhone\s+Simulator)/i)){
+				alert("是iphone！")
+		}
+### 14. img标签的 alt 属性和 onerror 事件
+* onerror 事件会在文档或图像加载过程中发生错误时被触发
+
+		<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> 
+* alt属性,如果无法显示图像，浏览器将显示替代文本