大连网站关键词推广,网站建设公司的市场定位,海外销售工作难做吗,微信朋友圈营销技巧目录 前言1 项目准备1.1 创建项目目录1.2 搭建项目开发环境 2 项目组件化2.1 在当前环境启动原有项目2.2 顶部组件2.3 幻灯片组件2.4 机酒自由行组件2.5 拆分余下的css文件 3 项目完善3.1 幻灯片组件3.1.1 结构和样式3.1.2 功能实现3.1.3 使用Ajax获取数据3.1.4 加载中组件 3.2… 目录 前言1 项目准备1.1 创建项目目录1.2 搭建项目开发环境 2 项目组件化2.1 在当前环境启动原有项目2.2 顶部组件2.3 幻灯片组件2.4 机酒自由行组件2.5 拆分余下的css文件 3 项目完善3.1 幻灯片组件3.1.1 结构和样式3.1.2 功能实现3.1.3 使用Ajax获取数据3.1.4 加载中组件 3.2 机酒自由行组件 4 源码 前言 在现代Web开发中组件化设计是一种常见的开发模式它有助于提高代码的可维护性、可重用性和可测试性。 通过将一个大型应用程序拆分为多个独立的组件我们可以更加灵活地开发和维护网站。 本文将以慕云游首页为例探讨如何通过组件化设计实现它的页面布局与交互功能。 前置知识: HTML CSS JavaScript webpack art-template 慕云游静态项目
1 项目准备
1.1 创建项目目录 放入提前准备的文件,如封装的ajax
1.2 搭建项目开发环境 初始化项目 在项目所在文件夹打开命令行,输入: npm init安装项目所需的包(node模块): webpack npm install --save-dev webpack webpack-cliart-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?t1583684254005) 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.jsimport { 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.jsexport default DEFAULTS;index.jsimport BaseSlider from ./base.js;
import keyboard from ./keyboard.js;
export default Slider;keyboard.jsimport { LEFT_KEYCODE, RIGHT_KEYCODE } from ./constants.js;
export default keyboard;slider/index.jsimport Slider from ./module;在silder组件下创建按钮的模板文件btn.art,和样式文件btn.css,对左右按钮定位,并在对应js文件中绑定点击事件 slider/index.jsimport ./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?icodeJ6DDC8E3E7A8BF54C;slider/index.js import { URL } from ./config;3.2 机酒自由行组件
4 源码
网盘链接https://pan.baidu.com/s/1PElIjlZpepRxaY6g8ChsVQ 提取码dpq1 未完待续…
