前言

为期两个半月的分销App一期开发任务在已进入了SIT测试阶段, 本文主要记录本次项目最开始的设计思路和一些项目中遇到问题的解决方法, 是对一期阶段性总结.

项目介绍

分销App主要业务围绕着品牌商-服务商-零售商这条线展开的, 基于我司移动端底座的 Hybrid App 技术架构, Web 端是 vue 全家桶.

相较于之前的开发的轻应用有所不同的是, 在分销App中几乎所有的业务都是由 Web 开发完成, 包括了商城, 积分, 物流, 数据罗盘, 资讯等十几个轻应用组成. 客户端只提供登录, 底部tab 和工作台.

vue-router 默认是 hash 模式，在 url 后面会有一个 # 号，在一些情况下，因为 # 号的原因，会让后面的 uri 丢失导致 url 跳转出现问题(比如在微信内跳转异常)。这时候可以使用 history 模式，取缔 # 号，这时候需要在服务器进行配置。

nginx 的一些知识点

location

语法规则：location [=|~|~*|^~|@] pattern { … }

• = 开头表示精确匹配
• ~ 开头表示区分大小写的正则匹配
• ~* 开头表示不区分大小写的正则匹配
• ^~ 开头表示uri以某个常规字符串 URI 开头进行匹配。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。
• / 通用匹配，任何请求都会匹配到。

root

根路径配置，在匹配到 location 的 uri 路径后，指向 root 配置的路径，并把 uri 路径加在 root 路径后面。

1
2
3

location /mc/ {
    root /home/mine/files/;
}

当我访问 http://[host]/mc/test.png 时，实际上返回的文件路径为 /home/mine/files/mc/test.png

什么是git

git是一个 分布式版本控制软件，最初由林纳斯·托瓦兹（Linus Torvalds）创作，于2005年以GPL发布。
最初目的是为更好地管理Linux内核开发而设计。应注意的是，这与GNU Interactive Tools（一个类似Norton Commander界面的文件管理器）有所不同。
git最初的开发动力来自于BitKeeper和Monotone。git最初只是作为一个可以被其他前端（比如Cogito或Stgit）包装的后端而开发的，但后来git内核已经成熟到可以独立地用作版本控制。
很多著名的软件都使用git进行版本控制，其中包括Linux内核、X.Org服务器和OLPC内核等项目的开发流程。 ——维基百科

为什么使用git

• 传输速度快, 查看历史版本快
• 登录认证更安全 - SSH RSA认证
• 分支合并更方便
• Git版本库占用空间小
• 代码托管更安全 - 分布式托管
• 大量文件add, submit不会奔溃
• 更强大的功能: git bash

git安装

Ubantu/Debian

apt-get install git

执行环境

执行环境(execution context, 又称执行上下文) 是JavaScript中最重要的概念, 它定义了变量或函数有权访问的其它数据, 决定它们各自的行为

每个执行环境都有一个与之关联的 变量对象(variable object), 执行环境中定义的所有变量和函数都保存在这个变量对象中

当代码开始执行时, 会进入其当前的执行环境, 在JavaScript中执行环境的类型有两种:

• 全局环境: 最外围的一个执行环境, 在Web浏览器中指的window对象

• 局部(函数)环境: 函数被调用执行时, 进入当前函数环境执行代码

函数调用栈

当一个函数执行时, 函数执行环境进入 函数调用栈(call stack, 也可以叫做环境栈), 函数执行完成后, 调用栈将其执行环境弹出, 把控制权交回给之前的执行环境. 因此, 在函数调用栈中, 栈底是全局环境, 栈顶是当前执行环境.

下面用红宝书里的例子和图示演示这个过程:

1
2
3
4
5
6
7
8
9
10
11

var color = 'blue';

function changeColor() {
  if (color === 'blue') {
    color = 'red';
  } else {
    color = 'blue';
  }
}

changeColor();

树

树是由n(n>0)个有限节点组成一个具有层次关系的集合, 它具有以下特点:

• 每个节点有零个或多个子节点
• 没有父节点的节点叫做根节点
• 每个非根节点有且只有一个父节点
• 除了根结点外, 每个子节点可以分为多个不相交的子树

节点的度: 节点拥有的子树个树, 例如图中的节点A的度为2, 节点H的度为1

树的度: 树的最大节点的度, 例如图中最大的节点B的度为3, 树的度为3

叶节点: 度为0的节点, 图中K,J,F,L,O,P都是叶节点

父节点: 一个含有子节点的节点, 图中节点A就是节点B和节点C的父节点

子节点: 一个含有子树的根节点的节点, 把子树的根节点叫做该节点的子节点, 图中节点G和节点H为节点C的子节点

兄弟节点: 具有相同父节点的节点, 节点B和节点C就是兄弟节点

祖先节点: 从根到该节点所经分支的所有节点, 图中节点A,B,E是节点J的祖先节点

子孙节点: 以某节点为根结点的子树中所有节点, 图中节点D,E,F,I,J,K是节点B的子孙节点

节点层次: 从根开始, 根为第1层, 根的子节点为第2层…如果一个节点在第n层, 则它的子树的根结点在n+1层

深度或高度: 树中节点的最大层次, 例如图中的深度为5

森林: 由n颗互不相交的树的集合, 例如图中节点A去掉, 以节点B为根的树和以节点C为根的树组成的集合就叫做森林

排序算法 是一种能将一串数据依照特定排序方式进行排列的一种算法

这里记录了七种常见的排序算法, 其中稳定的排序算法有冒泡排序, 插入排序, 归并排序, 不稳定的排序算法有选择排序, 希尔排序, 堆排序, 快速排序

冒泡排序

冒泡排序是最简单的排序算法, 它需要从数组第一位开始遍历, 每相邻的两位比较大小, 然后按照递增(或递减)的需求, 交换数字, 直至最大(或最小)移到最后一位, 然后排除排序好的一位, 也就是长度减一, 继续重复地前面的步骤直至排序完成

实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var swap = function(i, j, arr) {
  var temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
};

var bubbleSort = function(arr) {
  var len = arr.length,
      i = null,
      j = null;
  
  for (i = 0; i < len; i++) {
    for (j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j+1]) {
        swap(j, j+1, arr);
      }
    }
  }

  return arr;
};

时间复杂度: O(n^2)

空间复杂度: O(n)

栈

栈 是一种按照 后进先出(LIFO, Last In First Out) 的原理运作的一种特殊串列形式的数据结构,　推入和弹出的元素都是在栈的顶端, 称为 栈顶元素

创建栈

首先, 我们用链表的结构创建栈, 先定义栈元素的节点

1
2
3
4

function Node(data) {
  this.data = data;
  this.next = null;
}

定义栈的类

1
2
3
4

function Stack() {
  this.top = null;  // 栈顶指针
  this.length = 0;  // 记录栈的长度
}

什么是链表

链表是最基础的一种数据结构, 根据Wiki上的解释:

链表 是一种常见的基础数据结构, 是一种线性表, 但是并不会按线性的顺序存储数据, 而是在每一个节点里存到下一个节点的指针.

在JS中简单地说, 有一个对象, 它有一个属性存储数据值, 另一个属性存储其它的对象, 组成的一种数据结构.

单向链表

根据链表的定义, 下面用JS实现单向链表数据结构的初始化定义

1
2
3
4
5
6
7
8
9
10
11
12
13

// 定义节点
function Node(data) {
  this.data = data;
  this.next = null;
}

// 定义单向链表
function SingleLinkedList() {
  this.head = null;  // 指向第一个节点
  this.tail = null;  // 指向最后一个节点

  this.length = 0;
}

良好的代码规范能够增强代码的可读性，保持好的编码习惯是非常必要的，这篇文章记录由<<编写可维护的javascript>>总结的风格，以便日后查阅．

代码规范

缩进

每一行层级由2个空格组成，避免使用制表符Tab缩进．实际开发过程中，为方便使用，可以将编辑器的Tab格式修改为空格，在sublime-text的setting中增加：

1
2

"tab_size": 2,
"translate_tabs_to_spaces": true,