1.前言
我本身是做Android的。iOS，uniapp，web都实践过一段时间，有点关于前端小小的经验。
示例框架是用uniapp写的。 也对最近一段时间使用uniapp开发的总结
本文讨论的东西不是针对某种具体语言进行详细讨论，少有具体的代码样例，大多是谈的个人感受
项目地址：uniapp-frame: uniapp开发框架 (gitee.com)
本案例实现了三个功能：登录，注册，首页列表。借此展示如下知识点：
- 语言基础
- 原生UI组件使用
- 布局
- 自定义UI组件
- 页面间通讯，跳转传值
- 本地缓存
- 网络请求封装
无论是Android，iOS，web 能够掌握上述知识的使用并有自己的理解运用到实际开发中，就能够应付日常的开发工作了。
开发工具使用 HBuilderX-高效极客技巧 (dcloud.io)
运行前需要导入uView(uni-app生态专用的UI框架)。 uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场
2.如何对项目代码分层，归类，组织的讨论
前端的开发工作可以简单理解为三步
- 取数据
- 处理逻辑
- 展示数据
软件开发 本质上就是处理数据。对于前端，开发流程就是从服务端获取数据，展示到前端。
开发一个页面可能会出现如下代码：
- 网络请求
- 本地缓存
- 数据展示到UI
- 页面间通讯，跳转传值
- 调用相机，相册，蓝牙等api
- 巴拉巴拉的各种逻辑
Android中开发一个页面的需要继承activity类，iOS需要viewcontroller，uniapp需要创建一个vue页面
实际工作中，我们不可能把上述代码都放在一个类中，现实角度肯定是可行的，所有代码放在一个类，能写也能运行，反正用户又不知道你代码是怎么写的，用户也不管，用户只需要上手直接用，没有异常，没有bug，用起来还不错就可以了。
但是对于程序员来说这TMD的纯纯的辣鸡代码。看一眼就脑瓜子疼，这就衍生出组织代码的需求，把代码分门别类，统一管理，方便程序员开发维护。
经过无数伟大先贤智慧与努力 诞生出MVC，MVP，MVVM等项目架构。
2.1用了MVC之后 我还是写了辣鸡代码
对于这些层出不穷的架构一直以来都没有什么理解，按照官方的案例，网上的文章教程 创建几个代表M层，V层，C层的类 就自以为搭建了一个不错的架构。
实际上开发一段时间之后，再次出现了代码臃肿的情况。是MVC不好么？是MVVM不好么？为什么写着写着代码就都跑到一个类里呢？
后来明白了 是我辣鸡。 只知道学点皮毛，以为创建各种名称不同的类，定义了一套分层规范以后就能写出良好的代码。
类名称是不是MVC不重要，心里有MVC才重要。
MVC实质上 是一种组织，归类，划分代码的思想。对于机器MVC没有意义，MVC是为程序员服务的，代码经过归类划分，使得程序员能够快速理解某一段代码的意义。
面向对象设计原则中有一条叫做：职责单一
职责单一就是如何划分代码的准则。把职责相同的代码归为一层。 但是一层并不代表只有一个类。
对于前端来说，V层天生就比M和C层代码要多。网络请求，数据缓存肯定是封装好的组件，代码量很小，前端复杂的数据逻辑处理也几乎很少。
大部分都工作都在V层， 前端的主要工作就是做展示，要和各种UI组件打交道。
上面提到过，一层并不代表只有一个类，当V层代码很多很重，那么就有必要再次对代码进行组织归类。不应该拘泥于特定的几个类进行开发。
之前错误僵硬的思想，当MVC的结构分层之后，不会根据现有情况变化，所以就会出现大量代码堆积在一个类文件中。
重要的事情说三遍，
MVC实质上是对职责不同的杂乱代码进行组织，归类！！！目的是尽可能的复用，解耦
MVC实质上是对职责不同的杂乱的代码进行组织，归类！！！目的是尽可能的复用，解耦
MVC实质上是对职责不同的杂乱的代码进行组织，归类！！！目的是尽可能的复用，解耦
俺觉得按照这个思路去理解项目架构，是不会跑偏的，不管MVABCD，只不过是变了个名字，换了一种归类方式，用了新的的技术。理解代码分层的本质，而不是为了分层而分层，面对项目结构不会懵，新的技术可以慢慢学。
3.案例分析
上面干燥的文字讲太多了，整点实际的案例分析。简单的登录流程 和首页列表
登录页面的逻辑：
- 账号密码登录
- UI登录表单，样式
- 非空判断
- 网络请求
- 登录成功后缓存账号信息，跳转到首页
- 下次进入从缓存中取出上次登录的账号密码 并回显到页面
为了处理上述逻辑除必要的login.vue之外，另需要login.js 和 wanAndroidApi.js
login.vue实现逻辑：1，3，6
login.js实现逻辑：2，5，6
WanAndroidApi.js实现逻辑：4
再次重申！！！上述逻辑完全可以 全部写在login.vue中。但是为了代码的可维护性，可读行，对代码进行划分，归类。
首页列表逻辑
- 网络请求数据
- 分页逻辑
- 上拉加载下一页
- 列表UI
- 点击跳转详情
为了处理上述逻辑除必要的index.vue之外，另需要index-list.js 和 wanAndroidApi.js
index-list.js 是vue组件实现除网络请求外的所有逻辑。
index.vue的实现非常简单，只需要引用组件即可。当一个页面元素，逻辑过多的时候，可以利用组件降低代码复杂度。
小结
wanAndroidApi.js 是网络请求的封装，对外暴露get，post方法，返回promise对象。
login.js(纯js文件) 和 index-list.js(vue组件) 是代码的两种思路。
当代码纯逻辑，不包含任何UI的情况 使用 js文件。
当代码既有逻辑又需要定义UI的情况 使用vue组件。
案例项目结构如下
4.uniapp开发参考文章
JavaScript 教程 - 网道 (wangdoc.com)
Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
uniapp 如何调用上一个页面的方法 - 掘金 (juejin.cn)
uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)
