feat(init): init project specification and add docs

.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next

LICENSE

+MIT License
+
+Copyright (c) 2019 Evil_GH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

 # ProjectSpecification
 
-It's a project specification docs
-项目规范文档
\ No newline at end of file
+>It's a project specification docs 项目规范文档
+
+### Start project 启动项目
+
+- Step1: install vuepress cli
+    ```cmd
+    yarn global add vuepress
+    ```
+- Step2: enter the project catalogue
+    ```cmd
+    cd projectspecification
+    ```
+- Step3: add project dependences
+    ```cmd
+    yarn install
+    ```
+- Step4: start or build project
+    ```cmd
+    yarn start
+   
+    if you wanna build this project, then run command as below instead
+    
+    yarn build
+    ```
\ No newline at end of file

docs/.vuepress/config.js

+module.exports = {
+  title: "项目规范",
+  description: "你的个性我管不着，你的代码咱得聊聊",
+  head: [
+    [
+      "link",
+      { rel: "shortcut icon", type: "image/x-icon", href: `/favicon.ico` },
+    ],
+  ],
+  themeConfig: {
+    editLinks: false,
+    docsDir: "docs",
+    nav: [],
+    sidebar: [
+      {
+        title: "前端代码规范",
+        collapsable: false,
+        children: [
+          ["chapter1/", "项目目录结构"],
+          ["chapter1/目录文件命名规则", "目录文件命名规则"],
+          "chapter1/HTML代码规范",
+          "chapter1/JS代码规范",
+          "chapter1/CSS代码规范",
+          "chapter1/Git代码提交规范",
+        ],
+      },
+    ],
+  },
+};

docs/README.md

+---
+home: true
+heroImage: /notebook.png
+actionText: 阅读文档
+actionLink: /chapter1/
+---

docs/chapter1/Git代码提交规范.md

+## 代码提交操作规范
+
+- 添加到版本库
+  ```git
+  git add (files)
+  ```
+
+- 提交代码<span style="color:red;margin-left:10px;font-size: 16px;">*</span>
+  ```git
+  yarn commit
+  ```
+
+- 拉取代码
+  ```git
+  git pull --rebase
+  ```
+
+- 推送代码
+  ```git
+  git push (origin branch)
+  ```
+
+- 版本回退
+  ```git
+  git reset --hard (commitId/head^n)
+  ```
+
+
+>Note: 这里使用commitizen进行代码提交，主要是希望规范提交信息。而commitizen可以更加方便实现。
+
+### commit message 的意义？
+
+- 提供更多的历史信息，方便快速浏览
+
+  比如，下面的命令显示上次发布后的变动，每个commit占据一行。你只看行首，就知道某次 commit 的目的。
+  ```git
+  git log <last tag> HEAD --pretty=format:%s
+  ```
+- 可以过滤某些commit（比如文档改动），便于快速查找信息。
+
+  比如，下面的命令仅仅显示本次发布新增加的功能。
+  ```git
+  git log <last release> HEAD --grep feature
+  ```
+- 可以直接从commit生成Change log。
+
+### commit message 结构
+
+Commit message 都包括三个部分：Header，Body 和 Footer。本项目不做过多要求，只关注Header部分即可。
+
+#### Header
+
+Header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。
+
+- type
+
+  type用于说明 commit 的类别，只允许使用下面7个标识。
+
+  - feat：新功能（feature）
+  - fix：修补bug
+  - docs：文档（documentation）
+  - style： 格式（不影响代码运行的变动）
+  - refactor：重构（即不是新增功能，也不是修改bug的代码变动）
+  - test：增加测试
+  - chore：构建过程或辅助工具的变动
+  
+  如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。其他情况（docs、chore、style、refactor、test）由你决定，要不要放入 Change log，建议是不要。
+
+- scope
+
+  scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。
+
+- subject
+
+  subject是 commit 目的的简短描述，不超过50个字符。
+
+以动词开头，使用第一人称现在时，比如change，而不是changed或changes第一个字母小写，结尾不加句号（.）
+
+关于更多commitizen信息,前往以下地址寻求答案
+
+[【阮一峰博客】](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)
+
+[【你可能会忽略的 Git 提交规范】](http://jartto.wang/2018/07/08/git-commit/)
+

docs/chapter1/HTML代码规范.md

+# HTML编码规范
+
+## 语法
+
+- 缩进使用soft tab（4个空格）；
+- 嵌套的节点应该缩进；
+- 在属性上，使用双引号，不要使用单引号；
+- 属性名全小写，用中划线做分隔符；
+- 不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；
+- 不要忽略可选的关闭标签，例：</li> 和 </body>。
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Page title</title>
+    </head>
+    <body>
+        <img src="images/company_logo.png" alt="Company">
+
+        <h1 class="hello-world">Hello, world!</h1>
+    </body>
+</html>
+```
+
+
+## HTML5 doctype
+
+在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；虽然doctype不区分大小写，但是按照惯例，doctype大写 （关于html属性，大写还是小写）。
+
+```html
+<!DOCTYPE html>
+<html>
+	...
+</html>
+```
+
+## lang属性
+
+根据HTML5规范：
+
+应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。更多关于 lang 属性的说明[在这里](https://html.spec.whatwg.org/multipage/semantics.html#the-html-element)；在sitepoint上可以查到[语言列表](https://www.sitepoint.com/iso-2-letter-language-codes/)；但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的[语言列表](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/?redirectedfrom=MSDN)，其中细分了zh-cn, zh-hk, zh-tw。
+
+```html
+<!DOCTYPE html>
+<html lang="en-us">
+    ...
+</html>
+```
+
+## 字符编码
+
+通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+    </head>
+    ...
+</html>
+```
+
+## IE兼容模式
+
+用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；
+
+如果你想要了解更多，请点击[这里](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do)；
+
+不同doctype在不同浏览器下会触发不同的渲染模式（[这篇文章](https://hsivonen.fi/doctype/)总结的很到位）。
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    </head>
+    ...
+</html>
+```
+
+
+## 引入CSS, JS
+
+根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。
+HTML5 规范链接
+- [使用link](https://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element)
+- [使用style](https://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element)
+- [使用script](https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element)
+
+```html
+<!-- External CSS -->
+<link rel="stylesheet" href="code_guide.css">
+
+<!-- In-document CSS -->
+<style>
+    ...
+</style>
+
+<!-- External JS -->
+<script src="code_guide.js"></script>
+
+<!-- In-document JS -->
+<script>
+    ...
+</script>
+```
+
+## 属性顺序
+
+属性应该按照特定的顺序出现以保证易读性；
+- id
+- class
+- name
+- data-*
+- src, for, type, href, value , max-length, max, min, pattern
+- placeholder, title, alt
+- aria-*, role
+- required, readonly, disabled
+
+```html
+<a id="..." class="..." data-modal="toggle" href="#">Example link</a>
+
+<input class="form-control" type="text">
+
+<img src="..." alt="...">
+```
+
+## boolean属性
+boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
+
+更多内容可以参考 [WhatWG section on boolean attributes](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes)：
+
+boolean属性的存在表示取值为true，不存在则表示取值为false。
+
+```html
+<input type="text" disabled>
+
+<input type="checkbox" value="1" checked>
+
+<select>
+    <option value="1" selected>1</option>
+</select>
+```
+
+## 减少标签数量
+
+在编写HTML代码时，需要尽量避免多余的父节点；
+
+很多时候，需要通过迭代和重构来使HTML变得更少。
+```html
+<!-- Not well -->
+<span class="avatar">
+    <img src="...">
+</span>
+
+<!-- Better -->
+<img class="avatar" src="...">
+```
+
+## 使用语义化标签
\ No newline at end of file

docs/chapter1/JS代码规范.md

+# Javascript编码规范
+
+
+## 变量命名
+
+- 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
+- 'ID'在变量名中全大写
+- 'URL'在变量名中全大写
+- 常量全大写，用下划线连接
+- 构造函数，大写第一个字母
+
+```js
+var thisIsMyName;
+
+var goodID;
+
+var reportURL;
+
+var AndroidVersion;
+
+var iOSVersion;
+
+var MAX_COUNT = 10;
+
+function Person(name) {
+    this.name = name;
+}
+```
+
+## 变量声明
+
+一个函数作用域中所有的变量声明提到函数首部，除了for (...)里面使用的一次性变量。
+  var的数量不做限制，但要统一，一行定义一个变量。
+
+```js
+// not good
+function doSomethingWithItems(items) {
+    var a,
+        b;
+    var value = 10;
+    var result = value + 10;
+
+    for (var i = 0, len = items.length; i < len; i++) {
+        result += 10;
+    }
+}
+
+// good
+function doSomethingWithItems(items) {
+    var a;
+    var b;
+    var value = 10;
+    var result = value + 10;
+
+    for (var i = 0, len = items.length; i < len; i++) {
+        result += 10;
+    }
+}
+```
+
+## localStorage
+
+由于Safari的隐身模式下本地存储会被禁用，如果你尝试往localStorage写数据的话，会报超出使用限制的错误：QuotaExceededError (DOM Exception 22): The quota has been exceeded.而Chrome的隐身窗口不会禁用。而使用Safari的用户可能会开隐身窗口，特别是手机上的。这样就导致代码抛异常了，所以为了兼容Safari，不能直接使用localStorage，要做个兼容：
+```js
+Data.hasLocalStorage = true;
+try{
+    window.localStorage.trySetData = 1;
+}catch(e){
+    Data.hasLocalStorage = false;
+}
+setLocalData: function(key, value){ 
+    if(Data.hasLocalStorage){
+        window.localStorage[key] = value;
+    }
+    else{   
+        util.setCookie("_LOCAL_DATA_" + key, value, 1000);
+    }
+},
+getLocalData: function(key){
+    if(Data.hasLocalStorage){
+        return window.localStorage[key];
+    }
+    else{
+        return util.getCookie("_LOCAL_DATA_" + key);
+    }
+}
+```
+上面代码做了个兼容，如果不支持localStorage就使用cookie。要注意cookie一个域名最多只能有4kB，50个key，而本地存储限制为5Mb.
+
+
+## 常用属性缓存
+
+如下代码，频繁地使用了window.location这个属性
+```js
+let webLink = window.location.protocol + window.location.hostname;
+if(openType === "needtoTouch"){
+    webLink += "/admin/lead/list/page" + 
+             window.location.search.replace(/openType=needToTouch(&?)/, "") + 
+             window.location.hash;
+}
+```
+可以先把它缓存一下，加快变量作用域查找
+```js
+let location = window.location;
+let webLink = location.protocol + location.hostname;
+if(openType === "needtoTouch"){
+    webLink += "/admin/lead/list/page" +
+                location.search.replace(/openType=needToTouch(&?)/, "") +       
+                location.hash;
+}
+```
+当把location变成一个局部变量之后，它的查找时间将明显快于全局变量。
+
+## 三元运算
+
+禁止嵌套
+
+## null
+
+- 适用场景：
+    - 初始化一个将来可能被赋值为对象的变量
+    - 与已经初始化的变量做比较
+    - 作为一个参数为对象的函数的调用传参
+    - 作为一个返回对象的函数的返回值
+- 不适用场景：
+    - 不要用null来判断函数调用时有无传参
+    - 不要与未初始化的变量做比较
+
+```js
+// not good
+function test(a, b) {
+    if (b === null) {
+        // not mean b is not supply
+        ...
+    }
+}
+
+var a;
+
+if (a === null) {
+    ...
+}
+
+// good
+var a = null;
+
+if (a === null) {
+    ...
+}
+```
+
+## undefined
+- 永远不要直接使用undefined进行变量判断；
+- 使用typeof和字符串'undefined'对变量进行判断。
+
+```js
+// not good
+if (person === undefined) {
+    ...
+}
+
+// good
+if (typeof person === 'undefined') {
+    ...
+}
+```
+
+## jshint
+- 用'===', '!=='代替'==', '!='；
+
+- for-in里一定要有hasOwnProperty的判断；
+
+- 不要在内置对象的原型上添加方法，如Array, Date；
+
+- 不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
+
+- 变量不要先使用后声明；
+
+- 不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
+
+- 不要在同个作用域下声明同名变量；
+
+- 不要在一些不需要的地方加括号，例：delete(a.b)；
+
+- 不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；
+
+- 不要声明了变量却不使用；
+
+- 不要在应该做比较的地方做赋值；
+
+- debugger不要出现在提交的代码里；
+
+- 数组中不要存在空元素；
+
+- 不要在循环内部声明函数；
+
+- 不要像这样使用构造函数，例：new function () { ... }, new Object；
+
+```js
+	
+// not good
+if (a == 1) {
+    a++;
+}
+
+// good
+if (a === 1) {
+    a++;
+}
+
+// good
+for (key in obj) {
+    if (obj.hasOwnProperty(key)) {
+        // be sure that obj[key] belongs to the object and was not inherited
+        console.log(obj[key]);
+    }
+}
+
+// not good
+Array.prototype.count = function(value) {
+    return 4;
+};
+
+// not good
+var x = 1;
+
+function test() {
+    if (true) {
+        var x = 0;
+    }
+
+    x += 1;
+}
+
+// not good
+function test() {
+    console.log(x);
+
+    var x = 1;
+}
+
+// not good
+new Person();
+
+// good
+var person = new Person();
+
+// not good
+delete(obj.attr);
+
+// good
+delete obj.attr;
+
+// not good
+if (a = 10) {
+    a++;
+}
+
+// not good
+var a = [1, , , 2, 3];
+
+// not good
+var nums = [];
+
+for (var i = 0; i < 10; i++) {
+    (function(i) {
+        nums[i] = function(j) {
+            return i + j;
+        };
+    }(i));
+}
+
+// not good
+var singleton = new function() {
+    var privateVar;
+
+    this.publicMethod = function() {
+        privateVar = 1;
+    };
+
+    this.publicMethod2 = function() {
+        privateVar = 2;
+    };
+};
+```
+
+
+## 分号
+
+JS里面的表达式是可以不用分号结尾，例如Zepto的源码几乎没看到一个分号，但是我们还是提倡要每个句子后面都要加上分号，这样不容易出错。
+在低版本浏览器（如： IE）中如果不加分号可能会报错。
+
+## 括号
+
+下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。
+
+```js
+// not good
+if (condition)
+    doSomething();
+
+// good
+if (condition) {
+    doSomething();
+}
+```
+
+## 使用简便的转换
+
+- 把字符串转整型可以使用+号
+    ```js
+    let maxPrice = +form.maxPrice.value;
+    +号相当于Number
+    let maxPrice = Number(form.maxPrice.value);
+    ```
+    parseInt和Number有一个很大的区别是parseInt("10px")结果为10，而Number(“10px”)是NaN。
+
+- 把小数去掉尾数转成整型，可以使用 >> 0如果计算某个数字在第几排：
+    ```js
+    let _row = Math.floor(index / columns);
+    let row = parseInt(index / columns);
+    都可改成
+    let row = index / columns >> 0;
+    ```
+    这个用位运算的效率会明显高于上面两个。
+
+- 转成boolean值用!!
+    ```js
+    let mobile = !!ua.match(/iPhone|iPad|Android|iPod|Windows Phone/)
+    ```
+
+
+## 使用正则表达式做字符串处理
+
+正则表达式可以很方便地处理字符串，通常只要一行代码就搞定了。
+
+```js
+// 去掉全局的某一个字符，如去掉电话号码的-连接符
+phoneNumer = phoneNumber.replace(/\-/g, "");
+//或者反过来，把电话号码改成3-3-4的形式：
+phoneNumber = phoneNumber.replace(/^(\d{3})(\d{3})(\d{4})$/, "$1-$2-$3");
+```
+
+## 函数注释
+
+```js
+/**
+ * @desc 一个带参数的函数
+ * @param {string} a - 参数a
+ * @param {number} b=1 - 参数b默认值为1
+ * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
+ * @param {object} d - 参数d为一个对象
+ * @param {string} d.e - 参数d的e属性
+ * @param {string} d.f - 参数d的f属性
+ * @param {object[]} g - 参数g为一个对象数组
+ * @param {string} g.h - 参数g数组中一项的h属性
+ * @param {string} g.i - 参数g数组中一项的i属性
+ * @param {string} [j] - 参数j是一个可选参数
+ * @return {string} result
+ */
+function foo(a, b, c, d, g, j) {
+    ...
+    return "";
+}
+```
+
+<br/><br/><br/>
+> 以上内容参考：<br/>
+> [掘金▪HTML/CSS/JS编码规范](https://juejin.im/post/599ececb5188252423583c27#heading-72)<br/>
+> [腾讯IMWEB](http://imweb.github.io/CodeGuide/#js-indentation)<br/>
\ No newline at end of file

docs/chapter1/README.md

+# 项目目录结构
+
+```
+|- less/scss: 样式目录
+
+    |- components: 组件样式
+
+    |- page-factory: 工厂版page style
+
+    |- page-factory-all: 渠道版page style
+
+|- src: 页面相关目录
+
+    |- api: 服务api接口管理目录
+
+    |- components: 公共组件目录
+
+    |- consts: 常量目录
+
+    |- pages: 页面管理目录
+
+    |- router: 路由目录
+
+    |- utils: 公共函数方法目录
+
+|- statics: 静态资源目录
+
+    |- imgs：静态图片
+  
+    |- icons：存放iconfont
+
+|- vuex/Redux 状态管路目录： store
+
+|- build： webpack 构建目录
+```
\ No newline at end of file

docs/chapter1/目录文件命名规则.md

+# 目录文件命名规则
+
+## 项目命名
+
+全部采用小写方式， 以下划线分隔。
+例：my_project_name
+
+## 目录命名
+
+参照项目命名规则；
+
+完整英文命名的用复数形式，缩写用单数形式
+
+``` 
+eg：
+    scripts - js
+
+    styles - css
+    
+    images - img
+    
+    data_models - modules
+```
+## JS文件命名
+
+参照项目命名规则。
+
+例：account_model.js
+
+## CSS, SCSS文件命名
+
+参照项目命名规则。
+
+例：retina_sprites.scss
+
+## HTML文件命名
+
+参照项目命名规则。
+
+例：error_report.html
\ No newline at end of file

package.json

+{
+  "name": "projectspecification",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "start": "vuepress dev docs",
+    "build": "vuepress build docs",
+    "commit": "npx git-cz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Howard0207/NoteBook.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Howard0207/NoteBook/issues"
+  },
+  "homepage": "https://github.com/Howard0207/NoteBook#readme",
+  "devDependencies": {
+    "commitizen": "^4.1.2"
+  },
+  "config": {
+    "commitizen": {
+        "path": "cz-conventional-changelog"
+    }
+}
+}