Web前端研发工程师编程能力飞升之路
【背景】
如果你是刚进入WEB前端研发领域，想试试这潭水有多深，看这篇文章吧;
如果你是做了两三年WEB产品前端研发，迷茫找不着提高之路，看这篇文章吧;
如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧;
WEB前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触WEB前端研发至今已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚!
Web前端
【前言】
所谓的天才，只不过是比平常人更快的掌握技能、完成工作罢了;只要你找到了正确的方向，并辅以足够的时间，你一样能够踏上成功彼岸。
本文将WEB前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点，而是以你当前能力的中档与之等级作对比，以免多走弯路)，参考突破之法破之。
所谓的级别，只是你面对需求时的一种态度：能够完成、能够完美地完成、能够超出预期地完成。以追求完美的态度加以扎实的编程功力，那就是你的编程水平。
切记心浮气燥，级别够了，那级别里的东西自然就懂了。悟了就是悟了，没悟也没关系，静下心来，投入时间而已。
一.【入门】
能够解决一些问题的水平。有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力)，能够完成一些简单的WEB前端研发需求。
举个例子：删除一字符串中指定的字符。
var str="www.baidu.com/?page"; strstr=str.replace('?page',""); alert(str); strstr=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"; strstr=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 = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
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=0 delUrlQuery(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=0 mz.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=0 str.delQuery("pn");