澳门新葡萄京娱乐场 5

澳门新葡萄京娱乐场前端工程师技能图谱skill-map

自从HTML5变得流行的话,整个Web平台得到了长足的上进,大家也初始将JavaScript视为一门能够创设复杂应用的言语。大多新的API纷纭展示,而至于浏览器怎样行使那么些本事的篇章也大方涌现。

# 前端技术员技艺图谱

用作一门脚本语言,JavaScript最早创建的目标是用于进步web页面包车型客车表现能力,而现近期JavaScript差相当的少已经用在有着你能体会精晓的地点了。随着整个产业界的本事力量持续增加,JavaScript如明儿晚上就足以在服务端运转,同一时间也能够被编写翻译为原新手提式有线电话机应用的代码。当今的JavaScript开荒者都是任何充足生态圈中的一份子,他们能够在几百种IDE、工具和框架中进行大肆选用。由于种种采取和财富的数码实在太多,某个开垦者也会感到到不知从哪个地方开始攻读。我很愿意研究并概述一下今世JavaScript开拓者所直面的田地,首先作者将轻巧的介绍一下JavaScript的野史,随后会蕴藏这段日子最流行的一些框架、工具和IDE。

## 浏览器

迅猛回看历史

让我们伊始二回飞跃的远足。时间赶回壹玖玖肆年,那个时候Netscape
Navigator和Internet Explorer
1.0是浏览器方面仅部分选择。网址上充斥着各样烦人的闪耀文字以至太多的GIF图片。要通过拨号互联网加载叁个含有了汪洋增添内容的页面,最多需求等待整整两分钟时间。随后现身了一种web语言,它同意那一个古老的网址实行客户端的代码。这年正是JavaScript所诞生的年份。

制造于20年早前的那一个网址对于JavaScript的使用并超少,当然也绝非丰富开采那门语言的潜在的力量。偶然会通过弹出对话框告诉你或多或少消息,或是在有些方框中通过滚动文字的秘诀展示音信,或是用cookie保存你的顾客名,以便当你通过多少个月后再来访问那些网址时能够平昔体现出你的名字。职场中本来也不设有别的以JavaScript作为首要开销语言的干活职位,那时可以在专门的学问中真正编写一些JavaScript以致是十分幸运了。简单的说,那时的网址对于JavaScript的行使正是在DOM中玩一些小花招。

前日,你大概已经足以在颇负地点来看JavaScript的身影了。从Bootstrap到ReactJS、Angular、通用的jQuery,以至是运营在服务端的Node.js,JavaScript已经形成了最要害、最风靡的web语言之一。

  • IE6/7/8/9/10/11 (Trident)
  • Firefox (Gecko)
  • Chrome/Chromium (Blink)
  • Safari (WebKit)
  • Opera (Blink)

框架

自打问世以来,JavaScript的改观的最大地点之一便是对于它的使用措施。调用这一个难堪的document.GetElementById方法和创办艰难的XmlHttpRequest对象的光阴已经一去不归了。替代它的法子,是经过各类扶持性的类库对那几个幼功用实行抽象,让JavaScript更易于为开辟者使用。那也正是今日JavaScript随处可遇的首要性缘由之一。

## 编程语言

jQuery

jQuery是由JohnResig在二〇〇五年临蓐的,它提供了一套丰裕的工具集,对各类隐晦的、神秘的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实行抽象的思虑则产生了其余各样框架创设的底子。

  • JavaScript/Node.js
  • CoffeeScript
  • TypeScript

AngularJS

AngularJS平日也被誉为“Augular”,于二〇〇八年上场展布。它是由Google创立的一种框架,指标是为了简化单一页面应用(SPA)的创设。肖似于jQuery,它的指标一致是将复杂的操作抽象成为具有莫斯中国科学技术大学学重用性的方法。它为JavaScript提供了一种模型-视图-调节器(MVC)的布局。

## 切页面

ReactJS

ReactJS平时也被叫做“React”,是贰个正要在这里场游戏中出场的新手。它由Facebook创制,并在2011年第二回发表。照片墙以为React在拍卖SPA难题上得以成为Angular的替代品,因而一旦您认为Angular和React那二种框架是角逐对手,那你的知情就对了。但是,与Angular比较,React最大的分化之处在于,它是三个更急迅、具备越来越高品质、速度更加快的类库。下图展现了接纳React、Angular、Knockout(另一类别库,在本文中不做研商),以至纯粹的JavaScript在DOM中渲染包蕴1000个内容的列表,各自所需的年月:

澳门新葡萄京娱乐场 1

来源: The Dapper
Developer

若是您的接收极度重视品质,那么React便是准确的筛选。

  • HTML/HTML5
  • CSS/CSS3
  • Sass/LESS/Stylus
  • PhotoShop/Paint.net/Fireworks/GIMP/Sketch

JavaScript开拓条件

对此连忙的付出来讲,IDE的施用是这一个首要的。IDE的全名是集成开辟条件,是一种为开辟者提供了一雨后苦笋工具的应用程序。这种工具中最要害的一有的平常来说是四个富文本编辑器,平时会为使用者提供语法高亮、自动实现和键盘火速键,以加速各样烦人的手动操作。

## 开拓工具

Sublime Text

Sublime
Text实际上而不是一种IDE,而是三个轻量级的、速度异常的快的用来编制程序的公文编辑器,提供了语法高亮效能和直观的键盘快捷键。它本人是跨平台的,由此对此那么些想在PC情形中使用Mac(恐怕反之)的开采者来讲是完美的抉择。Sublime
Text的各样部分差不离都以足以举行自定义的,它还提供了各个插件,为它参预了相仿于IDE的功力,举个例子和Git的合併,以至代码收拾。对于JavaScript的爱好者和新手开采者来讲,它是一个很好的抉择。当本文拆穿时,各种Sublime
Text授权的价钱为70法郎。

澳门新葡萄京娱乐场 2

来源: Sublime Text

### 编辑器和IDE

WebStorm

WebStorm是由JetBrains团队支付的一种智能IDE,首要专心于HTML、CSS和JavaScript的开发。它只接纳象征性的授权花销(在本文揭穿时为49澳元),在有经验的JavaScript行家之间,它赢得了大范围的承认,并一度被视为事实上的正规化,这点不无道理,因为它内置的代码完结功用和检查核对工具得以说是举世无双的。WebStorm中也提供了多个充分的JavaScript调试器,况兼与种种流行的单元测量试验框架进行了归拢,比如Karma测验试行器和JSDriver,以至还满含帮助Node.js的Mocha。

WebStorm最美好的表征之一莫过于它的实时编辑(Live
Edit)作用了。只要在Chrome和WebStorm中同不平日间设置有些插件,开采者就能够在改造代码的还要,直接在浏览器中来看结果。开辟者还足以对实时编辑实行配备,让浏览器窗口中的变越来越高亮凸显,那超级大地升高了调护诊治与编码的临蓐力。

看来,假如JavaScript是你的全职职业,那么WebStorm这一个IDE能够改为三个很好的抉择。

澳门新葡萄京娱乐场 3

来源: JetBrains

  • VIM/Sublime Text2
  • Notepad++/EditPlus
  • WebStorm
  • Emacs EmacsWiki
  • Brackets
  • Atom
  • Lime Text
  • Light Table
  • Codebox
  • TextMate
  • Neovim
  • Komodo IDE / Edit
  • Eclipse
  • Visual Studio/Visual Studio Code
  • NetBeans
  • Cloud9 IDE
  • HBuilder
  • Nuclide

Brackets

Brackets是一种开源的无偿IDE,静心于可视化学工业具。Brackets提供了一种类似于WebStorm的实时编辑本性,让您能够在浏览器窗口中一直看看代码改动的结果。它还扶助并行式的编写,让您一边举行编码工作,同临时候平昔看看代码的结果,而不须求在不相同的应用程序间开展切换,或是使用弹出窗口。Brackets中最有趣的三个风味叫做收取(Extract),它亦可对Photoshop的PSD文件进行分析,以获得当中的字体、颜色和大小等新闻。由于这一特色的存在,Brackets极度相符于那多少个同期拓宽设计职业的JavaScript开荒者。

(单击图片以扩充)

澳门新葡萄京娱乐场 4

来源: 澳门新葡萄京娱乐场,Brackets

### 调节和测验工具

Atom

Atom是由GitHub推出的一款开源的无需付费富文本编辑器,特别轻松上手使用,在安装后得以直接运转,而无需进行任何配置文件的改动,就可以预知“优异地运作了”。Atom最有意思的某个是足以对它的每一边都进展自定义(GitHub将其名称叫“能够不管折腾”),它是在二个web宗旨的底蕴上所开创的,由此客商就足以经过编写制定规范的HTML、CSS和JavaScript,对它的外观举办自定义。想要为Atom换个不等的背景和文本字体?改一下CSS就能够。恐怕您也能够筛选下载并运用各类为Atom所成立的大旨。这种灵活性让Atom能够根据你所企盼的不二秘诀张开表现。对于JavaScript生手开拓者和热爱于自定义的客商来说,Atom是二个名特别巨惠的工具。

(单击图片以松开)

澳门新葡萄京娱乐场 5

来源: Atom

  • Firebug/Firecookie
  • YSlow
  • IEDeveloperToolbar/IETester
  • Fiddler/Charles
  • Chrome Dev Tools
  • Dragonfly
  • DebugBar
  • Venkman

创设与自动化学工业具

今世的JavaScript项目正趋向于变得越发复杂,变化的局地也在不停增添。那并不是说那门语言或是对应的工具相当不够急迅,而是由于当下所开创的web应用程序的足够性、炫酷的经验和坚不可摧所引致的第一手结果。在巨型的类型中央银行事时,你必得平日做过多种复性的职业,不论是在你筹划签入代码、或是将代码构建到生育意况中。这个干活儿大概会包蕴合併、压缩、对LESS或SASS
CSS文件的编写翻译,以至是运维测验。手动实现这一个干活儿不止令人心酸,效能也十分低下。更加好的方式是通过某种援助这几个任务的营造筑工程具,对这一个事业开展自动化。

### 版本管理

合并(Bundling)与压缩(Minification)

您所编写的大大多JavaScript和CSS都会在七个web页面中国共产党享。因而,你很或者会将这一个内容放到单独的.js和.css文件中,然后在web页面中援用这么些文件。这种措施的结果是,客户的浏览器为了完全体现你的web援引,供给各自发送一个HTTP央浼,以赢得那个文件(可能最少需求证实一下那些文件是不是早就改成了)。

HTTP央浼的代价是非常高的。除了恳求笔者的大大小小之外,你还将因为网络延迟、HTTP头和Cookie等剧情买单。归拢与压缩工具的筹算目标便是减削、以致全盘消弭这一个央求所带给的影响。

  • Git/SVN/Mercurial
  • Github/GitLab/Bitbucket/Gitorious/GNU
    Savannah/Launchpad/SourceForge/TeamForge

合并

要改良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");}});

请小心,作者将压缩后的出口结果分为两行的目标,只是为了在作品中阅读起来更便利,而实际上经过压缩后的输出平日来讲唯有一行。

### Coding style

会集与减少的机缘

平时来讲,合併与减少步骤只会在坐褥条件上实施,那样做的来头是为着令你在本地或是开辟条件中得以对含蓄了格式符和行号的原始代码进行调护医疗。而调节和测量试验上边所展现的这种压缩代码会十分劳顿,因为具备的代码都挤在一行中。何况滑坡后的代码会变得精光不行读,在您品味调试时会开采这种代码完全无用,并让您以为非常受挫。

  • Eslint/JSLint/JSHint/jscs
  • CSSLint
  • Markup Validation Service
  • HTML Validators

源代码映射文件

稍微时候,代码中的有些bug唯有在坐蓐蒙受技术再次出现。那样一来,当您要调整某个难点时,经过压缩的代码就改为了多个主题材料。幸运的是,JavaScript协理源代码映射文件,它能够在调整和收缩后的代码和原始代码之间进行“映射”。那个代码映射文件是在减少阶段由下文所说的一些结构工具所生成的。随后你的JavaScript调节和测验器就可以使用那个映射文件,为你提供清晰可读的代码进行调节和测量检验了。你应该尽量将映射文件与事实上代码一齐公布,那样就能够在好几功效出错开上下班时间实行代码的调解了。

### 单元测量检验

代码整理

代码整理工科具会依照预订义的格式化准则检查你代码中的习感觉常错误和主题素材,那一个工具所告诉的不当通常都附近于以下那个:使用了tab缩进实际不是空格、在行末疏漏了分集团、或是在并未有运用if、for或while语句的意况下利用了大括号。大多数IDE中都提供了代码整理工科具,而任何一些IDE也允许用户自行设置代码收拾插件。

最盛行的二种JavaScript收拾工具是JSHint和JSLint,JSLint是由DougCrockford开垦的收拾框架,而JSHint则是由社区人口从JSLint中拨出出来的。他们仅在各自的代码格式化标准上有所一些有别于。小编的提出是二者都尝试一下,然后选用多个最符合你的代码风格的工具。

  • QUnit/Jasmine
  • Mocha/Should/Chai/Expect
  • Unit JS

自动化职责:Grunt

与它的名目差别,Grunt(本意为打呼噜)绝不是一个粗糙的工具,而是一个强健的下令行布局工具,能够运营客商所定义的各类职分。通过设置三个简洁明了的陈设文件,你就足以让Grunt举办种种专门的学问,比如编写翻译LESS或SASS文件、营造并压缩有个别特定文件夹中的全数JavaScript和CSS文件、以致是运维某种代码整理工科具或是测量检验框架。你也得以透过配备,将Grunt作为一种Git钩子运维,当你往源代码调节Curry开展签入时,自动地减弱与统一你的代码。

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下载的。

  • WebDriver/Protractor/Karma Runner/Sahi
  • phantomjs
  • SourceLabs/BrowserStack

总结

JavaScript自从互连网的开始时期诞生以来,已经经验了高大的改革。近年来,它已形成了人机联作式web应用程序中二个鼓鼓的的首要组成部分。

开辟者们从1994年起到昨日也经历了宏伟的扭转,近期的开垦者们更乐于使用丰富而健硕的框架、工具和IDE,以增加职业的频率和临蓐力。

创造你的第叁个现代JavaScript应用程序或许比你和睦想象中还要轻便!只要选择大多个IDE(笔者向初读书人推荐Atom),然后安装npm和grunt。假设您之后在哪个地方卡住了,Stack
Overflow是那些好的能源。只要微微花一点时间学习根底知识,你就快速能够上手开荒并最终发表你的第二个今世JavaScript应用了。

## 前端库/框架

资源

框架:

  • jQuery
  • AngularJS
  • ReactJS

IDE:

  • Sublime Text
  • WebStorm
  • Brackets
  • Atom

代码整理工科具:

  • JSLint
  • JSHint

营造与自动化学工业具

  • NPM
  • Grunt
  • Gulp

实用财富

  • Stack Overflow
  • jQuery/Underscore/Mootools/Prototype.js
  • YUI3/Dojo/ExtJS/KISSY
  • Backbone/KnockoutJS/Emberjs
  • AngularJS
  • Batarang
  • Bootstrap
  • Semantic UI
  • Juice UI
  • Web Atoms
  • Polymer
  • Dhtmlx
  • qooxdoo
  • React
  • Brick
  • Vue.js

## 前端标准/规范

  • HTTP/1.1: RFCs 7230-7235
  • HTTP/2
  • ECMAScript 5/6/7
  • W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…
  • CommonJS Modules/AMD
  • HTML5/CSS3
  • Semantic Web
  • MicroData
  • RDFa
  • Web Accessibility
  • WCAG
  • Role Attribute
  • WAI-ARIA

## 性能

  • JSPerf
  • YSlow 35 rules
  • PageSpeed
  • HTTPWatch
  • DynaTrace’s Ajax
  • 高性能JavaScript

## SEO

## 编制程序知识储备

  • 数据结构
  • OOP/AOP
  • 原型链/效能域链
  • 闭包
  • 编制程序范型
  • 设计格局
  • Javascript Tips

## 计划流程

### 缩并

  • YUI Compressor
  • Google Clousure Complier
  • UglifyJS
  • CleanCSS

### 文书档案输出

  • JSDoc
  • Dox/Doxmate/Grunt-Doxmate

### 项目营造筑工程具

  • make/Ant
  • GYP
  • Grunt
  • Gulp
  • Yeoman
  • FIS
  • Mod
  • Webpack

## 代码组织

### 类库模块化

  • CommonJS/AMD/ES6 Module
  • YUI3模块

### 业务逻辑模块化

  • bower/component

### 文件加载

  • LABjs
  • SeaJS/Require.js/Webpack

### 模块化预微型机

  • Browserify

## 安全

  • CSRF/XSS
  • CSP
  • Same-origin policy
  • ADsafe/Caja/Sandbox

## 移动Web

  • HTML5/CSS3
  • 响应式网页设计
  • Zeptojs/iScroll
  • V5/Sencha Touch
  • PhoneGap (Cordova)
  • Ionic
  • jQuery Mobile
  • W3C Mobile Web Initiative
  • W3C mobileOK Checker
  • Open Mobile Alliance
  • React Native/Weex

## 前沿技艺社区/会议

  • D2/WebRebuild
  • NodeParty/W3CTech/HTML5梦工厂
  • JSConf/沪JS(JSConf.cn)
  • QCon/Velocity/SDCC
  • JSConf/NodeConf
  • CSSConf
  • YDN/YUIConf
  • HybridApp
  • WHATWG
  • MDN
  • codepen
  • w3cplus
  • CNode

## Computer知识储备

  • 编写翻译原理
  • Computer互连网
  • 操作系统
  • 算法原理
  • 软件工程/软件测量试验原理
  • Unicode

## 软技能

  • 知识管理/计算分享
  • 联系本领/团队同盟
  • 要求管理/PM
  • 相互之间设计/可用性/可访谈性知识

## 可视化

  • SVG/Canvas/VML
  • SVG: D3/Raphaël/Snap.svg/DataV
  • Canvas: CreateJS/KineticJS
  • WebGL/Three.JS

发表评论

电子邮件地址不会被公开。 必填项已用*标注