前端开发规范-华为云

ASTRO轻应用 ASTROZERO-Widget开发规范:样式文件

样式文件样式文件中，图片及字体文件的引用，需使用相对路径。字体文件需要放置在与样式文件同级的目录中，目录名称为font、fonts（两个任选其一即可），可设置子层目录，子层目录命名无要求。目录及图片、文件的命名仅支持数字、字母（大小写均可）、下划线和中划线。支持的图片格式，包含png、jpg、jpeg、gif、bmp和webp。支持的字体文件格式，包含tiff、woff、ttf、otf、eot和svg。多个Widget样式可以抽取为单独库文件，独立库文件可以方便进行整体样式主题的切换。缺点是Widget的运行，需要对这个库文件产生依赖。如果Widget比较独立，也可以将样式文件定义到Widget作用域的css中。

ASTRO轻应用 ASTROZERO 前端开发规范

ASTRO轻应用 ASTROZERO-Widget开发规范:桥接器Bridge

桥接器Bridge Widget数据访问需要封装到Bridge中，不允许在Widget中，直接通过ajax访问业务数据服务。通过Bridge的封装，可以保持Widget的稳定性。未来数据源的切换不需要升级Widget，只需要切换Bridge即可。对于数据消费类的Bridge，mock目录不允许为空。 Mock数据会在编辑状态加载，如果直接调用API，可能会因为API的不稳定而引起UI渲染异常。一个查询API一个Bridge，更新API当前可以共用同一个Bridge。前端对象需要在Bridge中，进行明确定义，字段清晰。

ASTRO轻应用 ASTROZERO 前端开发规范

ASTRO轻应用 ASTROZERO-Widget开发规范:函数/方法注释

函数/方法注释函数/方法注释采用典型的JSDoc的注释方式。函数注释入参说明：@param + 1个空格+ {参数类型} + 1个空格 + 参数名+ 1个空格 + 参数说明。函数注释出参说明：@return + 1个空格 + {参数类型} + 1个空格 + 出参说明（如果没有出参，则出参说明可不写）。有关键逻辑或者重大变更时，增加改动者及改动描述。 /** * 在地图上创建标志 * * @param {String} latLng 经纬度信息 * @param {Object} mapInfo 地图描点信息 * @return {Boolean} 在地图上创建点选标志的结果 * @version 20180310 modify by xxx shangsan 修改地图上描点的样式 * @version 20180314 modify by xxx wangwu 在地图上描点增加事件发送，供外部订阅 */ var placeMarkerAndPanTo=function(latLng, mapInfo) { //返回创建点选标志的结果 return true; }

ASTRO轻应用 ASTROZERO 前端开发规范

ASTRO轻应用 ASTROZERO-Widget开发规范:开放性

开放性 Widget自身是开放的，直接引用业界优秀的开源组件可以提高开发效率。例如，使用MVVM框架Vue（Vue相比AngularJS更轻量，性能更优）以及使用基于Vue的前端控件库Quasar，Element-UI。不允许引入JQuery，因为框架已默认提供，引入后会引起运行冲突异常。非特殊场景，组件的尺寸大小不建议写成固定值，可以指定最大/最小值。非特殊场景，不允许直接对DOM元素添加 CSS 。DOM元素的样式通过显式的class引用，保证样式只作用在当前组件。

ASTRO轻应用 ASTROZERO 前端开发规范

APPCUBE-Widget开发规范:函数/方法注释

函数/方法注释函数/方法注释采用典型的JSDoc的注释方式。函数注释入参说明：@param + 1个空格+ {参数类型} + 1个空格 + 参数名+ 1个空格 + 参数说明。函数注释出参说明：@return + 1个空格 + {参数类型} + 1个空格 + 出参说明（若没有出参，则出参说明可不写）。有关键逻辑或者重大变更时，增加改动者及改动描述。 /** * 在地图上创建标志 * * @param {String} latLng 经纬度信息 * @param {Object} mapInfo 地图描点信息 * @return {Boolean} 在地图上创建点选标志的结果 * @version 20180310 modify by xxx shangsan 修改地图上描点的样式 * @version 20180314 modify by xxx wangwu 在地图上描点增加事件发送，供外部订阅 */ var placeMarkerAndPanTo=function(latLng, mapInfo) { //返回创建点选标志的结果 return true; }

APPCUBE 前端开发规范

APPCUBE-Widget开发规范:桥接器Bridge

桥接器Bridge Widget数据访问需要封装到Bridge中，不允许在Widget中直接通过ajax访问业务数据服务。通过Bridge的封装，可以保持Widget的稳定性。未来数据源的切换不需要升级Widget，只需要切换Bridge即可。对于数据消费类的Bridge，mock目录不允许为空。Mock数据会在编辑状态加载，如果直接调用API可能会因为API的不稳定而引起UI渲染异常。一个查询API一个Bridge，更新API当前可以共用同一个Bridge。前端对象需要在Bridge中进行明确定义，字段清晰。

APPCUBE 前端开发规范

APPCUBE-Widget开发规范:开放性

开放性 Widget自身是开放的，直接引用业界优秀的开源组件可以提高开发效率。例如，使用MVVM框架Vue（Vue相比AngularJS更轻量，性能更优）以及使用基于Vue的前端控件库Quasar，Element-UI。不允许引入JQuery，因为框架已默认提供，引入后会引起运行冲突异常。非特殊场景组件的尺寸大小不建议写成固定值，可以指定最大/最小值。非特殊场景不允许直接对DOM元素添加 CS S，DOM元素的样式通过显式的class引用，保证样式只作用在当前组件。

APPCUBE 前端开发规范

APPCUBE-Widget开发规范:样式文件

样式文件样式文件中图片及字体文件的引用，需使用相对路径。字体文件需要放置在与样式文件同级的目录中，目录名称为font、fonts（两个任选其一即可），可设置子层目录，子层目录命名无要求。目录及图片、文件的命名仅支持数字、字母（大小写均可）、下划线和中划线。支持的图片格式包含png、jpg、jpeg、gif、bmp和webp。支持的字体文件格式包含tiff、woff、ttf、otf、eot和svg。多个Widget样式可以抽取为单独库文件，独立库文件可以方便进行整体样式主题的切换。缺点是Widget的运行需要对这个库文件产生依赖。如果Widget比较独立，也可以将样式文件定义到Widget作用域的css中。

APPCUBE 前端开发规范

云服务器内容精选

前端开发规范

7*24

备案

专业服务

退订

建议反馈

售前咨询热线