如何写出优美的javascript代码?小白常识_代码入门基础教程

在多年以前,人们注重功能是如何实现的。现如今,随着Web及互联网技术的不断发展,功能仅成了最基本的要求,如何写出漂亮,整洁的代码已成为一个大牛级程序员不可或缺的条件。写出优美的JavaScript代码的方法:少写代码提前设计能有助于少写代码,增强全局感。而代码写得少还能防止失控——感觉不对时就应该停下来,腾出时间来思考,为什么会偏离最先的想法。遵行惯用法注释

如何写出优美的javascript代码?小白常识

在多年以前,人们注重功能是如何实现的。现如今,随着Web及互联网技术的不断发展,功能仅成了最基本的要求,如何写出漂亮,整洁的代码已成为一个大牛级程序员不可或缺的条件。

如何写出优美的javascript代码?小白常识_代码入门基础教程

写出优美的JavaScript代码的方法:

少写代码

提前设计能有助于少写代码,增强全局感。而代码写得少还能防止失控——感觉不对时就应该停下来,腾出时间来思考,为什么会偏离最先的想法。

遵行惯用法

  • 注释符号‘//’后应该空一格;

  • 防止变量提升,应先声明后使用(JSHint会提醒出‘_height’存在变量提升以及定义后未使用的错误);

  • 不应该使用硬编码,并且重复几次(ID后缀名可以定义到常量里,用大写字母);

  • 不应该有两个配置属性,含义不明(this.opts和this._options);

  • 若两次以上引用同一对象的属性,应该定义到局部变量再引用(var options = this._options);

  • 不应该同时使用两种属性命名风格(colModel和table_body);

  • 局部变量名应该尽可能短,而方法名应该尽可能完整(不应该同时即有fromatTpl又有parseTemplate);

  • 局部变量名不需要用下划线开头,仅对象私有属性和私有方法有此必要;

  • 变量名不需要带类型属性(_thdoms叫ths就好);

  • 使用JavaScript时,for循环基本可以避免(比如jQuery有$.each, $.map,$.filter, $.grep等等高阶函数可用);

  • jQuery对象名习惯以$开头,以便区分DOM对象;

  • jQuery查询应尽量使用ontext(如 this.$table = $(‘table’, this.$element) );

  • jQuery DOM操作和原生DOM操作不应该混用(已经使用jQuery的情况,就应该坚持使用jQuery来操作DOM,避免丑陋的原生操作);

  • DOM元素构造出来,也不应该再到文档中查询一遍了(图上的构造太复杂,一眼真看不懂);

代码复查

把程序写正确还只是跨出了第一步。把代码交给你的同事和朋友复查,这是学习经验、共同提高 最快的办法。

代码风格及排版

  • 虽然任何一种语言都没有任何约定的风格,但也总有一些不成文且喜闻乐见的习俗。以你的代码为例,给以下几个风格上的建议:

  • 每个function之间多一空行,是的,除去注释外再多一空行;

  • 适当加空格,比如if和后面的括号之间的空格、小括号和花括号之间的空格、冒号和function之间的空格等等;

  • 风格上保持一致,你的代码里面有的地方+号和运算数之间有空格,有的则没有;

  • 少用下划线开头的变量命名;

  • 一段代码里,var语句可以合并在一起;

  • 暂时不会再修改的function或object,先用编辑器折叠起来,看上去也会整洁很多;

  • 黑色背景的Editor风格不错,不过关键字、注释、运算符等颜色上可以再调整,主要是为了防止审美疲劳,换个色调换个心情;

使用成熟的JavaScript库

尽可能避免使用原生的JavaScript DOM操作。

jQuery的$符号,以CSS Selector风格统一取代了各种getElement(s)ByXxx的接口,并且扩展性非常强,是很多设计模式思想的综合运用。

当然原生DOM也有自己的优势(主要是执行效率),但是大部分时候,在开发效率、代码质量、执行效率的tradeoff中,jQuery还是最佳选择。此外也推荐下JavaScript MVC库、jQuery UI库等等。

代码整理

代码中逻辑没有分块、没有空行、没有注释、看起来很累,建议对代码进行分块,比如将变量集中在头部定义,然后处理一些赋值,最后执行一些其它的函数。

海计划公众号
(0)
上一篇 2020/03/22 01:27
下一篇 2020/03/22 01:27

您可能感兴趣的内容

  • 程序员如何预估自己的项目开发时间?小白攻略_程序员基础知识入门

    项目时间的估算对项目的成败至关重要。项目时间管理包括了项目按时完成所需的各个过程。但是,在实际项目中,经常出现项目延期,估算严重不准确的现象。预估时间本身就很难。每个程序员的估计都会跟真正需要的时间有些差距。估计时间短了说明有些事情被忽略了(编译,测试,提交代码)。估计时间超了说明任务太大,难以理解。对于资历较浅的程序员,这种估计误差是混乱的,他们经常会轻视

    2020/04/03
  • JSXGraph使用攻略一个支持各种浏览器的交互式几何图库绘制

    JSXGraph基础入门 官方网址:http://jsxgraph.org GitHub:https://github.com/jsxgraph/jsxgraph 简介描述:一个支…

    2020/03/05
  • 一份超全的 web 前端技术进阶指南小白入门_前端小白指南

    优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力。前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。前端工程师至少都要满足四类客户的需求:1、产品经理。这些是负责策划应

    2020/04/03
  • Javascript Symbol 解惑新手入门_Symbol基础知识教程

    Symbol是ES6中新引入的一种基本数据类型,在此之前Javascript中已有几种基本数据类型:NumbergStringBooleanNullUndefinedObject不同于其他基本类型的通俗易懂,Symbol 是什么和有什么用一直有些让人困惑。什么是SymbolJavaScript标准中规定对象的key只能是 String 或 Symbol 类型

    2020/03/20
  • web在互联网中的定义入门基础知识_互联网菜鸟教程网

    先引用一下百度上的说法:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。一、超文本(hypertext)  一种全局性的信息结构,它将文档中的不同部分通过关键字建立链接,使信息得以用交互方式搜索。它是

    2020/03/30
  • JS计算时间差小白常识_时间入门教程

    getTime()方法方法定义: getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。通常我们计算时间差都是通过获取两个时间数据,然后分别使用getTime()方法返回与固定的1970 年 1 月 1 日的时间差,通过对返回毫秒数的差,换算成时间单位,得出两个时间的时间差。开始操作:首先你会有一串初始的时间数据,然后通过 new Da

    2020/03/24
  • 7-days-nodejs小白常识_七天学会NodeJS

    7-days-nodejs小白常识 GitHub:https://github.com/nqdeng/7-days-nodejs 简介描述:七天学会NodeJS 这是一本NodeJ…

    2020/03/11
  • Sentry菜鸟指南_一个实时的事件日志和聚合平台

    Sentry菜鸟指南 官方网址:https://sentry.io/welcome/ GitHub:https://github.com/getsentry 简介描述:一个实时的事…

    2020/03/06
  • images-grid.js入门指南一款jquery响应式弹出层图片画廊插件

    images-grid.js基础入门 官方网址:https://taras-d.github.io/images-grid/ GitHub:https://github.com/t…

    2020/03/05
  • 不同浏览器的内核指南攻略_浏览器教程视频

    什么是浏览器内核?网页上所用到的语言有:html, css, JavaScript等,其中,前两者通常决定了该页面长什么样,它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后,负责根据这套规范将代码渲染出来呈现给用户,浏览器内核所做的就是这个渲染工作。因此,浏览器内核,也被称为排版引擎(layout engine)、渲染引擎(renderin

    2020/03/24
  • Gestalt新手入门_一组支持Pinterest设计语言的React UI组件

    Gestalt新手入门 官方网址:https://pinterest.github.io/gestalt GitHub:https://github.com/pinterest/g…

    2020/03/06
  • javascript怎么去空格?小白指南_空格菜鸟教程网

    javascript怎么去字符串的空格?在javascript中可以使用replace()方法配合正则表达式来去空格,效率不错。replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。语法:stringObject.replace(regexp/substr,replacement)参数:● regexp/substr

    2020/03/22
  • Dojo 样式简介基础入门_样式入门教程

    介绍Dojo 是基于 HTML 的技术,使用 CSS 为框架中的元素和用它开发的应用程序设置样式。Dojo 鼓励将结构样式封装在各部件中,以便最大限度复用;同时将外观主题设置到应用程序所有部件上。用户为他们的应用程序设置样式和主题时,这种模式提供了固定的套路,即使混合使用 Dojo 的 @dojo/widgets 库中的部件、由第三方提供的部件或者为特定应用

    2020/03/23
  • 学习web前端培训就业前景怎么样?小白攻略_就业菜鸟教程

    随着移动端的快速发展,web前端人员的需求量也是越来越大。与此同时web前端中的HTML5技术更是日趋成熟,HTML5是移动互联网前端的主流开发语言,目前还没有任何一种前端开发技术能够取代HTML5。因此,无论是PC端还是APP端的应用,前端样式都离不开HTML5. 通过手机与电脑上网的使用率来看,从事html5或者web相关的开发工作,就业前景还是比较可观

    2020/03/30
  • Nodejs核心模块简介使用指南_模块基础入门

    学习nodejs必须要掌握其核心,就像学JavaScript必须掌握函数、对象、数据类型、BOM、DOM等。nodejs核心也不少,这里介绍几个核心:Events模块、fs模块、stream的使用、http模块。Events事件驱动、非阻塞异步IO是nodejs的特点,所以Events是非常重要的模块。并且node中绝大多数模块都继承了Events。事件是发

    2020/03/29
  • 原生js实现放大镜效果菜鸟教程下载_效果菜鸟知识

    我们平时在电商网站购物时,需要对选取的某一个商品进行详情查看,此时当鼠标在商品图片上某一部分移动查看时旁边就会出现一个该部分图片的放大效果,这样就能够更好的对商品进行分析,下面就使用原生js来实现一下类似放大镜的效果。 思路分析:1.鼠标切换图片列表时,.pic盒子中的图片相对应切换2.在.pic中生成一个.zoom的盒子,移动该盒子时类似对.pic盒子中的

    2020/03/29