还剩10页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧WEB前端研发工程师,在国内是一个朝阳职业,自07-08年正式有这个职业以来,也不过三四年的时间这个领域没有学校的正规教育,没有行内成体系的理论指引,几乎所有从事这个职业的人都是靠自己自学成才自学成才,一条艰辛的坎坷路,我也是这样一路走来从2002年开始接触WEB前端研发至今已然有了9个年头,如今再回首,期间的走了很多弯路推己及人,如果能让那些后来者少走些弯路,辛甚辛甚!前百所谓的天才,只不过是比平常人更快的掌握技能、完成工作罢了;只要你找到了正确的方向,并辅以足够的时间,你一样能够踏上成功彼岸本文将WEB前端研发编程能力划分了八个等级,每个等级都列举出了对应的特征及破级提升之方法,希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点,而是以你当前能力的中档与之等级作对比,以免多走弯路),参考突破之法破之所谓的级别,只是你面对需求时的一种态度能够完成、能够完美地完成、能够超出预期地完成以追求完美的态度加以扎实的编程功力,那就是你的编程水平切忌心浮气燥,级别够了,那级别里的东西自然就懂了悟了就是悟了,没悟也没关系,静下心来,投入时间而已入门
1.能够解决一些问题的水平有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力),能够完成一些简单的WEB前端研发需求举个例子删除一字符串中指定的字符view sourceprint1var str=nn;02/**在拼接正则表达式字符串时,消除原字符串中特殊字符对正则表达式的干扰03*04*@author:meizz05*@version:2010/12/16被正则表达式字符串保护编码的字符串06*©param{String}str夫被保护处理过后的字符串07©return{String}08*/09mz.string.escapeReg=function str{return str.replacenew RegExpn[.*+A=!\x24{}I[\\]\/\\\\],“g”,10n\\\x241n;11}库文件㊀12///mz/url/delQu ry.js13///include mz.string.escapeReg;14/**删除字符串中指定的15*URL Query16*@author:meizz17*@version:2010/12/16字符串18*@param{String}url URL被删除的名19*@param{String}key Query被删除指定后的字符串20*@return{String}query URL夫/2122mz.url.delQuery=function url,key{23key=mz.string.escapeRegkey;+=「]*+!”+24var reg=new RegExp\\n+key key++”=[人]夫+$+”=「]★”,25”=I\\I”+key I”+key ngn;26return url.replacereg,n\x24127应用实例28//III29include mz.url.delQuery;//册!]除指定字符30var str=http://www.xxx.com/pn=0;pn=031mz.url.delQuerystr,npnn;自成体系,有基础,也有理论高度知道为什么这样设计,也知道什么样的设计最好比如这个例子可以有这样的封装view sourceprint库文件01///mz/url/delQuery.j sIII02include mz.string.escapeReg;★03/*删除字符串中指定的04*URL Query夫05Qauthor:meizz06*@version:2010/12/16字符串07*@param{String}url URL被删除的名08*@param{String}key Query被删除指定后的字符串09*@return{String}query URL10*/11String.prototype.delQuery=functionkey{12key=mz.string.escapeRegkey;+”=「]*+!”+13var reg=new RegExpn\\H+key key++”=「]*”,14”=|\\|”+key+”=-]*+$|”+key gn;15return this.replacereg n\x241nz16应用实例17//18///include mz.url.delQuery;//册除指定字符19var str=http://www.xxx.com/pn=0;U pn=020str.delQuerynpnn;而为什么不采用下面的那种封装呢?经过了《知微》和《化蝶》你就懂了°进阶出路道法自然,从根上去寻找突破的契机你可以研读HTML解析引擎设计与实现,JS解析引擎设计与实现,其它语言的代码解析与编译实现等等或者出些书低级别的人写的书要么是一大抄,空无一物;要么是害人宗师
7.这个级别的人已然到了无招胜有招的境界项目开发中的难题?没有难题!运行平台的差异?从根本上搞定!代码规范、开发模式,早已经被抛在身后这个级别的人已经不再关注于某个前端开发框架,而是应对具体的环境给出最佳的理论指导这个级别的人所注意的应该是以最合理的系统架构引领着整个团队的进步,在什么样的场景下该用什么样的架构设计3个、10个、50个、100个人的团队最应该用哪种模式?等你到了宗师级别,你再来回答吧进阶出路:每一个宗师就是一个高山,就是一个领域里的神,但是你仅满足于在一群比你弱的群体展现你的强大吗?如果还你是止步原地,那总会有人乘着飞机、宇宙飞船从你的头领掠过,高处不胜寒!要突破这片领域,那就必须跳出这片领域要想突破WEB前端研发的宗师级,那就跳出WEB前端吧,上面还有WEB开发即使你是WEB前端的宗师,但没有快速的数据响应,没有高速的网络架构,没有优美的系统支持,你又能如何?所以突破之路就是把目光投到整条WEB开发的链条中去飞升
8.其实严格来说,飞升已经不是原领域的范围了在WEB研发领域,对于这个层次的有一个很好听的称谓架构师当然那些“伪架构师”另当别论一法通,万法通在其它的技术领域,也可以按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级;一样也可以按照我这里所写的每个级别的【进阶之路】来快速提升祝贺你再获辉煌!2str=str.replace page3alertstr;4str=str.substringO str.indexOf”/;z5alertstr;首先不要苛责代码的对错严谨,毕竟每个程序员都有这样的一个过程;其次,这两段代码在这个实例里没有什么大过错,可能会有瑕疵,但能够解决问题删除指定的字符,这就是这个级别的特征再举个例子view sourceprint计算系统当前是星期几oi//02var str=03var week=new Date.getDay;04if week==0{=”今天是星期口”;05str06}else ifweek==1{=”今天是星期一n;07str08}else ifweek==2{=”今天是星期二”;09str10}else ifweek==3{=今天是星期三”;11str12}else ifweek==4{=”今天是星期四”;13str14}else ifweek==5{=”今天是星期五,15str16}else ifweek==6{=”今天是星期六”;17str18或者更好一些19//=今天是星期”;20var strl21var week=new Date.getDay;22switch week{23case0:24strl+=n Hn;25break;26case1:H一H;27strl+=28break;29case2:二;30strl+=31break;32case3:三;33strl+=34break;35case4:+=四;36strl37break;38case5:+=五;39strl40break;41case6:+=六”;42strl43break;44}45alertstr;46alertstrl;入门”阶段是每个程序员的必经之路,只要“入门”,你就上路了所谓“师傅领进门,修行靠个人“,有了这个“入门”的基础,自己就可以摸索着前进了进阶之路将JavaScript、HTML、CSS之类的编码帮助手册里的每个方法/属性都通读几遍!只有将基础打好,以后的路才能走的顺畅参考这些帮助文档,力争写出无瑕疵的代码这些编码文档建议不仅是在入门提高期看,在你以后每个阶段破阶的时候都应该看看,最基础的东西往往也是最给力的东西,有时能够给你带来意想不到的收获登堂
2.能够正确地解决问题不管你是通过搜索网络,或者通过改造某些成品代码jQuery/Dojo/Ext/YUI案例,只要能够无错地完成需求同样以上面的那段”字符串剪裁”代码为例view sourceprint1var str=nn;2str=str.replace/page/,n;3alertstr;仅仅解决问题对于“登堂”阶段来说已经不是问题,这个级别所给出方案不能是漏洞百出以上面这段代码为例replace方法的第一个参数虽然可以支持字符串,但最佳的类型是正则表达式view sourceprint“日“,“一“,”二”,三“,“四“,”五“,“六”;1var a=new Array2var week=new Date.getDay;=”今天是星期+3var stra[week];4alertstr;对比“入门级”的代码,不管是从代码量、代码效率、代码优美性、代码思路来说,“登堂”级的这个日期处理代码都要优秀很多进阶之路这个阶段虽然能够给出正确的解题方案,但是不一定是最优秀的方案如何才能得到最优秀的方案呢?首先就是积累各种能够解决需求的方案,然后再验证每个方案,在这些方案中选择最好的一种因此该阶段的进阶之路就是“行万里路,看万卷书”,积累各个需求的各个解决方案你可以扎身在专业论坛蓝色理想、无忧、CSDN里,通读所有的FAQ及帖子;你可以打开搜索引擎,穷举所有的搜索结果自己建立测试环境一一验证这些代码去揣摩每段代码的意图,去比较每段代码之间的差异这两条路可以让你快速完成原始积累,当你再面对大多数需求时能够说这些问题我以前做过,那你就水到渠成地晋阶了入室
3.最强代码,知道所有能够解决需求的各种方案,能够选择使用最优秀的方案满足需求这个级别基本上产品开发编程中的代码主力给出的一招一式,招招都是绝招还以上面的那个例子为例,你能说出
1、
2、3之间的差别,以及适用于那种环境吗?view sourceprint1var str=nn;、字符串剪裁2//13str.substring0,str.indexOfpagen;、正则表达式4//25str.replace/page/;z、字符串分拆、合并6//37str.splitnpagen.join n;能够解决问题的方法会有很多,但是对于程序员来说应该选择最优秀的上面这段代码从代码量来说”正则表达式”最优秀;从代码执行效率来说字符串剪裁“法最高Chrome中”正则表达式”效率最高,split法最次;从可扩展性上来说,”正则表达式”法最优具体使用那种方案视具体的需求环境而定“入室”阶段,程序员应该能够肯定的回答对于这个需求而言,我的代码就是最优秀的代码再以“今天是星期儿”为例,“登堂”级的代码你敢说是最优秀的代码了吗?view sourceprint计算系统当前是星期几1//=”今天是星期”+“日一二三四五六”・2var strcharAt newDate.getDay;对比”登堂”级的示例代码,上面这段代码给你什么感受?程序员追求的就是完美”入室”级别追求的就是每一招每一式的完美无缺从WEB前端编程来说,通过2年左右的努力,很多人能够达到这个水平,但是,很大一部分人的编程能力也就止步于此或限于产品的需求单一性,或限于需求开发的时间紧迫性,或限于人的惰性,能够完美地解决当前的需求就够了由于长期处于技术平台期,技术上得不到提高,通常这个级别的工程师会比较燥技术上小有所成;或追求个人的突破;或追求产品差异性带来的新鲜感;或者只是想换个心情;因此很多此级别的工程师会经常换公司戒骄戒躁•切勿以为自己能写一手漂亮的代码而自满;•切莫以为别人“尊称你一声“大侠”你就以“大侠“自居;•切莫以为自己积累了一些得意的代码就成了框架式开发细节决定成败,优秀的方案并不能保证最终的成功还以“删除指定字符串“为例,原始字符串从格式上来看应该是了个URL链接,在去除“pn=O”之后,最末尾处留了一个尾巴“?”;如果原始字符串是=0a=l,去除pn?=O”之后和两个符号紧贴一起,这更是明显的bug进阶之路此阶段进阶之路就是切勿心浮气躁;你不再被需求牵着走,而是你牵着需求走注重细节,注意那些当前需求里没有明文给出的细节代码性能的差异、运行平台(浏览器)的差异、需求的隐性扩展、代码的向后兼容等等再通读几遍HTML/CSS/JavaScript帮助文档我建议这个级别的工程师做一做WebTreeView控件,要求总节点量一万左右操作流畅,你的晋升之路就在这个控件的编码过程中入微
4.最强解决方案你能够走在需求的前面,将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等,及前端编程潜规则等各个方方面面都综合考虑,给出最优方案以一招胜万招view sourceprint//册除指定字符01var str=http://www.xxx.com/pn=0;U pn=0我将这个字符串里所可能想到的各种情况都列举出来02//03var a=[可能出现在前04http:///pn=里允许值为空05,http://URL pn里可有多个字段06,“http://www.xxx.com/VMpn=pri=0a=l//URL可能排在最后07,“http://www.xxx.ccm/VMpn=a=lpn=0”//可能有多个字段08,“http://www•xxx•com/VMpn=a=lpn=0pn=l”//pn可能在中间09,“http://www.xxx,com/VMpn=a=lpn=0b=2u//可能在中间成组10,“http://www,xxx,com/VMpn=a=lpn=0pn=lb=l”//可能零星分布11,“http://www.xxx.com/VMpn=a=lpn=0b=1pri=l”//12];/大需求的不言之秘13若出现在字符串最尾则要去之14两个符号不可重叠1516*/[人]夫+$|[人]夫17var reg=/\pn=[A]*+!pn=|\Ipn=pn=/g;18for vari=0;ia.length;i++{19alert a[i]+”\n”+a[i].replacereg,n$2n;20这个阶段已经不再追求一招一式,对你来说不是使用什么创新绝招解决需求,而是给出成熟稳重的方案,从根上解决问题针对某个当前需求你的代码可能不是最优,但是针对此类的需求你的代码却是最优秀的代码进阶之路:很多WEB前端研发工程师在做了3-4年之后就会进入一个瓶颈期产品开发需求是小菜一碟,没有新鲜的可以挑战的东西;代码开发中的稀奇的解题方法都已经尝试过没有了可挑战的难题,失去了探索的激情,也就没有了再上升的动力,好不容易走过”入室”级别的人又会有八九成止步于此或转做技术领导人,或转到其它的领域,或换公司这些人的上升之路在哪里呢?这个阶段单单依靠技巧和数量的累积已经没有什么效果了,突破之路在第5层《化蝶》里会详细说明,我建议你在这个阶段末尾着重关注编程理论面向对象/过程、代码组织形式、编译、代码规范、其它的框架设计等等我建议这个级别的工程师做一做WebEdit「控件,不要求完整功能,但是该控件里的模块划分、代码组织、编程思想做到位,给出一个系统的解决方案化蝶
5.破茧重生,这个层次关注的是编程语言本身,而不再关心产品需求什么是茧?产品需求就是茧当你一招胜万招,打遍天下需求之时,你如果还拘泥于需求开发,那就是你限于茧中而不自知要么就在这个茧里默默地老去,要么就破开茧获得新生还是以那个“字符串剪裁”的老例子view sourceprintoi/**在拼接正则表达式字符串时,消除原字符串中特殊字符对正则表达式的干扰02*03*@author:meizz04*@version:2010/12/16被正则表达式字符串保护编码的字符串05*©param{String}str被保护处理过后的字符串06*©return{String07*/08function escapeRegstr{”[・*+人=!return str.replacenew RegExp:\x24{}|[\\]\/\\\\]n g,z09n\\\x241n;1011/**删除字符串中指定的12*URL Query13*@author:meizz14*©version:2010/12/16夫字符串15@param{String}url URL夫被删除的名16@param{String}key Query被删除指定后的字符串17*@return{String}query URL夫/1819function delUrlQueryurl,key{20key=escapeRegkey;+=[人]*+!”+21var reg=new RegExp\\H+key key++”=「]*+$+”=—]★”,22”=|\\I”+key I”+key ngH;23return url.replacereg,n\x241n24应用实例25////册除指定字符26var str=http://www.xxx.com/pn=O”;U pn=027delUrlQuerystr,npnn;这段代码相对于层次4《入微》有什么区别吗?从代码实现上来说没有太大的区别,但是从思路上来说却有着本质的区别
1.不再是就事论事,头疼医头,而是把一类问题抽象理论化,一招破万招;
2.有封装的概念,不再是每次从零开始,而是站在半山腰开始爬在WEB前端研发队伍里也有很大一部分人《入室》层次时就自我感觉良好,直接跨跃到《化蝶》,积累自己的代码库,抽象化问题但没有基础,缺少强大的后劲,即使能够破茧也经受不了风吹雨打一份不成熟的架构设计对团队开发带来的危害远大于它带来的好处,这种例子在业界屡见不鲜不要拔苗助长,不要不会走就想着跑,夯实基础,水到渠成地成长,厚积薄发,强力地破茧而出进阶之路你已经从原始积累,到厚积薄发,到破茧而出之后,你所关注的应该不再是一招一式、一个项目、一个模块,而应该是一种思路,一种理论你可以做以下儿个步骤以突破到更高层次再仔细看儿遍HTML/CSS/JavaScript接口帮助文档;选择一门强语言C++/C#/Java等观察理解这些语言的组织结构,语言设计;看看原型链,链式语法编程,泛型,接口编程,DOM遥控器等等;仔细阅读成熟的WEB前端开发框架的设计文档,看他们为什么要这样设计大侠
6.这里所说的大侠,不是大家互相吹捧的“大侠”,而是实至名归的高手这个级别的人完全有能力写出不差于Bindows/jQuery/Ext/YUI/Dojo的同等级别规模的前端开发框架应用成熟的开发框架指导、解决问题view sourceprint库文件01///mz/string/escapeReg.j s。