任务3 前端架构设计

1.3.1 分层架构&模块化

谈到架构设计，很多人都会想到MVC、MVP、MVVM等，那么前端开发为什么要进行架构设计呢？使用原始的方式进行开发有什么问题呢？首先看一下原始开发存在的以下问题。

➢ 难以维护

➢ 加载缓慢

➢ 体验差

➢ 重复编码

➢ 扩展困难

➢ 前后端耦合度高

在原始开发的时候都会遇到以上问题，从这些问题中又发现了使用前端框架的重要性，有些人或多或少地接触过框架，但是对前端框架的认知还不够。大觅项目使用分层架构设计（把功能相似、抽象级别相近的实现进行分层，使逻辑变得清晰，容易理解和维护，也称作多层架构或N层架构），在这里使用的是类MVVM的分层架构方式，但还不完全是 MVVM 的分层架构方式。分层架构的主要优势在于：易维护、可扩展、易复用、灵活性高，因此深受前端开发工程师喜爱。

在使用分层架构的同时还需要使用一种比较重要的技术——模块化。模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性反映其内部特性，同时模块化还可以解耦实现并行开发。主要的模块化解决方案有：AMD（requirejs）、CMD（seajs）、CommonJS、ES6。模块化用来分割、组织和打包软件。每个模块完成一个特定的子功能，所有的模块按照某种方法组装起来，成为一个整体，完成整个系统的功能。在系统的结构中，模块是可组合、可分解和可更换的单元。模块化是一种将复杂系统分解成更好的可管理模块的方式。它通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件来处理复杂、大型的软件。

关于模块化的技术有很多，上面列举了四种。为了保证技术的前瞻性，大觅项目使用ES6进行代码的开发。虽然现在仍然有部分浏览器还不完全支持ES6，但是ES6在企业中的应用非常广泛。可参照图1.19理解大觅项目架构设计。

1.3.2 分离方式

关于分离方式的内容，首先要介绍分离方式的种类，主要分为三种。

➢ 不分离

➢ 部分分离

➢ 完全分离

在以前的项目开发中，最经常采用的是方式是不分离或者部分分离，不分离和部分分离有什么缺点呢？

不分离：前后端共用同一个项目目录，本地开发环境搭建成本高，项目比较复杂、不宜维护且维护成本高、发布风险高，不利于问题的定位和修改。

部分分离：本地环境搭建成本较高，需要后端提供页面模板（JSP等），更新和修改模板需要后端人员操作，效率低且不易维护，发布方式需要同时发布，且沟通成本比较高。

通过以上两点可以看出集成部署的缺点是存在的，但安全性比较高。有没有一种技术既能保证安全性又能解决以上问题呢？当然是有的，这就是完全分离即分布式。完全分离又分为两种：分离开发集成部署和分离开发分离部署。这里使用第二种：分离开发分离部署。前端使用纯HTML通过接口的方式进行数据的交互，降低系统的复杂度，部署时单独部署到一台服务器上，使用代理进行数据的交互。

1.3.3 Visual Studio Code免费跨平台编辑器

Visual Studio Code 并不是微软提供的大型开发工具包 Visual Studio，而是微软在2015年4月发布的一款能够运行在Windows、Mac OS和Linux之上的免费跨平台编辑器。Visual Studio Code具备优秀的性能，完备的特性，加之针对于Web开发的优化和方便的调试，被评价为最好用的集成开发环境。

Visual Studio Code的官网首页如图1.20所示。

Visual Studio Code下载安装的步骤很简单，只要下载对应的电脑版本，单击下一步即可安装。打开主界面，如图1.21所示。

Visual Studio Code提供了大量的扩展插件，通过扩展插件可以提升开发效率。扩展插件可以单击“扩展”按钮安装，也可以访问网站获取，如图1.22所示。

1.3.4 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

说明

--save与--save-dev的区别

--save会把依赖包添加到package.json文件dependencies下

--save-dev会把依赖包添加到package.json文件devDependencies下。

dependencies 是产品上线运行时的依赖，devDependencies 是产品开发时的依赖。devDependencies 下的模块是产品开发时用的，比如安装 js的压缩包gulp-uglify时，采用 “cnpm install gulp-uglify --save-dev”命令安装，因为在发布后就用不到这个插件包了，只是在开发中才用到它。dependencies下的模块是产品发布后还需要依赖的模块，比如router插件库或者Vue框架等，在产品开发完成后肯定还要依赖它们，否则就无法运行项目。

（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)

});

说明

组件是什么？

组件是将一个或几个完成各自功能的代码段封装为一个或几个独立的部分。用户界面组件就包含了这样一个或几个具有各自功能的代码段，最终完成了用户界面。

另外一种方式是按需引入组件，也就是项目中需要什么组件，就引入什么组件，实现按需加载，减少文件体积。接下来看一下按需引入的加载方式：

首先要安装一个插件：

npm install babel-plugin-import --save-dev

提示

babel-plugin-import 插件可以从组件库中引入需要的模块，而不是把整个库都引入，从而提高性能。

然后在.babelrc文件中添加代码：

{

"plugins": [["import", {

　　"libraryName": "iview",

　　"libraryDirectory": "src/components"

　}]]

}

配置完成之后，下面便是具体的使用：

import { Button, Table } from 'iview';

Vue.component('Button', Button);

Vue.component('Table', Table);

采用这种引入方式，如果项目规模比较大，这样去引用组件将非常烦琐，使用起来也比较难于管理。

经验

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

1.3.5 上机训练

上机练习2—将iView框架引入大觅项目

需求说明

➢ 将iView框架全部引入到大觅项目中。

➢ 在src\components文件夹下打开HelloWorld.vue文件，将class名为hello的div内部标签全部删除，替换为iView框架的button组件：

<Button type="success">Success</Button>

页面效果如图1.23所示。

1.3.6 构建工具Webpack

这里先简单列举几点前端构建的优势。

1. 解决JavaScript和CSS的依赖问题

在实际开发中经常发现CSS 没起作用，JavaScript 的某个变量或方法找不到，很多情况下都是因为引入JavaScript或者CSS的顺序不对造成的，而使用构建工具就可以大大减少此类问题。

2. 性能优化

随着项目规模的增大，前端会由很多JS文件构成，为了使前端代码更清晰、结构更合理，就需要做两件事：文件合并和文件压缩，而构建工具就能够去完成这两件事情，当然构建所能做的事情远远不止这两件。

3. 效率提升（添加CSS3前缀）

在 CSS3 出现之初，各大浏览器对于 CSS3 的新属性的兼容性并不是很好，需要添加特定的浏览器前缀才能解决这个问题。但是人工添加，不光工作量大，而且有时候也会遗漏，而且这个工作没有什么技术含量。构建工具可以完成自动添加前缀工作。

在了解了构建工具的优势之后，为了减少不必要的人工投入，经过对前端市场的调研，根据构建工具的具体市场占比情况，选择使用占比最大、使用最为广泛的Webpack进行文件的打包和编译，以方便地进行前端代码的开发和维护。Webpack可以将多种静态资源js、css、less转换成一个静态的文件（如图1.24所示），减少页面的请求，同时也减少转义less或ES6语法等工作，大大地提高了开发效率。

下面简单地从以下几点讲解Webpack的使用：安装Webpack、使用Webpack打包部署、Webpack配置文件、Webpack配置文件的编写。

关于Webpack的使用，主要从以下几点讲解：打包部署、文件加载。

新建webpack文件夹，使用Visual Studio Code打开，在终端输入初始化命令“npm init”进行初始化，初始化完成之后就可以开始安装对应的插件了。

经验

npm init：用于创建一个package.json。

（1）在webpack文件夹下新建src文件夹，在此文件夹下新建一个index.js文件；

（2）在index.js文件中添加以下代码：document.write("Hello world !")；

（3）在webpack文件夹下新建一个index.html文件，代码如下：

<html>

　<head>

　　　<meta charset="utf-8">

　</head>

　<body>

　　　<script type="text/javascript" src="build.js" charset="utf-8"></script>

　</body>

</html>

在终端输入“webpack ./src/index.js build.js”命令后，文件夹里会出现build.js文件（见图1.25）。进入到webpack文件夹，用浏览器能够打开index.html文件（见图1.26），这就表明已经打包完成了。

（4）添加第二个js文件，在src文件夹下新建一个index2.js文件，代码如下：

export let world=()=>{

document.write(" This is index2.js.");

}

index.js文件代码如下：

import {world} from './index2.js'

world();

提交

export、import、let均是ECMAScript 6的语法，之后会讲到。

代码修改完成之后输入“webpack ./src/index.js build.js”命令，再打开页面显示出index2.js文件中输入的内容。

（5）引入CSS样式进行编译，在src文件夹下新建style.css文件，在文件里面添加：

body{background-color:red}

在index.js文件中添加：

　　import　'style.css'

使用“webpack ./src/index.js build.js”命令打包会报错，提示编码错误，不能解析CSS样式。需要将引入命令修改成：import "!style-loader!css-loader!./style.css"，再输入打包命令，发现还是报错，提示缺少css-loader、style-loader这两个文件。可以使用“cnpm install css-loader style-loader --save-dev”命令将文件添加到package.json文件中，如果在后期打包部署时还是提示文件缺失，可以使用此命令添加文件；添加完成之后重新打包部署，页面显示为红色。

在上面的使用过程中，对不同的文件打包的时候需要引入对应的解析插件，但是使用这种方式非常不利于企业级开发，而且比较浪费时间，有没有一种更方便友好的方式呢？当然有，下面就来介绍Webpack配置文件的方式，使用webpack.config.js文件进行配置。

在webpack文件夹下新建一个webpack.config.js文件，在文件里面添加以下代码：

module.exports = {

　　entry: "./src/index.js",

　　output: {

　　　　path: __dirname,

　　　　filename: "build.js"

　　},

　　module: {

　　　loaders: [

　　　　　　{

　　　　　test: /\.css$/,

　　　　　loader: "style-loader!css-loader"

　　　　　　}

　　　　　]

　　　}

　　};

将index.js文件中的“!style-loader!css-loader!”删除，直接运行Webpack即可，Webpack会自动查找webpack.config.js文件。

在开发过程中每次修改代码都要手动构建，再刷新一次页面才能看到修改的界面效果，是否有别的方式来解决这个问题呢？如果能热更新代码就非常方便开发者了，解决方案是安装一些依赖包，具体包的配置会比较烦琐。到这里读者可能会想到Vue-cli脚手架工具，它可以快速搭建项目，省去配置的烦琐过程，方便开发。

小结

这里介绍的Webpack构建内容只是比较常用的一小部分，更多的Webpack构建内容可以去官方网站上深入学习。

1.3.7 上机训练

上机练习3—分析大觅项目中Webpack配置

需求说明

介绍了构建工具Webpack之后，读者对于如何配置Webpack还不是很清楚，接下来针对Vue-cli脚手架搭建的项目中的Webpack配置给读者做解读，具体详情请使用微信扫描二维码。

Webpack配置