网站前端架构设计

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?

• 项目中解决的问题

谈到架构设计，很多人都会想到MVC、MVP、MVVM等，那么前端开发为什么要进行架构设计呢？使用原始的方式进行开发有什么问题呢？首先看一下原始开发存在的以下问题。
➢ 难以维护
➢ 加载缓慢
➢ 体验差
➢ 重复编码
➢ 扩展困难
➢ 前后端耦合度高
在原始开发的时候都会遇到以上问题，从这些问题中又发现了使用前端框架的重要性，有些人或多或少地接触过框架，但是对前端框架的认知还不够。大觅项目使用分层架构设计（把功能相似、抽象级别相近的实现进行分层，使逻辑变得清晰，容易理解和维护，也称作多层架构或N层架构），在这里使用的是类MVVM的分层架构方式，但还不完全是 MVVM 的分层架构方式。分层架构的主要优势在于：易维护、可扩展、易复用、灵活性高，因此深受前端开发工程师喜爱。
在使用分层架构的同时还需要使用一种比较重要的技术——模块化。模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性反映其内部特性，同时模块化还可以解耦实现并行开发。主要的模块化解决方案有：AMD（requirejs）、CMD（seajs）、CommonJS、ES6。模块化用来分割、组织和打包软件。每个模块完成一个特定的子功能，所有的模块按照某种方法组装起来，成为一个整体，完成整个系统的功能。在系统的结构中，模块是可组合、可分解和可更换的单元。模块化是一种将复杂系统分解成更好的可管理模块的方式。它通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件来处理复杂、大型的软件。
关于模块化的技术有很多，上面列举了四种。为了保证技术的前瞻性，大觅项目使用ES6进行代码的开发。虽然现在仍然有部分浏览器还不完全支持ES6，但是ES6在企业中的应用非常广泛。可参照图1.19理解大觅项目架构设计。

• 工具

Visual Studio Code 并不是微软提供的大型开发工具包 Visual Studio，而是微软在2015年4月发布的一款能够运行在Windows、Mac OS和Linux之上的免费跨平台编辑器。Visual Studio Code具备优秀的性能，完备的特性，加之针对于Web开发的优化和方便的调试，被评价为最好用的集成开发环境。
Visual Studio Code提供了大量的扩展插件，通过扩展插件可以提升开发效率。扩展插件可以单击“扩展”按钮安装，也可以访问网站获取，

• UI框架

1. UI框架分析
   对于UI框架，读者都或多或少会有所了解，这里先来分析一下UI框架的优缺点。
   优点：
   ➢ 快速搭建Web页面
   ➢ 集中精力完成业务代码
   ➢ 缩短开发周期
   缺点：
   ➢ 冗余代码
   ➢ 无法定制化、精细化开发
   通过上述优缺点分析，可以很清晰地了解UI框架。判断项目是否使用UI框架，要去权衡 UI 框架是否适合项目要求，如果项目开发工期比较紧，而且对项目精细化要求不是特别高，那么使用UI框架是最好的选择。
2. UI框架的选择标准
   在确定项目需要使用UI框架以后，又该如何选择配套的UI框架呢？市面上有很多UI框架，那么选择的标准又是什么呢？
   ➢ UI框架是否能够满足项目要求
   根据项目设计稿能够判断项目中需要哪些功能模块，比如需要日历功能模块，如果当前UI框架没有日历功能模块，那么就可以直接淘汰该UI框架了。
   ➢ 组件丰富度，效果炫酷度
   随着技术的发展，人们对于现代互联网产品的要求越来越高，功能模块的实现成为最基本的要求，对于效果的炫酷度、视觉的冲击力、性能优化等要求也提高了很多。在UI框架能够满足基本的功能模块之后，接下来要考虑的便是效果的炫酷度，一款具有视觉冲击力的产品无疑更具竞争力。
   ➢ UI框架的API完整度、社区的活跃程度
   以上两条标准满足要求的情况下，最后要考虑的一点，也是非常重要的一点，就是UI框架的API完整度以及社区的活跃程度，这一点对于开发人员至关重要，决定了开发人员在使用UI框架时的舒适度。如果UI框架的API完整度、社区的活跃程度都很好，那么在使用的时候，能够快速搭建Web页面，即使在使用的过程中遇到问题，也可以很快地解决问题，节约开发成本。
   通过对市面上搭配Vue使用的UI框架的筛选，最后选择iView框架作为大觅项目的UI框架，下面介绍一下iView框架。
3. iView框架
   （1）iView框架是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。
   iView框架特性：
   ➢ 高质量、功能丰富
   ➢ 友好的API，自由灵活地使用空间
   ➢ 细致、漂亮的UI
   ➢ 事无巨细的文档
   ➢ 可自定义主题
   （2）iView框架安装
   安装方式有两种：CDN引入和NPM安装。因为项目搭建使用的是Vue-cli脚手架，这里推荐NPM安装的方式。进入项目目录中，打开命令提示符窗口，执行以下安装命令：
   cnpm install iview --save
   （3）在项目中引入iView框架
   执行以上安装命令之后，项目中已经安装了iView框架。在项目中引入iView框架，官方提供了两种方式，一种是一次性将全部组件引入到项目中，这种方式短平快，可以很方便地解决问题，但是项目中不可能把 UI 框架中的所有组件都用到，所以这种引入方式会造成文件体积过大、冗余代码过多等问题，但是使用起来相当简单，可以在项目的任意页面直接使用。具体引入方式一般是在Webpack的入口页面 main.js中做如下配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview'; //引入iView框架
import 'iview/dist/styles/iview.css'; //引入iView框架样式
Vue.use(VueRouter);
Vue.use(iView);
// The routing configuration
const RouterConfig = {
routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
el: '#app',
router: router,
render: h => h(App)
});

• 课堂上知识点的回顾

经过上面两种方式的对比，可以自行决定是否全部引入iView框架，在最后打包时候还可以将包进行拆分，使文件不至于太大。至于打包阶段的处理，后面再讲解，这里先把iView框架全部引入到项目中使用。