非常に実用的な JavaScript 開発者ツールボックスのコレクション-jsチュートリアル-php.cn

HTML5が普及して以来、Webプラットフォーム全体が大きく進歩し、人々はJavaScriptを複雑なアプリケーションを作成できる言語として認識し始めました。多くの新しい API が登場し、ブラウザーがこれらのテクノロジーをどのように使用するかについての記事が書かれています。

JavaScript は、もともと Web ページのパフォーマンスを向上させるために作成されたスクリプト言語であり、現在では考えられるほぼすべての場所で使用されています。業界全体の技術的能力が向上し続けるにつれて、JavaScript はサーバー側で実行できるようになり、ネイティブモバイルアプリケーション用のコードにコンパイルすることもできるようになりました。今日の JavaScript 開発者は、数百もの IDE、ツール、フレームワークから選択できる豊富なエコシステムの一員です。利用可能なオプションやリソースが膨大なため、どこから始めればよいかわからないと感じる開発者もいるかもしれません。 JavaScript の簡単な歴史から始めて、現在最も人気のあるフレームワーク、ツール、IDE のいくつかについて取り上げながら、現代の JavaScript 開発者が直面している状況について説明し、概要を説明したいと思います。

歴史を簡単に振り返ってみましょう

ちょっとした旅行に出かけましょう。 1995 年当時、ブラウザのオプションは Netscape Navigator と Internet Explorer 1.0 だけでした。このサイトは迷惑な点滅するテキストと多すぎる GIF でいっぱいです。ダイヤルアップネットワーク経由で大量のリッチコンテンツを含むページを読み込むには、最大 2 分かかる場合があります。その後、これらの古代の Web サイトでクライアント側のコードを実行できる Web 言語が登場しました。これは JavaScript が誕生した年です。

20 年前に作成されたこれらの Web サイトは JavaScript をあまり活用しておらず、この言語の可能性を十分に活用していませんでした。場合によっては、ポップアップダイアログボックスを通じて情報を通知したり、特定のボックス内のテキストをスクロールしてニュースを表示したり、数か月後に再度アクセスできるように

cookie を使用してユーザー名を保存したりすることがあります。自分の名前を直接表示できます。もちろん、職場には JavaScript を主な開発言語として使用する職種はありませんでしたが、実際に仕事で JavaScript を書くことができたのは非常に幸運でした。つまり、当時の Web サイトでの JavaScript の適用は、DOM で何らかのトリックを行うことでした。

現在、JavaScript は基本的にどこでも見ることができます。

Bootstrapから ReactJS、Angular、ユニバーサルjQuery、そしてサーバーサイドで実行されるNode.jsに至るまで、JavaScript は最も重要で人気のある Web 言語の 1 つになりました。

フレームワーク

JavaScript が誕生してからの最大の変化の 1 つは、その使用方法です。厄介な document.GetElementById メソッドを呼び出したり、面倒な XmlHttpRequest オブジェクトを作成したりする時代は終わりました。代わりに、これらの基本関数はさまざまな便利な

クラスライブラリを通じて抽象化され、開発者にとって JavaScript が使いやすくなっています。これが、JavaScript が今日どこにでも普及している主な理由の 1 つです。

jQuery

jQuery は、2006 年に John Resig によって立ち上げられました。これは、さまざまな不明瞭で謎めいた JavaScript コマンドとメソッドを抽象化および簡素化する豊富なツールセットを提供します。このツールをデモンストレーションする最も簡単な方法は、コード例を使用することです。

純粋な JavaScript を使用して AJAX リクエストを作成します:

function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               alert("success");
           }
           else if(xmlhttp.status == 400) {
              alert("error 400")
           }
           else {
               alert("something broke")
           }
        }
    }

    xmlhttp.open("GET", "test.html", true);
    xmlhttp.send();
}

ログイン後にコピー

Source: Stack Overflow

jQuery を使用して AJAX リクエストを作成します:

$.ajax({
    url: "test.html",
    statusCode: {
    	200: function() {
    		alert("success");
    	},
    	400: function() {
    		alert("error 400");
    	}
    },
    error: function() {
    	alert("something broke");
    }
});

ログイン後にコピー

jQuery により、複雑な JavaScript 関数が簡単に使用できます。DOM 操作は朝飯前。その結果、jQuery は広く使用される最も初期の JavaScript フレームワークの 1 つとなり、JavaScript を抽象化するという考えが他のさまざまなフレームワークを構築するための基礎となりました。

AngularJS

AngularJS (一般に「Augular」としても知られる) は、2009 年にデビューしました。これは、シングルページアプリケーション (SPA) の作成を簡素化するために Google によって作成されたフレームワークです。 jQuery と同様に、その目標は、複雑な操作を再利用性の高いメソッドに抽象化することです。 JavaScript 用のモデルビューコントローラー (MVC) アーキテクチャを提供します。

ReactJS

ReactJS (一般に「React」としても知られる) は、シーンの新参者です。 Facebook によって作成され、2013 年に初めてリリースされました。 Facebook は、SPA の問題を処理する上で React が Angular の代替となる可能性があると考えているため、Angular と React が競合他社であると考えているのであれば、その通りです。ただし、React と Angular の最大の違いは、React がより効率的でパフォーマンスが高く、高速なクラスライブラリであることです。以下の図は、React、Angular、Knockout (この記事では説明されていない別のライブラリ)、および純粋な JavaScript を使用して DOM 内の 1000 項目のリストをレンダリングするのに必要な時間を示しています。

賢い開発者

アプリケーションがパフォーマンスを重視する場合、React が正しい選択です。

JavaScript 開発環境 効率的な開発には、IDE の使用が非常に重要です。 IDE の正式名称は統合開発環境であり、開発者に一連のツールを提供するアプリケーションです。このようなツールの最も重要な部分は、通常、リッチなテキストエディタであり、これは通常、構文の強調表示、オートコンプリート、およびさまざまな煩わしい手動操作を高速化するキーボードショートカットをユーザーに提供します。

Sublime Text

Sublime Text は実際には IDE ではありませんが、構文の強調表示と直感的なキーボードショートカットを提供する、プログラミング用の軽量で高速なテキストエディターです。本質的にクロスプラットフォームであるため、PC 環境で Mac を使用したい (またはその逆) 開発者にとって理想的です。 Sublime Text のほぼすべての部分はカスタマイズ可能であり、

Git との統合やコード編成など、IDE に似た機能を追加するさまざまなプラグインも提供します。これは、JavaScript 愛好家や初心者の開発者にとって最適な選択肢です。公開時点では、Sublime Text の各ライセンスの料金は 70 ドルです。

出典

Sublime Text

WebStorm

WebStormは、JetBrainsチームによって開発されたインテリジェントなIDEで、主にHTML、CSS、JavaScriptの開発に重点を置いています。わずかなライセンス料金 (この記事の公開時点では 49 ドル) のみで、コード補完機能が組み込まれているため、経験豊富な JavaScript 専門家の間で広く認識され、事実上の標準とみなされているのも無理はありません。レビューツールはユニークです。 WebStorm では、豊富な JavaScript デバッガー も利用でき、Karma テストエグゼキューターや JSDriver、さらには Node.js 用の Mocha など、さまざまな人気のある 単体テスト フレームワークと統合されています。 WebStorm の最も優れた機能の 1 つは、ライブ編集機能です。プラグインが Chrome と WebStorm の両方にインストールされている限り、開発者はコードを変更して、結果をブラウザで直接確認できます。開発者は、ブラウザウィンドウ内の変更を強調表示するようにライブ編集を構成することもでき、デバッグとコーディングの生産性が大幅に向上します。

全体として、JavaScript がフルタイムの仕事である場合は、IDE WebStorm が良い選択になる可能性があります。

出典

JetBrains

Brackets

Bracketsは、視覚化ツールに焦点を当てたオープンソースの無料IDEです。 Brackets は WebStorm と同様のリアルタイム編集機能を提供し、コード変更の結果をブラウザウィンドウで直接確認できます。また、並列編集もサポートされているため、コーディング中に作業し、別のアプリケーションに切り替えたり、ポップアップウィンドウを使用したりすることなく、コードの結果を直接確認することができます。 Brackets の最も興味深い機能の 1 つは抽出 (Extract) と呼ばれるもので、Photoshop PSD ファイルを分析してフォント、色、サイズなどの情報を取得できます。この機能により、Brackets はデザイン作業も行う JavaScript 開発者に非常に適しています。 (画像をクリックすると拡大します)

出典

ブラケット

Atom

Atom是由GitHub推出的一款开源的免费富文本编辑器，非常易于上手使用，在安装后可以直接运行，而无需进行任何配置文件的改动，就能够“良好地运行了”。Atom最有趣的一点是可以对它的每一方面都进行自定义（GitHub将其称为“可以随便折腾”），它是在一个web核心的基础上所创建的，因此用户就可以通过编写标准的HTML、CSS和JavaScript，对它的外观进行自定义。想要为Atom换个不同的背景和文本字体？改一下CSS就行。或者你也可以选择下载并应用各种为Atom所创建的主题。这种灵活性让Atom能够按照你所希望的方式进行展现。对于JavaScript新手开发者和热衷于自定义的用户来说，Atom是一个优秀的工具。

（单击图片以放大）

来源: Atom

构建与自动化工具

现代的JavaScript项目正倾向于变得越来越复杂，变化的部分也在不断增多。这并不是说这门语言或是对应的工具不够高效，而是由于当前所创建的web应用程序的丰富性、酷炫的体验和复杂性所导致的直接后果。在大型的项目中工作时，你必须经常做许多重复性的工作，无论是在你打算签入代码、或是将代码构建到生产环境中。这些工作可能会包括合并、压缩、对LESS或SASS CSS文件的编译，甚至是运行测试。手动完成这些工作不仅令人沮丧，效率也很低下。更好的办法是通过某种支持这些任务的构建工具，对这些工作进行自动化。

合并（Bundling）与压缩（Minification）

你所编写的大多数JavaScript和CSS都会在多个web页面中共享。因此，你很可能会将这些内容放到单独的.js和.css文件中，然后在web页面中引用这些文件。这种方式的结果是，用户的浏览器为了完全显示你的web引用，需要分别发送一个HTTP请求，以获取这些文件（或者至少需要验证一下这些文件是否已经改变了）。

HTTP请求的代价是很高的。除了请求本身的大小之外，你还将因为网络延迟、HTTP头和Cookie等内容买单。合并与压缩工具的设计目的就是减少、乃至完全消除这些请求所带来的影响。

合并

要改善web代码的性能，开发者所能做的最简单的一件事就是将代码进行合并。在合并流程中，多个JavaScript或CSS文件将被并入一个单一的JavaScript或CSS文件中。感觉上就像是将多张个别的全景图像的照片连接在一起，以完成一张继续的单一照片。通过将JavaScript文件与CSS文件进行合并，我们就能够消除很大一部分HTTP请求的开销。

压缩

JavaScript开发者还有一种可以改善性能的方式，就是将刚刚合并的代码进行压缩。压缩过程能够将JavaScript和CSS代码以尽可能最小的形式进行压缩，同时保证功能不变。对于JavaScript来说，这就意味着将变量重命名为无意义的单字符形式，并且去除所有空白和格式符。而对于CSS来说，由于页面风格依赖于变量的名称，因此通常来说只会去除格式符与空白。压缩能够极大的改进网络性能，因为它减少了每个HTTP响应的字节数。

未经压缩的AJAX JavaScript代码，与上面所展示的代码相同：

$.ajax({
    url: "test.html",
    statusCode: {
    	200: function() {
    		alert("success");
    	},
    	400: function() {
    		alert("error 400");
    	}
    },
    error: function() {
    	alert("something broke");
    }
});

ログイン後にコピー

同样的代码经过压缩之后的形式：

$.ajax({url:"test.html",statusCode:{200:function() {alert("success");},
400:function(){alert("error 400");}},error:function(){alert("something broke");}});

ログイン後にコピー

请注意，我将压缩后的输出结果分为两行的目的，只是为了在文章中阅读起来更方便，而实际上经过压缩后的输出通常来说只有一行。

合并与压缩的时机

通常来说，合并与压缩步骤只会在生产环境上执行，这样做的原因是为了让你在本地或是开发环境中可以对包含了格式符和行号的原始代码进行调试。而调试上面所显示的那种压缩代码会非常困难，因为所有的代码都挤在一行中。而且压缩后的代码会变得完全不可读，在你尝试调试时会发现这种代码完全无用，并让你感到非常受挫。

源代码映射文件

有些时候，代码中的某些bug只有在生产环境才能重现。这样一来，当你要调试某些问题时，经过压缩的代码就成为了一个问题。幸运的是，JavaScript支持源代码映射文件，它能够在压缩后的代码和原始代码之间进行“映射”。这些代码映射文件是在压缩阶段由下文所说的某些构造工具所生成的。随后你的JavaScript调试器就能够使用这些映射文件，为你提供清晰可读的代码进行调试了。你应当尽可能将映射文件与实际代码一起发布，这样就能够在某些功能出错时进行代码的调试了。

代码整理

代码整理工具会根据预定义的格式化规则检查你代码中的常见错误和问题，这些工具所报告的错误通常都类似于以下这些：使用了tab缩进而不是空格、在行末遗漏了分号、或是在没有使用if、for或while语句的情况下使用了大括号。大多数IDE中都提供了代码整理工具，而其它一些IDE也允许用户自行安装代码整理插件。

最流行的两种JavaScript整理工具是JSHint和JSLint，JSLint是由Doug Crockford开发的整理框架，而JSHint则是由社区人员从JSLint中分支出来的。他们仅在各自的代码格式化标准上有着一些区别。我的建议是两者都尝试一下，然后选择一个最适合你的代码风格的工具。

自动化任务：Grunt

与它的名称不同，Grunt（本意为打呼噜）绝不是一个粗糙的工具，而是一个健壮的命令行构造工具，能够运行用户所定义的各种任务。通过设置一个简单的配置文件，你就可以让Grunt进行各种工作，例如编译LESS或SASS文件、构建并压缩某个特定文件夹中的所有JavaScript和CSS文件、甚至是运行某种代码整理工具或是测试框架。你也可以通过配置，将Grunt作为一种Git钩子运行，当你往源代码控制库里进行签入时，自动地压缩与合并你的代码。

Grunt支持各种命名的目标，因为你可以在不同的环境中指定不同的命令，比方说你可以将“dev”和“prod”指定为目标。这一点对于某些场景来说非常有用，例如在生产环境中将代码进行合并与压缩，而在开发环境中忽略这一步骤，以便于调试的需要。

Grunt中一个很有用的特性叫做“grunt watch”，它能够对一个目录中的文件，或一个文件集合中的变更进行监控。这一特性可以整合入WebStorm和Sublime Text这样的IDE中使用。通过使用监控特性，你可以根据文件变更的情况触发事件。对于LESS或SASS的编译就是这一特性的实用作法，你可以设置grunt以监控你的LESS或SASS文件，当文件产生变更时立即进行编译，编译后生成的文件就可以直接在开发环境中进行使用了。你也可以让grunt监控在你修改了每个文件之后都自动地运行某种代码整理工具。通过grunt监控进行实时任务执行，是一种加速你的生产力的极好的方式。

自动化任务：Gulp

Grunt和Gulp都是用于解决构建自动化问题的工具，可以说两者是直接的竞争者。他们之间主要的差别在于，Grunt更专注于配置，而Gulp更专注于代码。你在Grunt文件中通过声明式的JSON对构建任务进行配置，而在Gulp文件中通过编写JavaScript函数以实现相同的功能。

下面的这个Grunt配置文件会在SASS文件产生变更时，编译生成CSS文件：

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: "app/styles",
        src: "**/*.scss",
        dest: "../.tmp/styles",
        expand: true,
        ext: ".css"
      }]
    }
  },
  autoprefixer: {
    options: ["last 1 version"],
    dist: {
      files: [{
        expand: true,
        cwd: ".tmp/styles",
        src: "{,*/}*.css",
        dest: "dist/styles"
      }]
    }
  },
  watch: {
    styles: {
      files: ["app/styles/{,*/}*.scss"],
      tasks: ["sass:dist", "autoprefixer:dist"]
    }
  }
});
grunt.registerTask("default", ["styles", "watch"]);

ログイン後にコピー

来源: Grunt vs Gulp – Beyond the Numbers

下面的这个Gulp配置文件同样会在SASS文件产生变更时，编译生成CSS文件：

gulp.task("sass", function () {
  gulp.src("app/styles/**/*.scss")
    .pipe(sass())
    .pipe(autoprefixer("last 1 version"))
    .pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
  gulp.run("sass");
  gulp.watch("app/styles/**/*.scss", function() {
    gulp.run("sass");
  });
});

ログイン後にコピー

来源: Grunt vs Gulp – Beyond the Numbers

我建议你可以随意选择自己所喜欢的那一种。这两种工具一般来说都是通过Node.js的包管理器npm下载的。

总结

JavaScript自从互联网的早期诞生以来，已经经历了巨大的改进。如今，它已成为了交互式web应用程序中一个突出的重要组成部分。

开发者们从1995年起到如今也经历了巨大的变化，如今的开发者们更乐于使用丰富而健壮的框架、工具和IDE，以提高工作的效率和生产力。

初めての最新の JavaScript アプリケーションの作成は、思っているよりも簡単かもしれません。 IDE (初心者には Atom をお勧めします) を選択し、npm と grunt をインストールするだけです。後でどこかで行き詰まった場合は、Stack Overflow が素晴らしいリソースです。少し時間をかけて基本を学ぶだけで、すぐに最初の最新の JavaScript アプリケーションを開発し、最終的に公開できるようになります。