一个基于AMD规范的组件库，内含简洁SPA框架，便于快速构建单页面应用系统
YoungFront（简称 Y⋅F）是一个由几个“年轻”但热爱前端技术的前端人组成的兴趣小组，寄意于“年轻有活力”。
YFjs是一个组件库，其中大部分是一些第三方的库（感谢众多前端大神），比如jQuery、Requirejs、Bootstrap等开源库和框架是这个组件库的核心依赖，我们基于这些库和框架做了一些前端“轮子”，并按照 Requirejs 的模块加载规则进行了规范和整理，使众多前端组件更易使用。
另外，这个组件库里还包含一个我们精心设计的前端框架 yfjs/spa。顾名思义，它是一个 SPA（Single Page Application 单页面应用）框架，风格简洁，配置和约定共同驱动，顶部导航 SPA框架 下详细介绍了这个框架，欢迎试用。
总之，YFjs不仅能够帮助我们快速使用弹出框、美化后的下拉框和单/复选框、滚动条等UI组件，也能使用JSON转换、Cookie处理、日期格式处理等工具插件，更能配合内含的 SPA 框架快速构建一个单页面应用系统，让我们的前端开发更便捷。
编译包下包含目录 minified 和 original，分别对应 压缩后 和 未压缩 的组件库代码；另包含 JavaScript 文件 yfjs.js，是组件库的入口 JS 文件。
目录结构如：
- yfjs-lib/
- minified/
- fonts/
+ FontAwesome/ <-- FontAwesome图标库字体
+ GlyphiconHalflings/ <-- Bootstrap内含图标字体
+ Loader/ <-- 默认加载中样式图标字体
- modules/
- ... <-- 已打包的各组件模块
- styles/
- base.css <-- 基本样式文件
- yfjs-core.js <-- 组件库核心 JS 文件
- original/
... <-- 与 minified 目录下结构一致
- yfjs.js <-- 组件库入口 JS 文件
使用组件库时，只需在 head 标签内引入组件库的入口 JS 文件 yfjs.js 即可。
<script src="[yfjs-lib path]/yfjs.js"></script>
[yfjs-lib path] 可根据项目的情况自行定义，下同。
入口 JS 文件会 自动引入 基本样式文件、核心 JS 库文件等组件库的相关静态资源。
基本样式文件 base.css 内包含 Bootstrap 3 的全套样式，以及默认引入的组件和一些增强样式。在 Base样式 下可以查阅相关文档。
核心 JS 文件 yfjs-core.js 内包含以下默认引入的组件（按先后次序）：
- Requirejs (enhanced on v2.1.17)
- jQuery (v1.9.1)
- jquery Plugins
- $.fn.serializeObject <-- 将表单内容序列化为 json 对象
- $.parseQuery <-- 将 URL 路径上的参数字符串解析为 json 对象
- Bootstrap Plugins (enhanced on v3.3.4)
- transition <-- 动画效果适配插件
- scrollspy <-- 滚动监听插件
- affix <-- 固定元素插件
- dropdown <-- 下拉框组件
- Other Plugins
- Loader <-- 默认加载中效果组件
- metismenu <-- 折叠菜单组件
- iCheck <-- 单选按钮和复选框美化组件
- YFjs (v0.8.2) <-- 组件库工具类
在 YFjs工具 下可以查阅核心 JS 库的相关文档。
一个完整引入组件库资源的 HTML 页面类似于：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<title>Web Title</title>
<!-- YFjs Lib -->
<script src="[yfjs-lib path]/yfjs.js"></script>
</head>
<body>
</body>
</html>
在引入组件库的入口 JS 文件时，我们可以通过定义以下属性来扩展组件库的功能。
data-cache: 全局缓存开关，默认为 true。设为 false 则关闭缓存
data-debug: 调试模式开关，默认为 false，使用压缩后的资源。设为 true 时将使用未压缩的资源
data-debug-css: 基本样式文件的调试模式开关，默认为 data-debug。为 false 时引入压缩后的基本样式文件，否则引入未压缩的基本样式文件
data-debug-module: 组件模块的调试模式开关，默认为 data-debug。为 false 时引入压缩后的组件模块文件，否则引入未压缩的组件模块文件
data-base: 应用访问基路径，默认继承 <base> 标签值。
data-base-require: 应用内自定义模块引入基路径，默认相对于 data-base。
data-base-css: 是否引入组件库的基本样式文件，默认为 true。设为 false 时不引入基本样式文件。
data-compatible: 是否引入所有兼容脚本，默认为 false。设为 true 时自动判断兼容性并引入兼容脚本。
data-compatible-modernizr: 是否引入 Modernizr 兼容脚本，默认为 data-compatible。了解 Modernizr。
data-compatible-respond: 是否引入 respond 兼容脚本（兼容 Media Query），默认为 data-compatible。
data-compatible-html5: 是否引入 html5shiv 兼容脚本（兼容 HTML5 新元素），默认为 data-compatible。
data-compatible-es5: 是否引入 es5 兼容脚本（兼容 ES5 API），默认为 data-compatible。
data-compatible-es6: 是否引入 es6 兼容脚本（兼容 ES6 API），默认为 data-compatible。
data-compatible-json: 是否引入 JSON 兼容脚本（兼容 JSON.parse 和 JSON.stringify），默认为 data-compatible。
data-main: 应用入口 JS 文件。
下面是一个在研发阶段使用的入口配置项示例：
<script src="[yfjs-lib path]/yfjs.js?v=0.8.2"
data-cache="false"
data-debug="true">
</script>
表示支持的版本；优表示更佳体验版本。
| 类型 | |||||
| 版本 |