菜鸟前端开发年终总结

总结对于个人的成长而言，是我们反思自身、了解自身、明确目标的重要方式，通过编写的总结报告，我们可以在工作回顾中，寻找出自身的工作难点，掌握自身的工作优势，更加明确自身的发展方向。今天小编给大家找来了《菜鸟前端开发年终总结》，仅供参考，希望能够帮助到大家。

第一篇：菜鸟前端开发年终总结

web前端开发知识点总结

HTML知识总结

span

行级元素，多个

同行块级元素，独占

一行块级元素，前后

保留一行

标题标签，h1~h6表6个等级，加粗，前后保留一行width：设置宽

度height：设置高

度alt：图片加载失败显示的文本

div

文本类

p

h

图片标签img

color：颜色

水平线常用标签

hr

size：高度(粗

细)width：宽度(长度)herf：超链接转到的地址

超链接a

target

_self:默认值，在当前页面打开_blank:在新窗口

打开

带标题的框fieldsetlegend设置标题

disc：实心圆

无序列表

列表标签

有序列表

ul

square：小方块

olcircle：空心圆

tr表示行

th

表示标题单元格，居中、加粗

td

表格标签

caption

表示一个单元格

表示标题，定义在第一行，居中

rowspan

设置单元格占的行

数

colspan

设置单元格占的列

数

action表单提交地址

get：显示提交参数，将参数用?和&拼接到url上

带到服务器端

method

post：隐式提交参

数optgroup 表示分组,分组不能选,只能选分组中的option

下拉菜单selected默认选中multiple 设置下拉菜单为多选模式表单项rows: 显示文本的行数(高度)文本域

cols: 显示文本的列

数(宽度)

name：参数名

size：显示字符长度(控制文本框长

度)maxlength：最大可

输入字符数

input文本框type=“text”

placeholder：提示

内容

disabled：不会被提交到服务器readonly：只读(会被提交到服务

器)

value：默认值

密码框

type=“password”单选按钮type=“radio”复选框

type=“checkbox”文件选择框type=“file”

按钮

type=“button”提交

type=“submit”checked：默认选

中

input

按钮

重置type=“reset”

noresize：不能改变框架大小

frame：表示框架

scolling：是否显示滚动条(yes、no、auto)设置框架集在纵向上的拆分策略设置框架集在横向上的拆分策略

rows

cols

border

框架集

框架边框的宽度

borderColor框架边框颜色

frameBorder

设置框架是否有边框(yes|no)_blank:新窗口中

打开_self:在当前窗口

打开

框架集中的超链接打开方式target_parent:父窗口

中打开_top在最顶层窗口中打开frameName：在对应name框架打

开

ifame

在页面中嵌入框架

dl、dt、dd其他标签

 

 

 

数码

手机

 

marquee：滚动标签

 

shape="circle"

coords="309,257,20"target="_blank"

href="http:///s?wd=帽子">

shape="poly"

coords="258,316,277,283,340,280,356,314"target="_blank"

href="http:///s?wd=t恤">

img usemap

ruby：用rt包含的内容对前面

的普通文本进行注释

 

漢

ㄏㄢˋ

呵呵呵

hehehe

吃了没?

are you chi le?

range：范围选择

color：颜色选择

输入控件html5新标签

number：数字输入

date picker：日期选择

datalist：自动提示

video：动画

媒体

radio：音频

autocomplete：是否关闭自动提示(off |

on)html5新标签

autofocus: 自动获得

焦点

required: 表示控件

必须输入内容

controls : 播放控制条

autoplay ：自动播放

loop ：循环播放preload ：预加载，如果设置了autoplay，就可以不用设置preload

CSS知识点总结

内联：直接在标签的style属性上编写

样式样式定义方式

样式块：在style标签中编写样式块，并通过一定规则(选择器)应用到对应的那些标签上(通常写在head中)

<style type="text/css">span {

color: green;

background-color: #eeffee;}

</style>

外部样式文件：将样式块编写在外部

的css文件中(不用写style标签)* 在需要使用样式的页面通过link标签引入样式文件(通常写在head中)

 

<link href="hehe.css" rel="stylesheet" />

id选择器#xxx 针对id为xxx的标签

类选择器.xxx 针对class属性为xxx的标

签

标签选择xxx 针对标签名为xxx的标签

*选择器选择所有元素选择器

后代元素关系选择selector1 selector2 {...} 针对selector1下的所有的selector2

子元素关系选择selector1 > selector2 {...} 只针对selector1的selector2子元素(如果有后代selector2元素则不会应用)

紧邻兄弟关系选择selector1 + selector2 {...} 只针对紧接在selector1后

的selector2元素

所有随后的兄弟关系selector1 ~ selector2 {...} 针对selector1后的所有的

selector2兄弟元素

color：字体颜色

font-size：字体大小

font-family：字体样式

字体

font-weight: bolder(加粗) | normal(不加粗)font-style: 设置字体倾斜(normal | italic | oblique) *italic和oblique实际显示效果

几乎一致font-variant: 设置字体显示为小型大写字母

text-align: 水平对齐方式(left | center | right)常用属性

vertical-align: 垂直对齐方式(top | middle |

bottom)

line-height: 设置行高(通常用于设置文本居

中)

white-space: nowrap 不换行, pre 当做pre标签

border: 边框(1px solid

red)

文本

width: 宽度

underline 下划线

height: 高度

overline 上划线

text-decoration: 文本装

饰

line-through 贯穿线(删

除线)

blink 闪烁

none 无

dtext-shadow: 3px 3px 5px red;第一个参数: 阴影水平位置(x轴上的偏移量)

text-shadow: 文本阴影

第二个参数: 阴影垂直位置(y轴上的偏移量)

第三个参数: 模糊程度第四个参数: 阴影颜色

padding：内边距

padding: xxpx;

padding: xxpx xxpx;

padding: xxpx xxpx xxpx;

padding: xxpx xxpx xxpx xxpx;padding: auto;

padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottom盒子模型

margin：外边距

margin: xxpx;

margin: xxpx xxpx;

margin: xxpx xxpx xxpx;

margin: xxpx xxpx xxpx xxpx;margin: auto;

margin: xxpx auto;margin-topmargin-leftmargin-rightmargin-bottom

border：边框

color：颜色;width：宽度;

style：outset|inset|solid|double|dottedborder-radius: 10px; /* 同时设置4个角*/

background-color: 背景颜色

background-image: 背景图片

background-repeat: no-repeat | repeat-x |

repeat-y | repeat背景

background-position: xxxpx xxpx | xx%

xx%; (可以为负数)

background-size: xxxpx xxpx | xx% xx% |

cover | contain; (不能为负数)

cover: 拉伸,可以超出contain: 拉伸不能超出

background-attachment: scroll(随着内容

一起滚动) | fixed (不滚动)

hidden：隐藏

scroll：滚动

overflow：当内容溢出

时的处理方式

visible：直接显示

auto：如果溢出就滚动，否则不显示滚动条

visible 显示

visibility：设置元素是

否显示

hidden 隐藏，保留占位

none：隐藏，不保留占

位

block：设置为块级元

素

display：设置元素是否

显示

inline：设置为行级元

素

布局

inline-block：设置为行

内块元素

left 左浮动

float: 浮动right 右浮动

none 不浮动

left 不允许左边有浮动

clear: 清除浮动right 不允许右边有浮动

both 不允许两边有浮动

ul或ol 自带样式：

列表样式

list-style-type: 列表项的

样式

margin: 16px 0px;padding: 0px 0px 0px

40px;

absolute：如果有父元素被定位按照父元素的原点进行定位，否则按照浏览器原点进行定位

position

定位

z-index: 设置z轴的值，

越大越在最前

relative：相对定位参照元素本身的位置

fixed：固定位置，不

会滚动

link 超链接默认样式

hover 鼠标悬停样式

active 鼠标点击样式

visited 访问之后的样式(主要控制颜色)

伪类

focus 获得输入焦点的

样式

first-child 第一个元素

last-child 最后一个元素

:not 不包含指定的选

择器

:noly-child 是父元素的唯

一子元素

cursor 鼠标样式

其他样式

box-shadow 阴影

translate: 平移

rotate：旋转transform：变换

scale：缩放

skew：扭曲

matrix：以变换矩阵变换

第一个值表示需要过渡的样式属性transition 过渡

transition:transform2s,background-color .5s;

第二个值表示整个过渡过程需要的时间第三个值表示过渡时的贝塞尔曲线第四个值表示延迟多久才开始过渡animation 动画

@keyfarmes 关键帧用于定义动画的细节(每一帧如何显示)

@keyframes myanimation {0% { background-color: #cfc; }30% {

background-color: #ccf;border-radius: 50px;}80% {

width: 300px;

background-color: #fcc;}

100% {

width: 300px;height: 300px;

background-color: #000;}}

@-o-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}

需要显示动画的地方通过animation属性来使用声明的关键帧

.ac:active {

animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度从0.0 ~ 1.0 0.0完全透明，1.0 完全不透明浏览器兼容前缀

-webkit-chrome，safari, opera-o-opera

-moz-firefox

-ms-ie(ie9以上)

JavaScript

javascript代码必须包含在<script></script>标签中

也可以书写到外部的.js文件中,通过<script src="xxx.js"></script>来引入

script标签只能同时做一件事情.如果既有src属性也包含代码则只会执行外部文件的代码

通过alert来弹出提示框

通过document.write来输入文本到页面上(可以输入标签)Number: 数值型整数和小数Boolean: 布尔型(true |

false)

String: 字符串

字符串必须被""或'包含必须对称

如果字符串中包含引号可以单引号中包含双引号或者是双引号中包含单引号

也可以使用'来表示一个单引号"来表示一个双引号

 

表示换行数据类型

表示制表符表示书写方式

NaN: Not A Number 当使用非数字来进行运算时

的值

undefied: 未定义

null: 空值

substring 截取子串, 从start到end-1处,如果

没指定end则取到最后一个字符

toUpperCase 将所有字符变成大写

toLowerCase 将所有字符变成小写

indexOf 查找子串首次出现的位置, 如果找不到则

返回-1字符串处理

lastIndexOf 查找子串最后一次出现的位置, 如果找不到则返回-1charAt 取指定位置上

的字符slice 也是取子串,效果和substring一样可以用-1,-2,-3...从末尾

开始计数split 将字符串按照指定的字符进行拆分成

为数组

获取当前时间var now = new Date()

获取指定时间的日期对象

var date = new Date(yyyy,MM,dd,HH,mm,ss)

设置指定时间(将时间对象设置为一个指定时间)

now.setFullYear(yyyy,MM,dd,HH,mm,ss)

now.setMonth日期Date

now.setDatenow.setHours

...

获取指定时间信息

now.getFullYear() // 年只能取出年份,如: 2015

now.getMonth // 月0-11月

now.getDate // 日

now.getDay // 星期0-6 (0表示星期天)

now.getHours // 时24小时制

now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒

通过new Array()来创建数组var names = new Array();

var names = new Array("小王", "大王", "炸弹"); // 创建时给数组设置默认值

//用json格式表示数组

var names = [];

var names = ["小王", "大王", "炸弹"];数组Array

可以通过length来设置或获取数组的长度

push : 往数组末尾添加元素

pop: 删除并返回数组的最后一个元素unshift: 往数组的开头添加元素shift: 删除并返回数组的第一个元素reverse: 颠倒数组顺序

sort: 按"字符串"的自然排序规则进行升序

splice: 删除指定位置处的指定个数元素并将第三个参数之后的参数添加到被删除位置(设置第二个参数为0则实现只添加不删除, 之传入两个参数实现只删除不添加)

slice: 获取start到end处的子数组

join: 将数组元素以指定分隔符进行连接成为字符串

function xxx(....) {

声明函数

....}

var xxx = function (...) {

...

函数变量

}var ooo = xxx;

ooo();函数

function fn(fx) {

fx();

将函数作为参数

}fn(function () {

...});(function (...) {

立即执行函数

....})(...);

getElementById 根据id获取唯一的元素var xx = document.getElementById("xx");DOM(Document Object Model) 文档对象模型

获取元素

getElementsByTagName 根据标签名获取元

素数组

onclick 鼠标点击事件

getElementsByClassName 根据类获取元素数组(如果元素被改变了class值将会从数组

中删除)

onmouseover 鼠标进入事件

onmouseout 鼠标离开事件

onmousemove 鼠标被移动

onmousedown 鼠标按钮被按下事件机制

onmouseup 鼠标按钮被松开

onkeydown 某个键盘按键被按下

onkeyup某个键盘按键被松开

onload 一张页面或图像被完成加载

onchange 域的内容被改变

onfocus 元素获得焦点

onblur 元素失去焦点

setTimeout: 延迟执行(只会执

行一次)var xx = setTimeout(xxx, 1000);setTimeout("fn();", 3000);BOM(Browser Object Model)

window

清除使用clearTimeout(xx);setInterval: 定时执行(间隔指

定时间循环执行)

xx.offsetLeft获取元素的位置和尺寸(只读)

xx.offsetTopxx.offsetWidthxx.offsetHeight

var xx = setInterval(xxx,1000);

清除使用clearInterval(xx);

[] 表示[]中的字符任意取一个

在[] 中的^ 表示非不包含该字符

() 表示将多个表达式合并为一个表达式

在()中的|表示将两个匹配条件进行逻辑“或”(Or)运算。+ 前一个表达式出现至少一次1~n {1,}* 前一个表达式出现任意次0~n {0,}? 前一个表达式出现0~1次{0,1}{n} 前一个表达式出现n次

{n,} 前一个表达式出现至少n次{n,m} 前一个表达式出现n~m次. 任意字符(不包含

)正则表达式

^ 匹配字符串的开头$ 匹配字符串的结尾

w 表示一个任意的单词字符包括_ [a-zA-Z0-9_] * 不包含破折号

W 对w取反(不包含单词字符) [^a-zA-Z0-9_]d 表示一个数字字符[0-9]D 对d取反[^0-9]s 表示一个任意空白字符空格中文状态的空格制表符全角空格

S 对s取反非空格

换行符 单词边界

B 不是单词边界(对取反)

eval

执行字符串形式的

代码。

for(var i in array) {var item = array[i];

}

for(var key in obj) {var value = obj[key];

}

迭代数组迭代出的值为数组的下标

for...in

迭代对象迭代出的值为对象的属性名其他

with

设置以某个对象为代码块作用域对象

delete attribute删除属性

isNaN

如果被判断值不是一个数字则返回true，

否则为false

第二篇：前端开发、网站美工职位描述

Web前端开发工程师

岗位职责：

1、公司产品web端页面的制作、开发和优化

2、根据设计稿，编写静态页面和交互、特效等功能的脚本程序

2、开发基于HTML5技术的可灵活定制、可扩展的前端UI组件

3、优化前端架构，提高系统的灵活性和可扩展性

4、开发、维护、扩展前端代码框架

5、跟踪研究前沿的前端技术，并应用到公司的产品开发当中

任职要求：

1、两年以上工作经验，了解各种Web前端技术，对符合web标准的网站重构有经验;

2、熟练掌握DIV+CSS网页布局，并且对模板化、模块化有一定理解,精通HTML/HTML

5、CSS/CSS3等前端开发技术;

3、熟练掌握JavaScript语言核心技术DOM、BOM、Ajax、JSON等，对javascript框架(如prototype/jQuery/YUI等)有一定的经验;

4、对css/JavaScript性能优化、解决多浏览器兼容性问题有一定的经验;

5、熟悉浏览器渲染原理，精通各种前端调试工具，对页面性能和浏览器兼容有丰富的实践经验;

6、理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验;

7、对用户体验、交互操作流程、及用户需求有一定了解;

8、具备良好的责任心、逻辑思维强、善于交流和表达、较强的学习能力、优秀的团队沟通与协作能力。

9、爱思考，沟通能力强。

网页设计/策划

岗位职责：

1、根据公司业务实际需要，负责平台网站项目的整体美编创意、设计和页面的美化。

2、根据公司项目的运营需要，设计、制作市场宣传物料。

3、负责网站LOGO、图片制作及广告类页面制的作。

4、负责网站整体页面展现的文案内容策划。

5、负责网站活动内容的美编工作。

6、配合项目的其它艺术、设计工作。 能力发展：

有较强的美术功底及审美能力，较强的活动专题页面设计和网页设计创意能力;

精通Photoshop/Dreamweaver等设计软件，对图片渲染和视觉效果有较好的把控和认识。 较强的创意、策划能力，良好的表达能力，思维敏捷; 工作认真，有责任心，富有团队精神; 具备良好的美术基础，良好的创意构思能力;

有良好的团队合作意识，耐心，诚恳，有强烈的责任心和积极主动的工作态度，能从大局出发，主动完成任务。

面试请携带网站设计相关案例。

第三篇：什么是前端开发工程师

什么是前端开发工程师

前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML(标准通用标记语言下的一个应用)、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。

前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间2005年开始，是指Web前端开发工程师的简称。 Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。

(ps：本文章由北大青鸟广安门校区搜集自互联网)

第四篇：网站前端开发人员的必知新知识

网站开发离不开开发工具，下面郑州网站建设公司资深工程师为大家推荐几款最新网站前端开发工具:

1. Dummy : 图像和内容处理的 PHP 工具包

Dummy 可以让你在任何高清图像图像上插入任何长度和格式的文本，包括段落、标题等等。Download

2. DBeaver : 免费的数据库管理工具

DBeaver 是一个通用的数据库管理工具和 SQL 客户端，支持 MySQL, PostgreSQL, Oracle, DB2, MSSQL, Sybase, Mimer, HSQLDB, Derby, 以及其他兼容 JDBC 的数据库。DBeaver 提供一个图形界面用来查看数据库结构、执行SQL查询和脚本，浏览和导出数据，处理BLOB/CLOB 数据，修改数据库结构等等。Download

3. Redactor : JavaScript WYSIWYG Editor

Redactor 是一个 jQuery 的插件，实现在线所见即所得的 HTML 编辑器。界面简洁，加载速度快。不过不支持 IE6 浏览器，如果你不需要考虑 IE6 不妨试试。Download

4. The Golden Grid

Golden Grid 为 960 Grid System 增加了水平线。由行和列之间的交叉点形成的矩形的特点是和谐的尺寸和性质，更加均衡布局用来更快，更精确定位页面上的元素。Download

5. Scrambls

Scrambls 允许对在线内容在提交之前进行加密。Download

6. QR Hacker

QR Hacker 是一个 Web 服务，为文本、URL、电话号码和 VCard 创建彩色的二维条形码。Download

7. Countly : 开源的移动分析应用

Countly 是一个实时的、开源的移动分析应用，通过收集来自手机的数据，并将这些数据通过可视化效果展示出来以分析移动应用的使用和最终用户的行为。一旦你打开该程序的面板，你会发现数据的监控是那么的简单。Download

8. gZip WTF Beta

gzipWTF 提供简单的方法用来检查符合率、内容压缩以及 404 错误，你需要做的就是提供一个 URL 和一个验证码表单。Download

9. Smore

smore很容易让任何人来创造美丽的，有效的网上传单，这是高度设计有一个明确的目的，如推广应用，促进事件或销售产品，单页网站。Download

10. Stylo

Stylo 是一个开源的 Web 设计工具，使用 CoffeeScript 和 Spine 设计，可以让你管理不同的 HTML 元素，添加样式和编辑文本，可绘制图形、背景梯度，双击元素用来添加文本。

文章来源于30建站，转载请注明出处!

第五篇：5个前端工程师必备的最佳开发工具

原文作者 Arnaud Breton 为前端工程师，特别专注于前端和使用者经验，这篇文章出自于mention blog。以下内容由作者以第一人称撰写。

过去几年一直不断地提到 Web 应用新世代的成长，这些 App 内容变得越来越丰富，带动了前端整体的复杂度大幅增加。

像是 Backbone(藉由提供模型)、AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架，增强了所有 Web 的功能;同时，Web 程式语言 Javascript 在普及度和成熟度上已经进步了非常多，而且还能和 NodeJS 在后端协同工作。

但为了能持续面对复杂度的新挑战，开发者已经创造更多工具使整体开发过程更加流畅，从测试框架到分析工具，这些成熟又有用的工具把最棒的体验带给我们的使用者。

就如同刚刚所提到的，我们喜欢能够帮助我们提供最棒品质的软体，同时也能使得生活变得更加简单方便，本文要分享给大家 5 个我们每天面对挑战所使用最棒的工具和框架：

Chrome dev tools

这是目前最好的前端开发工具!

Chrome 自从它诞生后，就已经大量投资在开发者工具软体，至今仍不断的在改善它，每一个发布会(每六周一次)都会伴随着它自己的全新开发功能。

这个开发工具是一个完整的多元软体套件，你可以实时编辑 DOM(HTML)/CSS，当进行一个深入的效能分析时，可以一步步找出 Javascript 的错误，甚至能增加终端机指令。感谢有它，近来解决了回报效能的问题。

DOM/CSS 编辑器是非常强大的工具，能即时回馈给你的团队，能够在 UI/UX 的新功能上很快地执行迴圈。

官方网站和 Google Developers YouTube 管道都是资讯的金矿，比如说，命令列的 API(应用程式介面，Application Programming Interface)包含非常多有用的指令，比如说从控制台功能中的复制指令，复制到剪贴簿上。

许多详细的使用手册同样在 HTML5 Rocks 里都能参考。如果你的好奇心很强，并且想了解浏览器究竟是如何运作的，那么你会在这些教学里学到很多东西，帮助你全面掌控开发周期。

除了上述的之外，最重要的是，透过网络工具你能知道现在在介面之下到底发生了什么事情，以及优化你的下载速度，时间轴会以更深入的角度来告诉你浏览器做了哪些事情。

如果你跟我们一样充满好奇心，你可以学到更多关于浏览器、Web 是如何运作的，如此一来，你就可以反过来完整的操控应用程式的生命周期。

以我个人观点来说，如果它们依照现在的路线持续发展下去，肯定会变成 Web 供应开发商最终的IDE(Integrated Developer Environment)，最强大的放入整合发展空间。

Grunt

说到工作自动化，Grunt 是我们的首选。

它是 Javascript 跑任务的专家，针对一般的任务提供大量整合性的外挂程式，扩展程度仍很高，提供很多选项让你能够自由的写任何符合需求的工作内容。最棒的是，你能够将这些任务结合创造更强大而复杂的工作。Grunt 的范畴超出仅仅是自动化前端相关的工作，举例来说，当我们在开发时，我们利用它来测试 PHP：

我们同样也用它暂时解决在 Vagrant 中自动监测与保护的 rsync(Unix 下的一款应用软体)一些效能问题，这是近来才被引进的方法。Grunt 提供很广泛的外挂程式，从浏览档案夹、诊断讯息、编译程式到最简化你的程式码。它的句法是一致且容易学习的，可以让琐碎的工作变得简单。

LiveReload

你有没有算过，每天平均有多少次会按键盘上的重新整理键呢?非常多，对吧!

LiveReload 是一个简单的 Web 协议，不论档案在哪时候被修改而触发事件，客户都能自行处理事情;客户端和伺服器端都能进入各种不同的实作。

说到 Chrome 的扩充功能，Chrome 商店就是一个很强大的例子。去体验看看吧，你一定能发现很多让生活变得更简单的东西。

以下几个是我们最喜欢的：

1. WhatFont：你可以透过它知道在任何网站上内容的字型是什么，当你在找最适合的文字编排时，或是重新调整美化你的字型风格时，它是非常好用的小工具。

2. Page ruler：另一个很好用的应用程式，主要是因为任何前端开发者，都对像素要求百分之百的完美。

3. Proxy SwitchySharp：说到找出在地化资讯错误最佳的工具就非它莫属，在地化资讯是哪些?比如说电话号码、预设货币等等。

想知道更多吗?在 Chrome App 中你能得到更多资讯!

Mocha/Chai/Sinon

测试测试，测试到你很想吐吗?这是很常发生的，因为需要一大堆引导指令，而且在前端开发的初始阶段没有设​​计好测试，那么后面的工作往往会变得非常困难。

很幸运的是，我们现在有很棒的测试架构，就和你已经在使用的其他语言一样，非常的有用和强大。两个主要的框架是Jasmine 和 Mocha。

过去我两个都有使用过，最终选择了后者，Mocha。它最主要的优势在于，当你必须和非同步的编码一同运作的时候，在 Javascript 的发展中它最普遍使用的方法。比如说，举一个非常简单的例子，这里有两个不同的规格，一个由 Jasmine 写，另一个则是 Mocha/Chai：

Jasmine 的句法选择是预设的，并以官方的文档作说明，非官方的扩充功能增进了 Jasmine 非同步特色，提供和 Mocha 一样的功能。花一些时间，来了解这个范例以及观察 Mocha 的语法有多清楚。

不像 Jasmine，Mocha 只提供行为的测试架构，更多关于 BDD(Behavior-driven development)，而不是假物件(mock，主要存在的目的是协助单元测试程式可以顺利进行)或是断言(assertion，放在程式中的一阶逻辑，如果一个结果为真或为假的逻辑判断式)架构，因为它整合专用架构非常棒，就像是 Chai 和 Sinon，几乎没什么不好的地方。Sinon 有完整的功能来 mock 假物件和 stub 假物件(用途和 mock 很接近)。

举例来说，你可以如何评估的方法，一直以来都使用 Sinon 的间谍类型(撷取自很杰出的文档)：

Chai 的功能是在断言这方面是非常杰出的，以和平常的语言非常相似的语法，举例来说你可以看到以下的程式码，就知道它很清楚简单：

Karma

最后一个是 Karma，Karma(一个测试程式是否符合需求的测试工具)是 Javascript 的程式测试工具，由 AngularJS的团队写的，现在你可以徜徉在 Mocha、Chai 和 Sinon 中写测试程式，何不同时用它们持续地测试、跑程式，给你实时的回馈呢?

Karma 可以让你从你的工作站到持续整合制造(CI，Continuous Integration)执行你的测试，它能同时发布到多个浏览器(Chrome、Firefox、IE 和 PhantomJS 等等)，除此之外，还能跑你的测试来挑战它们，给予你对你的程式码最大的信心。

当然，我们甚至还没有提到任何文字编辑器，SublimeText 和 Vim 我们都有用，它们是我们生产力最最重要的基础。

然而在做开发的过程中，最真实的快乐就是你第一次写的程式进行监测然后得到结果，这是一种实时的成就感，然后接下来你就能将它们发布到浏览器上。

现在你已经非常有能力成为前端的忍者，在你的开发旅途中已经准备好要迎接每个挑战了。但如果您刚好是一名前端工程师，也欢迎您在下面和大家分享喜欢的工具。