作者 | 随笔川迹
ID | suibichuanji
前言
撰文:川川
您将在本篇中看完收获到
· 正 · 文 · 来 · 啦 ·
01
换行与缩进
换行按照以下约束进行行缩进控制:函数参数换行。换行后的第一个参数的首字母应该和函数第一个参数的首字母左对齐,如下所示
// 当有一些函数名称比较长的时候,多个参数,可以选择换行
function someLongNameMethod(longExpression1,
longExpression2,
longExpression3) {
// 逻辑代码
}
表达式换行。操作符应该换行。如果表达式中含有"( )"运算符,则不应该换行。如下所示
合法:把有关联的放在一起
longName1 = longName2 * (longName3 + longName4 - longName5)
+ 4 * longname6;
非法
longName1 = longName2 * (longName3 + longName4
longName5) + 4 * longname6;
对于较长的需要换行的三重运算符" ? :",应该采用如下格式
nHeight = (x==y)
? alert( '弹出一表达式为真的提示' )
: alert( ''弹出表达式为假的提示");
从"?"和":"换行,且":"和"?"左对齐
以下情况,不应该使用缩进
针对整个js文件的注释的第一行及最后一行
/**
* 函数功能详细
* @param [参数1] [参数说明]
* @param [参数2] [参数说明]
* @return [返回值说明]
*/
const LANGUAGE_KEY = "language_key";
function getParentNode(node) {
let oParentNode;
}
缩进应该使用空格符,严禁使用制表符进行缩进 因为在使用不同的文本编辑工具编写代码时,Tab字符会由于用户设置的不同而调整为不同的宽度。
02
空格约束
var nWidth = 100;
x = y + z;
width = height / 2;
x += 1;
if (exp1 && exp2 && exp3 && exp4 == exp5) {
}
x = y == 0 ? 1 : 0;
x = !y;
if(!exp1 && exp2)
// 弹出模态框
function openModelDialog(url, winName, width, height) {
// 逻辑代码
}
function openModelDialog() {
}
function openModelDialog() {
}
// if语句句:
if (true) {
// 逻辑判断语句
} else {
// 逻辑判断语句
}
// while语句句:
while (x != 0) {
// 逻辑语句
}
// switch语句句:
switch (x) {
// 逻辑语句
}
// do..while语句句:
do {
// 逻辑语句
}
while (i == 0)
// for语句句:
for (i = 0; 10 >= i; i++) {
// 逻辑语句
}
var obj = { 'key' : 'value' } // ✗ avoid
var obj = { 'key' :'value' } // ✗ avoid
var obj = { 'key':'value' } // ✗ avoid
var obj = { 'key': 'value' } // ✓ ok
03
语句格式
const nWidth = 100;
const nHeight = 200;
const nWidth, nHeight; // ✗ avoid,不要写在一行,线上代码可以压缩成一行,但是本地代码应当换行的
x += 2; remove(this); // ✗ avoid,同上
function openModelDialog() {
x = y + 1;
}
function openModelDialog() {
let clickRow = setItem();
if (clickRow) {
clickRow.className = rowStyle;
}
let key = LASTCLICKITEM_KEY;
let value = id;
}
function fun1() {
}
function fun2() {
}
function openModelDialog() {
x = y + 1;
return true;
}
function openModelDialog() {
// ...
}
if语句
格式如下
if (row === clickRow) {
row.className = clickItemStyle;
width = 100;
} else {
row.className = rowStyle;
}
约束说明
if (row === clickRow) // 非法
return;
switch语句
switch (x){
case 1:
语句;
break;
case 2:
语句;
break;
default:
语句;
break;
}
约束说明
各个case关键字相对于switch的缩进数为2个空格 case中的语句相对于case关键字的缩进数为2个空格 必须有default分⽀
for语句
for (i = 0; i <= 10; i++) {
语句;
}
约束说明:
// 非法
for (i = 0; i <= 10; i++)
alert(i);
while语句
while (i <= 10) {
// 逻辑代码
}
约束说明
do while语句
do {
// 逻辑代码
} while (10 >= i)
约束说明
do
alert(i); // ⾮法
while (10 >= i)
不允许有连续多行空行
如下是一个完整的例子
/*
* @LineStart: -------------------------------------------
* @Copyright: © 2020, itclanCoder. All rights reserved.
* @LineEnd: ----------------------------------------------
* @Product:
* @Mode Name:
* @Autor: vxPublic:itclanCoder
* @Date: 2020-03-06 11:17:19
* @Version: xxx.v1.0
* @LastEditors: 川川
* @LastEditTime: 2020-03-06 11:17:44
* @Description: 完整的注释例子
*/
/* 声明最后一个列表的key */
const LASTCLICKITEM_KEY = "lastClickItem";
/* 点击最后一个列表的样式风格 */
const g_sLastClickItemStyle = "selectedRow";
/* 正常行的样式风格 */
const g_sNormalRowStyle = "normalRow";
/* 鼠标经过行的样式风格 */
const g_sMouseoverRowStyle = "mouseOverRow";
/**
* 打开浏览器器新窗⼝。
*
* @param url 窗⼝URL。
* @param winName 窗⼝名称。
* @param width 窗⼝宽度。
* @param height 窗⼝⾼高度。
*/
function openNewDialog(url, winName, width, height) {
const nWidth = window.screen.width;
const nHeight = window.screen.height;
const sWinStr = "left=" + ((swidth - width) / 2)
+ ",top=" + ((sheight - height) / 2 - 20)
+ ",width=" + width
+ ",height=" + height;
// open a dialog
const win = window.open(url, winName, `resizable=no,scrollbars=yes,${str}`);
win.focus();
return false;
}
/**
* 打开模态窗⼝口。
*
* @param url 窗⼝URL。
* @param winName 窗名称。
* @param width 窗⼝宽度。
* @param height 窗⼝⾼度。
*/
function openModelDialog(url, winName, width, height) {
const nWidth = window.screen.width;
const nHeight = window.screen.height;
const winStr = "left=" + ((swidth - width) / 2)
+ ",top=" + ((sheight - height) / 2 - 20)
+ ",width=" + width
+ ",height=" + height;
// open a model dialog,打开模态对话框
const win = window.showModalDialog(url, winName, str);
win.focus();
return false;
}
04
常见开发技巧
True和false布尔表达式 下面的布尔表达式都返回false
注意下面的返回true
while (x != null) { // bad,如果你想判断变量x是不是为null空
// 逻辑代码
}
while (x) { // good (只要你希望 变量x 不是 0 和空字符串, 和 false)
// 逻辑代码
}
if (y != null && y != '') { // bad
...
}
if (y) { // good (只要你希望 变量x 不是 0 和空符串, 和 false)
...
}
也要注意下面的
Boolean('0') == true; // true
'0' != true // true
0 != null ; // true
0 == [] ; // true,比较的是值,如果是全等===,那么将是false
0 == false // true
Boolean(null) == false; // true
null != true; // true
null != false // true
Boolean(undefined) == false; // true
undefined != true; // true
undefined != false; // true
Boolean([]) == true // true
Boolean({}) == true // true
条件(三元)操作符 (?)
// 传统写法
if (val != 0) {
return foo();
} else {
return bar();
}
// 三元操作符写法
return val ? foo() : bar();
if..else表达式都可以转换为三元操作符,但是可读性没那么好, &&与|| 二元布尔操作符是可以短路的, 只有在必要时才会计算到最后一项."||"被称作为 'default' 操作符, 因为可以这样
// 传统写法
if (node) {
if (node.kids) {
if(node.kids[index]) {
foo(node.kids[index]);
}
}
}
// "&&"操作符代替写法
if (node && node.kids && node.kids[index]) {
foo(node.kids[index]);
}
// 或者按如下写法:
var kid = (node) &&( node.kids) && (node.kids[index]);
if (kid) {
foo(kid);
}
// 下面这种写法就不要写成这样了的
node && node.kids && node.kids[index] && foo(node.kids[index]);
// 传统写法
function foo(opt_win) {
let win;
if(opt_win) {
win = opt_win;
}else {
win = window;
}
}
// "||"操作符代替写法
function foo(opt_win) {
let win = opt_win || window;
}
结语
本篇主要介绍了JS中一些编程规范,涉及到换行与缩进-空格约束-语句格式,以及最后的常见开发技巧,表达式中真假,以及短路的处理
你或多或少都会看到一些类似这样的写法,Es6中也提供了设置默认参数,也是一种简化处理
如果强制自己写代码写的得更规范,可以用eslint等一些工具强制自己的
刚开始确实有些痛苦,一空格,一对齐都会报错,估计头发就是这么掉的吧
各位,键盘侠工作者,注意身体,想必最近一位前端巨星突然陨落,深感痛心
虽与他不曾谋面,但阅其书,尤见其人,早期也是深受鼓舞.
如今,绝大多数人都是超负荷工作,保持积极,良好健康心态.
健康是1,没了1后面在多0,都已无用~
致正阅读屏幕前的您