1. 目录
1.1. 开发规范
开发人员需遵照开发规范执行
1.1.1. 基本原则
- 由于jquery在移动端的开发存在性能问题,页面不允许导入jquery库,如果已经习惯了jquery开发的,可以导入zepto库进行代替;
- 样式需进行兼容处理;
- UE交互保持一致性、UI风格保持一致性、代码风格保持一致性;
- 谨慎引入第三方前端库,引入时需要充分考虑性能、稳定性、可维护性和技能要求。
1.1.2. 页面开发规范
- 页面使用UTF-8编码
- 页面首屏数据量大小在1M以内,多余的部分需要使用异步导入的方式;
- 禁止ajax同步请求;
- 尽可能减少 div 嵌套;
- 样式代码不能使用CSS表达式;
- dom选择尽量使用ID选择;
- 所有的标签名必须小写;
- 所有的标签属性名必须小写;
- z-index的最高使用层级为49;
- 不要随意的使用position定位;
- link标签写在head标签内;
- script标签写在body标签结尾处;
- 国际化资源以中文简体资源为首选资源;
- 业务逻辑入口需放在cmp.ready回调里;
- 页面采用自适应屏幕宽度设置。
Example
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
1.1.3. 代码结构
- html文件放到html文件夹;
- css文件放到css文件夹;
- js文件放到js文件夹;
- 图片文件放到img文件夹;
- 国际化资源文件放到i18n文件夹。
1.1.4. 命名
camel命名风格
1.2. 项目结构规范
project
|----html <!--html文件夹-->
-- index.html
|----js <!--js文件夹-->
-- index.js
|----css <!--css文件夹-->
-- index.css
|----img <!--图片文件夹-->
|----i18n <!--国际化文件夹-->
-- project_en.js
-- project_zh_CN.js
-- project_zh_TW.js
|----s3scriptjspdata <!--S3编译文件夹-->
-- project_m3_commandata.data
-- project_wechat_commandata.data
-- project_dingding_commandata.data
-- manifest.json <!--模块配置文件-->
-- newModule_m_api.s3js <!--模块消息穿透、门户待办穿透api设置文件-->