前端小白的几个坏习惯

简介: 最近在教授前端小白学员编写一些简单的网页。在这个过程中发现了小白们比较容易遇到的一些问题或者坏习惯,在这里对它们进行一一解释。

最近在教授前端小白学员编写一些简单的网页。在这个过程中发现了小白们比较容易遇到的一些问题或者坏习惯,在这里对它们进行一一解释。

文件名命名

有些学员的文件命名是这样的:

1.png

除了网页的内容外,所有的东西都应该用英文,而不是拼音。

原因有如下几点:

1、编程不是一个人的活动,是群体活动。我们使用的编程语言、框架和库,几乎全部都是英文。使用中文,你的协作者会难以理解你的代码。而且中英混搭会让代码阅读困难。

2、使用拼音和使用汉字基本上没有什么区别,甚至还不如汉字直观。

3、拼音很难加音标,而且即使能加音标,也很难表达真正的意思,因为同音词太多,它存在多义性,比如 heshui,你不知道它到底是在表达喝水还是河水。

4、使用拼音会让你显得非常不专业。

5、坚持使用英文编程,有利于提高英语水平。

如果英语不好,刚开始可能会难以忍受,但是一旦熬过去开始这段时间,坚持下来,将会是长期的回报。

如果你英语实在是非常差劲,可以借助一些翻译软件。比如世界上最好的翻译网站:

translate.google.com/,虽然是 Google 的域名,但是大陆并没有墙。

不止是文件名,变量、函数等事物都应该使用英文命名。

使用英语,越早越好。

文件类型命名

有些同学的文件命名是这样的:

2.png

文件命名的问题上面已经解释了,这里主要来看文件后缀名的问题。

应该使用小写 .htm/.html 结尾。

原因有如下几点:

1、不同的操作系统处理大小写是不一样的。Windows/Mac 系统大小写不敏感,Linux 系统大小写敏感。统一命名方式会具有更好的移植性。

2、易读性,事实证明小写的单词更易于阅读。

3、便捷性,文件名和后缀名都保持小写,不需要额外按下 Shift 键了。

4、htm 和 html 的区别是,在老的 DOS 系统上,文件后缀名最多只支持 3 位。所以很多语言都会把文件后缀名限制成 3 位以内。现在的操作系统已经没有这个问题了,所以 htm 和 html 的作用是完全一致的。如果你追求简洁一点,那么使用 htm 时完全没问题的。

代码格式化

3.png

VSCode 提供了 prettier 插件,我们可以使用它对代码格式化。

代码格式化有以下优点:

1、代码格式化后更易于阅读和修改。比如它会自动帮你添加空格、对齐、换行等。

2、不需要去刻意学习代码样式了,代码格式化工具会帮你做好,并且在这个过程中你会潜移默化的学会怎么样调整代码样式。

3、使用统一的代码格式化,可以帮助大家在协作时保持一致,不会有比必要的争议。

4、新人加入项目时也可以更容易地融入到项目,不会看到风格迥异的代码。在代码合并的时候也可以减少冲突的发生。

相关文章
|
前端开发 JavaScript Java
前端小白的几个坏习惯
前端小白的几个坏习惯
|
2月前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
115 0
|
10天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
10天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
1月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
32 2
|
2月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
54 1
|
2月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
2月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
45 2
|
2月前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
32 1
|
2月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
72 1

热门文章

最新文章