vue开发大项目代码编写规范--高级前端必看

太过爱你忘了你带给我的痛 2022-12-08 05:43 127阅读 0赞

现在项目开发基本都是团队一起来完成的，而且目前都采用前后端分离的开发模式，人多了，每个人的代码风格又不一样，这就导致了项目比较杂乱，而且后期人员离职后维护以及迭代开发都是致命的，所以团队遵循共同的规范是必须的。有了统一的规范，你才能确保团队做出来的项目几年以后仍然可以很方便的维护以及迭代开发。

--------------------

# 代码风格必须统一规范 #

示例：看以下代码规范，每个vue文件中里面都有mounted和methods那么你代码就得这么写了。要保存this变量，整个团队都用vm,这是一个团队规范的统一，增强代码的可读性，为啥要保存this?因为在箭头函数以及嵌套函数调用中，this指向可能会有问题。页面数据获取团队统一在mounted里面获取，当然，你也可以在created中，但是必须有统一的规范，所有人的初始化数据都在同一个地方获取。这样做的话以后团队中的人要去用别人写的组件，他初始化就只看mounted就行了，看初始化执行了哪些方法

mounted() { 
    	let vm = this; 
    	vm.init(); // 页面初始化的数据都在这个方法里执行
    },
    methods: { 
    	init() { 
    		let vm = this;
    		vm.initData(); // 获取页面初始化数据
    		vm.getDetail(); // 获取页面需要的详细信息
    	},
    	// 页面中的方法命名也必须统一，见名知意，不能个性化，统一的命名规范十分方便以后维护以及功能迭代
    	initData() { 
    	},
    	getDetail() { 
    	}
    }

另外团队项目中必须使用eslint来检验代码，从而规范所有开发者代码的格式。

# 必要的方法，参数，以及自定义的flag要写上注释，提高代码可读性，降低日后维护成本。 #

代码如下（示例）：

data() { 
    	return { 
    		routeFlag: 'add' // add为新增，review为复核，back为打回重新申请，update为更新操作，overdue为过期
    	}
    },
    methods: { 
    	// 用户信息提交,type == 1,新增操作，type == 2，变更操作， type == 3，提交到其他系统审核
    	handeSubmit(type) { 
    		// 过滤用户id信息
    		peopleArray.filter((item) => { 
    			return item.id == fromData.id;
    		});
    	}
    }

## 框架公共资源的封装，放置位置 ##

在项目开始阶段，首先得确定用那种技术，用啥框架，然后基于该框架在封装出符合企业开发需求的团队一起用的框架。就拿vue来说，它的src目录下你要建一个http.js,这个文件主要是引入axios,然后进行请求和响应拦截，以及设置公共的请求头，然后请求参数的统一处理，处理完成后最好将基于axios的get,post，getJson,postJson等方法挂载到vue的实例原型上，即vue.prototype.get = 自己封装的函数，项目中可以直接this.get调用get请求。当然，这个http.js文件要在main.js中引入。

然后你还要在src下建一个api文件夹，地下在建一些子模块文件夹，里面编写的是每个模块所需的接口以及数据获取方法。

src下还应该有一个utils文件夹，这里存放着系统一些公共的工具·函数，比如时间格式化函数，小数点截取，金钱转换，手机邮箱格式校验，对象克隆等常用的公共函数，开发人员要用可以直接在页面引入，避免n个开发在n个位置写了n个时间格式化函数。  
src下建的style文件夹是用来存放系统中一些公共样式的，里面建一个index.scss,在index.scss里面引入table.scss（表格公共样式）和detail.scss（详情页公共样式），也要具有模块化开发的思想。

项目中采用vuex来对一些数据进行管理，在store中建立相应的模块化的数据，在index中引入所有模块使用，vuex中mutaions和actions最好定义大写常量代替，避免后期改动多出数据。其实在vuex中有些用户的数据是要做本地持久化的，比如用户基本信息以及token,还有用户选择的语言，因为只有js文件运行了，才有数据，但浏览器刷新时，文件重新加载，vuex中的数据消失，所以可以借助vue-persistence插件做数据持久化。

路由文件中必须采用异步加载的方式引入组件，用require或者component: () => import(’@/views/404’)，组件异步其实是函数的一个赋值过程，只有你执行到当前组件，函数才执行，组件才被引入，这种方法解决了大项目组件多，如果加载全部组件，那可能要一年（开个玩笑，主要表达组件多同步加载的话太慢了）。路由文件中对没有登陆的用户操作做全局路由守卫，代码如下：

// 全局路由守卫
    router.beforeEach(function (to, from, next) { 
      if (to.matched.length === 0) { 
        // 判断此跳转路由的来源路由是否存在，存在的情况跳转到来源路由，否则跳转到404页面
        next('/404');
      } else { 
        // 浏览器刷新，vuex中数据消失，从本地缓存拿
        // userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}, 这是store中的userInfo获取，看本地是否有，有的话拿本地数据
        let token = store.state.userInfo.token;
        // meta标签中标记路由是否要登陆 isLogin
        if (to.meta.isLogin) { 
          if (token) { 
            next();
          } else { 
            next('/login');
          }
        } else { 
          next();
        }
      }
    });

在views文件夹中写一个layout来初始化项目的sidebar,navbar和main,这个可以直接用element里面的布局，导航栏的规范编写如下（采用遍历方式拿到每个路由，路由数组可以根据用户权限请求回来的路由数组）：

<el-aside class="main_con" style="width:250px;">
          <el-menu :default-active="$store.state.treeState" unique-opened @open="handleOpen" @close="handleClose" class="el-menu-vertical-demo" :collapse="isCollapse" router text-color="#fff" background-color="#422c50">
            <template v-for="(item,index) in treeData">
              <el-submenu :index="item.router" v-if="item.childResource.length>0" :key="index">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span v-text="item.resName"></span>
                </template>
                <template v-for="(child,indx) in item.childResource">
                  <el-menu-item :index="child.router" v-if="child.childResource.length==0" :key="indx">
                    <template slot="title">
                      {
       {child.resName}}
                    </template>
                  </el-menu-item>
                  <el-submenu :index="child.router" v-if="child.childResource.length>0" :key="child.resName">
                    <template slot="title">
                      {
       {child.resName}}
                    </template>
                    <el-menu-item :index="child.router" v-for="(child,idx) in child.childResource" :key="idx">
                      {
       {child.resName}}
                    </el-menu-item>
                  </el-submenu>
                </template>
              </el-submenu>
              <el-menu-item :index="item.router" v-if="item.childResource.length==0" :key="index">
                <i :class="item.icon"></i>
                <span slot="title" v-text="item.resName"></span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
    
    data() {
    	return {
    		treeData: [{
    			'icon': 'el-icon-s-home',
    	        'resName': '首页',
    	        'router': '/platformManage/home/home',
    	        'childResource': []}，{
            		'icon': 'el-icon-tickets',
    		        'resName': '列表',
    		        'router': '/platformManage/list/list',
    		        'childResource': [
    		          {
    		            'icon': 'el-icon-tickets',
    		            'resName': '列表页',
    		            'router': '/platformManage/list/list',
    		            'childResource': []
    		          }, {
    		            'icon': 'el-icon-tickets',
    		            'resName': '预授权码列表',
    		            'router': '/platformManage/applyOut/applyOut',
    		            'childResource': []
    		          }
    		        ]
    	        }
    	    ]
    	}
    }

# 组件化开发的目的是为了把一些复杂功能简化，为了功能迭代以及维护简单 #

在项目中要合理的利用组件，啥叫合理的利用，就比如有一百个功能的页面，你可以把它分给10个人，每人负责十个，但是如果这是个人又把它细分，每人由原来的十个变成了一百个，这无疑是把工作更复杂化了，所以要合理的利用组件化的思想，别为了使用组件而使用组件!  
如果你想成为一名高级前端开发，你得了解webpack是如何打包的，它能识别js模块，打包其他文件你的会配置loder和第三方插件plugins。webpack中引入vender.js是为了让第三方库在打包一次以后就不再打包，因为第三方库的代码一般会去改动，比如Jquery。webpack中引入happypack是为了加快打包速度，让程序可以在一个时刻同时进行多个打包！