无注释,无文档,命名千奇百怪等等,对于后来者,是极其痛苦的,其实个人觉得一个非常好的产品,一手代码非常重要,既是标准,往往又是参照。
三大 JavaScript 主流模块规范:CommonJS、AMD 和 ES6 Module。CommonJS 和 AMD 都未统一浏览器和客户端的模块化规范。目前 Node.js 使用 CommonJS 作为官方的模块解决方案,虽然内置的模块方案促进了 Node.js 的流行,但是也为引入新的 ES Modules(ESM)标准造成了一定的阻碍,不过 Node.js 9.0+ 已经支持 ESM 语法。
可能现在不管大家去面试还是在公司上班都会涉及到代码可读性,或者是代码规范。优秀的代码注释可以提高代码可读性,当然优秀的命名规范也可以啦。我们这里就讨论一下代码注释。代码注释可能就相当于产品使用说明书,当别人看到你的代码的时候,知道你的代码是干嘛的,是怎么使用的。我们所熟悉的可能就是 // 是单行注释,/***/ 是多行注释,下面我们就来聊一聊代码注释!
一个前端项目,目录的规范是必要的,当然,在一般开发中是没有必要做的那么严谨,在此,分享一下个人认为的基础规范,都只是个人认为。
对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。
根据公司业务要求而定,一般: 主流程测试:Chrome 30+、IE9+; 完整测试: Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。
讲法声明 - 很重要,请先查看 关于JavaScript的讲法,我们采取的方式与HTML&CSS类似,先在课程中带大家,以“实现页面小功能”为目的,一步一步的进行实现,并在期间讲解相关知识点,在其中一些相关的“细节”知识点我们暂时先忽略掉,先完成主干的学习。在一个小阶段的主干知识学习完成之后,我们再回头详细分析“细节”。这样更有利于大家的吸收和理解,不容易陷入到一些不必要的问题当中。 本文内容概要: 1 回顾JavaScript的基本组成 2 JavaScript引入方式 3 JavaScript基本调试
不知道有多少 TS 爱好者哀叹过这个问题:虽然我很想用 TS,奈何老大只让用 JS。
jsx = javascript XML jsx :facebook 提出的草案jsx规范:核心规范 https://facebook.github.io/jsx/
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录
提高代码可预测性和可维护性的方法是使用命名约定,这就意味着采用一致的方法来对变量和函数进行命名。
项目目录和文件的命名使用小写字母,避免使用大写或驼峰,多个单词以下划线 _ 分隔 如:my_project/cast_detail.js
现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式一起做事,提升协作效率,降低沟通成本。代码的字里行间流淌的是软件系统的血液,质量的提升是尽可能少踩坑,杜绝踩重复的坑,切实提升系统稳定性,码出质量。
在一个风和日丽的早晨,我正悠闲地喝着Coffe,突然领导向我走来,我赶紧熟练地切出VSCode,淡定自若地问:领导,什么事?领导拍了拍我的肩膀:你上次封装的方法同事跟我反馈使用起来很不错啊,你不如做成JS插件给大家用吧。我放下了手中的马克杯,甩了一下眼前仅剩的几根刘海:没问题啊,小Case!随即开始摸鱼....
组件名为多个单词,并且用连接线(-)连接,避免与 HTML 标签冲突,并且结构更加清晰。
永远一致同一套编码规范,可以是这里列出的,也可以是你自己总结的。如果您发现本规范中有任何错误,敬请在问题中指正。
抓重点: 这么多要看到猴年马月去,找一个对的上眼的深入学习下,切勿都学,没这个必要,粗略扫读,有针对性阅读!
As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性。 As long as necessary(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感。
20. 判断是否相等时候 采用=== 判断包括类型的相等 21. 尽量使用语法严格模式 消除代码之中的不友好;代码运行更快 ;保证运行的安全 ;为新版本的js做好铺垫。 22. 匿名函数的调用写在匿名函数的内部
在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也方便他人阅读修改代码。
安装后,按快捷键Ctrl+Shift+P,输入 configure language
后续的文章我也补充齐全了,一共有两篇,都是实战篇,一篇是制定自己团队的前端开发规范之 eslint,另外一篇是手摸手带你实践标准的前端开发规范,希望大家可以去看一下,然后把这套规范实践起来,让自己的开发存在更少的bug。
1.组件开发需要全面的收集需求,深刻分析此组件可以覆盖的业务范围,并作出正确的取舍。 2.一个组件不可能是大而全的,但可以是层层扩展的,从一个基础组件,一层层的扩展成更复杂的组件,甚至超大型的组件。 3.组件的props、method、events需要遵守同样的命名规范,如获取值用getXXX,设置值用setXXX,创建用createXXX等,这些可以快速的帮助使用者找到需要的接口。 4.组件需要添加name,在设置keep-alive时需要用到。 5.组件头部应该添加组件的说明注释,如接收的传入参数、向外层抛出的事件名等。 6.props定义应该尽量详细,包括type、default、required、甚至validator 7.样式应该设置scoped,避免污染全局样式。
前端规范主要是为了让代码能有更好的可读性以及优雅性。不要为了规范而去规范,使用某些花里胡哨的写法,本质上是为了代码的维护性更强一些,所以才会制定规范来约束。主要针对vue2.0~ 其实我觉得vue2.0的options的写法是比较清晰的,在vue3.0去除了这些写法就需要一定的规范去让各个模块划分清晰一些,往react靠了,未来的趋势可能就是函数化编程,所以对于把控可维护性这块也需要去跟进,也可以配合ts以及eslint和各种插件去配合使用。
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。
前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头。前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码。 本系列文章共有三篇,分别讨论HTML,CSS,Javascript,本篇将讨论Javascript。 目前,Javascript已广泛运用于前端
代码规范是指程序员在编码时要遵守的规则,规范的目的就是为了让程序员编写易于阅读、可维护的代码。
JavaScript 是一种很好的语言。它有一个简单的语法,庞大的生态系统,以及最重要,最伟大的社区。同时,我们都知道,JavaScript 是一个非常有趣又充满戏法的语言。 他们中的有些可以迅速将我们的日常工作变成地狱,有些可以让我们大声笑起来。
方式表达逻辑,【强制】请勿超过3层, 超过请使用状态设计模式。 正例:逻辑上超过 3 层的 if-else 代码可以使用卫语句,或者状态模式来实现。
@param参数类型 $参数名称 参数说明 - 用于指定一个函数或方法的参数类型、名称和说明。
//(双斜线)与代码之间保留一个空格,并且//(双斜线)与注释文字之间保留一个空格。
2.浏览器内核编译器开始编译代码(cpu只能处理二进制数据,需要将我们写的代码转成二进制)
JavaScript 常用来为网页添加各式各样的动态功能。例如:点击隐藏、点击显示。
这不,还真编写起了规范,并且在 github 上开源出来了,项目地址:https://github.com/trekhleb/state-of-the-art-shitcode
前端代码审查清单是一个保证前端代码质量的审查清单。当我们在开发写代码的时候,总会各种各样的问题,自测的时候由于太熟悉自己的代码逻辑往往测试不够充分,无法发现问题。
条件声明例如 if 会用 ToBoolean 这个抽象方法将表达式转成布尔值并遵循如下规则
在日益复杂和多元的Web业务背景下,前端工程化这个概念经常被提及。“说说你对Web工程化的理解?” 相信很多初学者在面试时会经常遇到,而大多数人脑子会直接浮现出 Webpack,认为工程化就是 Webpack 做的那些事情儿,当然也不能说不对,准确说 Webpack 只是工程化背景下产生的工具。
// 数组解构赋值 const arr = [1, 2, 3, 4] // bad const first = arr[0] const second = arr[1] // good const [first, second] = arr
vue3.0在半年前,就有利用平台尝试过一波。为什么优先考虑平台尝试,主要原因是因为使用ant的api,已有的api使用代码对于页面规范以及代码规范起到一个模板作用,而且具有一定的参考价值。以便于更好的入门。当时vite也是一个大热门,于是就一起照猫画虎的都用上了。后来果然还是半路夭折了,原因很简单,当时vue3.0还属于在社区范畴,遇到的一些问题在网上找不到对应的解决方法,才疏学浅,无法知晓原因(其中记得有一个报错注释了源码才清掉),加上当时自己的业务组遇上很多需求,于是搁浅了很久。
参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、views。
ColorPicker 通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl / Cmd + Shift + C 快捷键。
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是,验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。
公众号原文链接:深入vue - 源码目录及构建过程分析 喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」
学习 Webpack 的原因 目前前端技术发展很快,引入了越来越多的思想、框架和工具 现阶段的大型应用就要求前端必须要有独立的项目,独立的项目想要有足够的效率就必须进行工程化。 具有复杂数据状态的应用
JavaScript 是一种弱类型语言,也就是说不需要指定变量的类型,JavaScript的变量类型由它的值来决定, 定义变量需要用关键字 'var', 一条JavaScript语句应该以“;”结尾
领取专属 10元无门槛券
手把手带您无忧上云