Introduction 框架概述
前言
现有的许多前端框架都定位为中后台开发,比如ANTDESIGN和ELEMENT,功能和UI都封装好了,前端开发或者后端开发不需要审美,直接拷贝使用;对于专注于开发的人员来说的确简单省事,但是对于有独特审美或者有修改强迫症的人士来说,为达到某个效果,既改CSS,又改JS,还要重构HTML,的确是一件费时费力的事情,如此大费周章还不如自己重写一个辅助插件。所以,我们的框架一定要支持开发人员随心所欲的修改,方便使用框架现有的css类和html结构开发新插件。
很多展示型小型项目没有必要使用大而全的重型框架,比如企业官网,不可能为实现一个特效把诸多JS文件加载到页面,影响打开速度不说,维护都是个问题。小团队做展示型小项目总希望短平快,一套常用代码,不断复用到不同项目中去。所以,我们的框架一定需要考虑到多种设计风格需求,而且框架代码必须是可快速装卸的。
每一个设计师和前端人员在页面搭建上都会经历一段摸爬滚打的过程,他们需要一盏明灯给他们指引,少走弯路,而且最好可以一边学习一边实践,在实践中不断提高页面制作能力。本框架会以流程化的方式构建页面,同时会辅以诸多的在线实例,跟着框架使用说明一步一步,像搭建积木一样,所见所得。
总结:本框架是面向设计,满足设计多样化需求的前端解决方案,减少或剔除JS文件资源和API。
目录结构和说明
列举ax前端框架的核心文件目录结构,一目了然。
├── src/ │ ├── css/ │ │ ├── ax.css │ │ ├── ax.min.css │ │ ├── ax-response.css │ │ ├── ax-response.min.css │ ├── images/ │ │ ├── default-head.jpg │ │ ├── crpic.png │ │ ├── empty.svg │ │ ├── loading.gif │ │ ├── loading.svg │ │ ├── loading-white.svg │ ├── js/ │ │ ├── ax.js │ │ ├── ax.min.js │ │ ├── jquery-1.10.2.min.js │ │ ├── svgSprites.js │ │ ├── svgSprites.min.js │ ├── fonts/ │ │ ├── Oswald-ExtraLight.ttf │ │ ├── Oswald-Light.ttf │ │ ├── Oswald-Regular.ttf │ │ ├── Oswald-Medium.ttf │ │ ├── Oswald-SemiBold.ttf │ │ ├── Oswald-Bold.ttf │ ├── plugins/ |
核心资源 样式资源 核心样式 核心样式压缩版 自适应样式(可选,需要多终端自适应时请引用) 自适应样式压缩版 图片资源 默认头像 版权图片 空内容提示图片 内容加载Gif格式 内容加载Svg格式 内容加载Svg格式(适用于深色底) 脚本资源 核心脚本 核心脚本压缩版 jquery核心文件 SVG精灵图文件 SVG精灵图文件压缩版 字体资源 Oswald字体ExtraLight(可选,比较粗且高) Oswald字体Light(可选,比较粗且高) Oswald字体Regular(可选,比较粗且高) Oswald字体Medium(可选,比较粗且高) Oswald字体SemiBold(可选,比较粗且高) Oswald字体Bold(可选,比较粗且高) 插件资源 |
核心文件说明
ax.css
:包含了常用元素reset,ax风格样式和插件修改样式,未加入终端适配样式。ax-response.css
:终端适配文件,引入后可实现终端自适应。ax.js
:包含了终端适配、Cookie缓存、Popup弹窗、Scroll滚动条美化、Menu菜单、Tab切换、Drawer抽屉、Select下拉菜单、Lazyshow、Gotop等。svgSprites.js
:iconfont的svg版本,使用方法点击这里。
其他说明
本框架引用了jquery-1.10.2.js
,该版本比较稳定,当然您使用其他jq版本也是没问题的,建议使用1.8以上版本。