web前端开发star案例 web前端开发都需要学什么？

今天，我爱编程网小编为关注前端开发的同学们准备了web前端开发star案例 web前端开发都需要学什么？，下面一起来看一下吧。

web前端开发都需要学什么？

Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求 前端开发工程师 不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
简单来说你需要学习div+css基本知识、学习javascript编程，包括jquery等框架，Js就是前端的行为和数据交换、学习一门简单的后台 编程语言 ，比如asp或者php，推荐php，不需要学的太深入，主要为了培养编程思想、还有最新的html5+css3和一些JS的扩展框架。

除了上面说到的技术之外，简单的SEO知识，服务器知识、设计知识等都是前端提升自己能力需要掌握的技能，只有这样你才能够跟各个环节的人员更好的沟通并且协同完成项目。

综上所述，想要做前端开发你需要掌握的知识有HTML、CSS、JavaScript、jQuery框架等，另外学习一些后端开发、SEO知识、设计知识也是提升能力所必须的。

20个真实的web开发项目集合，一起来看看!(五)

项目二十：大数据可视化

所含知识点：数据可视化入门，数据可视化基础，零编程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js详解，D3.js 入门，D3.js 高级应用，D3.js 应用工具：NVD3、n3，charts，Highcharts，FusionCharts，Polymaps

在前端学习的起步阶段，最重要的就是要有明确目标和合理的学习规划，为此小编特别为大家总结了web前端基础学习阶段的四大学习要点，希望能让大家的学习变得更加高效： 我爱编程网

一、基本知识的掌握 在我们梳理的知识架构中，按照我们分析的两个维度里最前置的、最浅显的部分，作为打基础的阶段，必须要在这个过程中更多投入到实践中去，我们通常做的多了、熟练了，就认为这部分知识和内容掌握。

二、常用工具的掌握 对于常用工具的掌握应该掌握一些有大公司或专业团队背景的流行工具，这些工具的熟练掌握能够提升专业度、职业度，同时，能提升我们的工作效率。

三、沟通技巧的掌握 在国内，技术人员通常都是自己制定方案、自己执行方案，在执行过程中又缺乏相关产品、交互设计等人员的沟通，大多是在自己的思路贯彻下进行开发，久而久之，我们习惯于信任自己的观点、在自己的视角看问题，对于挑战总是百般地“据理”力争。我们需要更多提升的是，如何在对方的视角看问题、如何在用户的视角看问题。

四、良好的开发习惯 开发习惯是养成的，一旦有不好的习惯，对于将来去修正带来的将是很大的麻烦，培养良好的开发习惯一定要从起步时做起，例如：写代码之前先分析、先写文档、先写注释等等。

最后希望大家通过自己的努力与学习，都能成为一名能力全栈的web前端工程师。一起加油吧!小伙伴们。

使用WebRTC搭建前端视频聊天室——点对点通信篇

WebRTC给我们带来了浏览器中的视频、音频聊天体验。但个人认为，它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道。在DataChannel之前，浏览器到浏览器的数据传递通常是这样一个流程：浏览器1发送数据给服务器，服务器处理，服务器再转发给浏览器2。这三个过程都会带来相应的消耗，占用服务器带宽不说，还减缓了消息从发送到接收的时间。其实最理想的方式就是浏览器1直接与浏览2进行通信，服务器不需要参与其中。WebRTC DataChannel就提供了这样一种方式。

如果对WebRTC和DataChannel不太了解的同学，可以先阅读如下文章：

- WebRTC的RTCDataChannel

- 使用WebRTC搭建前端视频聊天室——信令篇

- 使用WebRTC搭建前端视频聊天室——入门篇

当然服务器完全不参与其中，显然是不可能的，用户需要通过服务器上存储的信息，才能确定需要和谁建立连接。这里通过一个故事来讲述建立连接的过程：

不如钓鱼去

一些背景：

现在，老刘听说老姚钓鱼技术高超，想和老姚讨论钓鱼技巧。只要老刘和老姚相互之间知道对方的门牌号以及凭证，就可以串门了:

老刘和老姚相互之间知道了对方的门牌号和小区出入凭证，他们相互之间有什么需要交流的直接串门就行了，消息不再需要门卫老大爷来代为传达了

换个角度

我们把角色做一个映射：

于是乎故事就变成了这样：

这样，就建立了一个点对点的信道，流程如下所示：

故事

老刘和老姚已经可以相互串门了，经过一段时间的交流感情越来越深。老姚的亲友送了20斤葡萄给老姚，老姚决定送10斤给老刘。老姚毕竟年事已高，不可能一次带10斤。于是乎，老姚将葡萄分成了10份，每次去老刘家串门就送一份过去。

这里可以做如下类比：

这其实就是通过datachannel传输文件的方式，首先将文件分片，然后逐个发送，最后再统一的进行组合成一个新的文件

分片

通过HTML5的File API可以将type为file的input选中的文件读取出来，并转换成data url字符串。这也就为我们提供了很方便的分片方式：

组合

通过datachannel发送的分片数据，我们需要将其进行组合，由于是data url字符串，在接收到所有包之后进行拼接就可以了。拼接完成后就得到了一个文件完整的data url字符串，那么我们如何将这个字符串转换成文件呢？

方案一：直接跳转下载

既然是个dataurl，我们直接将其赋值给window.location.href自然可以下载，但是这样下载是没法设定下载后的文件名的，这想一想都蛋疼

方案二：通过a标签下载

这个原理和跳转下载类似，都是使用dataurl本身的特性，通过创建一个a标签，将dataurl字符串赋值给href属性，然后使用download确定下载后的文件名，就可以完成下载了。但是很快又有新问题了，稍微大一点的文件下载的时候页面崩溃了。这是因为dataurl有大小限制

方案三：blob

其实可以通过给a标签创建blob url的方式来进行下载，这个没有大小限制。但是我们手上是dataurl，所以需要先进行转换：

获得blob后，我们就可以通过URL API来下载了：

这里有几个点：

1. datachannel其实是可以直接传送blob的，但是只有ff支持，所以传data url

2. chrome下载是直接触发的，不会进行询问，firefox会先询问后下载，在询问过程中如果执行了revokeObjectURL，下载就会取消，囧

升级

如我们所知，WebRTC最有特点的地方其实是可以传输getUserMedia获得的视频、音频流，来实现视频聊天。但事实上我们的使用习惯来看，一般人不会一开始就打开视频聊天，而且视频聊天时很消耗内存的（32位机上一个连接至少20M左右好像，也有可能有出入）。所以常见的需求是，先建立一个包含datachannel的连接用于传输数据，然后在需要时升级成可以传输视频、音频。

看看我们之前传输的session description，它其实来自Session Description Protocol。可以看到wiki上的介绍：

这意味着什么呢？我们之前建立datachannel是没有加视频、音频流的，而这个流的描述是写在SDP里面的。现在我们需要传输视频、音频，就需要添加这些描述。所以就得重新获得SDP，然后构建offer和answer再传输一次。传输的流程和之前一样，没什么区别。但这一次，我们不需要传输任何的ice candidate，这里我曾经遇到了坑，经过国外大大的点拨才明白过来。

Peertc

我将datachannel和websocket组合，实现了一个构建点对点连接的库Peertc，它提供非常简洁的方式来建立连接和发送数据、文件和视频/音频流，详情见github。走过路过的记得star一下哦，有什么bug也非常希望能够提出来。

最后

WebRTC的点对点方式能够运用在很多场景：

- 如web qq这种Web IM工具，这就不说了

- 如象棋这种双人对战 游戏 ，每一步的数据服务器时不关心的，所以完全可以点对点发送

- 一对一在线面试、在线教育，这其实是即时通信的一个业务方向

以上就是我爱编程网小编为大家带来的web前端开发star案例 web前端开发都需要学什么？，希望对大家有帮助，了解更多相关资讯请关注我爱编程网。