JavaScript专业规则12条

  学习JavaScript是困难的。它发展的如此之快,以至于在任何一个特定的时刻,你都不清楚自己是否“做错了”。有些时候,感觉像是坏的部分超过了好的部分。然而,讨论这些并没有意义,JavaScript正在征服世界,所以,我们也只能这么做了。

下面是我的一些建议:

1、JS应该放到 .js 文件中

  “额,只有那么几行而已…”,是的,我的意思是所有的 JS 都应该放在 .js 文件中。为什么呢?因为这有助于可读性,节省带宽。行内 JavaScript 在每次页面加载时都会重新下载,相反的,单独的 .js 文件则会被缓存起来。正如你所看到的,这个规则有助于支持如下一长串的其他规则。这就是为什么它的规则# 1。

2、JS 应该是静态的

  我看到过很多程序员喜欢动态的使用JavaScript。他们喜欢像使用服务器端语言如C#, Ruby, Java那样来动态的使用JavaScript。千万不要这么做。你失去了代码着色、语法高亮显示和智能感知的支持。记住,JavaScript 应该属于一个 .js 文件(见规则 #1)。

  然而,使用JSON引入动态行为。我把这称为JavaScript配置对象模式。具体方法如下:把JSON注入到你应用程序的头部,并根据业务逻辑的需要利用这些数据。你可能会想:“嘿,这违背了规则 #1”。我把 JSON 看作是数据,而不是代码,所以我破例,为了支持静态的、单独的JavaScript文件。

StackOverflow 使用的这种模式,Google 也是。你可以看下他们的代码:

  正如你看到的,StackOverflow 注入了一些个人的设置,如 isNoticesTabEnabled。这个简单的JSON代码片段为你使用静态JavaScript文件自定义行为提供了必要的数据支持。为了实现这一点,需要序列号服务器端类为JSON,然后放置在 <head> 中。然后你可以在静态的JavaScript文件中根据需要参考这个数据结构,能够使用它,是因为它被注入到 <head> 中。

3、JS 应该被压缩

  压缩可以减小文件体积,从而提升页面加载速度。记住,性能也是一项功能。因为,为了压缩,你需要把 JS 放到一个单独的文件中(见规则 #1)。压缩JS曾经很麻烦,但现在完全是简单自动化的。有一打的方式可以做到,而Gulp 和 gulp-uglify 是一种低摩擦和自动化的办法。

4、JS 应该位于页面底部

  如果你把 <script> 标签放在 <head> 中,它会阻碍页面渲染。位于 <head> 中的脚本必须在页面显示前加载,因此把 <script> 放在底部的 </body> 前面可以先显示页面,而不用等 JS 文件下载完毕。这有助于提升感知性能。如果你的JavaSctipe必须位于 <head> 中,可以考虑使用 jQuery 的 $(document).ready 这样你的脚本可以等到 DOM 加载完毕后再执行。

5、JS 应该实时的 Linted

  Linting 遵循代码风格、发现错别字、有助于避免错误。有很多这样的工具,我建议使用 ESLint。你可以使用 Gulp 的 gulp-eslint 来运行它。Gulp 可以查看你所有的 JS 文件,并在你每次保存的时候运行 linter。另外,你需要把你的 JS 代码放在单独的 .js 文件中才能运行 linter 。

6、JS应该有自动化测试

  在过去的几年中,我们知道了测试的重要性。但它在很大程度上忽略了在JavaScript,直到最近才被重视。现在典型的JavaScript应用需要测试的部分远比你实际手动测试到的要多。使用JavaScript处理这么多的逻辑,关键的是具有自动测试。

  您可以通过工具,如 Selenium 自动化集成测试。然而,集成测试往往是脆弱的,所以我建议专注于自动化单元测试。自动化单元测试有多种选择。如果你是新手, 我建议你使用Jasmine,而如果你想要终极配置,可以使用Mocha with Chai。

7、JS 需要封装

  前些年我们了解了全局变量的风险,值得庆幸的是,现在有很多的方法来封装JS:

  • Immediately Invoked Function Expressions (aka IIFE)
  • Revealing Modules
  • AMD (typically via RequireJS)
  • CommonJS (used by Node.js, use in browser via Browserify or Webpack)
  • ES6 modules

  ES6模块是未来。好消息是,虽然在浏览器中还不能很好的支持,但你可以用 Babel 来使用它。

  如果你不想 transpile, CommonJS可能是你最佳的选择。由于 Node 使用的 CommonJS 模式,所以你可以使用npm 来下载数千个包。CommonJS 不能在浏览器中运行,所以你可能需要  Browserify,Webpack, or JSPM.

8. JS 依赖应当明确

  这条规则与上述规则紧密相关。一旦你开始封装JavaScript,您需要一个简单的方法来引用其他模块。这就是常说的现代模块系统CommonJS和ES6模块的好处。你只需要在文件顶部指定依赖,就像 Java 或 C# 那样一句声明:

//CommonJSvar react = require(‘react‘);//ES6 Modulesimport React from ‘React‘

9、Transpile to JS

  最新版本的JavaScript,EcmaScript 2015(被大家熟知的名字是ES6) 官方版本在 6月份发布了。浏览器还不能很好的支持它的很多特性,但这并无关紧要。你可以用 Babel 来体验它的新特性。Babel 把 ES6 transpile 到 ES5,如果你能忍受这么做,你现在就可以享受 ES6 的新特性。JavaScript预计一年发布一次的新版本了,所以你可能一直需要transpiling 。

  或者你喜欢强类型?那么你可以考虑 TypeScript。

10、JS应该自动构建

  我们已经谈到了 linting、压缩、transpilation 和测试。但如何才能让这一切自动发生?很简单:使用自动构建。Gulp 就是这样一个结合了所有功能的工具。不过你也可以选择 Grunt 和 Webpack。或者如果你是一个高手,你也可以使用 npm 来构建。问题的关键是,不要指望人记得手动运行这些东西的,自动化是一个非常棒的选择。

11、使用框架或者库

  拿一些现成的东西来用。想保持轻量级?试试Backbone 或 Knockout。 或者 jQuery就够了。想要更多更全功能的?试试  Angular, Ember,,或者 React with Flux。

关键是:

不要试图从头开始。站在巨人的肩膀上。

  不管你选择哪个框架,都应该分开你的关注,这就是下一点..

12、JS Should Separate Concerns

  把 JS代码放到一个文件中的习惯很容易养成,或者盲目跟从你的框架的意见。当你移动到客户端的时候,不要忘记你在服务器端学到的经验教训。

  这里并不仅仅意味着就像你在Angular 和 Knockout等 MVC 框架中那样分离模型、视图、控制器。编写JavaScript的时候应该像服务器端开发者那样思考问题。把你的业务逻辑和数据访问分离出来。

  这意味着AJAX调用都应该在一个地方。创建一个集中的客户端“数据访问层”。业务逻辑模块应包含纯JavaScript的。这使得逻辑易于重用,易于测试,升级也不受影响。

来自:WEB资源网  链接:http://webres.wang/12-rules-for-professional-javascript-in-2015/

原文:https://medium.com/@housecor/12-rules-for-professional-javascript-in-2015-f158e7d3f0fc

时间: 2024-11-01 13:56:18

JavaScript专业规则12条的相关文章

[Effective JavaScript 笔记] 第12条:理解变量声明提升

js支持词法作用域,即除了极少的例外,对变量的引用会被绑定到声明变量最近的作用域中. js不支持块级作用域,即变量定义的作用域并不是离其最近的封闭语句或代码块,而是包含它们的函数. 不了解这个会产生一些微妙的bug. functon isWinner(palyer,others){ var highest=0; for(var i=0,n=others.length;i<n;i++){ var palyer=others[i]; if(player.score>highest){ highes

给JavaScript新手的24条实用建议

本文列出了24条能让你的代码编写过程更为轻松高效的建议.也许您还是JavaScript初学者,刚刚写完自己的Hello World,那这里有很多对您的工作将十分有用的小贴士:也许有些技巧您已经知道,那就试试快速浏览一下,看能不能发现一点新东西吧! 1. 用 === 代替 ==JavaScript里有两种不同的相等运算符:===|!== 和==|!=.相比之下,前者更值得推荐.请尽量使用前者. “如果两个比较对象有着同样的类型和值,===返回true,!==返回false.” – JavaScri

架构之重构的12条军规

原文地址:http://m.yuedu.163.com/reader/news/content.do?source_uuid=6a06e2c0-5865-4658-b609-c92ed95fadbd_1&content_uuid=4a0b1390a22e439ab8c28d5ddff14a87_1&isappinstalled=1&from=timeline 5月11日 00:00    来源:InfoQ中文站 [注]架构之重构的12条军规(上)发布以后,一些读者着急要下篇,所以在

javascript命名规则

<p>1.javascript是一种弱类型语言</p> <p>2.javascript的变量名跟Java一样,是以字母,下划线_,$美元符号开头.只有var这种数学类型:var str="我是一个数据类型":var numbor=12;</p> <p>3.javascript定义方法:funtion --他是一个对象</p> <p> 动态参数:Arguments--</p> <p>

12条自问让你更好地编程

12条自问让你更好地编程 来源:程序师   时间:2015-03-12 10:21:07   阅读数:3417 分享到:0 [导读] 你听说过SEMA么? 它是一个用来测试一个软件团队有多好的相当深奥的系统.不,等等!不要手贱点开这个链接!它会花费你大概六年的时间来了解这个东西.所以我提出了我自己 的.跟它相比极不负责任的.草率的评 你听说过SEMA么? 它是一个用来测试一个软件团队有多好的相当深奥的系统.不,等等!不要手贱点开这个链接!它会花费你大概六年的时间来了解这个东西.所以我提出了我自己

转:javascript常用的107条语句,PHPER必备!

1.document.write( " "); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document- >html- >(head,body)4.一个浏览器窗口中的DOM顺序是:window- >(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById( "表单中元素的ID號 ").name(或value)6.一个小写

c#命名规范汇总12条

前言 在刚学习c#的时候,在脑子根本就么有命名规范这个概念,有了一定入门的基础,也很难严格要求自己去规范代码的命名,工作后,发现自己的命名和其他人的命名总会有一些出入,总会闹出一些尴尬的笑话,这里汇总12条c#命名规范. 命名方式主要有两种, 1.驼峰命名法:Camel,驼峰命名法跟帕斯卡命名法相似,只是首字母为小写,如userName.因为看上去像驼峰,因此而得名.俗称"小驼峰". 2.帕斯卡命名法:帕斯卡命名法 即pascal命名法.做法是首字母大写,如UserName,俗称&qu

Effective Objective-C 2.0 — 第12条:理解消息转发机制

11 条讲解了对象的消息传递机制 12条讲解对象在收到无法解读的消息之后会发生什么,就会启动“消息转发”(message forwarding)机制, 若对象无法响应某个选择子,则进入消息转发流程. 1,通过运行期的动态方法解析功能,可以在需要用到某个方法时再将其加入类中. 2,对象可以把其无法解读的某些选择子转交给其他对象来处理. 经过上述两步之后,如果还是没办法处理选择子,那就启动完整的消息转发机制. 动态方法解析 对象在收到无法解读的消息之后,首先调用其所属类的下列类方法 + (BOOL)

35岁前成功的12条黄金法则 三0七法则

“三0七法则”37岁法则,人到了37岁就应该明白下面的道理12条黄金法则:“一个目标,两个基点,三项技能,四项原则,五分运气,六项要求,七分学习,八分交际,九分习惯,十分自信,十一个应该避免的人生陷阱,十二分努力”. 年龄对于生活中的每个人是不可轻易说破的秘密,但在职场,年龄却绝对透明.对于行走职场的人来说,年龄很多时候会促成升职的瓶颈.试想,一个女人如果芳龄35,而仍然是一个平板小职员,那一定是职场新生代恐龙了.所以,聪明的人应该懂得并务必赶在35岁前成功,才能从此一劳永逸,一览终山小. 一个