在工作中,制定一套统一的编码风格,可以提高开发效率,维护起来的也要容易很多,也能避免一些不必要的错误出现. 项目中常用的检查编码风格的工具JSLint.JSHint.JSCS.ESLint,,在这呢,我就不介绍这些工具的使用,大家可以自行去看看官方文档就好,我就给大家介绍平时写时候的要点就好 基本的格式化 缩进层级 使用制表符进行缩进(tab键:一个制表符的长度相当于4个字符) 编辑器可以设置是一个缩进是2个空格还是4个空格还是8个空格,建议是使用4个空格,折中处理,很多编辑器默认也是4个空格.…

我是一名前端小白,之前没写过多少代码,心里没有代码质量这个概念,人人都说代码是团队的产物,应该将代码写规范,但是我对具体什么样的代码是可维护的是茫然的. 我没写过多少代码,本来好多东西就不咋会,每次给我需求,我第一想到的就是怎样实现,我应该先完成这项工作,这就使我一次次都到最后再看看自己的代码,从头开始就是乱的,怎样一下再改成规范代码呢,我很迷茫. 长此下去,我入职了一个月两个月三个月,我的代码质量还是没有提升,我写的代码还是一塌糊涂,给后人挖坑,实力坑队友啊,一般,在团队中,自己写的后期基本都…

平时使用的时VS来进行代码的书写,VS会自动的将代码格式化,所有写了这么久的JS代码,也没有注意到这些点.看了<编写可维护的javascript代码>之后,做了些笔记. var result = parameter1 + parameter2 + parameter3 + parameter4 + parameter5 parameter6 + parameter7; 当代码超过一行的时候应该给代码换行.换行的时候,第二行的代码应该增加两个缩进 if (isTrue && is…

译者注:这是一篇很棒文章,使用有趣的叙述方式,从反面讲解了作为一个优秀的 PHP 工程师,有哪些事情是你不能做的.请注意哦,此篇文章罗列的行为,都是你要尽量避免的. 随着失业率越来越高,很多人意识到保全自己的工作是多么的重要.那么,什么是保住自己工作,并让自己无可替代的好方法呢?一个很简单的事实是只要你的代码没有人能够维护,那么你就成功保住了工作.编写不可维护的代码是一个特殊的技能,但奇怪的是,似乎对某些开发者来说是很自然的.不过对于剩下的开发者来说,这里有一些技巧和提示来让你开始写不可维护的代…

转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ作者:杨昆 一千个读者,有一千个哈姆雷特. 此系列文章将会从函数的执行机制.鲁棒性.函数式编程.设计模式等方面,全面阐述如何通过 JavaScript 编写高质量的函数. 一.引言 如何通过 JavaScript 编写高质量的函数,这是一个很难回答的问题,不同人心中对高质量有自己的看法…

关于本文: 原文地址 翻译地址 译者:野草 本文发表于前端早读课[第897期] 你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的参数,你传了一个String类型?JavaScript的弱类型是这一类bug的罪魁祸首,静态类型语言中不存在此类bug. Flow就是JavaScript的静态类型检查工具,由Facebook团队于2014年的Scale Conference上首次提出.该库的目标在于检查JavaScript中的类型…

1.单行注释 // 这是一句单行注释 2.多行注释 /* 这里是代码 */     /*  这里都是注释 1232132  */      java的注释风格 /* * 另一段注释 * 这段注释包含2个文本  */ 3  文档注释 /** * @method merge * @param {Object} 被合并的一个或多个对象 * @return {Object} 一个新的被合并后的对象 **/ 这里推荐大家一个地址,大家可以去看一看 点击查看注释大全 Sublime注释插件-Doc​Bloc…

1.编程风格 缩进层级 使用制表符进行缩进 2个/4个空格缩进 语句结尾 不省略分号 行的长度 不超过80个字符 换行 在运算符后面换行 空行 在以下场景中添加: 方法之间 在方法中局部变量与第一条语句之间 在多行和单行注释之前 在方法内的逻辑片段之间 命名 驼峰式,小写字母开头 后续单词首字母大写 变量和函数 命名前缀是名词 myName / count 常量 MAX_COUNT 大写字母和下划线来命名 构造函数 首字母大写 大驼峰命名 直接量 字符串 数字 布尔 null undefined…

1.1 每行的编码需要控制在80字符. 1.2 改用:的地方必须用上. 1.3 缩进用2个制表符,不过4个也可以. 1.4 当代码一行显示不全需要折行显示,这里我暂且假定缩进为4个字符. 1.5 如果是声明变量内容需要折行,折行的内容需要与声明时没折行的对齐. 1.6 变量函数的命名用驼峰命名,常量可为全大写,单词之间用下划线隔开. 1.6.1 函数名前缀应当是动词. 1.6.2  构造函数首位应该大写. 1.7.1   字符串相接应该用 + 号   例如'aaa\'aaa\'' 这样也是可以显…

文章开篇主要推荐了2款检测编程风格的工具: JSLint和JSHint: jsLint是由Douglas Crockford创建的.这是一个通用的javascript代码质量检测工具,最开始JSLint只是一个简单的查找不符合javascript模式的,错误的小工具,经过数年的进化,JSLint已经成为一个有用的工具,不仅能可以找出代码潜在的错误,而且能针对你的代码给出编码风格上的警告. JSHint是JSLint的一个分支项目,在github上可以搜到. JSHint的目标是提供更加个性化的j…

7.事件处理 //典型用法 function handlerClick(event){ var popup = document.getElementById('popup'); popup.style.left = event.clientX+'px'; popup.style.top = event.clientY+'px'; } 1.隔离应用逻辑 隔离应用逻辑 /* 上述代码只用到了 clientX/clientY 两个属性. 但是却将event事件整个传入 . */ // 1 隔离应用逻…

5.UI层的松耦合 松耦合定义 每个组件尽量独立,修改一个不影响其他的组件 将Js从css中抽离 不要使用css表达式,因为浏览器会以高频率重复计算css表达式,严重影响性能,IE9不支持表达式 将Css从Js中抽离 Js应只负责添加.移除类,不应该设置style.除了操作运动 将Js从HTML中抽离 不要写在标签里,用事件绑定,将Js语句放在外置文件中 将HTML从Js中抽离 从服务器加载 将模板放在远程服务器 简单的客户端模板 在HTML注释中包含模板文件,type=text/x-my-te…

4.变量.函数和运算符 变量 变量声明提前,单var 函数声明 先声明fn再执行 函数声明不应出现在语句块中 函数调用间隔 函数名与左括号间无间隔 立即调用函数 (fuction(){}) 严格模式 use strict 以严格模式来解析代码 ,不推荐在全局使用,在函数局部使用 相等 不使用强制类型转换 == != 如果比较值中一个是否是对象,会调用ValurOf()方法 . 推荐使用=== !== eval 禁止使用 Function 别无他法的时候使用eval 原始包装类型 String B…

2.注释 单行 //单行注释 多行 /* 多行注释 */ /** * 多行注释 * */ 使用注释 使用注释的原则是让代码更清晰 难于理解的代码 难于理解的代码都应添加注释 可能被误认为错误的代码 应添加注释 浏览器hack 应添加注释 文档注释 /** * @method * @param * @return * */…

1.  1)for-in循环用来遍历对象属性.不仅遍历对象的实例属性,还遍历从原型继承来的属性. 所以最好使用hasOwnProperty()方法来过滤. 2) for in循环遍历出的对象属性不能保证是按一定顺序,比如创建顺序, 字母顺序等, 所以若要按照一定顺序可以将所有key值循环遍历到数组中, 然后 执行array.sort()方法…

3.语句和表达式 所有语句都应当使用花括号 if else语句 for 循环 while 循环 do...while try...catch...finally 花括号对齐方式 左括号在第一行语句末尾: if(condition){ doSomething(); } else { doSomethingElse(); } 语句块间隔 风格一: if(condition){ doSomething(); } 风格二(推荐): if (condition) { doSomething(); } 风格…

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s…

能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地球人都知道,时间就是金钱.同样的,你也会因为帮某人省去了头疼的过程而获得他的偏爱.但是,在开始探索如何编写可维护的面向对象JavaScript代码之前,我们先来快速看看什么是面向对象.如果已经了解面向对象的概念了,就可以直接跳过下一节. 什么是面向对象?  面向对象编程主要通过代码代表现实世界中的实…

原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructuring 箭头函数 Arrow Functions Symbols 集合 学习Babel和Broccoli,马上就用ES6 代理 Proxies ES6 说自己的宗旨是"凡是新加入的特性,势必已在其它语言中得到强有力的实用性证明."--TRUE!如果你大概浏览下 ES6 的新特性,事实上它…

No.61.不要阻塞I/O事件队列 Tips: 异步API使用回调函数来延缓处理代价高昂的操作以避免阻塞主应用程序 JavaScript并发的接收事件,但会使用一个事件队列按序地处理事件处理程序 在应用程序事件队列中绝不要使用阻塞的I/O JavaScript程序是构建在事件之上的.在其他一些语言中,我们可能常常会实现如下代码: var result = downFileSync('http://xxx.com'); console.log(result); 以上代码,如果downFileSyn…

编写高效.规范的js代码: 1.变量命名空间问题,尽量使用局部变量,防止命名冲突(污染作用域中的全局变量):全局空间命名的变量可以在对应的文档域任意位置中使用window调用. 2.尽量使用单var定义变量(作用域开始先申明并赋值变量,便于后边使用),使用var定义的变量只作用于对应的作用域中,如定义的全局变量作用于全局作用域,函数中定义的变量作用于该局部作用域中.未用var定义的变量相当于一个全局变量,在函数中出现的该类变量作用域全局域.(但是var定义的全局变量不能用delete删除,而未定…

原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructuring 箭头函数 Arrow Functions Symbols 集合 学习Babel和Broccoli,马上就用ES6 代理 Proxies ES6 说自己的宗旨是“凡是新加入的特性,势必已在其…

[20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table,…

[20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table,…

[20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table,…

[20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table,…

[20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table,…

[20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table,…

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg…

本书作者Joost Visser,译者张若飞.本书讲解了编写可维护代码的10个要则,从目录就可以看出这10点分别是: 编写短小的代码单元(15行以内,在大部分情况下还是能实现的,但是当我们使用Linq或者使用对象初始化器代码一下子就超过15行了,这点要则还是有些苛刻的) 编写简单的代码单元(分支不超过4个,这个还是很值得学习的) 不写重复代码(代码重用是很重要的技巧,然而现在大部分项目追求快速迭代,把每个功能都当成独立的来进行设计,导致很多相似重复的代码,留下了很多的技术债务) 保持代码单元的接…