基于vue的项目总结

Posted on | In

近期杂项总结

  • vue是数据驱动的，不要引入zepto，jQuery等的库，尽量使用数据驱动，如果实在要操作DOM，用ref。
  • 复杂的项目用vuex来管理数据。

  • 处理重试逻辑可以写成：

    1
    2
    3
    getProductInfo().catch((msg) => {
    	return getProductInfo()
    })

  • 多语言处理：

  • 建立i18n文件夹，在里面放index.js文件和多语言文件。在index.js中处理切换语言逻辑，把相应的文件export出去
  • 变量前加加号可转换成数字
  • vue-router go 方法中第二个参数为replace，当为true时会替换当前url，使当前页不留下历史记录。

整体架构

  • build中放置webpack配置文件。
  • utils中放公共的方法，工具等。
  • vuex中modules放置每个组件需要存储的数据的state、mutations,并写在store中，actions中写着对外暴露的方法，mutation type中可以对mutation的名字做个和变量的对应关系，数据结构放在models里。

  • 和后台接口的交互都放到service中去，其中可以对sendRequest方法进行封装，处理timeout。一些接口共用的头，以及对response共用的处理，可以写在vue-resource的拦截器里面（Vue.http.interceptor）。具体用法如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
       Vue.http.interceptors.push(function(request, next) {

    	// modify request
    	request.method = 'POST';

    	// continue to next interceptor
    	next(function(response) {

    		// modify response
    		response.body = '...';

    	});
    });

  • 在main.js里加上对全局错误的拦截监听，防止未被拦截处理的错误影响程序运行。

  • 如果有日志上报机制，需上报的内容有：用户与页面的交互，页面报错，接口报错。
  • 组件间传数据时，如数据结构可能发生较大改动，直接把对象传给子组件，不要拆开传。子组件api的设计要保证其通用性，在组件内不要加特别定制的逻辑。
  • 报错优先级：影响整体页面展示的错误需要有罩层遮住页面并阻止用户继续与页面进行交互，不影响整体功能的报错可忽略不计，也可显示弹框报错，允许用户稍后再试，或自行处理重试逻辑，重试几次后放弃重试。