OneCode 核心概念解析——Page（页面）

原创

OneCode

发布于 2025-06-20 10:48:19

3560

文章被收录于专栏：OneCode 低代码OneCode 低代码

在接触到OneCode最先接触到的就是，Page 页面，在低代码引擎中，页面（Page）设计的灵活性是平衡 “快速开发” 与 “复杂需求适配” 的关键。以下从架构设计、组件系统、配置能力等维度，解析确保灵活性的核心策略：

一、OneCode 从Page页面开始

1，创建一个Page

我们进入到OneCode编辑器，点击新建一个页面，输入页面名称：

添加图片注释，不超过 140 字（可选）

切换到代码界面：

添加图片注释，不超过 140 字（可选）

xui.Class('org.view.Test', 'xui.Module',{ //类结构信息
    Instance:{
        initialize : function(){ },//初始化函数
        Dependencies:[],//
        Required:[],
        properties : {
            "autoDestroy":true,
            "bindClass":[],
            "currComponentAlias":"TestMain",
            "dock":"fill"
        },
        events:{},
        ViewMenuBar:{},
        functions:{},
        iniComponents : function(){
            // [[Code created by JDSEasy RAD Studio
            var host=this, children=[], properties={}, append=function(child){children.push(child.get(0));};
            xui.merge(properties, this.properties);

            append(
                xui.create("xui.UI.Block")
                .setHost(host,"TestMain")
                .setDock("fill")
                .setBorderType("none")
            );

            return children;
            // ]]Code created by JDSEasy RAD Studio
        },

        customAppend :  function(parent, subId, left, top){ return false} 
    } ,
    Static:{
        "designViewConf":{
            "touchDevice":false  //是否支持触屏
        },
        "viewStyles":{

        }
    }

从代码结构上来看，构建了一个，自定义的Class JS类，类的命名空间：org.view ，继承于xui.Module。,2

2，增加一个控件

添加图片注释，不超过 140 字（可选）

查看代码变化：

添加图片注释，不超过 140 字（可选）

3，通过浏览器直接来预览

添加图片注释，不超过 140 字（可选）

二、OneCode Page页面概念及工作原理

1，工作原理

从第一章节中，我们可以看出Page是OneCode一个基础的入口程序，他允许用户创建一个指定命名空间的Url访问地址，在这个地址（org.view.Test.cls），用户可以直接访问该程序的打包运行程序。同时也从原理上解释了，每一个页面最终会形成一个 .js Class 文件（Test.js）允许用户进行ProCode 处理。

添加图片注释，不超过 140 字（可选）

2，页面组成及沙箱设计

页面Page 在OneCode中是一个最小的，全功能组合容器，它允许用户根据业务需要独立装载运行。在特定的命名空间下，可以自定义作用域该页面的（页面属性）值，同时也可以封装在自身页面空间内的“沙箱函数”（页面函数），这些设计及保障了用户的灵活性同时沙箱机制也降低了单独页面对整体框架的污染。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

3，页面交互与事件传递

在前端框架设计中，跨页面交互时一个难点但同时也是设计者非常关注的一个重点。特别是后续的程序如何做到向前及向后兼容，向前兼容时需要通知框架自身的状态如：合适创建、渲染完成。合适关闭销毁等以便于框架能够做相应的用户交互以及对象内存处理等。向后兼容必要性则会更多一些，Page需要将自身的页面属性进一步做标识，在安全的前提下允许，后续page面能够通过外部接口修改访问。同时对于外部页面交互产生的事件及时向内部组件完成交互。OneCode 在这一方面设计上，采用了开放性的页面属性设计，允许外部程序针对页面开放的属性完成“读、写”操作。同时将该事件向内传递。

（1）开放属性配置