作者 | 随笔川迹
ID | suibichuanji
前言
撰文:川川
您将在本篇中看完收获到
· 正 · 文 · 来 · 啦 ·
01
常量的命名
const HANDLE_CLICLK_TEXT = "handle_click_text";
场景: 在React或者Vue中使用Redux或者vuex做数据状态管理时,当定义action的type类型时,往往使用的就是const去定义我们要改变store的事件类型常量,若有这方便开发经验的是不会陌生的,小程序开发也是如此
02
变量的命名
局部变量 类型 + 变量名称(匈牙利命名法)
变量名=属性+类型+对象描述
变量的定义需要区分类型,增加类型前缀属性+类型+对象属性描述,如sBtnColor(按钮的的颜色),sTextBgColor(文本背景色)
主要前缀有s(string), a(Array), b(boolean), n(number),o(object),fn/pf(function), rc(React), g(global全局变量),C(Component)类或结构体,m(成员变量m_nCustomers)
// 这里以小程序中的js为例,web开发都是类似
Page({
data: {
blogTitle: '', // 博客标题
blogList: [], // 博客列表内容
bBtnDisabled: true, // 禁止按钮状态,默认禁用
userInfo: {}, // 用户信息
pageNum: 0 // 分页起始页
}
})
局部变量示例如下所示
let sDepartName; // 部门名称,字符串
let nDivWidth; // 一个div元素的宽度,类型number
let bFirst; // 是否是第一个,boolean
let aGoodLists; // 商品列表,数组array
let oProducts; // 产品对象,Object
全局变量
以g_开头,后面与局部变量相同。如:let g_sClassName
其他
var sItclanCoder="itclanCoder";
var nGoodID = 12; // 商品ID
var baseURL = "http://localhost/8080/detail?page=1"
const MAX_COUNT = 10 // 最大数量
function Button(color) {
this.color = color;
}
var $body = $("body")
var AndroidVersion;
var iOSVersion;
let _nInitValue = 0; // 初始值为0
function _getHomeData() { // 获取首页数据
// 逻辑代码
}
/*
**
* @param opt_name 模态框可选名称
*
*/
function isModel(opt_name) {
// 逻辑代码
}
03
函数的命名
// 获取莫态框列表数据
function getModelList(list) {
// 逻辑代码
}
function isLeafNode(node) {
// 逻辑代码
}
function canModify(node) {
// 逻辑代码
}
function hanSelected(selected) {
// 逻辑代码
}
// 初始化工具栏
function initToolBar() {
// 逻辑代码
}
04
事件的命名
function handleInputChange() {
// 逻辑代码,监听表单内容
}
function onBlur() {
// 逻辑代码,失去焦点时
}
// 箭头函数也是可以的
let onBtnClick = () => {
// 逻辑代码,点击按钮
}
05
操作符的使用
始终使用===替代==,它比较的不仅仅数值还有数据类型,如下所示
if (sName === 'itclanCoder') // ✓ ok,全等
if (sName == 'itclanCoder') // ✗ avoid,双等
if (sName !== 'itclanCoder') // ✓ ok,全不等
if (sName != 'itclanCoder') // ✗ avoid
这里需要额外注意的是可以用:obj == null可以用来检查null || undefined
有时候,你也会看到有人把条件判断的数值放在左边,一般有这个习惯的,看得出是个高手,至少写程序是比较严谨的
// 判断bShow是否为false,判断的数值结果放在左边,需要检测的数值放在右边
var bShow = false;
if(true == bShow) { // 平常当中,有没有见过这种代码?
console.log(bShow);
console.log("执行语句1");
} else {
console.log(bShow);
console.log("执行语句2")
}
显然,这段代码的最终输出的结果是else后面的语句,执行语句2被执行了的
如果你一不小心在做判断时,少写了一个等(=)号,也就是双等或者全(三)等变成了一个等号,变成了赋值
平常开发中,漏写一个,少写一个,将等值判断写成赋值,这个是很容易书写造成的,而这个小bug虽然不是什么大bug,但会影响程序的正常运行,没有按照你预期的逻辑走,这个bug是很隐性的
有时候,很难察觉
而这种把判断的结果放在左边,检测的对象放在右边,一旦少写了一个等号,编译器就会有提示错误,当然在一些高级的编辑器里面,例如IDEA里面是有提示的
如果在这种情况下少写一个等号,如下所示
var bShow = false;
if(true = bShow) { // 如果漏写一个等号,只有一个等号就是赋值,注意赋值与全等的区别
console.log(bShow);
console.log("执行语句1");
} else {
console.log(bShow);
console.log("执行语句2")
}
那么编译就会报错,给你很好的错误提示,一看判断条件是单等号,也就是赋值,就看出问题在哪了
if(true = bShow) {
^^^^
ReferenceError: Invalid left-hand side in assignment
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
at startup (internal/bootstrap/node.js:285:19)
与之相反,如果把检测的对象放在左边,被检测结果放在右边,也就是常规方式,普遍的做法
因为代码从左往后读,好理解,位置稍有区别,执行结果一样,但是理解起来,检测对象放在等号左边要好容易理解得多
而将检测结果放在左边,却是可以检测到在编写代码时,如果少写了一个“=”,编译器也能判断出错误,而前者编译器不会出错,执行结果不对,是逻辑代码顺序问题,编译器是无法告知的,它只能识别语法词法的错误,如下所示
var bShow = false;
if(bShow = true) { // 如果这样写,漏写了一个等号,程序将会执行,不会报错,但是会影响你想要的结果
console.log(bShow)
console.log("执行语句1");
} else {
console.log(bShow)
console.log("执行语句2");
}
如上代码,在做条件判断时,只写了一个等号(=),程序不会报错,但是会影响最终结果,程序执行了语句1,这显然是不符合自己预期想要的
编译器也不会给你任何提示,有时候,这种错误找起来非常难受,一旦发现找出来了,气着抽自己都难以解气,哈哈,把检测的结果放在等号的左边是个很好的编程习惯
如果你硬要抬杠,纠结放前放后的区别,前者正常思维,容易理解,后者却可以让自己少犯错,即使漏写了,让编译器给你找错,比眼睛发现错误要靠谱得多
结语
本篇主要介绍了JS中一些编程规范,涉及到常量,变量,函数名,事件以及操作符
谈不上什么高大上的内容,所有的规范都是为了让代码可读性更好,好维护,规范并非是束缚,而是一种约定俗成
当然最后谈到一个条件语句中判断放置前后的问题,没有绝对的好与坏,不必较真
如果有人或者自己证明过了这种写法有优于之前的写法,那么就尝试新的方法的,总停留在以前,是难以有进步和突破的
纸上得来终觉浅,绝知此事要躬行,你品,你细品,共勉
限于篇幅所致,我们下期再见