前言

在现代Web开发中，组件化设计是一种常见的开发模式，它有助于提高代码的可维护性、可重用性和可测试性。
通过将一个大型应用程序拆分为多个独立的组件，我们可以更加灵活地开发和维护网站。
本文将以慕云游首页为例，探讨如何通过组件化设计实现它的页面布局与交互功能。
前置知识:
HTML CSS JavaScript webpack art-template
慕云游静态项目

1 项目准备

1.1 创建项目目录

在这里插入图片描述

放入提前准备的文件,如封装的ajax

1.2 搭建项目开发环境

初始化项目
在项目所在文件夹打开命令行,输入:
```
npm init
```

安装项目所需的包(node模块):

webpack

npm install --save-dev webpack webpack-cli

art-template

npm install art-template

配置webpack:
创建webpack.config.json文件,具体配置内容见Babel编译与Webpack

2 项目组件化

2.1 在当前环境启动原有项目

将原项目的文件,复制到Mall项目的src/page/index目录下
将原项目中的index.html文件改为index.art,当作模板文件

在src/pages/index目录下创建入口文件index.js,用于放引入的css文件和js文件,因为webpack无法直接从模板文件中访问他们
在这里插入图片描述

//css
import './css/bundle.css';
import './css/reset.css';

// js
import './js/backtotop';
import './js/menu';
import './js/carousel';

在命令行输入npm start 运行项目,看到完整页面即可

2.2 顶部组件

在src/components/topbar目录下创建以下文件
在入口文件index.js中引入topbar.js
```
//组件
import 'components/topbar';
```
将index.art文件中topbar内容剪切到topbar.art中
在index.art文件中引入topbar.art模板
同样的,相关的css内容剪切到topbar.css文件中,并在同目录下的index.js中引入topbar.css
```
//css
import './topbar.css'
```
这个时候我们会发现css中图片路径报错了
- icon.png里是精灵图标,很多地方都共用,我们可以将icons.png放在公共资源src/assert/images中,再更改url
```
background: url(images/icons.png) 0 -10px;
```
- 在webpack.config.json中已配置 images为src/assets/images的路径别名

2.3 幻灯片组件

按2.1顶部组件步骤如法炮制

在src/pages/index/components/carousel目录下,创建以下文件,再将原文件内容拆分搬运到相应文件中
注意: 顶部组件在布局组件中src/components/topbar,幻灯片组件在页面组件中src/pages/index/components/carousel,在入口文件中引入js的路径不同
```
//组件
import 'components/topbar';
import './components/carousel';
```

2.4 机酒自由行组件

同 2.1顶部组件操作一致,但是有个特殊的点类

机酒自由行中的css样式都是公共样式,所以要放在公共资源目录src/asserts/styles下
- 创建layout.css文件,将jjzyx.css中的代码剪切进去,同时删除jjzyx.css文件
- 在入口文件index.js中引入layout.css
```
//公共样式
import 'styles/layout.css';
```

2.5 拆分余下的css文件

将公共的基础样式(如下),放入src/asserts/styles下base.css中

body {
      
      
    color: #1C1F21;
}
a {
      
      
    text-decoration: none;
    color: #1C1F21;
}
@font-face {
      
      
    font-family: "PingFangSCRegular";
    /* IE9 */
    src: url('../fonts/PingFangSCRegular.ttf?t=1583684254005') format('truetype');
}
@font-face {
      
      
    font-family: 'iconfont';
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
      
      
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.center-wrap {
      
      
    width: 1152px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

把原文件中fonts文件夹中的字体图标都移到公共的fonts中

在入口文件index.js中引入base.css

//公共样式
import './styles/base.css';

将reset.css也放入公共样式中
在这里插入图片描述

改变reset.css在入口文件中的路径

//css
//import './css/reset.css';
//公共样式
import './styles/reset.css';

找到bundle.css中所有的公共样式,都剪切到layout.css中 ,再一步步按功能拆分成更多的css组件,最终将bundle.css中的内容搬空.

3 项目完善

3.1 幻灯片组件

3.1.1 结构和样式

在src/pages/index/components目录下创建新组件slider,内部创建art、css、js文件,设置幻灯片的结构样式,并将carousel组件下images文件夹复制到slider组件中.

将slider应用到index.art中,替换carousel;同样的,入口文件中也要替换

// {
      
      {include './components/carousel/carousel.art'}}
   {
      
      {
      
      include './components/slider/slider.art'}}

// import './components/carousel';
   import './components/slider';

3.1.2 功能实现

在slider组件下创建module模块,用于存放各种功能的js文件,实现走马灯效果
`

base.js

import {
        
         ELEMENT_NODE_TYPE, SLIDER_ANIMATION_CLASS_NAME } from './constants';
import DEFAULTS from './defaults';
export default BaseSlider;

constants.js

// keyboard
export const LEFT_KEYCODE = 37;
export const RIGHT_KEYCODE = 39;

// base
export const ELEMENT_NODE_TYPE = 1;
export const SLIDER_ANIMATION_CLASS_NAME = 'slider-animation';

defaults.js
```
export default DEFAULTS;
```

index.js

import BaseSlider from './base.js';
import keyboard from './keyboard.js';
export default Slider;

keyboard.js

import {
        
         LEFT_KEYCODE, RIGHT_KEYCODE } from './constants.js';
export default keyboard;

slider/index.js
```
import Slider from './module';
```

在silder组件下创建按钮的模板文件btn.art,和样式文件btn.css,对左右按钮定位,并在对应js文件中绑定点击事件
- slider/index.js
```
import './btn.css';
```

3.1.3 使用Ajax获取数据

在src/api目录下新建getData.js文件,封装获取数据的函数getData()

在getData.js中导入ajax文件中需要用到的方法

import {
      
       getJSON } from './ajax';

将源码中的数字,放在新建的config.js文件中,当做配置,方便定位更改

config.js

export const SUCC_CODE = 200;
export const TIMEOUT = 30000;

getData.js

import {
        
         SUCC_CODE, TIMEOUT } from './config';

slider/index.js

import render from './slider.art';
import {
        
         getData, getDelayedData } from 'api/getData';

3.1.4 加载中组件

在src/components目录下新建加载中组件loading,内部创建模板文件,并进行简单布局,加入所需的资源
index.art

将接口地址封装起来,新建config.js文件,方便替换.

slider/config.js

export const URL ='https://www.imooc.com/api/mall-PC/index/slider?icode=J6DDC8E3E7A8BF54C';