推荐:
小编注：相比起网页射击狮，操纵代码的前端攻城狮凭着双手在键盘巴拉巴拉敲出的字符，就能赋予二次元的静态页面生命，各类lovely的~~fabulous的~~elegant的交互效果，那叫一个锦上添花哈~~不过，要修炼成一个百战百胜的攻城狮，那是得从基本的JavaScript开始，一点一滴积累hacking技能。日前小编在茫茫信息汪洋里瞟到这神级干货，本着你好我好你们好的精神，怎能收着掖着不分享叻？想成为一只威武的攻城狮的各位，立刻开啃吧~~O(∩_∩)Ojavascript
【背景】css
若是你是刚进入web前端研发领域，想试试这潭水有多深，看这篇文章吧；
若是你是作了两三年web产品前端研发，迷茫找不着提升之路，看这篇文章吧；
若是你是四五年的前端开发高手，没有难题能可贵住你的寂寞高手，来看这篇文章吧；html
web前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎全部从事这个职业的人都是靠本身自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触web前端研发至今已然有了9个年头，现在再回首，期间的走了不少弯路。推已及人，若是能让那些后来者少走些弯路，辛甚辛甚！前端
【前言】java
所谓的天才，只不过是比日常人更快的掌握技能、完成工做罢了；只要你找到了正确的方向，并辅以足够的时间，你同样可以踏上成功彼岸。jquery
本文将web前端研发编程能力划分了八个等级，每一个等级都列举出了对应的特征及破级提高之方法，但愿每位在看本文的同窗先准肯定位本身的等级（不要以你目前能力的最高点，而是以你当前能力的中档与之等级做对比，以避免多走弯路），参考突破之法破之。ios
所谓的级别，只是你面对需求时的一种态度：可以完成、可以完美地完成、可以超出预期地完成。以追求完美的态度加以扎实的编程功力，那就是你的编程水平。
切记心浮气燥，级别够了，那级别里的东西天然就懂了。悟了就是悟了，没悟也不要紧，静下心来，投入时间而已。c++
一.【入门】程序员
可以解决一些问题的水平。有必定的基础（好比最多见的html标签及其属性、事件、方法；最多见的css属性；基础的javascript编程能力），可以完成一些简单的web前端研发需求。
举个例子：删除一字符串中指定的字符。web
|
1
2
3
4
5
|
var
str=
"www.baidu.com/?page"
;
str=str.replace(
'?page'
,
""
);
alert(str);
str=str.substring(0,str.indexof(
"/"
));
alert(str);
|
首先不要苛责代码的对错严谨，毕竟每一个程序员都有这样的一个过程；其次，这两段代码在这个实例里没有什么大过错，可能会有瑕疵，但可以解决问题（删除指定的字符），这就是这个级别的特征。
再举个例子：
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
// 计算系统当前是星期几
var
str =
""
;
var
week =
new
date().getday();
if
(week == 0) {
str =
"今天是星期日"
;
}
else
if
(week == 1) {
str =
"今天是星期一"
;
}
else
if
(week == 2) {
str =
"今天是星期二"
;
}
else
if
(week == 3) {
str =
"今天是星期三"
;
}
else
if
(week == 4) {
str =
"今天是星期四"
;
}
else
if
(week == 5) {
str =
"今天是星期五"
;
}
else
if
(week == 6) {
str =
"今天是星期六"
;
}
// 或者更好一些
var
str1 =
"今天是星期"
;
var
week =
new
date().getday();
switch
(week) {
case
0 :
str1 +=
"日"
;
break
;
case
1 :
str1 +=
"一"
;
break
;
case
2 :
str1 +=
"二"
;
break
;
case
3 :
str1 +=
"三"
;
break
;
case
4 :
str1 +=
"四"
;
break
;
case
5 :
str1 +=
"五"
;
break
;
case
6 :
str1 +=
"六"
;
break
;
}
alert(str);
alert(str1);
|
入门”阶段是每一个程序员的必经之路，只要”入门”，你就上路了。所谓”师傅领进门，修行靠我的”，有了这个”入门”的基础，本身就能够摸索着前进了。
进阶之路
将javascript、html、css之类的编码帮助手册里的每一个方法/属性都通读几遍！只有将基础打好，之后的路才能走的顺畅。参考这些帮助文档，力争写出无瑕疵的代码。
这些编码文档建议不只是在入门提升期看，在你之后每一个阶段破阶的时候都应该看看，最基础的东西每每也是最给力的东西，有时可以给你带来意想不到的收获。
二.【登堂】
可以正确地解决问题。无论你是经过搜索网络，或者经过改造某些成品代码（jquery/dojo/ext/yui）案例，只要可以无错地完成需求。
一样以上面的那段”字符串剪裁”代码为例：
|
1
2
3
|
var
str=
"www.baidu.com/?page"
;
str=str.replace(/?page/,
""
);
alert(str);
|
仅仅解决问题对于”登堂”阶段来讲已经不是问题，这个级别所给出方案不能是漏洞百出。以上面这段代码为例：replace方法的第一个参数虽然能够支持字符串，但最佳的类型是正则表达式；
|
1
2
3
4
|
var
a =
new
array(
"日"
,
"一"
,
"二"
,
"三"
,
"四"
,
"五"
,
"六"
);
var
week =
new
date().getday();
var
str =
"今天是星期"
+ a[week];
alert(str);
|
对比”入门级”的代码，无论是从代码量、代码效率、代码优美性、代码思路来讲，”登堂”级的这个日期处理代码都要优秀不少。
进阶之路
这个阶段虽然可以给出正确的解题方案，可是不必定是最优秀的方案。如何才能获得最优秀的方案呢？首先就是积累各类可以解决需求的方案，而后再验证每一个方案，在这些方案中选择最好的一种。所以该阶段的进阶之路就是”行万里路，看万卷书”，积累各个需求的各个解决方案。
你能够扎身在专业论坛（蓝色理想、无忧、csdn）里，通读全部的faq及帖子；你能够打开搜索引擎，穷举全部的搜索结果。本身创建测试环境一一验证这些代码：去揣摩每段代码的意图，去比较每段代码之间的差别。这两条路可让你快速完成原始积累，当你再面对大多数需求时可以说这些问题我之前作过，那你就水到渠成地晋阶了。
三.【入室】
最强代码，知道全部可以解决需求的各类方案，可以选择使用最优秀的方案知足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式，招招都是绝招。
还以上面的那个例子为例，你能说出一、二、3之间的差异，以及适用于那种环境吗？
|
1
2
3
4
5
6
7
|
var
str=
"www.baidu.com/?page"
;
// 一、字符串剪裁
str.substring(0, str.indexof(
"?page"
));
// 二、正则表达式
str.replace(/?page/,
""
);
// 三、字符串分拆、合并
str.split(
"?page"
).join(
""
);
|
可以解决问题的方法会有不少，可是对于程序员来讲应该选择最优秀的。上面这段代码从代码量来讲”正则表达式”最优秀；从代码执行效率来讲： “字符串剪裁”法最高（chrome中”正则表达式”效率最高），split法最次；从可扩展性上来讲，”正则表达式”法最优。具体使用那种方案视具体的需求环境而定。
“入室”阶段，程序员应该可以确定的回答：对于这个需求而言，个人代码就是最优秀的代码。
再以”今天是星期几”为例，”登堂”级的代码你敢说是最优秀的代码了吗？
|
1
2
|
// 计算系统当前是星期几
var
str =
"今天是星期"
+
"日一二三四五六"
.charat(
new
date().getday());
|
对比”登堂”级的示例代码，上面这段代码给你什么感觉？程序员追求的就是完美。”入室”级别追求的就是每一招每一式的天衣无缝。
从web前端编程来讲，经过2年左右的努力，不少人可以达到这个水平，可是，很大一部分人的编程能力也就止步于此。或限于产品的需求单一性，或限于需求开发的时间紧迫性，或限于人的惰性，可以完美地解决当前的需求就够了。
因为长期处于技术平台期，技术上得不到提升，一般这个级别的工程师会比较燥。技术上小有所成；或追求我的的突破；或追求产品差别性带来的新鲜感；或者只是想换个心情；所以不少此级别的工程师会常常换公司。
戒骄戒躁：
切勿觉得本身能写一手漂亮的代码而自满；
切莫觉得别人”尊称”你一声”大侠”你就以 “大侠”自居；
切莫觉得本身积累了一些得意的代码就成了框架式开发。
细节决定成败，优秀的方案并不能保证最终的成功。还以”删除指定字符串”为例，原始字符串从格式上来看应该是了个url连接，在去除”pn=0″以后，最末尾处留了一个尾巴”?”；若是原始字符串是”http://www.xxx.com/?pn=0&a=1“，去除”pn=0″以后 ? 和 & 两个符号紧贴一块儿，这更是明显的bug。
进阶之路
此阶段进阶之路就是：切勿心浮气躁；你再也不被需求牵着走，而是你牵着需求走。注重细节，注意那些当前需求里没有明文给出的细节：代码性能的差别、运行平台（浏览器）的差别、需求的隐性扩展、代码的向后兼容等等。
再通读几遍html/css/javascript帮助文档。
我建议这个级别的工程师作一作webtreeview控件，要求总节点量一万左右操做流畅，你的晋升之路就在这个控件的编码过程当中。
四.【入微】
最强解决方案。你可以走在需求的前面，将当前需求里有的、没有直接提出来的、如今暂时没有但未来可能有的等等，及前端编程潜规则等各个方方面面都综合考虑，给出最优方案。以一招胜万招。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
// 我将这个字符串里所可能想到的各类状况都列举出来
var
a = [
];
/* 需求的不言之秘：
? 若出如今字符串最尾则要去之
? & 两个符号不可重叠
*/
var
reg = /((\?)(pn=[^&]*&)+(?!pn=))|(((\?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;
for
(
var
i = 0; i < a.length; i++) {
alert(a +
"\n"
+ a.replace(reg,
"$2"
));
}
|
这个阶段已经再也不追求一招一式，对你来讲不是使用什么创新绝招解决需求，而是给出成熟稳重的方案，从根上解决问题。针对某个当前需求你的代码可能不是最优，可是针对此类的需求你的代码倒是最优秀的代码。
进阶之路
不少web前端研发工程师在作了3-4年以后就会进入一个瓶颈期：产品开发需求是小菜一碟，没有新鲜的能够挑战的东西；代码开发中的稀奇的解题方法都已经尝试过。没有了可挑战的难题，失去了探索的激情，也就没有了再上升的动力，好不容易走过”入室”级别的人又会有八九成止步于此。或转作技术领导人，或转到其它的领域，或换公司。
这些人的上升之路在哪里呢？
这个阶段单单依靠技巧和数量的累积已经没有什么效果了，突破之路在第5层《化蝶》里会详细说明，我建议你在这个阶段末尾着重关注编程理论：面向对象/过程、代码组织形式、编译、代码规范、其它的框架设计等等。
我建议这个级别的工程师作一作webeditor控件，不要求完整功能，可是该控件里的模块划分、代码组织、编程思想作到位，给出一个系统的解决方案。
五.【化蝶】
破茧重生，这个层次关注的是编程语言自己，而再也不关心产品需求。什么是茧？产品需求就是茧。当你一招胜万招，打遍天下需求之时，你若是还拘泥于需求开发，那就是你限于茧中而不自知。要么就在这个茧里默默地老去，要么就破开茧得到新生。
仍是以那个”字符串剪裁”的老例子：
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/**
* 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰
* @author:meizz
* @version: 2010/12/16
* @param {string} str 被正则表达式字符串保护编码的字符串
* @return {string} 被保护处理事后的字符串
*/
function
escapereg(str) {
return
str.replace(
new
regexp(
"([.*+?^=!:\x24{}()|[\\]\/\\\\])"
,
"g"
),
"\\\x241"
);
}
/**
* 删除url字符串中指定的 query
* @author:meizz
* @version:2010/12/16
* @param {string} url url字符串
* @param {string} key 被删除的query名
* @return {string} 被删除指定 query 后的url字符串
*/
function
delurlquery(url, key) {
key = escapereg(key);
var
reg =
new
regexp(
"((\\?)("
+ key +
"=[^&]*&)+(?!"
+ key +
"=))|(((\\?|&)"
+ key +
"=[^&]*)+$)|(&"
+ key +
"=[^&]*)"
,
"g"
);
return
url.replace(reg,
"\x241"
)
}
// 应用实例
delurlquery(str,
"pn"
);
|
这段代码相对于层次4《入微》有什么区别吗？从代码实现上来讲没有太大的区别，可是从思路上来讲却有着本质的区别：一、再也不是就事论事，头疼医头，而是把一类问题抽象理论化，一招破万招；二、有封装的概念，再也不是每次从零开始，而是站在半山腰开始爬。
在web前端研发队伍里也有很大一部分人《入室》层次时就自我感受良好，直接跨跃到《化蝶》，积累本身的代码库，抽象化问题。但没有基础，缺乏强大的后劲，即便可以破茧也经受不了风吹雨打。一份不成熟的架构设计对团队开发带来的危害远大于它带来的好处，这种例子在业界家常便饭。不要适得其反，不要不会走就想着跑，夯实基础，水到渠成地成长，厚积薄发，强力地破茧而出。
进阶之路
你已经从原始积累，到厚积薄发，到破茧而出以后，你所关注的应该再也不是一招一式、一个项目、一个模块，而应该是一种思路，一种理论。你能够作如下几个步骤以突破到更高层次：再仔细看几遍html/css/javascript接口帮助文档；选择一门强语言（c++/c#/java等）观察理解这些语言的组织结构，语言设计；看看原型链，链式语法编程，泛型，接口编程，dom遥控器等等；仔细阅读成熟的web前端开发框架的设计文档，看他们为何要这样设计。
六.【大侠】
这里所说的大侠，不是你们互相吹捧的”大侠”，而是实至名归的高手。这个级别的人彻底有能力写出不差于bindows/jquery/ext/yui/dojo的同等级别规模的前端开发框架。应用成熟的开发框架指导、解决问题。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// 库文件 /mz/string/escapereg.js
/**
* 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰
* @author:meizz
* @version: 2010/12/16
* @param {string} str 被正则表达式字符串保护编码的字符串
* @return {string} 被保护处理事后的字符串
*/
mz.string.escapereg =
function
(str) {
return
str.replace(
new
regexp(
"([.*+?^=!:\x24{}()|[\\]\/\\\\])"
,
"g"
),
"\\\x241"
);
}
// 库文件 /mz/url/delquery.js
/// include mz.string.escapereg;
/**
* 删除url字符串中指定的 query
* @author:meizz
* @version:2010/12/16
* @param {string} url url字符串
* @param {string} key 被删除的query名
* @return {string} 被删除指定 query 后的url字符串
*/
mz.url.delquery =
function
(url, key) {
key = mz.string.escapereg(key);
var
reg =
new
regexp(
"((\\?)("
+ key +
"=[^&]*&)+(?!"
+ key +
"=))|(((\\?|&)"
+ key +
"=[^&]*)+$)|(&"
+ key +
"=[^&]*)"
,
"g"
);
return
url.replace(reg,
"\x241"
)
}
// 应用实例
/// include mz.url.delquery;
mz.url.delquery(str,
"pn"
);
|
自成体系，有基础，也有理论高度。知道为何这样设计，也知道什么样的设计最好。好比这个例子能够有这样的封装：
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
// 库文件 /mz/url/delquery.js
/// include mz.string.escapereg;
/**
* 删除url字符串中指定的 query
* @author:meizz
* @version:2010/12/16
* @param {string} url url字符串
* @param {string} key 被删除的query名
* @return {string} 被删除指定 query 后的url字符串
*/
string.prototype.delquery =
function
( key) {
key = mz.string.escapereg(key);
var
reg =
new
regexp(
"((\\?)("
+ key +
"=[^&]*&)+(?!"
+ key +
"=))|(((\\?|&)"
+ key +
"=[^&]*)+$)|(&"
+ key +
"=[^&]*)"
,
"g"
);
return
this
.replace(reg,
"\x241"
)
}
// 应用实例
/// include mz.url.delquery;
str.delquery(
"pn"
);
|
而为何不采用下面的那种封装呢？通过了《知微》和《化蝶》你就懂了。
进阶出路
道法天然，从根上去寻找突破的契机。你能够研读html解析引擎设计与实现，js解析引擎设计与实现，其它语言的代码解析与编译实现等等。
或者出些书。低级别的人写的书要么是一大抄，空无一物；要么是害人。
七.【宗师】
这个级别的人已然到了无招胜有招的境界。项目开发中的难题？没有难题！运行平台的差别？从根本上搞定！代码规范、开发模式，早已经被抛在身后。这个级别的人已经再也不关注于某个前端开发框架，而是应对具体的环境给出最佳的理论指导。
这个级别的人所注意的应该是以最合理的系统架构引领着整个团队的进步，在什么样的场景下该用什么样的架构设计。3个、10个、50个、100我的的团队最应该用哪一种模式？等你到了宗师级别，你再来回答吧。
进阶出路
每个宗师就是一个高山，就是一个领域里的神，可是你仅知足于在一群比你弱的群体展示你的强大吗？若是还你是止步原地，那总会有人乘着飞机、宇宙飞船从你的头领掠过，高处不胜寒！
要突破这片领域，那就必须跳出这片领域。要想突破web前端研发的宗师级，那就跳出web前端吧，上面还有web开发。即便你是web前端的宗师，但没有快速的数据响应，没有高速的网络架构，没有优美的系统支持，你又能如何？因此突破之路就是把目光投到整条web开发的链条中去。
八.【飞升】
其实严格来讲，飞升已经不是原领域的范围了。在web研发领域，对于这个层次的有一个很好听的称谓：架构师。固然那些”伪架构师”另当别论。
一法通，万法通。在其它的技术领域，也能够按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级；同样也能够按照我这里所写的每一个级别的【进阶之路】来快速提高。
祝贺你再获辉煌！
原文地址：http://www.qdway.com/?p=963
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特点推荐】
设计讲座：每个月邀请国内互联网公司设计前辈及行业总监在群内及YY语音（YY频道：15335158）分享实战经验。
设计微博：拥有粉丝量43万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各类意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也能够经过扫描下方二维码快速添加：
非特殊说明，本文版权归原做者全部，转载请注明出处
本文地址：http://www.uisdc.com/web-development
【推荐！设计师必备网址导航】 http://hao.uisdc.com