教程简介：

HTML (英文全称：HyperText Markup Language)：即超文本标记语言，标准通用标记语言下的一个应用。那么，HTML 和 Web 前端开发有什么关系呢？HTML 是通向 WEB 技术世界大门的钥匙。在本 HTML 教程中，您将学习如何使用 HTML 来创建站点， HTML 非常容易学习，只要多看本教程，相信你会喜欢它的！

什么是“超文本标记语言”呢？“超文本”就是指页面内包括文本及超过文本以外的其它元素，可以包含图片、链接，甚至音乐、程序等非文字元素。在WWW上的一个超媒体文档称之为一个页面，Web页面也就是通常所说的网页，在这里不作区分。

HTML结构：

HTML 的结构一般包括 标签和标签，和这2个标记符分别表示网页的头部和正文。头部中可包含页面的标题、关键词、描述说明等内容，它本身不作为内容来显示，但影响网页显示的效果。 当中是网页实际显示的内容，正文标记符又被称为实体标记。页面当中通常包含有很多指向其他相关页面或其他节点的指针，通过点击，可以很方便地获取新的网页，这是 HTML 获得广泛推广运用最重要的原因之一，而由这些相互之间存在关联的页面组成的有机集合便是网站。究竟 HTML 为什么会被普及？这就要归功于互联网的高速发展，对于编程语言的需求直线上升。而 HTML5 具有超集方式的简易性、运用广泛的可拓展性、灵活应变的平台适应性以及简单的通用性。凭借着这些特性，HTML 越来越受到人们的喜爱。

以下是最简单的html文档结构：

本文为 HTML 基础教程第一章，下一章：HTML 教程导读【小提示】tips:本文由数据微学院作者原创，转载请注明来源或联系作者。更多优秀参考好文请关注【数据微学院】个人图书馆。

相关搜索

• 前端招聘
• html教程
• web开发招聘
• web开发教程
• web开发入门
• 开发招聘

本系列教程是写给广大HTML小白的，本教程将从0基础到入门，教会大家HTML，让大家能够写出属于自己的WEB页面，博主自己技术并不是很好，但是教会大家入门还是没问题的。当然，你得肯学。

首先给大家介绍一下HTML是什么东西：

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言（切记，HTML不是编程语言，不要闹笑话了）标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做web 页面（即网页）学会HTML能干嘛：

这里说的学会HTML并不只是单单的会HTML，而是包含CSS和JS（当然都是较简单的），学会了HTML后我们可以自己设计一个漂亮的网页，例如个人主页、导航页、表白网页等等，总之是十分有趣的

web前端怎么样才能入门，首先我们要从什么是初级web前端工程师说起：

按照我的想法，我把前端工程师分为了入门、初级、中级、高级这四个级别:

入门级别指的是了解什么是前端（前端到底是什么其实很多人还是不清楚的），了解基本的html、css和javascript语法（这些语方面的东西网上随便搜一下就有很多很多，基本的语法是整个技术体系最重要 的东西了，领先的 Web 技术教程 ），可以根据设计师的设计图在不考虑兼容性的情况下把页面做出来，了解过一些框架的使用（例如烂大街但是依然牛逼的jQuery、zepto、 bootstrap等等）。

在经历过入门的阶段，已经了解了前端要做什么，并且把基本的语法学习过了可以独立做一些简单的页面了，那么就要继续学习达到初级前端工程师的水平，对于初级的前端工程师需要了解的就特别多了，需要对整个前端有一个清晰的认识，并且熟练使用各种技术。

初级前端工程师：首先要知道的就是如何处理各种浏览器的兼容处理（比如说在IE浏览器中的createElement有什么不同等等内容），现在基本上每个公司在招聘的时候都会要求熟练html5, css3, javascript，这个熟练的意思就是信手拈来。

在下面会说初级前端工程师应该具体的学习哪些知识，然后就是要了解各种css的预处理器和后处理器， 还有会使用常见前端的MV*框架（angularjs, backbone，reactjs等等）并知道这些框架的原理，另外就是要熟练使用nodejs，要会使用基于node的各种前端构建工具 （grunt，gulp等等），熟练使用github或gitlab，对模块化、组件化、工程化、语义化有一个比较深入的了解，最后要知道如何开发移动端 的页面，如何去优化一个页面的性能。

初级web前端工程师的技术体系

HTML部分

首先是要掌握一些常用标签的使用和他们的各个属性，这些常用的标签我总结了一下有以下这些：

html：页面的根元素。

head：页面的头部标签，是所有头部元素的容器。

body：页面的主体标签，页面展现的内容就放置在这里面。

title：页面的标题。

meta：位于文档的头部，提供页面的元信息，包括关键字、描述等等。

link：定义文档与外部资源的关系，最常用的用途就是引入样式表。

script：脚本标签，可以把js脚本代码放置在这个标签内，也可以使用这个标签的src属性引入一个外部标签。

style：样式标签，可以把css代码写在这个标签中。

a：超链接，href属性代表要链接到的地方，target属性代表打开方式。

img：图像标签，src属性表示图片的位置。

form：表单元素，它内部的input、select、textarea等标签都是比较重要的。

p：定义文档中的分区或节，可以使用p来进行页面的布局等操作。

另外还有ul、li、p、button、iframe、p、table等标签也很常用，nav、section、article、header、aside、footer等语义化标签也需要了解一下。

除了要了解上面这一些标签之外，还需要对一些新的HTML5的API有一定的了解：

audio、video标签。

Canvas：定义图形，比如图表和其他图像。

input标签的accept属性，email、phone、url等类型。

getElementByClassName根据class名来获取一个元素结点。

Multiple file selection多文件选择属性。

html的import、template

process标签，webGL等内容。

还有一些要知道的知识点：

1.doctype的作用。

2.unicode、utf8等编码的原理和区别。

3.如何进行页面性能优化。

4.png、jpg、webp、gif等图片格式的不同的优势。

5.HTML行内元素与块级元素的区别。

6.移动web端开发常用head标签。

7.web语义化。

8.浏览器中的缓存原理。

CSS部分

关于css这一块，我的看法就是网上下载一个chm格式的css的参考手册，然后根据手册里面写的一个个的都敲一下。

css大体分为下面这几块知识点：

① 定位布局

1.position属性的7个值（static | relative | absolute | fixed | center | page | sticky）分别有什么作用和不同？

2.实现品字形布局或者是三栏布局（左右宽度固定，中间适应屏幕）。

3.浮动与清除浮动的方法，flex布局，grid布局。

② 盒子模型

1.margin、padding、border这三个属性。

2.伸缩盒相关内容。

3.Multi-column Layout Module多列布局模型。

③ 文本字体

1.强制换行与不换行，清除空白。

2.文本对齐、大小（如何设置chrome小于12px的字体）、缩进、转换。

3.单位（em、rem、px等），颜色（rgb、rgba，hls）。

④ 变换、过渡和动画

1.transform的各种取值的作用与兼容性。

2.transition过渡的动画类型，贝塞尔曲线的原理。

3.animation动画的各种设置，@keyframes规则。

4.浏览器的重绘与重排。

⑤ 选择器

1.选择器的分类，权值和优先级。

2.有哪些属性可以被继承，哪些属性没法继承。

3.伪类和伪元素分别是什么，有什么作用。

上面这些都是基础的东西，除了这些基础的内容之外需要了解Less、Sass、stylus等css预处理器，这将会大幅度提升你的css开发效率，也需要了解一下Autoprefixer、PostCSS等css后处理器。

3.JavaScript部分

在这里就不说js的基础知识了，我把js按照语法的层次和使用的层次分为了两大块。

按照语法的层次来说：

首先是javascript的面向对象方面的内容：在javascript中实现封装、继承和多态。

① 封装：在js中可以通过闭包、作用域和作用域链来实现封装，ES6的const、let的作用。

② 继承：基于原型链的继承、基于构造函数的继承、组合式继承、寄生式继承等，外加ES6的class关键字，prototype和proto。

③ 多态：在javascript中多态是使用arguments来实现的，关于

arguments会引申出来很多内容：

1.arguments的caller、callee等方法的作用。

2.方法的apply和call的作用和不同。

3.使用Array.prototype.slice.call来把一个数组对象转化为数组。4.array的各种方法，如shift、splice、push、filter、map、reduce、forEach等等。

然后是Js的设计模式，比如说那三种工厂模式啊，建造者模式啊等等。

最后是在不同情况下的this分别都代表什么。

按照使用的层次来说：

首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、websocket、服务器代理等等。

然后是tcp协议、udt协议以及http协议的协议头、状态码等内容。浏览器的缓存，客户端存储方面的内容：localstorage、sessionstorage、indexDB、cookie等等。

是一些新的js的API，例如文件读取（fileReader）、fetch、Promise、Web Sockets等等内容，可以去caniuse上面看一下有哪些新的东西。

上面我所说的这些只是一些比较笼统的概念，把前端html、css和javascript所需要掌握的部分内容列举了一下，在前端领域还有很多需要我们知道的知识，这需要大家在学习工作的过程中去自己总结。

我有一个前端学习交流QQ群：328058344 如果你在学习前端的过程中遇到什么问题，欢迎来我的QQ群提问，群里每天还会更新一些学习资源。禁止闲聊，非喜勿进。

如何在VS中创建基于.NET的后端应用程序，该应用程序使用C＃语言从Web API中提取。让我们开始吧！

为服务器后端逻辑选择语言的问题是几乎每个开发人员最重要的问题之一，特别是对于初学者。目前已经有很多不同的语言：Java，.NET（C＃，VD），Ruby，Python，Perl，JavaScript（Node.js），Go，C ++。

除了这些语言的语法特征外，还有许多其他问题/问题，例如扩展的可能性，不同类型数据库的使用，高学习曲线，容错要求，大量数据等等。上。

哪种语言最受欢迎？你应该使用哪一个？也许有人会推荐PHP，它具有丰富的功能和较低的学习曲线。然而，事实仍然是现在最常用的语言是Java和.NET。

本教程介绍如何使用C＃（ASP.NET）构建自己的Web服务器（Web API）。重要的是要注意，要托管您的服务器，您将需要基于Windows的托管。

先决条件

我想我们可以开始了。首先，当我们使用C＃时，您需要使用Microsoft Visual Studio（您可以在Microsoft官方网站上获取它）。

此外，您还需要启用IIS（Internet信息服务）。在Windows中启用它很容易：

在Windows 10中打开“控制面板”，单击“程序”，然后找到“程序和功能”部分，并单击“打开或关闭Windows功能”。在这里，找到Internet信息服务。单击其前面的+图标以展开其下的所有可用选项。您可以找到FTP服务器，Web管理工具和万维网服务。现在启用Web管理工具。单击“确定”，将添加所选功能（或多个功能）并将其应用于Windows。

第1步：创建一个新项目

打开Microsoft Visual Studio并创建一个新项目（文件 - >新建 - >项目）。选择“已安装”模板，选择“Visual C＃”，然后选择“Web”。在可用模板列表中，选择“ASP.NET Web应用程序（.NET Framework）”。给你的项目命名（对于我的演示，我把“webapi”），然后单击OK。

在下一个模态对话框中，您可以选择任何合适的模板。让我们选择Web API，这样它就会为项目准备所有基本的初始文件。单击确定。

完成。现在，您可以在解决方案资源管理器中浏览生成的文件夹和文件 有应用程序配置，帮助页面数据，一些控制器，字体，CSS和JS文件。

路由表

默认情况下，服务器使用位于App_Start / WebApiConfig.cs中的路由表。

注意routeTemplate: "api/{controller}/{id}"，它解释了API路由。

现在，让我们做一个基本的例子。在本教程中，我们将为用户准备一个API，这是每个系统的一个非常通用的实体/对象。

添加用户模型

该模型代表用户，因此我们将包括各种字段，如ID，姓名，电子邮件，电话和角色。

在Solution Explorer中，右键单击Models文件夹，选择Add，然后选择Class。然后提供一个类名：User。模型类已准备就绪。

现在我们只添加我们决定添加的所有字段：

public class User{public int id { get; set; }public string name { get; set; }public string email { get; set; }public string phone { get; set; }public int role { get; set; }}

添加用户控制器

在Web API中，控制器是处理所有HTTP请求的对象。在解决方案资源管理器中，右键单击“控制器”。选择Add，然后选择Controller。

在给定的对话框中，选择具有读/写操作的Web API 2 Controller。将控制器命名为UsersController。它将为控制器准备所有适当的CRUD操作。

在本文中，我使用虚拟用户列表准备了一个基本示例：

public class UsersController : ApiController{private User[] users = new User[]{new User { id = 1, name = "Haleemah Redfern", email = "email1@mail", phone = "01111111", role = 1},new User { id = 2, name = "Aya Bostock", email = "email2@mail", phone = "01111111", role = 1},new User { id = 3, name = "Sohail Perez", email = "email3@mail", phone = "01111111", role = 1},new User { id = 4, name = "Merryn Peck", email = "email4@mail", phone = "01111111", role = 2},new User { id = 5, name = "Cairon Reynolds", email = "email5@mail", phone = "01111111", role = 3}};// GET: api/Users[ResponseType(typeof(IEnumerable))]public IEnumerable Get(){return users;}// GET: api/Users/5public IHttpActionResult Get(int id){var product = users.FirstOrDefault((p) => p.id == id);if (product == null){return NotFound();}return Ok(product);}...

第2步：部署

现在，您可以构建解决方案（在Visual Studio中按Ctrl + Shift + B）。一旦构建成功，您就可以运行它。单击F5，它将在您的浏览器中自动在您的本地主机的可用端口（例如http：// localhost：61024 /）中打开。最有可能的是，您不希望它始终在Visual Studio中运行，因此最好将其保留为服务。

在这种情况下，我们可以使用IIS（Internet信息服务）将其部署到本地专用服务器。这很简单。

首先，打开IIS，在“站点”下面的左侧 - 添加新网站（从右侧面板或右键单击“站点”）。请输入以下详细信息：站点名称，“webapi.localhost”; 物理路径，“C：\ projects \ webapi”（解决方案所在的位置）; 绑定 - http或https; 主机名是相同的，即“webapi.localhost”。单击确定。

IIS应该在webapi.localhost上运行Web API服务。

现在，如果您尝试在浏览器中打开webapi.localhost，它将无法打开我们创建的结果。这是因为浏览器尝试将此地址（webapi.localhost）解析为全局域。为了将此域名映射到本地服务器，我们需要修改本地主机文件。在Windows（v10）上，hosts文件存在于C：\ Windows \ system32 \ drivers \ etc文件夹中。该文件没有自己的扩展名，它是“主机”文件。

将其复制到另一个位置并在编辑器中打开它

您需要将以下内容添加到此文件的末尾：

#Web API主机127 .0.0.1 webapi.localhost

现在，您需要将修改后的文件放回C：\ Windows \ system32 \ drivers \ etc文件夹中。由于此文件夹默认受Windows保护，因此您将收到拒绝访问警告消息。因此，您需要复制“以管理员身份”文件。

文件更新后，webapi.localhost应从您的localhost（C：\ projects \ webapi）加载。

测试API

是时候测试我们为Web服务器创建的API方法了： api/users and api/users/{id}。 在浏览器中打开http://webapi.localhost/api/users。你应该得到以下输出：

在我们创建可从IDE外部访问的外部API时，我们需要从另一个页面测试我们的API。最简单的方法是通过开发工具栏（存在于任何现代浏览器中）。通常在按F12时会激活它。转到“控制台”标签。下面我准备了两个小例子，你可以用来测试API

如果jQuery可用，您可以使用：

$.ajax({type: "GET",url: 'http://webapi.localhost/api/users',success: (data) =>{console.log(data);}});

否则，使用本机JavaScript，您可以使用以下代码：

var xhr = new XMLHttpRequest();xhr.open('GET', 'https://webapi.localhost/api/users');xhr.onload = function() {console.log(xhr.response);};xhr.send();

您很可能会收到以下错误：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

原因是常规网页可以使用该 XMLHttpRequest 对象从远程服务器发送和接收数据，但它们受到相同原始策略的限制。扩展不是那么有限。扩展可以与其来源之外的远程服务器通信，只要它首先请求跨源权限即可。

跨源资源共享（CORS）是一种机制，它使用其他HTTP标头告诉浏览器让在一个源（域）上运行的Web应用程序有权从不同来源的服务器访问所选资源。

调整跨源资源共享（CORS）

为了解决这个问题，我们需要在我们的解决方案中启用CORS。在Visual Studio中，打开包管理控制台（可在屏幕底部，错误列表和输出之间）。

运行以下命令：

Install-Package Microsoft.AspNet.WebApi.Cors

这将安装WebApi.Cors参考。然后打开“App_Start \ WebApiConfig.cs”文件。加config.EnableCors();之前config.MapHttpAttributeRoutes();

然后返回我们的UsersController.cs并[EnableCors(origins: "*", headers: "*", methods: "*")]在类定义之前添加。

最后 - 再次重建项目。然后尝试再次测试API; 现在它应该工作。

我希望你喜欢我们的文章，你发现它很有用。

打开Pycharm的file，选择创建新的项目，然后弹出对话框，我们可以看到里面有很多的案例，Flask、Django等等，我们选择生成Flask的demo程序

选择创建之后一个简易的Flask项目就出现在我们眼前，第一个是入口程序，还有一个static的静态目录，templates是模板存放的位置

我们可以手动来启动这个Flask项目，但是这不是很理智的，在Pycharm上面有个run，我们可以选择run来启动Flask的服务，默认打开的是5000端口

打开浏览器输入http://localhost:5000，查看网站运行状况，页面输出了我们返回的hello world

更新我们的路由，添加一个test的路由，然后再加一个test/name的路由，这里的name是可变的，我们可以随便输入，然后通过render_template传入到test.html模板文件中

templates/test.html是模板文件，变量用两个大括号括起来，render_template函数会将变量渲染模板然后输出

重启项目，打开浏览器输入http://localhost:5000/test/，查看网站运行状况，页面输出了your name is: None，说明我们的name是一个None，接下来我们变换一下name，输入http://localhost:5000/test/lisi，页面内容变化了，输出your name is: lisi

在学习了Python入门教程之后，我们应该选择一个方向进行深入。

从这篇教程开始，我们一起学习Python的Web项目开发。

基于Python的Web开发框架有很多种，在这里不一一赘述。

Django是这些框架中比较成熟并拥有庞大用户群体的一种。

与一些轻量级框架（例如Flask）不同，Django有丰富的内建功能，提供一站式解决方案，便于初学者快速实现一个Web项目。

当然，并不是说轻量级框架不如Django，轻量级框架更适合灵活的定制化开发，但同时也意味着很多功能要由开发人员自己来实现。

这就好比想做一道菜。

轻量级框架就像蔬菜店，只提供基本的食材，这就要求顾客具有一定的烹饪知识和技巧，能够自己加工搭配食材，完成烹饪过程。

不过，这样的好处在于顾客能够随心所欲的进行搭配制作，做出各式各样的菜品。

而Django这样的框架则像一个半成品供应店，食材都已经加工好，并且按配方搭配好，顾客只需要按照一定流程，就能够完成菜品的制作。这对于烹饪知识和技巧有限或者希望快速做出一道菜的顾客来说是不错的选择。

但是，半成品的缺点在于限制了顾客的自由度，不利于顾客的自由发挥。

所以，作为一个入门级的Python开发人员，选择Django应该是个不错的决定。

这里需要注意的是，在之前的学习中，我们一直使用的是PyCharm的社区版，如果要进行基于Django的Web项目开发，我们需要使用PyCharm的专业版。

PyCharm专业版，才能够直接创建Django的项目。

注意：PyCharm专业版只提供一定时间的试用，大家可以考虑购买，或者通过一些其他方式完成软件的激活，本站不提供相关的解决方案。

当我们完成PyCharm专业版的安装之后，将软件打开。

如果之前已经做过项目的话，此时可能会直接打开之前的项目。

我们需要在文件（File）菜单中，选择关闭项目（Close Project）的选项，关闭当前项目。

关闭项目之后，会弹出创建项目的窗口，我们点击创建新项目（Create New Project）的选项，进入创建新项目的窗口。

在创建新项目的窗口中，左侧列表选择Django，右侧选择一个本地已创建好的文件夹，然后点击创建（Create）按钮，就会开始Django项目的创建。

在Django项目的创建过程中，如果我们还没有安装Django的话，PyCharm会自动帮助我们进行安装。

注意：PyCharm会自动帮助我们安装Django2.0版本，这个版本不支持Python2。

如果想自己安装Django的话，也可以使用pip命令进行安装。

pip install Django

当我们完成Django项目的创建，这个时候在PyCharm左侧的项目文件列表中会自动创建一些内容。

这些内容就是我们基于Django开发Web项目的关键内容。

至于这些内容如何使用，我们在之后的教程中逐步进行了解。

这里需要知道的是venv这文件夹中的内容。

这个文件夹内容的出现，是因为在创建Django项目时，同时创建了一个独立的Python运行环境。

在创建Django项目的窗口，Python解释器设置中有一个默认选项，使用Virtualenv新建运行环境（New environment using Virtualenv）。

实际上，如果我们只开发一个应用的话，可以选择下方的现有翻译器（Existing interpreter）。

但是，如果同时开发多个应用的话，每个应用又需要独立的运行环境，就需要选择创建新的虚拟环境。

例如，系统中只安装了Python2.7，安装第三方库的时候都会安装到同一目录。

但是同时需要开发两个项目，一个使用Django1.7，另一个使用Django1.9，这就产生了冲突。

所以，这个时候我们需要为不同的项目创建独立的运行环境，就需要用到Virtualenv。

实际上virtualenv也是一个模块，通过pip命令进行安装，然后通过这个模块手动创建虚拟环境。

关于virtualenv模块的使用，有兴趣的同学可以自行搜索一下相关资料进行了解，在此不做赘述。

学习完本阶段的课程，你将获得：1. 行业背景、职业前景的认知2. 对Web大前端工程师的认知3. 认识自己学习Web大前端的优势4. 掌握Web大前端学习方法5. 了解Web大前端职业规划

Web大前端工程师的职业背景、行业前景、Web大前端工程师在团队项目中的定位及所与具备的技能，并从各个职业的角度，设身处地得帮大家分析从事Web大前端开发的优势和劣势，同时为了帮助大家快速地掌握Web大前端的学习技能，本阶段的课程给大家介绍了Web大前端的学习方法和路径，以及将来的职业规划。

详情联系我们https://huaianmh/product/web给予支持

一、概述

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

Web Worker 有以下几个使用注意点。

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用

document

、

window

、

parent

这些对象。但是，Worker 线程可以

navigator

对象和

location

对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行

alert()

方法和

confirm()

方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（

file://

），它所加载的脚本，必须来自网络。

二、基本用法

2.1 主线程

主线程采用

new

命令，调用

Worker()

构造函数，新建一个 Worker 线程。

var worker =newWorker('work.js');

Worker()

构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。

然后，主线程调用

worker.postMessage()

方法，向 Worker 发消息。

worker.postMessage('Hello World');worker.postMessage({method:'echo', args:['Work']});

worker.postMessage()

方法的参数，就是主线程传给 Worker 的数据。它可以是各种数据类型，包括二进制数据。

接着，主线程通过

worker.onmessage

指定监听函数，接收子线程发回来的消息。

worker.onmessage =function(event){ console.log('Received message '+ event.data);doSomething();}functiondoSomething(){ // 执行任务 worker.postMessage('Work done!');}

上面代码中，事件对象的

data

属性可以获取 Worker 发来的数据。

Worker 完成任务以后，主线程就可以把它关掉。

worker.terminate();

2.2 Worker 线程

Worker 线程内部需要有一个监听函数，监听

message

事件。

self.addEventListener('message',function(e){ self.postMessage('You said: '+ e.data);},false);

上面代码中，

self

代表子线程自身，即子线程的全局对象。因此，等同于下面两种写法。

// 写法一this.addEventListener('message',function(e){ this.postMessage('You said: '+ e.data);},false);// 写法二addEventListener('message',function(e){postMessage('You said: '+ e.data);},false);

除了使用

self.addEventListener()

指定监听函数，也可以使用

self.onmessage

指定。监听函数的参数是一个事件对象，它的

data

属性包含主线程发来的数据。

self.postMessage()

方法用来向主线程发送消息。

根据主线程发来的数据，Worker 线程可以调用不同的方法，下面是一个例子。

self.addEventListener('message',function(e){var data = e.data; switch (data.cmd){ case 'start': self.postMessage('WORKER STARTED: '+ data.msg);break; case 'stop': self.postMessage('WORKER STOPPED: '+ data.msg); self.close(); // Terminates the worker.break; default: self.postMessage('Unknown command: '+ data.msg);};},false);

上面代码中，

self.close()

用于在 Worker 内部关闭自身。

2.3 Worker 加载脚本

Worker 内部如果要加载其他脚本，有一个专门的方法

importScripts()

。

importScripts('script1.js');

该方法可以同时加载多个脚本。

importScripts('script1.js','script2.js');

2.4 错误处理

主线程可以监听 Worker 是否发生错误。如果发生错误，Worker 会触发主线程的

error

事件。

worker.onerror(function(event){ console.log(['ERROR: Line ', e.lineno,' in ', e.filename,': ', e.message ].join(''));});// 或者worker.addEventListener('error',function(event){ // ...});

Worker 内部也可以监听

error

事件。

2.5 关闭 Worker

使用完毕，为了节省系统资源，必须关闭 Worker。

// 主线程worker.terminate();// Worker 线程self.close();

三、数据通信

前面说过，主线程与 Worker 之间的通信内容，可以是文本，也可以是对象。需要注意的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给 Worker，后者再将它还原。

主线程与 Worker 之间也可以交换二进制数据，比如 File、Blob、ArrayBuffer 等类型，也可以在线程之间发送。下面是一个例子。

// 主线程var uInt8Array =newUint8Array(newArrayBuffer(10));for(var i =0; i < uInt8Array.length;++i){ uInt8Array[i]= i *2; // [0, 2, 4, 6, 8,...]}worker.postMessage(uInt8Array);// Worker 线程self.onmessage =function(e){var uInt8Array = e.data;postMessage('Inside worker.js: uInt8Array.toString() = '+ uInt8Array.toString());postMessage('Inside worker.js: uInt8Array.byteLength = '+ uInt8Array.byteLength);};

但是，拷贝方式发送二进制数据，会造成性能问题。比如，主线程向 Worker 发送一个 500MB 文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生性能负担。

如果要直接转移数据的控制权，就要使用下面的写法。

// Transferable Objects 格式worker.postMessage(arrayBuffer,[arrayBuffer]);// 例子var ab =newArrayBuffer(1);worker.postMessage(ab,[ab]);

四、同页面的 Web Worker

通常情况下，Worker 载入的是一个单独的 JavaScript 脚本文件，但是也可以载入与主线程在同一个网页的代码。

addEventListener('message',function(){postMessage('some message');},false);

上面是一段嵌入网页的脚本，注意必须指定

这里的Lodash是一个JavaScript库，这里引用的意味就是给大家展示一下我们平时使用第三方JavaScript库的做法，这样的做法会产生很多问题，因为通过index.html的联系，很明显，index.js对第三方库lodash产生了隐形依赖，之所以说是隐形依赖，是因为在lodash被引用之前，index.js中的双下划线变量(lodash提供的一个变量)还是未知的，只有在lodash被引用之后，这个变量才能发挥作用，显而易见，这样做的很危险的，这样会产生很多问题：

无法立即体现，脚本的执行依赖于外部扩展库(external library)。如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。Webpack的价值就这样体现出来了，当你的项目中引用的JavaScript文件，html页面越来越多，就会出现一些不可避免的依赖问题，而我们通过Webpack可以解决这一问题，对于一个html页面，我们可以该页面依赖的所有JavaScript文件打包在一起，构成一个JavaScript文件，这样，html页面只需要引用这一个JavaScript文件即可，上面说的问题，就可以完全被避免。当然自己打包也是可以的，不过通过Webpack这一神器，就没那么麻烦了，你只要告诉它，你需要把哪些文件打包，输出到哪里，它就可以自动分析所有JavaScript的依赖关系，然后帮你打包成一个文件。

接下来，我们就来打包一次试试。

使用Webpack打包

在打包之前，我们还需要做一点小小的调整----将开发环境和生产环境分开：

webpack-learning |- package.json+ |- /dist+ |- index.html- |- index.html |- /src |- index.js这样一来，src文件夹里面，放的就是我们开发的环境，所有的代码编写都在这里进行，而相对稳定的html文件就直接放入dist文件夹中，作为生产环境的文件，这样有一个好处，每一次更新src之后，只需要把src中的东西重新打包，然后供生产环境中的html文件使用，就行了，而html文件本身，几乎不用被更改。

因为我们用到了lodash包，所以需要在npm中安装lodash依赖：

npm install --save lodash细心的朋友可能注意到，这里使用的是--save而不是--save-dev，两者的区别是，--save是生产环境的依赖，也就是供给用户使用的依赖，而--save-dev是开发环境的依赖，比如Webpack，在代码完成并且打包之后，就不需要再使用到它了，显然用户是无需接触到Webpack的，所以这里Webpack属于开发环境的依赖。

添加lodash依赖之后，我们就可以在js文件中导入并且使用了：

src/index.js

+ import _ from 'lodash';+ function component() { var element = document.createElement('p');- // Lodash, currently included via a script, is required for this line to work+ // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());因为接下来我们要使用Webpack打包所有的js，这样的话，我们就不需要再自己在html引入JavaScript库了，而只需要引入打包之后的文件就行了，我们先约定以后打包的文件名叫做bundle.js，那么接下来，修改html文件：

dist/index.html

--+这样的话，我们就可以开始打包了。

在命令行输入

webpack-cli src/index.js --output dist/bundle.js如果不行的话，尝试

// linuxnode_modules/.bin/webpack-cli src/index.js --output dist/bundle.js// windowsnode_modules.binwebpack-cli src/index.js --output dist/bundle.js这一行的意思是执行Webpack命令行程序，将src/index.js作为入口文件，自动分析index.js的依赖，并且将所有依赖和index.js本身一起打包成一个文件，输出到dist/bundle.js，执行这一行，可以看到Webpack打包成功的输出信息：

Hash: 61bf2519e9ef5fa0eb5eVersion: webpack 4.1.0Time: 4080msBuilt at: 2018-3-7 16:58:36 Asset Size Chunks Chunk Namesbundle.js 69.6 KiB 0 [emitted] mainEntrypoint main = bundle.js [1] (webpack)/buildin/module.js 519 bytes {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] ./src/index.js 231 bytes {0} [built] + 1 hidden module打包成功并且输出之后，你就可以打开html文件看看结果了：

html运行结果

可见打包之后的JavaScript能够成功运行，并且解决了之前说的几个问题，这就是Webpack的主要功能。

但是你可能会问，每次都要自己输入巴拉巴拉一大串命令，那也太麻烦了吧，Webpack显然想到了这一点，它是支持配置文件的，你只需要在项目根目录下新建一个配置文件webpack.config.js，并且按照Webpack中文文档给出的语法进行编写就行了。下面给出一个配置文件的例子：

webpack.config.js

const path = require('path');module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }};完成配置文件之后，你需要打包时，就不需要再自己输入入口和输出了，直接这样就行了

webpack-cli// 如果不行尝试// linuxnode_modules/.bin/webpack-cli// windowsnode_modules.binwebpack-cliNPM脚本

有了配置文件你可以还不满足，我既然有npm，为什么不能直接让npm帮我运行呢，答案是可以的，npm支持用户自定义脚本，用户可以在npm的配置文件中添加自己的脚本内容，然后使用下面给出的指令来运行用户的脚本

npm run 脚本名这样的话，我们不是可以自己定义一个build脚本，让它完成Webpack打包的任务呢。

package.json

{ ... "scripts": { "build": "webpack-cli" }, ...}这样一来，只要

npm run build世界我有，打包全自动!

关于Webpack的更多

Webpack的功能当然还不止这些，这里只介绍Webpack的基本功能打包，当你阅读完这篇文章，对Webpack是什么，怎么用也知道个ABCD了，如果想了解更多，可以关注我，我会给大家继续更新一下Web前端的知识，当然也可以直接上Webpack中文文档上查更多的东西，把自己的项目变得更加自动化，让开发更加有效率。