拆解与重构：慕云游首页组件化设计

前言

• 在现代Web开发中，组件化设计是一种常见的开发模式，它有助于提高代码的可维护性、可重用性和可测试性。

• 通过将一个大型应用程序拆分为多个独立的组件，我们可以更加灵活地开发和维护网站。

• 本文将以慕云游首页为例，探讨如何通过组件化设计实现它的页面布局与交互功能。

• 前置知识:
  HTML CSS JavaScript webpack art-template
  慕云游静态项目

1 项目准备

1.1 创建项目目录

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

1.2 搭建项目开发环境

1. 初始化项目
   在项目所在文件夹打开命令行,输入:

   npm init
   

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

   • webpack

   npm install --save-dev webpack webpack-cli
   

   • art-template

   npm install art-template
   

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

2 项目组件化

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

1. 将原项目的文件,复制到Mall项目的src/page/index目录下
   

2. 将原项目中的index.html文件改为index.art,当作模板文件
   

3. 在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';
   

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

2.2 顶部组件

1. 在src/components/topbar目录下创建以下文件
   

2. 在入口文件index.js中引入topbar.js

   //组件
   import 'components/topbar';
   

3. 将index.art文件中topbar内容剪切到topbar.art中
   

4. 在index.art文件中引入topbar.art模板
   

5. 同样的,相关的css内容剪切到topbar.css文件中,并在同目录下的index.js中引入topbar.css

   //css
   import './topbar.css'
   

6. 这个时候我们会发现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文件

1. 将公共的基础样式(如下),放入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';
     

2. 将reset.css也放入公共样式中
   

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

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

3. 找到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';
    

  • slider/index.js

    import { URL } from './config';
    

3.2 机酒自由行组件

4 源码

网盘链接：https://pan.baidu.com/s/1PElIjlZpepRxaY6g8ChsVQ
提取码：dpq1

---

未完待续…