ServiceApp 架构分享

主要内容

  • 什么是好的架构
  • service-app 的主要的脚本库
  • service-app 开发流程
  • 小Tip

什么是好的架构

  • 能进行高效的开发
  • Happy Coding

选择合适的主要的脚本库

成熟程度 ，支持特性/写法 ，生态如何 ，代码质量 ，学习成本 ，是否方便调试

合理的目录结构

  • 相关性强的内容放在靠近的位置
  • 合理命名文件夹和文件

其他一些原则

  • 框架要对一些通用的东西做封装。如ajax

service-app 的主要的脚本库

Vue.js + Webpack

Vue.js Vs Angular1

Vue.js优势
  • 学习成本比较低
  • 写法更简单
更多 



  • {{item.id}}
    • 


  • {{item.id}}
    •
    自定义指令 
    

myModule.directive('directiveName', function (injectables) {
  return {
    restrict: 'A',
    template: '
    ',
    controller: function() { ... },
    compile: function() {...},
    link: function() { ... }
    //(other props excluded)
  };
});

Vue.directive('my-directive', {
  bind: function () {...},
  update: function (newValue, oldValue) {...},
  unbind: function () {...}
});
                    
    

myModule.angular.module('filterName', [])
.filter('reverse', function() {
  return function(input) {...};
});

Vue.filter('reverse', function (value) {
  return function(value){...};
});

    Webpack Vs require.js + Gulp.js

    Webpack 功能更强大

    service-app 开发流程

    目录结构

    开发流程

    写路由

    
routes[页面路由] = {
  component: function(resolve) {
    require.ensure([], function(require) {
      resolve(require(页面的.js));
    });
  }
};

    写页面

    
var Main = RouteComponent.extend({
  template: '' + require('./index.html'),
  data: function(){return {a:xxx,b:xxx}},
  methods: {},
  create: function(){},
  ready: function(){},
  filter: {},
  components: {}
})
module.exports = Main;

    模拟后端请求

    
var isDebug = false;
isDebug && require('./mock');                     
                    
    
// mock.js
var Mock = require('mock');
var urls = window.settings.urls;

Mock.mock(urls.UPDATE_CUSTOMER_INFO, 'post', {
    "errcode": 0,
    "errmsg": null
});

    多语言

    

{{$root.lan('会员信息')}}
                    
    

{
  "会员信息": "Customer Inof",
  ...
}

    常见命令

    • npm run dev: 开发时执行
    • npm run build: 构建时执行

    小Tip

    • 多看优秀项目的源码。vue-admin
    • 用 ES6。

    End