amazeui学习笔记二（进阶开发4）--JavaScript规范Rules

最新推荐文章于 2023-07-15 15:38:31 发布
最新推荐文章于 2023-07-15 15:38:31 发布
阅读量107 收藏
点赞数
文章标签： javascript ui java ViewUI

amazeui学习笔记二（进阶开发4）--JavaScript规范Rules

一、总结

1、注释规范总原则： 

  • As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。
  • As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。

2、变量命名规则（和之前的C++和Java一样）：

  • 常量全大写 UPPERCASE_WORD
  • 变量驼峰 camelName
  • 类名驼峰，并且首字母要大写 CamelName

3、注释书写习惯：

  1. 源码中的注释，推荐用英文。
  2. 含有中文时，标点符号用中文全角。
  3. 中英文夹杂时， 英文与中文之间要用一个空格分开。
  4. 注释标识符与注释内容要用一个空格分开：// 注释 与 /* 注释 */。

4、接口命名规范：（那些名词有特定的缩写，比如button缩写成btn）

  • 可读性强，见名晓义。
  • 尽量不与 jQuery 社区已有的习惯冲突。
  • 尽量写全。不用缩写，除非是下面列表中约定的。（变量以表达清楚为目标，uglify 会完成压缩体积工作）

 

常用词说明
options表示选项，与 jQuery 社区保持一致，不要用 config, opts 等
active表示当前，不要用 current 等
index表示索引，不要用 idx 等
trigger触点元素
triggerType触发类型、方式
context表示传入的 this 对象
object推荐写全，不推荐简写为 o, obj 等
element推荐写全，不推荐简写为 el, elem 等
length不要写成 len, l
prevprevious 的缩写
nextnext 下一个
constructor不能写成 ctor
easing示动画平滑函数
minminimize 的缩写
maxmaximize 的缩写
DOM不要写成 dom, Dom
.hbs使用 hbs 后缀表示模版
btnbutton 的缩写
link超链接
title主要文本
img图片路径（img标签src属性）
datasethtml5 data-xxx 数据接口
theme主题
className类名
classNameSpaceclass 命名空间

 

二、JavaScript规范Rules

目录

基本编码规范

代码质量控制工具

Amaze UI 使用 JSHint 和 JSCSESLint控制代码质量。

详细设置参见 .jshintrc、.jscsrc.eslintrc。

2016.04.20 替换为 ESLint，参见 Welcoming JSCS to ESLint

（部分直接使用第三方库的代码未通过质量控制工具检测。）

jQuery / Zepto.js 使用规范

为提高代码执行效率，为二者兼容提供可能，在使用 jQuery / Zepto.js 时做以下约定：

  • 存放 jQuery / Zepto 对象的变量以 $ 开头；
  • 禁止使用 slideUp/Down() fadeIn/fadeOut() 等方法；
  • 尽量不使用 animate() 方法；
  • 使用和 Zepto.js 兼容的基本选择符，不使用效率较低且与 Zepto.js 不兼容的选择符。

问题：

代码格式

  • 缩进 2 个空格；
  • 使用多 var 模式声明变量：更容易维护，比如要删除第一个变量或者最后一个变量时，多 var 模式直接删除即可，单 var 还要去修改别的行（for 循环例外）；

Valid

 Copy 
var x = 1;
var y = 2;

for (var i = 0, j = arr.length; i < j; i++) { }

Invalid

 Copy 
var x = 1,
    y = 2;

命名规范

基本原则

  1. 文件和目录名只能包含 [a-z\d\-]，并以英文字母开头
  2. 首选合适的英文单词
  3. Data API 命名使用小写、用连字符连接、添加 am 命名空间，如 data-am-trigger
  4. 事件名使用小写字母，包含模块名及 amui 命名空间名，使用 : 连接（Zepto 不支持使用 . 链接的自定义事件），如 .trigger('open:modal:amui')
  5. 符合规范
    • 常量全大写 UPPERCASE_WORD
    • 变量驼峰 camelName
    • 类名驼峰，并且首字母要大写 CamelName

HTML Data API

  • 基本: data-am-{组件名}，如 data-am-modal、data-am-navbar-qrcode
  • 传参: data-am-modal="{key1: 'val1', key2: false}"，core.js 中增加一个专门解析参数的函数

JavaScript

  • 自定义事件命名：{自定义事件名}:{组件名}:{后缀}，Zepto 不支持 . 分隔的自定义事件语法，官方示例中使用 : 分隔，如 closed:modal:amui。Zepto 中没有 event.namespace，这样的命名方式只用于清晰区分不同模块的自定义事件。另外，按照 Zepto 官方示例，应该写成 amui:modal:closed，为跟 jQuery 的写法统一，颠倒顺序书写。
  • 默认绑定事件：事件名（内置事件，非自定义事件）采用 {事件名}.{组件名}.{命名空间}，如 $(document).on('click.modal.amui',...。
    • 取消所有默认绑定事件： $(document).off('.amui',...
    • 取消特定组件的默认绑定事件： $(document).off('.modal.amui',...

接口命名规范

通过接口规范，统一模块对外接口的命名，形成一致的编写习惯。

规则：

  • 可读性强，见名晓义。
  • 尽量不与 jQuery 社区已有的习惯冲突。
  • 尽量写全。不用缩写，除非是下面列表中约定的。（变量以表达清楚为目标，uglify 会完成压缩体积工作）
常用词说明
options表示选项，与 jQuery 社区保持一致，不要用 config, opts 等
active表示当前，不要用 current 等
index表示索引，不要用 idx 等
trigger触点元素
triggerType触发类型、方式
context表示传入的 this 对象
object推荐写全，不推荐简写为 o, obj 等
element推荐写全，不推荐简写为 el, elem 等
length不要写成 len, l
prevprevious 的缩写
nextnext 下一个
constructor不能写成 ctor
easing示动画平滑函数
minminimize 的缩写
maxmaximize 的缩写
DOM不要写成 dom, Dom
.hbs使用 hbs 后缀表示模版
btnbutton 的缩写
link超链接
title主要文本
img图片路径（img标签src属性）
datasethtml5 data-xxx 数据接口
theme主题
className类名
classNameSpaceclass 命名空间

注释规范

总原则

  • As short as possible（如无必要，勿增注释）：尽量提高代码本身的清晰性、可读性。
  • As long as necessary（如有必要，尽量详尽）：合理的注释、空行排版等，可以让代码更易阅读、更具美感。

总之，注释的目的是： 提高代码的可读性，从而提高代码的可维护性。

什么时候需要添加注释

  • 某段代码的写法，需要注释说明 why 时：
 Copy 
// Using loop is more efficient than `rest = slice.call(arguments, 1)`.
for (i = 1, len = arguments.length; i < len; i++) {
    rest[i - 1] = arguments[i]; }
  • 添加上注释，能让代码结构更清晰时：
 Copy 
init: function(selector, context, rootjQuery) {
    var match, elem, ret, doc;

    // Handle $(""), $(null), or $(undefined) if ( !selector ) { ... } // Handle $(DOMElement) if ( selector.nodeType ) { ... } // The body element only exists once, optimize finding it if ( typeof selector === "string" ) { ... } }
  • 有借鉴、使用第三方代码，需要说明时：
 Copy 
// Inspired by https://github.com/jquery/jquery/blob/master/src/core.js
function ready() { ... }
  • 文件最后空一行，可以保证在 combo 合并后，源码的层次清晰。

注释书写规范

  1. 源码中的注释，推荐用英文。
  2. 含有中文时，标点符号用中文全角。
  3. 中英文夹杂时， 英文与中文之间要用一个空格分开。
  4. 注释标识符与注释内容要用一个空格分开：// 注释 与 /* 注释 */。

文档规范

README.md

每个组件必须有 README.md 文件，用来描述组件的基本情况。

# 模块名称

-----

该模块的概要介绍。

------

## 使用说明

如何使用该模块，可以根据组件的具体特征，合理组织。

## API

需要提供 API 说明，属性、方法、事件等。

## 使用示例

HISTORY.md

记录组件的变更，最好和 issues 进行关联。请阅读历史记录书写规范。

参考链接

Amaze UI 的编码规范参考了社区里一些先行者的做法，在此致谢！

 

weixin_33939380
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsRules:简单的基于JSON的规则引擎
05-10
jsRules 简单的基于JSON的规则引擎 介绍 jsRules是一个“简洁的”规则引擎，可通过JSON文件快速，轻松地解析所有规则。 为什么要使用规则引擎？ 规则引擎将您的业务逻辑与应用程序逻辑分开，从而无需更改代码甚至重新部署应用程序即可更改这些规则。 jsRules使用简单易懂的JSON实现，可以通过网页，移动应用程序甚至手动操作轻松地对其进行编辑...将这些规则掌握在了解它们的人的手中，而无需聘请开发人员进行简单的更改。 我该如何实施？ 将JAR导入任何Java应用程序 将规则创建为JSON并将其放在类路径中。 将解析规则所需的参数放入Map <String> 最后，仅使用一行代码调用规则引擎： JsRules.getInstance（）。execute（“ DrinkingAge”）; 术语 规则-规则是规则引擎的基础。 它使用left参数，right
JS 正则规则
封情丶L的博客
05-30 1368
            rules: {                digits: [/^\d+$/, '请输入整数']                ,number: [/^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/, '请输入有效的数字']                ,pmnum:[/^[\-\+]?...
js 自定义验证规则
小丫007的博客
09-20 1708
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascr...
rules-js:一个简单JavaScript规则引擎
05-02
规则库 概述 这是一个非常轻量级的纯JavaScript规则引擎的实现。 它对流口水的启发非常宽松，但是要付出额外的努力，以将复杂性降低到最低限度。 无参数闭包（语法糖） 规则 闭包数组（减少） 规则流 安装 npm install rules-js 使用范例 这个关于如何创建一个小的规则引擎来处理在线订单的例子非常幼稚。 这并不是要模仿整个业务流程，也不是为了展示Rules.JS的全部潜能。 我们首先在JSON中定义一个规则文件。 { " name " : " process-orders " , " rules " : [ { " when " : " always " , " then " : " calculateTotalPrice " }, { " when " : { " closure " : " checkStoc
Amaze UI
qq_34609443的博客
01-30 678
1、Amaze UI 是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架， 基于开源社区流行前端框架编写（使用、参考的项目列表）。 2、官方cdn http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css http://cdn.amazeui.org/amazeui/2.
Vue学习笔记进阶篇之vue-cli安装及介绍
12-08
介绍 Vue-cli是Vue的脚手架工具 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 ...安装 全局安装vue-cli npm install -g vue-cli 当然了，要想使用npm工具，就必须安装Node.js，node.js的安装方法这里就...
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
在实际开发中，还可以使用 Vue Router 的高级功能，比如嵌套路由、动态路由匹配、路由守卫等，以满足复杂的应用场景需求。 总的来说，Vue Router 是 Vue.js 应用不可或缺的一部分，它提供了强大的路由管理功能，让...
【Mybatis-Plus学习笔记二】——Mybatis-Plus进阶使用.zip
06-09
【Mybatis-Plus学习笔记二】——Mybatis-Plus进阶使用.zip 博客地址：https://blog.csdn.net/weixin_43817709/article/details/117751784
Android开发教程+笔记十-基础UI编程4.pdf
11-17
Android开发教程+笔记十-基础UI编程4.pdf
若依ruoyi-ui学习笔记word压缩文档
最新发布
07-12
若依ruoyi-ui学习笔记word压缩文档，word中含有若依ruoyi-ui学习笔记
java命名规范 开发规范
06-19
1. 模块命名、数据库表命名、域模型命名、各分层的类/方法命名、页面的命名； 模块命名： a. 包命名：com.project_name.module_name.action/service/dao/ws； service的实现都置于com.project_name.module_name.service.impl下； b. 接口命名遵守XxxxService，接口实现遵守XxxxServiceImpl； 2. 包的设计、页面的层次结构设计（jsp/css/js等文件的结构）； 3. log、异常（声明式异常）的约定设计； 4. 链接、按钮、表单提交的统一方式；通用式Ajax调用与页面跳转统一模型； 5. 响应一个请求的分层结构约定，列举几个示例（常规调用、Ajax调用、WebService调用、提供WebService暴露、硬件设备接口调用）； 6. 验证代码质量的约定，如JUnit、EMMA、FindBugs、CheckStyle、PMD的使用；Hudson持续集成需注意的； 7. 压力测试、防内存泄漏测试； 基础CSS：标签的各种状态的样式；表格单双行的样式； 开发一个Action请求的响应： 前置条件：该Action涉及的Entity及EntityName.hbm.xml已经准备好。 步骤： a. 前端页面触发Action的请求； 统一采用全路径请求，URL格式： 1> basePath/web/moduleName/*_ *.action {1}  EntityName，{2}  ActionMethodName 2> basePath/web/moduleName/gotoXxx.action （无需调用Service，直接跳转） 包括jQuery的Ajax方式和非Ajax方式； 包括表单提交； 参数设值的方式： 1> URL参数： basePath/web/moduleName/*_*.action?entity.propertyName=paramValue&paramName=paramValue 2> 或 另外，对于表单的提交，前后台都必须做数据校验，SWDF已提供了此能力，进行简单的配置即可，前台直接提供类似以下代码即可，点此查看前端校验详细规则说明。 前端校验示例； 后台数据校验，点此查看校验详细说明. b. 配置struts-moduleName.xml； 直接跳转示例； 调用Service示例； c. 开发对应的{EntityName}Action类； 该类必须继承com.hikvision.swdf.xx.BaseAction，该Action类有一个关键属性entity，即泛型Entity类的一个实体，该属性默认填充好了请求提交过来的entity对应参数（即entity.propertyName）； d. 开发Service接口和Service接口实现，并在Action中通过set方法注入该Service； 接口文件：UserService 接口实现：UserServiceImpl 注入Service e. 开发DAO，DAO继承com.hikvision.xxx.HibernateBaseDAO； 示例 f. 配置applicationContext-*.xml； 配置DAO bean、Service Bean、Action Bean及注入的配置； g. 测试； 备注： 1. Action建议统一遵守通配符的约定，basePath/web/moduleName/*_ *.action {1}  EntityName，{2}  ActionMethodName 2. 统一命名规则：接口类似UserService，接口实现类型UserServiceImpl；（IUserService和UserServiceImpl） 开发一个Action调用关联应用提供的WebService 前置条件：该WebService?WSDL可正常获取 步骤： a. 配置applicationContext-wsclient.xml； Spring管理第三方WebService实例bean Jaxws-client配置代码 b. 生成第三方WebService接口文件；（提供系统自动生成） 自动生成代码 c. 页面调用Action请求，Action中注入WebService实例bean； Action对应方法直接调用第三方WebService的相关方法； d. 测试； 备注： 1. 步骤b，接口文件必须同包名同类名置于src目录下； 开发一个Action调用关联应用开放的HTTP请求 步骤： 1. 页面调用Action请求； 2. Action类相应方法使用封装好的HttpClient相关工具类，准备好HTTP请求的相关参数header参数和body参数并以xml的方式提交HTTP请求； 3. 解析该HTTP请求返回值（XML或JSON）； 4. 响应结果； 5. 测试； 备注： 开发一个需要对第三方应用发布的WebService 步骤： a. 开发WebService接口，@WebService进行注解该接口； b. 开发WebService接口实现类，@WebService注解该实现类，并制定endpointInterface； c. 配置applicationContext-ws.xml d. 测试 备注： 开发一个需要对第三方应用发布的RESTful Service 步骤： a. 开发RS接口，提供如下Annotation； b. 开发RS接口实现，并提供如下Annotation； c. 配置applicationContext-rs.xml 备注： 所有Annotation的涵义解释如下：
接口命名示例
求道问术
05-17 7742
方式/GET+POST 参考 分析： 只有GET和POST方式 /业务/模块/唯一操作 参数传递有“链接参数”和“Body参数” 安全性有{access_token} 唯一操作： 创建：create 根据ID删除1个：delete 根据ID列表批量删除：batchdelete 根据ID更新：update 根据ID查找：one 查找所有：all 列表条件查找：list 分页条件查找：page 创建成员 创建成员 - POST - /bin/user/create - 请求参数：{access_toke
java命名规范(参照整理总结)
java技术博客
08-29 551
java命名规范(参照整理总结) 参考网址: https://mp.weixin.qq.com/s/J3AWxzZ-P4gY2pFviMPp5w 说明: java命名规范看似一个小问题，但是我之前工作中发现命名规范影响阅读代码的效率，比如employeeList有人命名为list，这样很容易引起歧义，导致还要看看之前list是怎么声明的，所以与其这样，我们不如遵守一个规范，让代码更加简单易懂，我参考的这篇帖子介绍的比较全面，收藏转发一波，没事可以看看 作者建议收藏转发 文章目录java命名规范(参照
后端与前端接口命名规范
qq_52696618的博客
05-24 2092
如数字区间的查询：”number_GTE”:”100.10”,”number_GTE”:”999”如金额区间查询：”money_GTE”:”10000”,”money_GTE”:”99999”查询对象内为按规范的条件传值，通常为字段类型+运算符，value值就是要查询的内容。常用于数量，或者分数等，不能用于金额，金额有另外的关键字。就是状态是“启用”的数据，其中0代表停用，1代表启用。就是大于等于100.1，小于等于999的数据。如：”keyword_LIKE”:”张三”如：”state_EQ”:”1”
接口（Java)
m0_62967952的博客
01-23 175
接口 概述 普通类：只有具体实现 抽象类：具体实现和规范（抽象方法）都有 接口：只有规范 自己无法写方法 专业的约束 约束和实现分离：面向接口编程 接口就是规范，定义的是一组规则，体现了现实世界中“如果你是。。。则必须能。。。”的思想，如果你是天使，则必须呢个救济人间，如果你是汽车，则必须能跑。如果你是好人，则必须干掉坏人，则必须干坏事 接口的本质是契约，就像我们人间的法律一样，制定好后大家都遵守 OO（面向对象）的精髓，是对对象的抽象，最能体现着一点的就是接口。为什么我们讨论设计模式都只
前端Vue 常用表单rules校验规则小结
邪小新的博客
07-15 568
前端表单提交中，需要对一些数值进行校验；下面就是总结的一些常用的表单校验规则：
amazeui modal处理
weixin_35795555的博客
03-02 431
平常处理 // 打开modal框 $("#deliverTaskInfo-modal").modal({ relatedTarget: this, closeViaDimmer: false, closeOnConfirm: false }); 打开和关闭回调方法 // 打开modal框 var orderModalView; mainJs = this; function showOrderModalFunc(orderId, platOrderN
Restful风格的接口命名规范
weixin_43244265的博客
07-08 2666
1.首先restfulf风格的api是基于资源的，url命名用来定位资源，而不是表示动作，动作通过请求方式进行表示。2.URL中应该单复数区分，推荐的实践是永远只用复数。比如GET /api/users表示获取用户的列表，如果获取单个资源，传入ID，比如/api/users/123，表示获取单个用户的信息。3.修改的方法可以用PUT和PATCH表示，PUT 用于更新资源的全部信息，在请求的 body 中需要传入修改后的全部资源主体，PATCH 用于局部更新，在 body 中只需要传入需要改动的资源字段。如果
RESTful风格的接口命名规范
热门推荐
杨杨杨的博客
06-12 5万+
最近实习单位的leader要求我调研一下RESTful风格的接口命名规范，然后把项目里的URL名整体规范化修改一下，以下是我的对于RESTful的了解。 REST是一个术语的缩写，REpresentational State Transfer，中文直译是“表征状态转移”。 REST是一套风格约定，RESTful是它的形容词形式。比如一套实现了REST风格的接口，可以称之为RESTful接口。 目前...
Python学习笔记第二版：进阶指南
"Python学习笔记第二版" 这本《Python学习笔记第二版》是一本适合有一定编程基础的学习者使用的教材，作者通过个人的实践经验，详细记录了Python 2.7版本的相关知识。笔记内容涵盖了Python的基础语法、进阶特性以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值