prototypejs(web前端掌握的技能和面对的工作有哪些)

你也许会觉得前端开发是一个很简单的工作，但当你深入其中时，一定会发现好像前端开发不是那么简单，光网站性能优化、响应式、框架就让你焦头烂额，

确实，做前端开发就是先易后难，想成为一个优秀的前端开发，没有那么简单。

不过，天下事难则不会，会则不难，你只需要掌握11项技能就可以成为前端“大拿”，下面，就告诉你这11项技能是什么？以及每项技能的要点。

一、web前端需掌握的技能

入门必备的技能：

第1项技能：HTML超文本标记语言：

技能要点：

HTML文件的结构

HTML文件的编写方法

HTML基本标记

文字与段落标记

框架

使用表单

XHTML页面结构

第2项技能：JavaScript脚本

技能要点：

JavaScript基本语法

流程控制

函数

对象与数组

程序调试与错误处理

事件处理

处理文档对象

文档对象模型

window窗口对象

第3项技能：CSS网页样式布局

技能要点：

CSS定位与div布局

div 标记与 span 标记

CSS+div美化与布局

CSS与JavaScript的综合应用

CSS与XML的综合运用

CSS与Ajax的综合应用

晋级提升必会的技能

第4项技能：HTML5开发技能

技能要点：

HTML5语法

新增的input输入类型

新增的form元素

HTML5音频与视频

HTML5多媒体技术

Web存储

WebSQL混合开发

Workers多线程处理

第5项技能：常用Javascript框架

技能要点：

jQuery框架

Prototype框架

YUI框架

ExtJS框架

Dojo框架

第6项技能：Javascript Ajax应用

技能要点：

JavaScript的常用对象

DOM文档对象模型

XML请求与响应

JSON

Post/Get请求

成为优秀的前端开发必会的技能

第7项技能：响应式Web设计

技能要点：

Range对象与Selection对象

学会绘制图形

History API

CSS 3 模块与模块化结构

CSS3中的属性选择器

使用选择器在页面中插入内容

文字与字体相关样式

CSS 3中的变形处理

CSS 3中的动画功能

第8项技能：常用交互设计工具

技能要点：

流程图工具

导航设计工具

思维导图

原型设计工具

UML工具

站点地图工具

第9项技能：Web交互设计

技能要点：

指示牌和面包屑

可用性测试

可访问性/级联样式表

第10项技能：网站信息架构

技能要点：

用户需求及其行为分析

信息架构基本信息

组织系统

标签系统

搜索系统

叙词表、受控词表，以及元数据

流程和方法论

设计和文件说明

第11项技能：REST软件架构

技能要点：

统一接口GET/POST/PUT/DELETE

识别资源

表述解析Json/XML/Html

查询

Web缓存

条件请求

扩展性与版本控制

最后分享一则完整版的千锋web前端学习大纲。

好了，这下你可以有计划、分步骤的学习和掌握这些技能了。

二、web前端的工作方向有哪些？

给大家列举Web前端的六个就业方向和工作内容。

1、资深Web架构师

这个方向，既兼顾了工作的单纯性、又能够减少实际Coding的工作量，能腾出更多时间。在国内，Web前端工程师遇到较多的情况是总是反复编写着同样的代码，总是面对着同样的技术和产品，容易感觉枯燥。但正是由于这样较为广泛的Web相关知识的沉淀，使得我们更加容易成为一名架构师。

虽说这种职业发展方向不如第一种来得平滑，但是作为一名架构师在学习后端技术、DBA、Platform等内容，将其丰富的知识应用到需要实际中的项目操作，不再局限自己在家里随便写写两个Demo。即便在学成这段时间，势必会遭遇一段时间的阵痛期。但对于一个大局观好、悟性好、知识面广的前端工程师而言，这依旧是值得推荐的荣光之路。

2、资深Web前端工程师

这个方向算是一个Web前端最基本的选择了，但能够把自己的专业做到极致，能一辈子就在一个专业领域不断学习和积累。对所有的Web前端工程师来说，朝着这个职业发展方向，只要足够耐心、厚积薄发，成功的概率是非常高的。

3、网页设计师

网页设计师可以将平面设计中的审美观点套用到网站设计上面来(其区别是动态网页的制作是平面设计不能达到的，它是一种审美方式的延伸)。网页如门面，小到个人主页，大到大公司、大的政府部门以及国际组织等在网络上无不以网页作为自己的门面。当点击到网站时，首先映入眼帘的是该网页的界面设计，如内容的介绍、按钮的摆放、文字的组合、色彩的应用、使用的引导等等。这一切都是网页设计的范畴，都是网页设计师的工作。而且具备精通Photoshop，Coreldraw,Frontpage,Dreamweaver等多项网页设计工具的能力。

4、PHP程序员

PHP技术人才，正迎合了目前的互联网的发展趋势。而且PHP作为非常优秀的、简便的Web开发语言，和Linux，Apache，MySQL紧密结合，形成LAMP的开源黄金组合，不仅降低使用成本，还提升了开发速度，满足最新的互动式网络开发的应用，这使得php软件工程师成为一个发展迅速的职业。

5、自己创业

其实，自己创业是最好的道路，但也是成功率最低的道路，挑战和机遇并存。作为一个前端技术人员，需要将自己的视野更多放在行业的动态、产业链的动态、相关产品领域的动态，把关注细节的优势继续保持，同时，增强自己把控一个产品乃至一个公司命运的能力。

6、转岗管理或其他

这条职业道路和Web前端技术之路关系不大。

最后，千锋武汉小编想说，无论是否走上Web前端开发这条道路，其实对于任何技术之路，更好的大局观、更广泛的视野是良好发展的必备条件。拥有良好的大局观和更广泛的视野别无他法，只能不断的进行知识的横向拓展和积累。同时，多在横向拓展知识的时候进行实践，把知识变成技能，对于Web前端初学者来说，更应如此。

js class用于定义类。1. js class 是一种用于创建对象的语法糖，委托了构造函数和原型绝大部分的功能。因此，使用 class 可以更明确、简单快速地定义一个类。2. 与传统的函数方式相比，class 可以方便地实现类的继承和多态，这使得class可以更好地面向对象编程和数据封装。3. 最近，JavaScript 的标准已经升级为 ES6，class 成为了 JavaScript 的一部分，取代了之前的 prototype，成为 JavaScript 中更为优秀的面向对象编程语言。

其实，这个问题去看jquery源码就能很清楚的知道了，从楼主的问题说明里面只是明白了jquery的方法扩展方式，但并没有真正理解其主要架构方式；

我下面所说的都是基于2.0.3版本jquery源码进行说明，首先，描述中有几个错误需要指正下：

第一，在jquery中，$('xxx').xxxx()这种写法，其实是通过jQuery.fn.extend({xxx: function() {}})的方式进行方法绑定和扩展的，而$.xxx()这种方式的方法是通过jQuery.extend({xxx: function() {}})的方式进行方法绑定和扩展的；如下图，$.ajax通过下图绑定：

而$('xxxx').attr()则通过下面方式：

第二，console.log(jQuery()) 其实是个对象，

console.log(jQuery('#test'))，如果有此元素存在，看起来像数组，如下图，其实也是对象，这种叫“类数组”；可以百度去看下类数组相关知识；

好，下面开始说下楼主的两个问题，第一是extend的实现方法；第二是jquery为什么能同时支持$.xxx()与$().xxx()这两种写法；

第一，extend的实现方法；由于源码较多，我在这儿就不直接展示出来了，有兴趣可以去找到看看；其实简单讲，extend主要用于对象的合并，如下图；

但是从源码可以看出，当参数只有一个对象的时候，就是直接将传入对象合并到调用的对象上 (即jquery或jquery.fn);

所以，当调用jQuery.extend时，就会将传入的对象里面的方法合并写入到jQuery对象上面，就可以对其进行扩展; 同理，使用jQuery.fn.extend时，就可以对jQuery.fn进行扩展；

第二，$.xxx()与$().xxx()两种的区别；第一种$.xxx()其实是调用的jQuery对象上面的方法，也就是通过jQuery.extend进行扩展的方法；有人会说，jQuery是一个函数，但是函数在js也是对象，也可以向其添加属性和方法；而第二种$().xxx()则是调用的jQuery.fn对象上面的方法，也就是通过jQuery.fn.extend进行扩展的方法；

第一种通过jQuery.extend进行扩展的属性和方法是直接写入jQuery对象，所以也就可以直接通过$.xxx()的方式调用，这个很容易理解；

第二种，通过jQuery.fn.extend进行扩展的方法和属性为何能够通过$().xxx()进行调用呢；这个就要从jQuery的整个架构来说；当执行$()时，访问了下图代码：可以看出，其实是实例化了一个jQuery.fn.init的对象；在这我们就不再讨论jQuery.fn.init里面具体干了什么，但可以通过源码可以看出，其最终执行了“return this”，也就是返回了jQuery.fn.init的实例对象；那如何通过$()可以访问到jQuery.fn上面的属性和方法呢？就是通过下图这句代码：

它将jQuery.fn赋给了jQuery.fn.init.prototype，所以，jQuery.fn.init的实例对象也就可以直接访问jQuery.fn上面的方法和属性了；所以，当你通过$().xxx()时，其实访问了jQuery.fn.xxx()方法;

在jquery输入元素表达式属性名即可得到。如：

1.$("#textId").attr("width")是获取Id为textId的控件的width属性。

2.$(".className").attr("width")是获取包含class名为className的控件的width属性。

3.$("[name=textName]").attr("width")是获取name为textName的控件的width属性。

但要注意，jquery取到的可能是一个数组，如果确定属性为同一值，则没问题，否则应该循环取得控件，再取属性值。如：$("#textId")[0].width是取第一个控件的width属性。但也有写属性用attr取不到，也需要用角标的方式取得控件后再取属性。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

JavaScript 中对象通常包括两种类型：内置对象和浏览器对象，此外用户还可以自定义对象。在 ECMAScript 中，更精确的定义应该分为：本地对象、内置对象和宿主对象。

JavaScript常见内置对象：

String对象：字符串对象，提供了对字符串进行操作的属性和方法。

Array对象：数组对象，提供了数组操作方面的属性和方法。

Date对象：日期时间对象，可以获取系统的日期时间信息。

Boolean对象：布尔对象，一个布尔变量就是一个布尔对象。(没有可用的属性和方法)

Number对象：数值对象。一个数值变量就是一个数值对象。

Math对象：数学对象，提供了数学运算方面的属性和方法。

Object对象、RegExp对象、 Global对象、Function对象。

对象包含两个要素：

1、用来描述对象特性的一组数据，也就是若干变量，通常称为属性。