前端工程师的进阶之路
【背景】
如果你是刚进入WEB前端研发领域，想试试这潭水有多深，看这篇文章吧；
如果你是做了两三年WEB产品前端研发，迷茫找不着提高之路，看这篇文章吧；
如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；
WEB前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触WEB前端研发至今已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚！
【前言】
所谓的天才，只不过是比平常人更快的掌握技能、完成工作罢了；只要你找到了正确的方向，并辅以足够的时间，你一样能够踏上成功彼岸。
本文将WEB前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级（不要以你目前能力的最高点，而是以你当前能力的中档与之等级作对比，以免多走弯路），参考突破之法破之。
所谓的级别，只是你面对需求时的一种态度：能够完成、能够完美地完成、能够超出预期地完成。以追求完美的态度加以扎实的编程功力，那就是你的编程水平。
切记心浮气燥，级别够了，那级别里的东西自然就懂了。悟了就是悟了，没悟也没关系，静下心来，投入时间而已。
一.【入门】
能够解决一些问题的水平。有一定的基础（比如最常见的HTML标签及其属性、事件、方法；最常见的CSS属性；基础的JavaScript编程能力），能够完成一些简单的WEB前端研发需求。
举个例子：删除一字符串中指定的字符。
var str="www.baidu.com/?page";str=str.replace('?page',"");alert(str);str=str.substring(0,str.indexOf("/"));alert(str);// 计算系统当前是星期几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);var str="www.baidu.com/?page";str=str.replace(/?page/,"");alert(str);
var a = new Array("日", "一", "二", "三", "四", "五", "六");var week = new Date().getDay();var str = "今天是星期"+ a[week];alert(str);var str="www.baidu.com/?page";// 1、字符串剪裁str.substring(0, str.indexOf("?page"));// 2、正则表达式str.replace(/?page/, "");// 3、字符串分拆、合并str.split("?page").join("");var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0// 我将这个字符串里所可能想到的各种情况都列举出来var a = [ "http://www.xxx.com/VMpn=?pn=0"// pn= 可能出现在 ? 前 , "http://www.xxx.com/VMpn=?pn="// URL里允许pn 值为空 , "http://www.xxx.com/VMpn=?pn=0&a=1"// URL 里可有多个字段 , "http://www.xxx.com/VMpn=?a=1&pn=0"// 可能排在最后 , "http://www.xxx.com/VMpn=?a=1&pn=0&pn=1"// 可能有多个 pn 字段 , "http://www.xxx.com/VMpn=?a=1&pn=0&b=2"// 可能在中间 , "http://www.xxx.com/VMpn=?a=1&pn=0&pn=1&b=1" // 可能在中间成组 , "http://www.xxx.com/VMpn=?a=1&pn=0&b=1&pn=1" // 可能零星分布];/* 需求的不言之秘：? 若出现在字符串最尾则要去之? & 两个符号不可重叠*/var reg = /((?)(pn=[^&]*&)+(?!pn=))|(((?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g; for (var i = 0; i < a.length; i++) { alert(a[i] + "n" + a[i].replace(reg, "$2"));}/** * 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰 * @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")} // 应用实例var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0delUrlQuery(str, "pn");// 库文件 /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;var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0mz.url.delQuery(str, "pn");// 库文件 /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;var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0str.delQuery("pn");