A collection of very practical JavaScript developer toolboxes

Since HTML5 became popular, the entire Web platform has made great progress, and people have begun to regard JavaScript as a language capable of creating complex applications. Many new APIs have emerged, and articles have been written about how browsers use these technologies.

As a scripting language, JavaScript was originally created to enhance the performance of web pages. Nowadays, JavaScript has been used in almost every place you can think of. As the technical capabilities of the entire industry continue to improve, JavaScript can now run on the server side and can also be compiled into code for native mobile applications. Today's JavaScript developers are part of a rich ecosystem with hundreds of IDEs, tools, and frameworks to choose from. With the sheer number of options and resources available, some developers may also feel like they don't know where to start. I'd love to discuss and outline the situation faced by modern JavaScript developers, starting with a brief history of JavaScript and then covering some of the most popular frameworks, tools, and IDEs today.

Quick Review of History

Let’s take a quick trip. Back in 1995, Netscape Navigator and Internet Explorer 1.0 were the only browser options. The site is filled with annoying flashing text and too many GIFs. It can take up to two full minutes to load a page with a lot of rich content over dial-up networking. Then a web language emerged that allowed these ancient websites to execute client-side code. This is the year JavaScript was born.

These websites created 20 years ago did not make much use of JavaScript, and certainly did not fully exploit the potential of this language. Occasionally, it will tell you some information through a pop-up dialog box, or display news by scrolling text in a certain box, or use cookie to save your user name so that when you go through several When you visit this website again in a few months, your name will be displayed directly. Of course, there were no job positions in the workplace that used JavaScript as the main development language. I was very lucky to be able to actually write some JavaScript at work. In short, the application of JavaScript on websites at that time was to play some tricks in the DOM.

Nowadays, you can basically see JavaScript everywhere. From Bootstrap to ReactJS, Angular, the universal jQuery, and even Node.js running on the server side, JavaScript has become the most One of the important and most popular web languages.

Framework

One of the biggest changes in JavaScript since its inception is the way it is used. Gone are the days of calling those awkward document.GetElementById methods and creating cumbersome XmlHttpRequest objects. Instead, these basic functions are abstracted through various helpful class libraries, making JavaScript easier for developers to use. This is one of the main reasons why JavaScript is everywhere today.

jQuery

jQuery was launched by John Resig in 2006. It provides a rich set of tools that abstract and abstract various obscure and mysterious JavaScript commands and methods. simplify. The easiest way to demonstrate this tool is with a code example.

Create an AJAX request using pure 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();
}

Source: Stack Overflow

Using jQuery to create AJAX requests:

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

jQuery makes complex JavaScript functions easy to use, and DOM operations are a piece of cake. As a result, jQuery became one of the earliest widely used JavaScript frameworks, and the idea of ​​abstracting JavaScript became the basis for the construction of various other frameworks.

AngularJS

AngularJS, also commonly known as "Augular", made its debut in 2009. It is a framework created by Google to simplify the creation of Single Page Applications (SPA). Similar to jQuery, its goal is to abstract complex operations into highly reusable methods. It provides a model-view-controller (MVC) architecture for JavaScript.

ReactJS

ReactJS, also commonly known as “React”, is a new kid on the scene. It was created by Facebook and first released in 2013. Facebook believes that React can be an alternative to Angular in handling SPA issues, so if you think that Angular and React are competitors, you are right. However, the biggest difference between React and Angular is that it is a more efficient, higher-performance, and faster class library. The figure below shows the time required to render a list of 1000 items in the DOM using React, Angular, Knockout (another library not discussed in this article), and pure JavaScript:

Source: The Dapper Developer

If your application is very If performance matters, then React is the right choice.

JavaScript Development Environment

For efficient development, the use of IDE is very important. The full name of IDE is integrated development environment, which is an application that provides developers with a series of tools. The most important part of this tool is usually a rich text editor, which usually provides users with syntax highlighting, autocomplete, and keyboard shortcuts to speed up various tasks. An annoying manual operation. Sublime Text

Sublime Text is not actually an IDE, but a lightweight, fast text editor for programming that provides Syntax highlighting and intuitive keyboard shortcuts are included. It's inherently cross-platform, so it's ideal for developers who want to use a Mac in a PC environment (or vice versa). Almost every part of Sublime Text can be customized, and it also provides a variety of plug-ins that add IDE-like functions to it, such as integration with Git and code organization. It is a great choice for JavaScript enthusiasts and novice developers. At the time of publication, each Sublime Text license costs $70.

Source

:

Sublime TextWebStorm WebStorm is an intelligent IDE developed by the JetBrains team, mainly focusing on the development of HTML, CSS and JavaScript. It charges only a nominal licensing fee ($49 at the time of this article's publication), and it's not unreasonable that it's widely recognized among experienced JavaScript experts and has come to be regarded as the de facto standard. Because its built-in code completion and review tools are unique. A rich JavaScript debugger is also provided in WebStorm, and is integrated with various popular unit testing frameworks, such as Karma test executor and JSDriver, and even supports Node Mocha for .js.

One of the best features of WebStorm is its Live Edit function. As long as a plug-in is installed in both Chrome and WebStorm, developers can change the code and see the results directly in the browser. Developers can also configure live editing to highlight changes in the browser window, greatly improving debugging and coding productivity.

Overall, if JavaScript is your full-time job, then the IDE WebStorm can be a good choice.

Source

:

JetBrains

BracketsBrackets is an open source free IDE focusing on visualization tools. Brackets provides a real-time editing feature similar to WebStorm, allowing you to see the results of code changes directly in the browser window. It also supports parallel editing, allowing you to work while coding and see the results of the code directly without having to switch between different applications or use pop-up windows. One of the most interesting features in Brackets is called extraction (Extract), which can analyze Photoshop PSD files to obtain information such as fonts, colors, and sizes. Because of this feature, Brackets is very suitable for JavaScript developers who also do design work.

(Click image to enlarge)

Source:

Brackets

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

Creating your first modern JavaScript application may be easier than you think! Just choose an IDE (I recommend Atom for beginners) and install npm and grunt. If you get stuck somewhere later, Stack Overflow is a great resource. Just spend a little time learning the basics and you'll be on your way to developing and ultimately publishing your first modern JavaScript application in no time.

Resources

Framework:

• jQuery

• AngularJS

• ReactJS

IDE：

• Sublime Text

• WebStorm

• Brackets

• Atom

Code organizing tool:

• JSLint

• JSHint

Build and Automation Tools

• NPM

• Grunt

• Gulp

Practical Resources

• Stack Overflow

Relevant tools can be downloaded for free from the php development tools column of the php Chinese website!

The above is the detailed content of A collection of very practical JavaScript developer toolboxes. For more information, please follow other related articles on the PHP Chinese website!