# 前端界面规范 #
-------------------
### HTML ###
* HTML的参数统一使用双引号“”声明。
* HTML标签应遵循语义化的原则,合理使用article section h1~h6 p div dd dt dl table tr td form input button。
* HTML禁止内联样式,必须写到样式文件中
* HTML涉及资源地址展示都应该使用cdn函数来获取地址
### ejs ###
* 页面文件采用`snake case`作为命名规则,即单词以下划线分割(这遵循前端及restful全小写的基本原则)
* 所有项目的页面文件放在`template`根目录下
* 所有ejs模板放在`template/include`目录下(include目录下的ejs,构建时不编译,否则会报错)
* 所有模板(包括ejs模板和angular模板都需要采用下划线`_`开头,如_header.ejs,_form.ejs)
* 不同模块的模板文件建议单独建一个文件夹管理
* 路径采用相对路径
### JS ###
* javascript采用`require`作为AMD模块引入
* javascript函数、变量采用小驼峰命名法,首字母小写。如doClick()
* 类、常量类采用大驼峰命名法,首字母大写,如Apple。
* 常亮采用全大写,用下划线“_”作为单词分割。
* 代码必须分号结束,包括json定义,内部方法定义等。
* js代码拼接HTML代码时,最外层用单引号,HTML代码的参数保持使用双引号。如var html='<input type="text">';
* 对象私有成员、私有方法采用下划线(_)作为前缀,如_id
尽可能不直接声明全局变量,需要使用全局变量时也应该声明一个专用的全局对象存放变量如var Global={FLAG:true,FLAG_2:false};
### 页面重构 ###
* 页面采用rem等比缩放进行屏幕自适应,UI设计标准尺寸为iphone6屏幕即750*1334
* `viewport`不用写,用`flexible.js`进行自适应
* 页面尺寸以`rem`为单位
* 页面基本px转换:以iphone6尺寸为准,宽750转为7.5rem,即一个在iphone6屏幕下展示100px宽度的元素,需要换算成1rem。
### less ###
* 项目采用全部样式分文件编写,统一编译压缩到`app.less`中
* 名词解释
* lg 大 sm 中 xs 小
相关推荐
阿里前端开发规范是阿里巴巴集团为前端工程师制定的一套详尽的工作指南,旨在提高代码质量、提升团队协作效率、保持代码一致性。这套规范涵盖了HTML、CSS、JavaScript、工程化、性能优化等多个方面,对于任何前端...
【描述】提到“是一套比较编写比较规范的前端界面”,这意味着这个界面设计遵循了良好的编程实践和标准。前端开发规范通常包括代码结构清晰、注释充分、遵循语义化HTML、CSS和JavaScript代码,以及利用模块化和组件...
【WEB前端开发规范文档】 前端开发规范旨在提升开发效率,保证代码质量,便于团队协作以及后台功能添加和前端后续维护。遵循Web标准、语义化的HTML、结构与表现行为分离和良好的兼容性是规范的核心原则。 **文件...
本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性...
### WEB前端开发规范文档知识点详解 #### 一、概述 WEB前端开发规范文档旨在通过制定一系列标准化的操作流程和规范,提升开发效率与质量,确保项目的可持续性和可维护性。该文档详细介绍了WEB前端开发的基本准则、...
Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面。Vue前端编码规范是开发者遵循的一套规则和最佳实践,旨在提高代码质量、可维护性以及团队间的协作效率。以下是一些关于Vue编码规范的重要知识点: 1...
《前端开发技术规范》文档详述了前端开发过程中的各种规范和最佳实践,旨在提高代码一致性,提升多人协作效率,并确保网页性能优化。以下是对文档主要内容的详细解释: 1. **基本规范**: - **结构、样式、行为...
【Web前端开发规范文档概述】 Web前端开发规范文档旨在提高团队协作效率,确保代码的可维护性和质量。规范遵循Web标准,强调语义化的HTML、结构表现行为分离以及良好的浏览器兼容性,同时关注页面性能,以简洁、...
【WEB前端开发规范文档+CSS命名规范】 前端开发规范旨在提升团队协作效率,确保后台人员能够轻松添加功能,以及前端开发者能高效地进行优化维护,从而产出高质量的文档。一旦这个规范被确认,所有前端开发人员都...
本文主要讨论的是一个前端文件结构规范,尤其关注JavaScript和JSP文件的组织。规范的目的是为了统一和规范化项目中的文件结构及其依赖关系,确保项目的清晰度和可扩展性。 首先,基本的文件结构如下: 1. **JS ...
首先,前端样式规范对于提升用户界面的统一性和易用性至关重要。在表格(Table)的设计中,有一些关键点需要注意: 1. 对于具有互斥操作的按钮,如上线/下线、启动/暂停,应使用`disabled`状态来表示不可用,而不是...
《前端代码编写规范》 前端页面的编码规范是提升团队协作效率、确保代码质量和易于维护的重要准则。这一规范旨在引导开发者深入理解HTML、CSS、JavaScript,并优化页面性能。以下是具体的编码指导原则: **文件...
APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、...
在微信小程序前端界面生成的过程中,DIY官网设计平台能够将用户的设计直接转化为符合微信小程序规范的代码,极大地简化了开发流程。 1. **app.js**: 这是微信小程序的全局脚本文件,用于设置小程序的生命周期函数、...
编码规范主要关注于后端和前端的源代码编写,而界面规范则侧重于前端设计和用户体验。下面将详细讨论这两个方面的内容。 首先,编码规范是程序员之间的约定,它规定了如何组织代码结构,命名变量、函数和类,以及...
在P2P(点对点)平台的手机端前端界面设计中,开发者通常需要考虑多个关键因素以提供用户友好的体验。以下是一些相关的知识点: 1. **响应式设计**:P2P平台的手机端界面必须具备响应式布局,以适应不同尺寸的屏幕...
### WEB前端开发规范文档+CSS命名规范 #### 规范目的 为了提升团队协作效率、便于后台人员添加功能以及前端后期优化维护,本规范旨在输出高质量的文档。一旦该规范文档被确认,前端开发人员必须按照本文档所规定的...