项目小结

[lulusir]

vaya从1.0到2.0项目总结（前端）

概况

1.0

• JQ + 各种插件 + php模版
• 没有模块化，代码一个js文件可以500+行，维护困难
• php直接输出渲染 （前端只需要写样式和交互，数据渲染都由后端完成；导致后端工作量大，只能由一个人（后端）套模版；维护成本大，更新页面需要前后端共同完成）

问题：

前端方面复杂度较低，很多逻辑判断都由后端完成。页面加载的js文件和css太多，太大。前端没有工程化（代码压缩，模块化，迭代部署...之前都是手动加版本号），属于刀耕火种的年代。php，html，js代码混合不好维护。团队代码风格不一。pc和mobile需要重复写php渲染数据

2.0

• vue + webpack + es6 + vueRouter + vuex + less
• 校验工具 Es-lint
• 前后端分离，后端输出接口。

2.0需求更改之后，业务复杂度增加。通过MVVM框架，模块化降低复杂度。后端专注逻辑和数据处理，只提供接口，一个接口多端使用（pc，mobile），渲染工作交付给前端。框架上手之后，开发复杂度比jq要降低。使用es6让代码的可读性提高许多（人人都爱语法糖）。用eslint统一代码风格。

坑：

• 上手成本（新框架，ES6，webpack配置），在这些新工具上花了不少时间适应；尤其是webpack！
• 团队合作，学习，合作...
• webpack开始的配置麻烦，打包出来的vendor.js太大（最后还是解决le）
• 小坑： 页面seo问题，本来想做成单页应用，奈何客户端渲染的seo太差。要上ssr的话，需要成本较大（人力，时间）。

业务复杂度

js

框架/库

引入一个JQ需要用到的工具只有一部分，ajax、部分DOM操作、（现在的浏览器已经支持很多常用的DOM操作），JQ的利用率并不高。

• 1.0首页结构

/index.php
  /index.js
  /jq
  /...jq插件

• 2.0首页结构

/index.php
 /header.vue
 /footer.vue
 /...组件

vue的双向绑定使代码逻辑更少（jq20行，vue5行就可以实现）
在2.0中把页面划分为粒度更小的组件。降低页面复杂度。提高可维护性。
ajax部分使用axios。支持promise写法。体量更小

ES6

通过babel使ES6在主流浏览器都可以使用
用到语言的新特性，比如箭头函数，对象解构，方法简写...总结更优雅，更直观。

css

css方面用了预处理器less，减少了兀余的代码。统一变量，维护更方便，webpack也会抽离出公共部分的css

[Liuhui11]

不错，总结的很好