构建一个前端库-架构分析
radf是此库命名,意为快速应用开发框架。
radf按类的功能分为Data、布局、数据组件、工具。
Data类:用于绑定从服务器端传来的数据。
布局:有Pannel、StackPannel、GridPannel、Splitter、TabForm,用于页面元素风格构建。
数据组件:MsgBox、Input、Radio、CheckBox、Select、Image、gridData、Portlet、RollerMenu、Calendar、DateInput、MoveWindow、Marque、FusionCharts后面五个是我做的,嘿嘿
工具: clone、copy、dataUnbind、formatNumber、getHelp、serializeObject、setHelp、toDate、toBorder、releaseDate、getNameFromList、getValueFromList
此应用框架意义在于,封装解决因浏览器兼容性造成的差异、减少开发工作量,使开发人员只用关注业务及简单的处理页面摆放。
radfBase文件是此类库入口:
类库中大量使用以下方法
(function(){})() 立即加载此函数,在jQuery源码中也是如此。
//设置应用程序加载入口
window.onload = _iniApp;
function _iniApp() {
if (radf.main) radf.main(radf);
}
将入口函数绑定到onload下,页面准备完成时调用,此时应用页面为以下形式:
__radf.main = function (radf) {
radf.Root().load();
}
此时应用会自动加载所有被实例化的Radf对象,完成加载。
类库中有两大基类、1、Date 2、Control
如果使用过MVVM模式便会知道,xaml文件中界面View绑定对应的ViewModel后,改变View上面的数据,与之对应的ViewModel便会产生相应的变化。
并且,ViewModel可以被多个View绑定,与之产生的效果就是,绑定同一个ViewModel的View改变其中一个的界面数据,另外的View也会产生相应的变化。
那么这个方法的实现是什么呢?
new Control({DataSource:data});
当这样一个Control绑定了data之后,
Control.data.controlArray.push(this);
将这个Control放入data的controlArray,
当我们的界面元素操作后发现数据变动时,
触发this.DataSouce.handleControl方法。
此方法用于重新加载所有被绑定对象的数据。
for(i in this.DataSource.control)
this.DataSource.control[i].value = _value;
到此,mvvm模型基本建立。
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ThreeJs-16智慧城市项目(重磅以及未来发展ai)
· 软件产品开发中常见的10个问题及处理方法
· Vite CVE-2025-30208 安全漏洞
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(四):结合BotSharp
· MQ 如何保证数据一致性?