您现在的位置是: 首页 » 网页代码 » 出优美的javascript代码
网页代码

出优美的javascript代码

网站优化小编一月 7, 2020 19人已围观

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

网站运营中栏目排名优化技巧

写出优美的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库等等。

代码整理

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

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:271天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4000 条
  • 文章评论:153 条
  • 微信公众号:扫描二维码,关注我们