CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章这些都能成为 Web 语法规范，强迫症看不下去了由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

JavaScript 一直是饱受诟病，源于网景公司在 1995 年用了 10 天的时间创造。没有什么能用 10 天创造就是完美的，可是某些特性一旦发布，错误或不完善的地方迅速成为必不可少的特色，并且是几乎不可能改变.

Javascript 的发展非常快，根本没有时间调整设计。在推出一年半之后，国际标准就问世了。设计缺陷还没有充分暴露就成了标准.

历史遗留

比如常见的历史设计缺陷:

• null 和 undefined 两者非常容易混淆
• == 类型转换的问题
• var 声明创建全局变量
• 自动插入行尾分号
• 加号可以表示数字之和，也可以表示字符的连接
• NaN 奇怪的特性
• 更多...

Javascript 很多不严谨的特性我们可以添加 eslint 来规避。比如禁用 var 和 == 成了大多数人写代码的必备条件.

现在/未来

如今 CSS、DOM、HTML 规范由 W3C 来制定，JavaScript 规范由 TC39 制定。那些历史缺陷也成为了过去，但是现在也出现了一些不尽人意的规范.

CSS 变量

声明变量的时候，变量名前面要加两根连词线 -- 。

1. body {
2. --foo: #7f583f;
3. --bar: #f7efd2;
4. }

var() 函数用于读取变量.

1. a {
2. color: var(--foo);
3. text-decoration-color: var(--bar, #7f583f);
4. }

为什么选择两根连词线(--)表示变量?因为 $ 被 Sass 用掉，@ 被 Less 用掉。_ 、-，用作为 IE 、chrome 兼容写法。CSS 中已经找不出来字符可以代替变量声明了。为了不产生冲突，官方的 CSS 变量就改用两根连词线.

作为一个官方的标准规范，时刻影响后面的行业发展。竟然能被第三方的插件所左右，令人大跌眼镜。有开发者吐槽：微软的架构师也是够窝囊.

现在很多应用都放弃了 Sass 和 less，转向了 PostCSS 的怀抱。面向组件编程，根本用不到 Sass 和 less 里面的一些复杂功能。那么 -- 两个字符的繁琐将成为开发者永远的痛.

类私有属性(proposal-class-fields)

JavaScript 中的 class 大家已经不陌生了，简直跟 Java 的 class 一模一样.

基本用法:

1. class BaseClass {
2. msg = 'hello world';
4. basePublicMethod() {
5. returnthis.msg;
6. }
7. }

继承:

1. class SubClass extends BaseClass {
2. subPublicMethod() {
3. returnsuper.basePublicMethod();
4. }
5. }

静态属性:

1. class ClassWithStaticField {
2. static baseStaticMethod() {
3. return'base static method output';
4. }
5. }

异步方法 。

1. class ClassWithFancyMethods {
2. *generatorMethod() {}
3. async asyncMethod() {}
4. async *asyncGeneratorMethod() {}
5. }

而类私有属性的提案目前已经进入标准，它用了 # 关键字前缀来修饰一个类的属性.

1. class ClassWithPrivateField {
2. #privateField;
4. constructor() {
5. this.#privateField = 42;
6. }
7. }

你没看错，不是 typescript 中的 private 关键字.

1. class BaseClass {
2. readonly msg = 'hello world';
4. private basePrivateMethod() {
5. return this.msg;
6. }
7. }

然而 # 的语法丑陋本身引起了社区的争议:

• 「class fields 提案提供了一个极具争议的私有字段访问语法——并成功地做对了唯一一件事情，让社区把全部的争议焦点放在了这个语法上」。
• TS 投降主义已经被迫实现了。
• No dynamic access, no destructuring is a deal breaker for me
• 我们制作一个 eslint 插件 no-private-class-fields 并使用下载计数来说明社区反对
• '#' 作为名称的一部分会导致混淆，因为 this.#x !== this['#x'] 太奇怪了

前端架构师、TC39 成员贺师俊也在知乎连发好几篇文章吐槽 class fields 。

不妨大家看看关于 private 的 side：https://johnhax.net/2017/js-private/slide?qcon#0 。

提案地址：https://github.com/tc39/proposal-class-fields 。

globalThis

在不同的 JavaScript 环境中拿到全局对象是需要不同的语句的。在 Web 中，可以通过 window、self 取到全局对象，但是在 Web Workers 中只有 self 可以。在 Node.js 中，必须使用 global。非严格模式下，可以在函数中返回 this 来获取全局对象，否则会返回 undefined 。

因此一个叫 global 的提案出现。主要用 global 变量统一上面的行为，但后面绕来绕去改成了 globalThis，引起了激烈讨论.

globalThis 这个名字会让 this 变得更加复杂.

1. this 一直是困扰程序员的话题，尤其是 JavaScript 新手，关于它的博客文章源源不断
2. ES6 让事情变得更简单，因为可以告诉人们更喜欢箭头函数并且只使用 this 内部方法定义
3. 在现代 JS(modules) 中，并没有真正的全局 this，所以 globalThis 甚至不引用现有的概念

现在说这一切都是徒劳的，因为它已经进入 stage 4 。

提案地址：https://github.com/tc39/proposal-global 。

总结

JavaScript 中遗留的糟粕太多。现在受到这些糟粕的影响，很多新的提案又不得不妥协。在未来，它会变得极其复杂.

也许某一天，会出现一个没有历史包袱的 JavaScript 子集来替换它.

原文链接：https://mp.weixin.qq.com/s/PeiAfSj-p6Ck8D2OffysYg 。

最后此篇关于这些都能成为 Web 语法规范，强迫症看不下去了的文章就讲到这里了,如果你想了解更多关于这些都能成为 Web 语法规范，强迫症看不下去了的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。