매우 실용적인 JavaScript 개발자 도구 상자 모음

HTML5가 대중화되면서 웹 플랫폼 전체가 큰 발전을 이루었고 사람들은 자바스크립트를 복잡한 애플리케이션을 만들 수 있는 언어로 여기기 시작했습니다. 많은 새로운 API가 등장했으며 브라우저가 이러한 기술을 사용하는 방법에 대한 기사가 작성되었습니다.

스크립트 언어인 JavaScript는 원래 웹페이지의 성능을 향상시키기 위해 만들어졌습니다. 오늘날 JavaScript는 여러분이 생각할 수 있는 거의 모든 곳에서 사용됩니다. 전체 업계의 기술적 역량이 지속적으로 향상됨에 따라 이제 JavaScript는 서버 측에서 실행될 수 있으며 기본 모바일 애플리케이션용 코드로 컴파일될 수도 있습니다. 오늘날의 JavaScript 개발자는 선택할 수 있는 수백 개의 IDE, 도구 및 프레임워크를 갖춘 풍부한 생태계의 일부입니다. 사용 가능한 옵션과 리소스가 너무 많아서 일부 개발자는 어디서부터 시작해야 할지 모르겠다고 느낄 수도 있습니다. 저는 JavaScript의 간략한 역사부터 시작하여 오늘날 가장 널리 사용되는 프레임워크, 도구 및 IDE 중 일부를 다루는 것부터 현대 JavaScript 개발자가 직면한 상황에 대해 논의하고 개요를 설명하고 싶습니다.

빠른 역사 되돌아보기

빠른 여행을 떠나보자. 1995년에는 Netscape Navigator와 Internet Explorer 1.0이 유일한 브라우저 옵션이었습니다. 사이트는 성가신 깜박이는 텍스트와 너무 많은 GIF로 가득 차 있습니다. 전화 접속 네트워킹을 통해 풍부한 콘텐츠가 포함된 페이지를 로드하는 데 최대 2분이 걸릴 수 있습니다. 그런 다음 이러한 고대 웹사이트가 클라이언트측 코드를 실행할 수 있게 해주는 웹 언어가 등장했습니다. 올해는 JavaScript가 탄생한 해입니다.

20년 전에 만들어진 이러한 웹사이트는 JavaScript를 많이 사용하지 않았으며 확실히 이 언어의 잠재력을 최대한 활용하지 못했습니다. 때때로 팝업 대화 상자를 통해 일부 정보를 알려주거나 특정 상자의 텍스트를 스크롤하여 뉴스를 표시하거나 쿠키를 사용하여 사용자 이름을 저장하여 여러 번 방문할 때 몇 달 후에 이 웹사이트를 다시 방문하면 귀하의 이름이 직접 표시될 것입니다. 물론 직장에서 JavaScript를 주요 개발 언어로 사용하는 직위는 없었습니다. 실제로 직장에서 JavaScript를 작성할 수 있었던 것은 매우 행운이었습니다. 간단히 말해서, 당시 웹사이트에 JavaScript를 적용하는 것은 DOM에서 몇 가지 트릭을 사용하는 것이었습니다.

요즘은 기본적으로 어디서나 자바스크립트를 볼 수 있습니다. Bootstrap부터 ReactJS, Angular, 범용 jQuery, 심지어 서버 측에서 실행되는 Node.js까지 JavaScript는 가장 인기 있는 중요하고 가장 인기 있는 웹 언어 중 하나입니다.

프레임워크

JavaScript가 탄생한 이후 가장 큰 변화 중 하나는 사용 방식입니다. 어색한 document.GetElementById 메서드를 호출하고 번거로운 XmlHttpRequest 개체를 생성하던 시절은 지나갔습니다. 대신 이러한 기본 기능은 다양한 유용한 클래스 라이브러리를 통해 추상화되어 개발자가 JavaScript를 더 쉽게 사용할 수 있습니다. 이것이 오늘날 JavaScript가 어디에나 존재하는 주요 이유 중 하나입니다.

jQuery

jQuery는 John Resig에 의해 2006년에 출시되었습니다. 다양한 모호하고 신비한 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();
}

소스 : 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 프레임워크 중 하나가 되었고, JavaScript를 추상화한다는 아이디어는 다른 다양한 프레임워크 구축의 기초가 되었습니다.

AngularJS

일반적으로 "Augular"라고도 알려진 AngularJS는 2009년에 데뷔했습니다. 단일 페이지 애플리케이션(SPA) 생성을 단순화하기 위해 Google에서 만든 프레임워크입니다. jQuery와 유사하게, 이의 목표는 복잡한 작업을 재사용 가능성이 높은 메서드로 추상화하는 것입니다. JavaScript용 모델-뷰-컨트롤러(MVC) 아키텍처를 제공합니다.

ReactJS

일반적으로 "React"라고도 알려진 ReactJS는 새로운 세대입니다. Facebook에서 만들어졌으며 2013년에 처음 출시되었습니다. Facebook은 SPA 문제를 처리하는 데 있어 React가 Angular의 대안이 될 수 있다고 믿습니다. 따라서 Angular와 React가 경쟁자라고 생각하신다면 맞습니다. 그러나 React와 Angular의 가장 큰 차이점은 더 효율적이고 성능이 뛰어나며 더 빠른 클래스 라이브러리라는 것입니다. 아래 그림은 React, Angular, Knockout(이 기사에서 논의되지 않은 또 다른 라이브러리) 및 순수 JavaScript를 사용하여 DOM에서 1000개 항목 목록을 렌더링하는 데 필요한 시간을 보여줍니다.

출처: The Dapper Developer

앱이 매우 중요하다면 성능이 중요하다면 React가 올바른 선택.

JavaScript 개발 환경

효율적인 개발을 위해서는 IDE의 사용이 매우 중요합니다. IDE의 전체 이름은 통합 개발 환경으로, 개발자에게 일련의 도구를 제공하는 응용 프로그램입니다. 이러한 도구의 가장 중요한 부분은 일반적으로 다양한 작업 속도를 높이기 위해 사용자에게 구문 강조, 자동 완성 및 키보드 단축키를 제공하는 풍부한 텍스트 편집기 입니다.

Sublime Text

Sublime Text는 실제로 IDE는 아니지만 구문 강조와 직관적인 키보드 단축키를 제공하는 가볍고 빠른 프로그래밍용 텍스트 편집기입니다. 본질적으로 크로스 플랫폼이므로 PC 환경에서 Mac을 사용하려는 개발자에게 이상적입니다(또는 그 반대). Sublime Text의 거의 모든 부분을 사용자 정의할 수 있으며, Git과의 통합, 코드 구성 등 IDE와 유사한 기능을 추가하는 다양한 플러그인도 제공합니다. JavaScript 매니아와 초보 개발자에게 훌륭한 선택입니다. 출판 당시 Sublime Text 라이선스의 가격은 70달러입니다.

소스: Sublime Text

WebStorm

WebStorm은 JetBrains 팀이 주로 HTML, CSS 및 JavaScript 개발에 중점을 두고 개발한 지능형 IDE입니다. 소액의 라이센스 비용(이 기사 발행 당시 49달러)을 부과하며, 코드 완성 및 검토가 내장되어 있기 때문에 숙련된 JavaScript 전문가들 사이에서 널리 인정받고 사실상의 표준으로 여겨지게 된 것은 무리가 아닙니다. 도구는 독특합니다. WebStorm에서는 풍부한 JavaScript 디버거도 제공되며 Karma 테스트 실행기 및 JSDriver 등 널리 사용되는 다양한 단위 테스트 프레임워크와 통합되며 .js용 Node.js도 지원합니다. WebStorm의 가장 뛰어난 기능 중 하나는 실시간 편집 기능입니다. Chrome과 WebStorm 모두에 플러그인이 설치되어 있으면 개발자는 코드를 변경하고 브라우저에서 직접 결과를 확인할 수 있습니다. 개발자는 브라우저 창에서 변경 사항을 강조 표시하도록 실시간 편집을 구성하여 디버깅 및 코딩 생산성을 크게 향상시킬 수도 있습니다. 전반적으로 JavaScript가 정규직이라면 IDE WebStorm이 좋은 선택이 될 수 있습니다.

출처

:

JetBrains괄호Brackets은 시각화 도구에 중점을 둔 오픈 소스 무료 IDE입니다. Brackets는 WebStorm과 유사한 실시간 편집 기능을 제공하므로 브라우저 창에서 코드 변경 결과를 직접 확인할 수 있습니다. 또한 병렬 편집을 지원하므로 다른 응용 프로그램 간에 전환하거나 팝업 창을 사용할 필요 없이 코딩하는 동안 작업하고 코드 결과를 직접 확인할 수 있습니다. Brackets의 가장 흥미로운 기능 중 하나는 추출(

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 애플리케이션을 개발하고 궁극적으로 게시할 수 있게 될 것입니다.

리소스

프레임워크:

• jQuery

• AngularJS

• ReactJS

IDE:

• Sublime Text

• WebStorm

• 괄호

• Atom

코드 구성 도구:

• JSLint

• JSHint

빌드 및 자동화 도구

• NPM

• 그런트

• Gulp

실용 리소스

• Stack Overflow

php 중국어 홈페이지 php 개발 도구 칼럼에서 관련 도구를 무료로 다운로드 받으실 수 있습니다!

위 내용은 매우 실용적인 JavaScript 개발자 도구 상자 모음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!