elfFrame.js
elfFrame.js是一套独立的前端WEB开发框架，不依赖其它任何框架，并集成常用组件、字体、图标等，学习成本低，可简单快速地搭建出精彩酷炫的网站.
为什么选择elfFrame
- 01、使用动态参照布局 (发明专利)，自主研发，可以减少页面布局痛点(了解动态参照布局更多...)；
- 02、反编译，由于使用headLoader.js加载引擎，程序代码不会暴露在外，很大程度上防止了反编译的可能(了解headLoader更多...)。
- 03、"0成本"的网站加速，由于使用了浏览器的IndexedDB数据库存取模块，从而极大地降低了对服务器性能地依赖；
- 04、实现离线页面，框架可将所有子页面的JS/CSS/HTML文件全部缓存，另外还支持图片、字体库等二进制文件，因此可以开发离线页面。
- 05、自主字库，elf_round字体是自主设计并开发的，各字母、数字间强化区别，美观大方容易识别(了解elf_round字体更多...)；
- 06、自主图标库，所有图标都是自主设计并开发的，拥有版权，放心使用(了解图标库...)；
- 07、自主开发的丰富组件集成(了解UI精灵组件更多...)；
- 08、无学习成本，所有组件都具有通用方法initData、getValue、setValue等，不必记忆过多的命令，前端开发工程师可直接上手；
- 09、转场动画特效，既页面间的切换采用动画方式可供选择，方式多样仅需修改参数即可；
- 10、提供常用的JS库，越过重复繁琐的基础开发过程直奔项目主题；
- 11、内置自动化测试工具，轻松找到bug；
- 12、系统化管理，提供config.js配置文件，配置灵活简单；
- 13、自研工程化工具——local-site(了解local-site更多...)，可实现web服务，接口代理服务，文件自动关联服务，代码压缩丑化服务等功能。
框架预览
如何安装
- github或者npm都可以获取项目代码;
方法1:通过github获取代码,克隆地址:
https://github.com/baiyukey/elfFrame.git
方法2:如果您的电脑已经安装npm环境,可通过如下命令获取代码:
npm i elf-frame //或者 npm i https://github.com/baiyukey/elfFrame.git
如何建立框架页
框架页也可以叫入口页面,例如想要建立一个newIndex.html的页面,方法如下:
- 在newIndex.html页面中嵌入JS,方法如下:
<script type="text/javascript" data-dir="/media/" data-js="libs/jquery.min,libs/elfFrame.min" src="/media/js.min/utils/headLoader.min.js?v=2025-07-07"></script> - 在newIndex.html页面中加入标准的HTML元素
<article id="elfFramePages" data-file="/subPage/home.html" ></article>
<!--框架子页面容器(可选),
id必须为"elfFramePages",所有子页最终都在"#elfFramePages"元素中展现；
data-file属性必选,用于设置欢迎页,标签类型用div,section也可以.-->
<div data-file="/componentSubpage/inc/leftMenu.inc.html" id="leftMenu"></div>
<!--加载框架页面HTML代码的容器(可选),例如页头,页脚,菜单等等,
data-file属性必选,用于指定加载哪个页面的HTML代码,
id属性可选,标签类型用div,section什么的也可以.-->当页面中同时存在"#elfFramePages"和"#leftMenu"两个元素时,会激活动态参照布局功能(还需要加载elfLayout.js)
- 在newIndex.html页面中加入img元素
<img data-file="/images/pic.jpg" style="width:100px;height:100px" ></img>
<!--data-file属性必选,elfFrame会根据图片路径自动加载并缓存以便下次快速载入-->
如何创建子页面
项目中的test/subPage/目录下全部为框架子页面,可以为您提供参考; 具体方法如下:
- 在框架中任何位置（包括子页面）添加子页链接:
<a data-href="/test/xxx.html">在#elfFramePages容器中打开</a>； - 不论是框架页还是子页都需要3个同名文件组成,xxx.html, xxx.css, xxx.js,所置目录如下:
html/test/xxx.html
/media/css/test/xxx.css
/media/js/test/xxx.css使用工程化工具local-site可实现创建HTML文件时自动创建关联的文件
框架页切换
- 通过点击链接切换子页面,只要给链接添加"data-href"属性即可，链接可以在框架下的任何位置，包括子页,例如:
<a data-href="/512.html">打开“/512.html”这个页面</a> - 鼠标经过链接切换页面，在链接的上层元素中加入"autoClick"类可以使鼠标划入时自动点击（这个方法适合于左栏菜单场景），例如:
<div class="autoClick"> <a data-href="/512.html">在框架页中打开这个链接</a> <a data-href="/110.html">"autoClick"类包含的链接，在鼠标经过自动触发</a> </div> - 使用JS语句切换页面
window.top.elfFrame.href(`/512.html`)
注意事项
- 不论是框架页还是子页,在编辑完页面相关的JS,CSS文件后,需要进行压缩,因为线上环境只会加载压缩文件.
/elfFrame/index.html对应的CSS,JS文件
/media/css/elfFrame/index.css需要压缩成/media/css.min/elfFrame/index.min.css
/media/js/elfFrame/index.js需要压缩成/media/js.min/elfFrame/default.min.js - 为了减少代码压缩给您带来的额外工作,这里提供一个开源免费的工程化工具local-site，您可以利用它在开发阶段创建一个本地服务，同时在您创建，删除或更改代码时自动完成代码压缩并关联到指定目录等工作.
JS库
elfFrame为开发者提供了一些常用的JS库(elf.js),例如子页面所属框架窗口尺寸自适应函数elf.iframeResize,自定义AJAX函数elf.myAjax,数据转码,正则判断等等...(了解更多)
代码下载
责任声明
- 个人用户免费使用，捐赠请扫页面左栏下方的二维码，您的支持是对知识产权最大的尊重；
- 营利机构,政府部门或者商业用户,您需要联系作者(baiyukey@qq.com)申请一个授权(*推广期酌情免费授权)；
- 作者保留一切法律权力，并对于侵权或者非法使用行为，有权追究一切法律责任；
- UI精灵目前的域名仅有uielf.cn，而且暂未和任何第三方合作，对于冒名合作开发的机构作者保留追究其法律责任的权利。