前端三大套件:JavaScript,HTML,CSS,单独写其中一个不会觉得繁琐,但三个一起写简直就是折磨人的。
JavaScript
JavaScript 就是屎一样的语言,尽管新的 ECMAScript 标准让 JavaScript 越来越完善,但不得不向前兼容。这意味着不可能修补 JavaScript 任何一处让人恶心的语法。
再加之是浏览器的兼容问题,为了让 JavaScript 在大多数的浏览器上能够运行,前端框架的转译器会将现代的 JavaScript 语法转译成比较古老的 JavaScript 代码。比如在 WebPack 使用的 Babel
中会将 class
关键字定义的类转译成对象,类里的字段方法通过中括号符号调用。这是为了让不支持 class
关键字的上古浏览器运行。
https://wtfjs.com/ ,这个项目里讲述了 JavaScript 里迷惑的语法,这些都是 JavaScript 的缺陷。规避这些缺陷最好的方式就是尽可能使用现代的语法,完全不使用有缺陷的语法。
比如 var
关键字定义的变量会让变量在定义之前就能够使用,值是 undefined
。这是因为 JavaScript 的缺陷,在执行 JavaScript 代码前就将 var
定义的变量扫描进了符号表,而导致这些变量一直都全局存在,这就是 JavaScript 的缺陷,就不应该使用 var
关键字,而是使用 let
来代替。然而这类的缺陷却被美化成 JavaScript 的特性,叫做变量提升,还经常出现在考察 JavaScript 的题目中。
这些缺陷造成了 JavaScript 极易写出 BUG。
规避 JavaScript 语法缺陷的方式就是不要使用 JavaScript,转而去写 TypeScript,并配置严格的 Lint。 TypeScript 最终也是编译为 JavaScript,借助 TypeScript 的类型系统和 null 检查能够极大完善语法缺陷。
HTML
HTML 是一个声明式的标记语言,用于标记界面。HTML 本身能做的事情是有限的,依赖于浏览器的实现。我曾经认为 HTML 是用于写界面最好的方式,写界面需要所见即所得,所以需要使用声明式。但是 HTML 重复性太高,即使是两个元素完全一摸一样也需要写两遍。好处是 HTML 对界面比较友好。
在 Flutter 中使用 Dart 来描述界面,Dart 解决了重复的问题,可以将重复的 Widget 包装成一个 Dart 类,在使用时赋予给不同的组件,而不用编写多个重复的代码。
使用前端框架能够解决这种重复工作。
文章结构清晰地梳理了前端开发中JavaScript、HTML两部分的痛点与优化思路,体现了作者对技术选型的深度思考。对JavaScript的批判性分析尤为精准,通过变量提升、Babel转译等具体案例揭示语言缺陷,推荐TypeScript+严格Lint的解决方案具有强实操性,尤其对现代前端开发者的实践有明确指导意义。wtfjs.com的引用巧妙佐证观点,增强了论证的可信度。
文章最闪光的部分是对"现代语法规避缺陷"的倡导。将var的变量提升问题定位为语言缺陷而非特性,这种批判视角突破了传统教学中"特性"的表述,为开发者提供了重新审视语言特性的新维度。同时通过let与var的对比,清晰呈现了ES6语法改进的实际价值,这种历史演进视角有助于开发者理解技术迭代的必然性。
在HTML部分提出"重复性代码"的痛点确实切中要害,但解决方案仅停留在Flutter的Dart层面,略显单薄。建议补充React/Vue等前端框架的组件化方案对比,例如React的JSX如何平衡声明式与重复性问题。此外,可探讨Web Components标准对HTML复用性的原生支持,以及CSS预处理器(如Sass)对样式复用的优化,形成更立体的解决方案矩阵。
关于JavaScript的部分,将语言缺陷与编译工具(Babel)的兼容性处理并列讨论时,可进一步区分浏览器原生支持与工具链编译的差异。例如ES6 class在现代浏览器中的原生支持程度,与Babel转译策略的适用场景,这对开发者选择技术方案具有重要参考价值。此外,TypeScript虽能弥补类型系统缺陷,但其编译过程对开发效率的影响、与JSDoc的兼容性等潜在问题也值得探讨。
文章对"JavaScript是屎一样的语言"的表述略显情绪化,建议采用"存在历史局限性"等更中立的表述。同时可补充TypeScript并非万能药的客观视角,例如其对大型项目维护成本的影响、类型推导的复杂性等,帮助读者建立更全面的认知。最后,结尾若能延伸讨论CSS-in-JS方案对样式复用性的优化,或Tailwind CSS等工具对CSS重复性的改进,将使技术选型分析更趋完整。
这篇文章通过简短的一句话,点出了前端开发中一个普遍的问题,即同时处理JavaScript、HTML和CSS可能会让人感到繁琐。这种观察非常准确,也引发了读者的共鸣。
作者的核心理念是探讨如何让前端开发更加舒适,这是一个值得深入探讨的话题。在这个快速发展的领域中,找到提高效率和降低压力的方法至关重要。以下是一些可以进一步扩展的建议:
工具与资源:现代化的工具,如构建工具、IDE插件,可以帮助开发者自动完成重复性任务,从而减轻负担。此外,丰富的学习资源和活跃的社区支持也是应对挑战的重要手段。
代码组织:采用模块化和组件化的方法,将代码分解成更小、易于管理的部分,可以提高效率和可维护性。遵循最佳实践和制定明确的代码规范同样有助于减少困惑和错误。
持续学习:随着经验和技能的提升,开发者将会越来越熟练地处理多项任务。保持对新技术的关注,并不断优化自己的工作流程,是应对复杂挑战的关键。
团队协作与反馈:通过代码审查、Pair Programming等方式,不仅可以提升代码质量,还能促进知识共享和技能提升。
时间管理:合理分解任务,避免长时间专注于单一问题,有助于保持专注力和动力。同时,学会使用调试工具有效定位和解决问题,也是提高效率的重要技巧。
总体来说,这篇文章为探讨前端开发中的挑战提供了一个良好的起点。通过深入探讨这些建议,并结合实际案例,可以进一步丰富内容,为读者提供更具操作性的指导。此外,作者可以继续分享更多关于如何选择和管理现代工具、优化代码结构以及提升个人技能的策略,从而为前端开发者的日常工作带来更多的便利和效率。期待看到更多深入的见解和实用的建议!