Eine Sammlung sehr praktischer JavaScript-Entwickler-Toolboxen

Seit HTML5 populär wurde, hat die gesamte Webplattform große Fortschritte gemacht und die Menschen beginnen, JavaScript als eine Sprache zu betrachten, die in der Lage ist, komplexe Anwendungen zu erstellen. Es sind viele neue APIs entstanden und es wurden Artikel darüber geschrieben, wie Browser diese Technologien nutzen.

Als Skriptsprache wurde JavaScript ursprünglich entwickelt, um die Leistung von Webseiten zu verbessern. Heutzutage wird JavaScript an fast jedem erdenklichen Ort verwendet. Da sich die technischen Möglichkeiten der gesamten Branche immer weiter verbessern, kann JavaScript nun serverseitig ausgeführt und auch in Code für native mobile Anwendungen kompiliert werden. Heutige JavaScript-Entwickler sind Teil eines reichhaltigen Ökosystems, in dem ihnen Hunderte von IDEs, Tools und Frameworks zur Verfügung stehen. Angesichts der Vielzahl an verfügbaren Optionen und Ressourcen haben einige Entwickler möglicherweise auch das Gefühl, nicht zu wissen, wo sie anfangen sollen. Ich würde gerne die Situation moderner JavaScript-Entwickler diskutieren und skizzieren, beginnend mit einer kurzen Geschichte von JavaScript und dann einige der heute beliebtesten Frameworks, Tools und IDEs.

Ein kurzer Blick zurück in die Geschichte

Machen wir einen kurzen Ausflug. Im Jahr 1995 waren Netscape Navigator und Internet Explorer 1.0 die einzigen Browseroptionen. Die Seite ist voller lästiger blinkender Texte und zu vielen GIFs. Das Laden einer Seite mit vielen umfangreichen Inhalten über ein DFÜ-Netzwerk kann bis zu zwei volle Minuten dauern. Dann entstand eine Websprache, die es diesen alten Websites ermöglichte, clientseitigen Code auszuführen. Dies ist das Jahr, in dem JavaScript geboren wurde.

Diese vor 20 Jahren erstellten Websites nutzten JavaScript kaum und schöpften schon gar nicht das volle Potenzial dieser Sprache aus. Gelegentlich werden Ihnen einige Informationen über ein Popup-Dialogfeld mitgeteilt, Neuigkeiten werden angezeigt, indem der Text in einem bestimmten Feld gescrollt wird, oder Sie verwenden Cookie, um Ihren Benutzernamen zu speichern, sodass Sie ihn bei mehreren Besuchen bei mehreren Besuchen speichern können Wenn Sie diese Website in einigen Monaten erneut besuchen, wird Ihr Name direkt angezeigt. Natürlich gab es am Arbeitsplatz keine Stellen, die JavaScript als Hauptentwicklungssprache verwendeten. Ich hatte großes Glück, dass ich bei der Arbeit tatsächlich etwas JavaScript schreiben konnte. Kurz gesagt, die damalige Anwendung von JavaScript auf Websites sollte dem DOM einige Streiche spielen.

JavaScript sieht man heutzutage praktisch überall. Von Bootstrap über ReactJS, Angular, das universelle jQuery bis hin zu Node.js, das auf der Serverseite ausgeführt wird, ist JavaScript das geworden am beliebtesten Eine der wichtigsten und beliebtesten Websprachen.

Framework

Eine der größten Änderungen in JavaScript seit seiner Einführung ist die Art und Weise, wie es verwendet wird. Vorbei sind die Zeiten, in denen diese umständlichen document.GetElementById-Methoden aufgerufen und umständliche XmlHttpRequest-Objekte erstellt wurden. Stattdessen werden diese Grundfunktionen durch verschiedene hilfreiche Klassenbibliotheken abstrahiert, wodurch die Verwendung von JavaScript für Entwickler einfacher wird. Dies ist einer der Hauptgründe, warum JavaScript heute überall zu finden ist.

jQuery

jQuery wurde 2006 von John Resig ins Leben gerufen. Es bietet einen umfangreichen Satz an Tools, die verschiedene obskure und mysteriöse JavaScript-Befehle und -Methoden abstrahieren und vereinfachen. Der einfachste Weg, dieses Tool zu demonstrieren, ist ein Codebeispiel.

Erstellen Sie eine AJAX-Anfrage mit reinem JavaScript:

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();
}

Quelle : Stack Overflow

Verwenden Sie jQuery zum Erstellen von AJAX-Anfragen:

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

jQuery macht die Verwendung komplexer JavaScript-Funktionen einfach und DOM-Operationen sind ein Kinderspiel. Infolgedessen wurde jQuery zu einem der ersten weit verbreiteten JavaScript-Frameworks, und die Idee, JavaScript zu abstrahieren, wurde zur Grundlage für die Konstruktion verschiedener anderer Frameworks.

AngularJS

AngularJS, auch allgemein bekannt als „Augular“, feierte 2009 sein Debüt. Dabei handelt es sich um ein von Google entwickeltes Framework zur Vereinfachung der Erstellung von Single Page Applications (SPA). Ähnlich wie bei jQuery besteht das Ziel darin, komplexe Vorgänge in hochgradig wiederverwendbare Methoden zu abstrahieren. Es bietet eine Model-View-Controller (MVC)-Architektur für JavaScript.

ReactJS

ReactJS, auch allgemein bekannt als „React“, ist ein Neuling auf dem Markt. Es wurde von Facebook erstellt und erstmals 2013 veröffentlicht. Facebook glaubt, dass React bei der Lösung von SPA-Problemen eine Alternative zu Angular sein kann. Wenn Sie also denken, dass Angular und React Konkurrenten sind, haben Sie Recht. Der größte Unterschied zwischen React und Angular besteht jedoch darin, dass es sich um eine effizientere, leistungsfähigere und schnellere Klassenbibliothek handelt. Die folgende Abbildung zeigt die Zeit, die zum Rendern einer Liste von 1000 Elementen im DOM mit React, Angular, Knockout (einer weiteren Bibliothek, die in diesem Artikel nicht behandelt wird) und reinem JavaScript erforderlich ist:

Quelle: The Dapper Developer

Wenn es bei Ihrer App auf die Leistung ankommt, dann ist React genau das Richtige für Sie richtige Wahl.

JavaScript-Entwicklungsumgebung

Für eine effiziente Entwicklung ist der Einsatz von IDE sehr wichtig. Der vollständige Name von IDE ist integrierte Entwicklungsumgebung, eine Anwendung, die Entwicklern eine Reihe von Tools zur Verfügung stellt. Der wichtigste Teil eines solchen Tools ist normalerweise ein umfangreicher Text--Editor , der dem Benutzer normalerweise Syntaxhervorhebung, automatische Vervollständigung und Tastaturkürzel bietet, um verschiedene Aufgaben zu beschleunigen Betrieb.

Sublime Text

Sublime Text ist eigentlich keine IDE, sondern ein leichter, schneller Texteditor für die Programmierung, der Syntaxhervorhebung und intuitive Tastaturkürzel bietet. Es ist von Natur aus plattformübergreifend und daher ideal für Entwickler, die einen Mac in einer PC-Umgebung verwenden möchten (oder umgekehrt). Fast jeder Teil von Sublime Text kann angepasst werden und es bietet außerdem eine Vielzahl von Plug-Ins, die IDE-ähnliche Funktionen hinzufügen, wie z. B. die Integration mit Git und die Codeorganisation. Es ist eine großartige Wahl für JavaScript-Enthusiasten und unerfahrene Entwickler. Zum Zeitpunkt der Veröffentlichung kostet jede Sublime Text-Lizenz 70 US-Dollar.

Quelle: Sublime Text

WebStorm

WebStorm ist eine intelligente IDE, die vom JetBrains-Team entwickelt wurde und sich hauptsächlich auf die Entwicklung von HTML, CSS und JavaScript konzentriert. Es erhebt eine geringe Lizenzgebühr (49 US-Dollar zum Zeitpunkt der Veröffentlichung dieses Artikels) und es ist nicht unangemessen, dass es unter erfahrenen JavaScript-Experten weithin anerkannt ist und aufgrund seiner integrierten Code-Vervollständigung und -Überprüfung als De-facto-Standard gilt Werkzeuge sind einzigartig. WebStorm bietet außerdem einen umfangreichen JavaScript-Debugger, der in verschiedene gängige Unit-Testing-Frameworks wie Karma Test Executor und JSDriver integriert ist und sogar Node für .js unterstützt. Eine der besten Funktionen von WebStorm ist die Live-Edit-Funktion. Solange ein Plug-in sowohl in Chrome als auch in WebStorm installiert ist, können Entwickler den Code ändern und die Ergebnisse direkt im Browser sehen. Entwickler können die Live-Bearbeitung auch so konfigurieren, dass Änderungen im Browserfenster hervorgehoben werden, wodurch die Debugging- und Codierungsproduktivität erheblich verbessert wird. Insgesamt kann die IDE WebStorm eine gute Wahl sein, wenn JavaScript Ihr Vollzeitjob ist.

Quelle

:

JetBrainsKlammernBrackets ist eine kostenlose Open-Source-IDE mit Schwerpunkt auf Visualisierungstools. Brackets bietet eine Echtzeit-Bearbeitungsfunktion ähnlich wie WebStorm, mit der Sie die Ergebnisse von Codeänderungen direkt im Browserfenster sehen können. Es unterstützt auch die parallele Bearbeitung, sodass Sie während des Codierens arbeiten und die Ergebnisse des Codes direkt sehen können, ohne zwischen verschiedenen Anwendungen wechseln oder Popup-Fenster verwenden zu müssen. Eine der interessantesten Funktionen in Brackets ist die sogenannte Extraktion (

Extract

), mit der die PSD-Datei von

Photoshop

analysiert werden kann, um Schriftart, Farbe, Größe und andere Informationen zu erhalten. Aufgrund dieser Funktion eignet sich Brackets sehr gut für JavaScript-Entwickler, die auch Designarbeiten durchführen. (Zum Vergrößern auf das Bild klicken)

Quelle

:

Klammern

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，以提高工作的效率和生产力。

Das Erstellen Ihrer ersten modernen JavaScript-Anwendung ist möglicherweise einfacher als Sie denken! Wählen Sie einfach eine IDE (ich empfehle Atom für Anfänger) und installieren Sie npm und grunt. Wenn Sie später irgendwo nicht weiterkommen, ist Stack Overflow eine großartige Ressource. Nehmen Sie sich einfach ein wenig Zeit, um die Grundlagen zu erlernen, und schon sind Sie im Handumdrehen auf dem Weg, Ihre erste moderne JavaScript-Anwendung zu entwickeln und schließlich zu veröffentlichen.

Ressourcen

Framework:

• jQuery

• AngularJS

• ReactJS

IDE:

• Sublime Text

• WebStorm

• Klammern

• Atom

Code-Organisationstool:

• JSLint

• JSHint

Build- und Automatisierungstools

• NPM

• Grunzen

• Schlucken

Praktische Ressourcen

• Stapelüberlauf

Verwandte Tools können kostenlos aus der Spalte PHP-Entwicklungstools der chinesischen PHP-Website heruntergeladen werden!

Das obige ist der detaillierte Inhalt vonEine Sammlung sehr praktischer JavaScript-Entwickler-Toolboxen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!