CC-lib无线跨平台web页面自动化生成技术的设计实现

简介:

摘要:前端开发通常需要开发多套web页面代码,从而为不同的移动终端浏览器开发不同的web页面,例如低端手机需使用wml,高端手机则支持html和javascript等。本文介绍了一种跨平台web页面自动化生成技术,该技术利用php设计了一个中间层(CC-lib),可以屏蔽底层的web展示语言的差异,程序运行时动态生成各个UI组件的wml/xhtml/html代码,从而可以有效降低前端开发人员的页面开发维护成本。

关键词:浏览器兼容,跨平台,无线,web前端,自动化生成,CC-lib

技术领域:无线,web前端

 

一、背景

在无线领域,通常要为不同的机型,使用不同的编程语言(wml/xhtml/html)编写网页,往往存在下面几个问题:

(1)维护3份代码,开发效率低、维护成本高。

(2)应用开发人员需要关注不同平台的语言差异,调试、自测繁琐。

(3)业务展现逻辑代码和wml/xhtml/html的标签容易混杂在php模板页面里,使代码编写不便,可读性差。

二、技术实现原理

本文介绍一种名为CC-lib的web页面自动化生成工具(实际是一个php实现的组件库),它通过设计实现一个php中间层,来屏蔽底层平台的编程语言差异。

CC-lib形成一套php下的组件库:如panel,form等可视组件或控件;模板开发人员基于这个库来编写PHP程序;

实现编写一套php代码,可分别生成3套(wml/xhtml/html)模板(运行时生成不同的语法标签)。

解决了html标签与程序代码逻辑混杂在一起的问题。

三、CC-lib的设计

1,CC-lib支持的平台

(1)低端手机:wml,古老的手机、低端山寨机

(2)普通手机:xhtml,各种大中小屏的手机

(3)高端手机:html,如iphone/android

2,CC-lib的特点

(1)在组件库的底层内部,在程序运行时自动生成对应的wml或xhtml或html标签来输出,最终形成网页。

(2)组件库底层来决定使用特定平台的哪些特定标签来绘制组件,上层应用开发人员可以不关心底层实现细节。

(3)一些xhtml支持,但是wml不支持的特性,例如左右布局、颜色、锚点等,可以通过底层来进行模糊容错处理。

(4)可支持全局的样式、风格的统一,换肤方便。

(5)是独立的php库,可以单独使用。

(6)新的需求,可以通过增加新的UI组件来扩展。例如iphone手机上的一些动画特效。

(7)采用类似jquery的链式的代码风格:$cc->class_name(‘head_title’)->html(‘hello’)->render();

3,CC-lib的整体设计

CC-lib设计一套公共的接口,不同平台(wml/xhtml/html)下分别使用不同的子类去实现这些接口。例如:CCForm接口,分别由3个平台下的CCFormWML类、CCFormXHTML类、CCFormHTML类实现。

CCIPanel面板接口是CC-lib的核心API接口。CCIPanel是最基础的元素,它代表一个网页区域,xhtml版中采用div或span实现,其它的元素都继承自这个类。

可以往面板中添加各种网页元素,如图片、链接、文本、子面板、表单等。

 

四,CC-lib需处理的一些兼容性问题

不同平台间的细小差异是很多的,下面列出常见的几点:

1,块状元素与行内元素在不同平台下的不同展现。例如:xhtml下可以使用div/span来分别模拟块状元素和行内元素,然而wml平台下没有div和span元素,只能使用br来模拟。

2,左右布局的支持。xhtml下可以支持使用table来做左右两列布局,而wml下则无法支持,只能进行退化处理。

3,form表单的差异。 wml的表单是用anchor+go标签来做的,一个提交按钮一个anchor+go;而xhtml里,表单是用form实现的,一个form里可以直接有多个提交按钮,且多个按钮间是可以共用一批hidden等input表单参数的。

五、CC-lib使用实例

下面是基于CC-lib编写的一个简单页面代码,运行之后将生成使用wml标签来编写的web页面。

 

六、小结
CC-lib可以用于实现wml/xhtml/html等平台的兼容性处理,当不同平台版本之间的产品功能差异不大时,可以实现一套代码同时为多个平台浏览器进行web页面展示。

by yangzuncheng

 











本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/742976 ,如需转载请自行联系原作者
相关文章
|
16天前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
42 7
|
2月前
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
127 28
|
2月前
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
93 6
|
4月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
112 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
7月前
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
|
7月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
122 6
|
7月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
159 3
|
7月前
|
运维 监控 安全
运维自动化:提升效率与可靠性的关键技术
在信息技术飞速发展的今天,企业对IT系统的稳定性和高效性要求越来越高。运维自动化作为实现这一目标的重要手段,通过软件工具来模拟、执行和管理IT运维任务,不仅大幅提高了工作效率,还显著增强了系统的可靠性。本文将探讨运维自动化的概念、实施步骤以及面临的挑战,旨在为读者提供一份关于如何有效实施运维自动化的指南。
|
7月前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
205 1
|
7月前
|
机器学习/深度学习 数据采集 安全
道路缝隙识别:智能交通与自动化巡检的技术应用
本文介绍了利用现代计算机视觉和深度学习技术实现道路缝隙自动化识别的方法,涵盖图像采集、预处理、缝隙检测、分类评估及报警报告生成等步骤,旨在提高城市交通管理和道路维护效率。通过卷积神经网络(CNN)模型的构建与训练,实现了对道路裂缝的高效准确识别,有效提升了道路巡检的自动化水平。