前端代码基础规范-阿里云开发者社区

开发者社区> 武汉-郑昊> 正文

前端代码基础规范

简介: 定义js部分命名规范、编码规范
+关注继续查看

一、命名规范

1、通用命名方法

命名方法举例
Camel命名法thisIsAnApple
Pascal命名法ThisIsAnApple

注意:在命名时尽量简洁明了,用英文表达(绝对不能用拼音或者首字母拼写

2、各类型命名规范

名称命名方法词汇种类说明举例
局部变量名Camel命名法名词fristName
全局变量名Camel命名法名词前缀:ggFristName
参数名Camel命名法名词fristName
方法/属性Camel命名法名词fristName
私有(保护)成员Camel命名法名词前缀:__fristName
常量名名词下划线+全体大写ADD_METHOD
类名Pascal命名法名词AtiveDic
Bool类型Camel命名法名词前缀:is/hashasChild

3、函数与类的命名

Ⅰ.函数

1)使用Pascal命名法2)前缀为动词,前缀词如下表所示

动词含义举例
Can判断是否可以执行某个权限CanLogin
Has判断是否含有某个值HasToken
Is判断是否为某个值IsShowModel
Get获取某个值GetUserId
Set设置某个值SetCookie
Load加载某些数据LoadList
Update更新某些数据UpdateUserInfo
Del删除某些数据DelMenu

Ⅱ、类(Class)命名规范1)使用Pascal命名法2)名字应该明确表达改类的作用

二、props与state的使用

1、Props

定义:大多数组件在定义时就可以通过各种自定义参数来实现组件的定制。编程注意事项:

1.在页面中禁止直接修改propsthis.props.name = 'Alen'

2.在调用props时尽量使用扩展符。

//good

const { name } = this.porps;

console.log(name);

//bad

console.log(this.props.name);

3.在传递props时,如无必要,不能传递整个props,只需传递props中所需要的属性(在models中的reducers 同理)。

2、State

定义:State是一个组件的UI数据模型,是组件渲染时的数据依据。编程注意事项:1.绝对不要 直接改变 this.state,你可以将它看作是一个不可变得变量(如需改变必须调用setState)

//good

this.setState({name:'Lucy'});

    

//bad

this.state.name = 'Lucy';

2.setState时异步的,若执行setState后需马上调用,可以使用这些方法转化为同步。(方法

3.和渲染无关的状态尽量不要放在 state 中来管理

4.在State更新时,如果更新的值涉及到了state和props,我需要注意在调用setState时不要直接使用this.props和this.state

//good

this.setState((prevState, props) => ({

name: prevState.name + props.increment

}));

//bad

this.setState({name:this.state.name});

5.禁止在shouldComponentUpdate或者componentWillUpdate方法中调用setState

6.最好在componentDidMount中调用

3、何时调用哪个?

1.如果数据需要跨组件传输,则放在props中进行传递

2.如果数据只在本组件使用,并且涉及到在render中进行渲染,则放在state中进行处理

3.其余数据可在组件中直接定义。

三、React编码规范

1、自我解释

尽可能减少代码中的注释。可以通过让变量名更语义化、只注释复杂、潜在逻辑,来减少注释量,同时也提高了可维护性,毕 竟不用总在代码与注释之间同步了。

2、JSX编码

1.在JSX中禁止使用if语句进行判定

//bad

ShowUserInfo{

   if(isShowUserInfo){

       retrun(

           <div>姓名:张三</div>

       );

   }else{

       return(

           <div>姓名:未填写</div>

       )

   }  

}

//good

ShowUserInfo(){

   return isShowUserInfo : (<div>姓名:张三</div>) ? (<div>姓名:未填写</div>)

}

三目运算:条件1?值1或操作1: //如果满足条件1,就返回值1或执行操作1

2.尽量使用单标签

//bad

render(){

   return(

   <div>

       ...

       <UserInfo></UserInfo>

       ...

   </div>

   );

}

//good

render(){

   return(

   <div>

       ...

       <UserInfo />

       ...

   </div>

   );

}

3.在标签中默认的都是true

//bad

<Foo

 hidden={true}

/>

//good

<Foo hidden />

4.在map循环时,不要用index作为每个标签的key

// bad

{todos.map((todo, index) =>

 <Todo

   {...todo}

   key={index}

 />

)}

// good

{todos.map(todo => (

 <Todo

   {...todo}

   key={todo.id}

 />

))}

5.使用ref的回调

// bad

<Foo

 ref="myRef"

/>

// good

<Foo

 ref={(ref) => { this.myRef = ref; }}

/>

更多JSX规范参见:更多规范

3、渲染与判断逻辑分开

在render中只进行页面的渲染,不作对数据或者逻辑的处理

4、解构

// bad  

const splitLocale = locale.split('‑');  

const language = splitLocale[0];  

const country = splitLocale[1];

// good  

const [language, country] = locale.split('‑');

5、变量判定

1.对所有定义的或者传入的变量,都进行默认设置或者判定是否为undefined,防止数据未定义时程序报错。

// Bad  

onChange(value => console.log(value.name))  

// Dirty  

onChange((value) => {   

   if (!value) {

         value = {}

   }    

   console.log(value.name)  

})  

// Clean  

onChange((value = {}) => console.log(value.name))  

// Clean  

onChange(value => console.log(value?.name))

不要信任任何回调函数给你的变量,它们随时可能是 undefined ,使用初始值是个不错的选择,但有的时候初始值没什么意 义,使用 ?. 语法可以安全的访问属性。

2.自定义变量

//bad

let newslist = this.props.newslist;

let b = a  // a为数组

//good

let { newslist = [] } = this.props;

let b = a || [];

四、React中常用ES6语法

1、let与const

1.let、const只能定义之后使用

console.log(a); // error

let a = 1;

console.log(b); // undefined

var b = 2;

console.log(c);

const c = 3;   // error

2、let与const不能重复定义

let a = 1;

const b = 1;

var c = 1;

let a = 2; // Identifier 'a' has already been declared

const b = 2; // Identifier 'a' has already been declared

var c = 2; // 2

3、const定义后的变量不可修改

var a = 1;

a = 2;  // 2

let b = 1;

b = 2; // 2

console.log(b);

const c = 1;

c = 2; //Assignment to constant variable.

从上面这些实例我可以大致的知道const、let、var具体应该应用在那些地方,但是我们会发现let与var几乎没有什么区别,那么为什么我们不能全部都用var呢?答案是不能的,有var是在全局中申明一个变量,首先这个变量在使用后依然会存在与内存中,而let在函数调用完成过后就会被立即消除,从下面的例子我们可以看出。

for (var j = 0; j < 10; j++) {

   // ...

}

console.log(j);  // 10

for (let i = 0; i < 10; i++) {

   // ...

}

console.log(i);  // i is not defined

所以慎用var,我们在平常编码过程中,大部分的var都是能被let和const替代的。

2、变量解构

1.数组与数组合并

let a = [1,2];

let b = [3,4];

//bad

let c = a.concat(b); // [1,2,3,4]

//OR

for(let i = 0 ;i<b.length;i++){

   a.push(b[i]);

}

//good

let c = [...a,...b]; // [1,2,3,4]

2.对象与对象合并

let a = {name:'张三'}

let b = {age:32}

//bad

let c = {

   name:a.name,

   age:b.age

}

//good

let c = {...a,...b};

3.对象并入数组

let a = [{name:'张三'}];

let b = {name:'Lucy'};

//bad

let c = a.push(b);

//good

let c = [...a,b];

4.更改变量名

let a = {name:'Lucy',age:32};

//bad

let NAME = a.name;

//good

let {name:NAME} = a;

5.数值互换

let a = 1;

let b = 2;

//bad

let t;

t = a;

a = b;

b = t;

//good

[a,b] = [b,a];

3、箭头函数

请写一个常用的forEach循环

let arr = [1,2,3];

//bad

arr.forEach(function(e){

   console.log(e);

});

//good

arr.forEach((e)=>{

   console.log(e);

});

但是我们会发现,其实funtion去写也并没有什么不对的地方,最多也就是多写一点点而已,那为什么ES6需要新增这个箭头函数呢?最主要的目的就是解决this指针的问题,而this在React的编码过程中会大量的去使用它。我们知道在ES6中,我们可以创建一个class,如果我们默认在其里面加入一个函数的话,其必须在调用的时候,必须绑定this指针,否则不能访问当前类的实例里面的属性。

function Person() {

 this.age = 0;

 setInterval(function growUp() {

   this.age++;

   console.log(this.age); // NaN

 }, 1000);

}

var p = new Person();

在ES3/5我们需要穿过function传递需要怎么做呢?

function Person() {

 this.age = 0;

 let _this = this;

 setInterval(function growUp() {

   _this.age++;

   console.log(_this.age); // 1 2 3...

 }, 1000);

}

var p = new Person();

但是这样写会麻烦,而且有点啰嗦和繁杂,所以我们可以使用es6中的箭头函数

function Person() {

 this.age = 0;

 setInterval(()=> {

   this.age++;

   console.log(this.age); // 1 2 3...

 }, 1000);

}

var p = new Person();

在React中需要传递this指针也都是通过箭头函数来实现的,当然以前也可以使用bind函数来绑定this,但是这样也是一种吃力不讨好的做法。

4、遍历

注意:在遍历过程中禁止删除、新增1.数组遍历

let a = [1,2,3,4,5];

//bad

for(let i = 0;i<a.length;i++){

   console.log(a[i]);

}

//good

a.forEach(e=>{

   console.log(e);

})

//OR 注意,map必须有return

a.map(e=>{

   console.log(e);

   return e;

});

参考文献:forforEachmap

2.对象遍历

let a = {name:'Lucy',age:32,sex:'女'};

//bad

for(o in a){

   console.log(a[o]);

}

//good

for(o in a){

   if(a.hasOwnProperty(o)){

       console.log(a[o]);

   }

}

参考文献:for...in... for...of... 注意:二者有巨大区别,慎用

5、值判断

1.判空

if([]){

   console.log('1');

} // 1

if({}){

   console.log('1');

} // 1

if(''){

   console.log('1');

}

变量如果不为0,null,undefined,false,都会被处理为true。只要变量有非0的值或是某个对象,数组,非空字符串,都会认为true

2.true || false

console.log([] == false); // true

console.log({} == false); // true

console.log('' == false); // false

console.log(0 == false); //true

3.typeof类型判断

类型结果
Undefined"undefined"
Null"object"
Boolean"boolean"
Number"number"
String"string"
Symbol"symbol"
宿主对象Implementation-dependent
函数对象"function"
任何其他对象"object"

参考文献:typeof

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
​ P4到P9,那位在马云家写代码的前端 ​
在阿里这些年的成长经历做一个总结和分享,希望你能在他的故事中得到些许启发。
1180 0
零基础如何用 15 行 Python 代码搞定网易云热门歌单?
零基础如何用 15 行 Python 代码搞定网易云热门歌单?
1212 0
我在阿里云做前端代码智能化
作为一个整天以代码为伴的码农,避免不了会接触到各种代码提示工具,但是呢,用久了之后会发现他们都有个共同点,那就是 **模型巨大**,动辄几百兆;并且模型大必然需要更多的计算,同样会导致电脑内存占用高,风扇呼呼的转,时间久了逐渐会发现电脑存储不够用了,电脑变卡了等等问题。 那么,有没有一款轻量化的代码提示插件?或者说,如何实现一款轻量化的代码提示插件呢? 下面我会从 模型选择、模型实现、模型优化
804 0
Android JAVA 语言基础例子代码
Android的界面一般都是java开发的,因此对于c++,.net人员来说理解和编写有一个适应过程,最近参考了一下资料,把这些涉的一些java基础使用以例子代码的形式总结起来,记录了这个平台的熟悉过程。
812 0
从P4到P9, 在马云家写代码到双11前端PM
阿里妹导读:今年的双11已经是阿里资深前端技术专家舒文来阿里的第11年,从应届生到双11前端PM,他一路升级打怪,实现了岗位上从P4到P9的晋升。这第11届双11顺利结束之际,他把在阿里这些年的成长经历做一个总结和分享,希望你能在他的故事中得到些许启发。
17685 0
谈谈低代码在前后端开发的应用领域
从一个从事过前后端大数据AI开发的角度谈下低代码的应用
231 0
Web前端,让你代码整洁的原则
写Web页面就像我们建设房子一样,地基牢固,房子才不会倒。同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片:   上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢?一看就是糟糕的代码的代码,让人讨厌的代码。
883 0
零基础学Qt编程 代码提示
看《零基础学Qt编程》书上的例子,ExtensionDlg,按书上用Qt Designer建立图形界面,但设置的Detail按键一直不起作用,试了半天,无解,最后终于发现了问题,书上的例子略过了一些细节,Qt中QPushButton类有一个属性checkable,默认否,就是没有true或者false,因此当使用默认设置的按钮时,SIGNAL发射toggled(bool),而按钮此时并无true或者false状态,而槽SLOT接收setVisible(bool),也就无从接收按钮状态,按钮也就不起作用。
641 0
4
文章
0
问答
来源圈子
更多
阿里云GTS能力中心(浩鲸智能),从交付的视角探讨数字化转型过程中大型软件开发实践、以及阿里云产品在各行业被集成的案例分享、技术沉淀等内容。敬请关注!
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载