单页面应用 – Single Page Application – 路由

路由

• AngularJS v1.5 -- ngRoute
• VueJS v1.0 -- vue-router

vue-router

router.map({
  '/': {
    component: Home
  },
  '/products': {
    component: Products,
    subRoutes: {
      '/:product': {
        name: 'product',
        component: Detail
      }
    }
  }
});
						

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/home/home.vue';
import Products from './components/products/products.vue';
import Detail from './components/products/detail.vue';

Vue.use(VueRouter);
let router = new VueRouter();
router.map({
  '/': {
    component: Home
  },
  '/products': {
    component: Products,
    subRoutes: {
      '/:product': {
        name: 'product',
        component: Detail
      }
    }
  }
});

export default router;
						

数据存储/状态驱动

每个操作都是状态，比如打开子菜单，进入某个路由。

把需要的数据(当前状态)保存下来。

保存方法

• localStorage
• sessionStorage
• cookie
• Flux/ Redux/ Vuex

Vuex

const SET_PRODUCT = 'SET_PRODUCT';
let state = {
  product: {},
};
let mutations = {
  [SET_PRODUCT] (state, productName = '') {
    state.product = oms.find(it => Object.is(it.nickname, productName));
  }
};

export default new Vuex.Store({
  state: {
    product: {}
  },
  mutations: {
    [SET_PRODUCT] (state, productName = '') {
      state.product = oms.find(it => Object.is(it.nickname, productName));
    }
  }
});
						

import Vue from 'vue';
import Vuex from 'vuex';
import {oms} from '../data/tz-data';

Vue.use(Vuex);

const SET_PRODUCT = 'SET_PRODUCT';
let state = {
  product: {},
};
let mutations = {
  [SET_PRODUCT] (state, productName = '') {
    state.product = oms.find(it => Object.is(it.nickname, productName));
  }
};

export default new Vuex.Store({
  state: {
    product: {}
  },
  mutations: {
    [SET_PRODUCT] (state, productName = '') {
      state.product = oms.find(it => Object.is(it.nickname, productName));
    }
  }
});
						

开发工具

• Webpack
• Babel
• ECMAScript 6

Webpack & Babel

webpack.config.babel.js

	...
module: {
  loaders: [
    {
      test: /\.js?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'stage-0'],
        plugins: ['transform-runtime']
      }
    }
    ...
  ]
},
...
						

代码加载方式

• CommonJS
• AMD

CommonJS

moduleA.js

module.exports = function( value ){
  return value * 2;
}
						

moduleB.js

var multiplyBy2 = require('./moduleA');
var result = multiplyBy2( 4 );
						

AMD

moduleA.js

define('myModule', ['jquery'], function($) {
    $('body').text('hello world');
});
						

moduleB.js

require(['myModule'], function(myModule) {});
						

测试工具

• Mocha
• Chai

import 'mocha';
import {expect} from 'chat';
import Util from './util';

describe(`#isChinese()`, () => {
  it(`should be Chinese`, () => {
    expect(Util.isChinese(`摩卡摩卡摩卡摩卡摩卡`)).to.equal(true);
  });

  it(`should not be Chinese`, () => {
    expect(Util.isChinese()).to.equal(false);
    expect(Util.isChinese(`mocha`)).to.equal(false);
    expect(Util.isChinese(` mocha `)).to.equal(false);
    expect(Util.isChinese(`摩卡m`)).to.equal(false);
    expect(Util.isChinese(`m摩卡`)).to.equal(false);
    expect(Util.isChinese(` 摩卡`)).to.equal(false);
  });
});