推奨書籍: Web フロントエンド開発エンジニアのプログラミング スキル向上への道_html/css_WEB-ITnose

Web フロントエンド エンジニア必読【背景】

Web フロントエンドの研究開発の分野に入ったばかりで、その奥深さを試してみたい方は、この記事をお読みください。 2 ～ 3 年間 Web を開発し続けている製品のフロントエンドの研究開発が混乱していて、改善する方法が見つからない場合は、この記事をお読みください。
フロントエンド開発の専門家として 4 ～ 5 年間従事しており、何の問題もありません。孤独なマスターなので、この記事をお読みください。

Web フロントエンドの R&D エンジニアは、2007 年から 2008 年に正式に導入されてから、まだ 3 ～ 4 年しか経っていません。この分野には正式な学校教育はなく、業界からの体系的な理論的指導もありません。この職業に従事するほとんどすべての人が独学です。独学は険しく険しい道であり、私もその道を歩んできました。 2002年にWebフロントエンドの研究開発に携わり始めてから9年が経ちました。今振り返ると、この間、色々な回り道をしてきました。私たちの後から来る人たちの寄り道が少なくなるようにお手伝いできれば、この上なく幸いです。

[前書き]

いわゆる天才は、スキルを習得し、普通の人よりも早く仕事を完了するだけであり、正しい方向性を見つけて十分な時間を与えれば、成功の向こう側に足を踏み入れることができます。

この記事では、Web フロントエンドの研究開発とプログラミングの能力を 8 つのレベルに分け、それぞれのレベルに対応する特性とレベルを向上させる方法を示します。この記事を読んでいるすべての学生が、まず自分のレベルを正確に把握できることを願っています (使用しないでください)。現在の能力の最高点（ただし、遠回りを避けるために現在の能力の中間点とそのレベルと比較してください）を突破するための突破方法を参照してください。

いわゆるレベルは、要求に直面したときの態度にす​​ぎません。それを完了できるか、完璧に完了できるか、期待を超えて完了できるかです。完璧を追求する姿勢と確かなプログラミングスキル、それがあなたのプログラミングレベルです。

高いレベルにいると、そのレベルのことは自然に理解できるようになるということを覚えておいてください。悟りがあれば、悟りはありますが、そうでなくても、落ち着いて時間を投資してください。
1. [入門]

いくつかの問題を解決できるレベル。特定の基礎 (最も一般的な HTML タグとその属性、イベント、メソッド、最も一般的な CSS 属性、基本的な JavaScript プログラミング機能など) があり、いくつかの単純な Web フロントエンドの研究開発ニーズを完了できること。

例: 文字列内の指定された文字を削除します。

<pre class="sycode" name="code">  1: var str="www.baidu.com/?page";

  2: str=str.replace('?page',"");

rreerree

  3: alert(str);

まず、コードの正しさを批判しないでください。結局のところ、どのプログラマもそのようなプロセスを持っています。第二に、この例の 2 つのコードには大きな欠陥はないかもしれません。欠点はありますが、問題は解決できます (指定された文字を削除する)。これがこのレベルの特徴です。

別の例:
あーるーるーるーるーるーるーるーるーるーるーるーるーるーるーるー

「始める」段階は、すべてのプログラマーにとって唯一の方法です。「始める」限り、いわゆる「マスターが道を切り開く」ことになります。 、実践は人それぞれ」、これで「はじめよう」の基本を押さえれば、自分の力で前に進み始めることができます

上達への道

コーディングヘルプマニュアルのメソッド/属性をすべて読んでください。 JavaScript、HTML、CSS など。基礎を固めるだけで、今後の作業はスムーズになります。これらのドキュメントの推奨事項は、初心者レベルの改善のためだけのものではありません。将来あらゆる段階でこれらを読む必要があります。最も基本的なことが最も強力であり、時には予期せぬ利益をもたらす可能性があります。インターネットを検索しているか、完成したコード (jquery/dojo/ext/yui) を変換しています (jquery/dojo/ext/yui) の場合は、要件をエラーなく完了できる限りに限ります。

同様に、上記の「文字列クリッピング」コードを例として取り上げます。 「入口」段階の問題を解決する このレベルで提供される解決策が抜け穴だらけであることはありません。replace メソッドの最初のパラメータは文字列をサポートします。最良のタイプは正規表現です。

  4: str=str.substring(0,str.indexof("/"));

  5: alert(str);

<pre class="sycode" name="code">  1: // 计算系统当前是星期几

  2: var str = "";

「エントリーレベル」のコードと比較すると、コード量、コード効率、コードの優雅さ、コードのアイデアの点で、「アドバンス」レベルの日付処理コードの方がはるかに優れています

進歩への道

これは、この段階で正しい解決策を与えることはできますが、それが最善の解決策であるとは限りません。 まず、ニーズを解決できるさまざまな解決策を蓄積し、それぞれの解決策を検証します。 . したがって、この段階で前進する方法は、さまざまなニーズに対するさまざまなソリューションを蓄積するために「何千マイルも旅し、何千冊の本を読むこと」です。

你可以扎身在专业论坛（蓝色理想、无忧、csdn）里，通读所有的faq及帖子；你可以打开搜索引擎，穷举所有的搜索结果。自己建立测试环境一一验证这些代码：去揣摩每段代码的意图，去比较每段代码之间的差异。这两条路可以让你快速完成原始积累，当你再面对大多数需求时能够说这些问题我以前做过，那你就水到渠成地晋阶了。

三.【入室】

最强代码，知道所有能够解决需求的各种方案，能够选择使用最优秀的方案满足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式，招招都是绝招。
还以上面的那个例子为例，你能说出1、2、3之间的差别，以及适用于那种环境吗？

<pre class="sycode" name="code">  1: var str="www.baidu.com/?page";

  2: // 1、字符串剪裁

  3: str.substring(0, str.indexof("?page"));

  4: // 2、正则表达式

  5: str.replace(/?page/, "");

  6: // 3、字符串分拆、合并

  7: str.split("?page").join("");

 

能够解决问题的方法会有很多，但是对于程序员来说应该选择最优秀的。上面这段代码从代码量来说”正则表达式”最优秀；从代码执行效率来说： “字符串剪裁”法最高（chrome中”正则表达式”效率最高），split法最次；从可扩展性上来说，”正则表达式”法最优。具体使用那种方案视具体的需求环境而定。

“入室”阶段，程序员应该能够肯定的回答：对于这个需求而言，我的代码就是最优秀的代码。

再以”今天是星期几”为例，”登堂”级的代码你敢说是最优秀的代码了吗？

<pre class="sycode" name="code">  1: // 计算系统当前是星期几

  2: var str = "今天是星期" + "日一二三四五六".charat(new date().getday());

  3: 

 

对比”登堂”级的示例代码，上面这段代码给你什么感受？程序员追求的就是完美。”入室”级别追求的就是每一招每一式的完美无缺。

从web前端编程来说，通过2年左右的努力，很多人能够达到这个水平，但是，很大一部分人的编程能力也就止步于此。或限于产品的需求单一性，或限于需求开发的时间紧迫性，或限于人的惰性，能够完美地解决当前的需求就够了。

由于长期处于技术平台期，技术上得不到提高，通常这个级别的工程师会比较燥。技术上小有所成；或追求个人的突破；或追求产品差异性带来的新鲜感；或者只是想换个心情；因此很多此级别的工程师会经常换公司。

戒骄戒躁：

切勿以为自己能写一手漂亮的代码而自满；
切莫以为别人”尊称”你一声”大侠”你就以 “大侠”自居；
切莫以为自己积累了一些得意的代码就成了框架式开发。

细节决定成败，优秀的方案并不能保证最终的成功。还以”删除指定字符串”为例，原始字符串从格式上来看应该是了个url链接，在去除”pn=0″之后，最末尾处留了一个尾巴”?”；如果原始字符串是”http://www.xxx.com/?pn=0&a=1″，去除”pn=0″之后 ? 和 & 两个符号紧贴一起，这更是明显的bug。

进阶之路

此阶段进阶之路就是：切勿心浮气躁；你不再被需求牵着走，而是你牵着需求走。注重细节，注意那些当前需求里没有明文给出的细节：代码性能的差异、运行平台（浏览器）的差异、需求的隐性扩展、代码的向后兼容等等。

再通读几遍html/css/javascript帮助文档。

我建议这个级别的工程师做一做webtreeview控件，要求总节点量一万左右操作流畅，你的晋升之路就在这个控件的编码过程中。

四.【入微】

最强解决方案。你能够走在需求的前面，将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等，及前端编程潜规则等各个方方面面都综合考虑，给出最优方案。以一招胜万招。

<pre class="sycode" name="code">  1: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

  2: // 我将这个字符串里所可能想到的各种情况都列举出来

  3: var a = [

  4:          "http://www.xxx.com/vmpn=?pn=0"// pn= 可能出现在 ? 前

  5:         , "http://www.xxx.com/vmpn=?pn="// url里允许pn 值为空

  6:         , "http://www.xxx.com/vmpn=?pn=0&a=1"// url 里可有多个字段

  7:         , "http://www.xxx.com/vmpn=?a=1&pn=0"// 可能排在最后

  8:         , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1"// 可能有多个 pn 字段

  9:         , "http://www.xxx.com/vmpn=?a=1&pn=0&b=2"// 可能在中间

 10:         , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1&b=1"  // 可能在中间成组

 11:         , "http://www.xxx.com/vmpn=?a=1&pn=0&b=1&pn=1"  // 可能零星分布

 12: ];

 13: /* 需求的不言之秘： 

 14: ? 若出现在字符串最尾则要去之

 15: ? & 两个符号不可重叠

 16: */

 17: var reg = /((\?)(pn=[^&]*&)+(?!pn=))|(((\?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;

 18:  

 19: for (var i = 0; i < a.length; i++) {

 20:     alert(a + "\n" + a.replace(reg, "$2"));

 21: }

这个阶段已经不再追求一招一式，对你来说不是使用什么创新绝招解决需求，而是给出成熟稳重的方案，从根上解决问题。针对某个当前需求你的代码可能不是最优，但是针对此类的需求你的代码却是最优秀的代码。

进阶之路

很多web前端研发工程师在做了3-4年之后就会进入一个瓶颈期：产品开发需求是小菜一碟，没有新鲜的可以挑战的东西；代码开发中的稀奇的解题方法都已经尝试过。没有了可挑战的难题，失去了探索的激情，也就没有了再上升的动力，好不容易走过”入室”级别的人又会有八九成止步于此。或转做技术领导人，或转到其它的领域，或换公司。

这些人的上升之路在哪里呢？

这个阶段单单依靠技巧和数量的累积已经没有什么效果了，突破之路在第5层《化蝶》里会详细说明，我建议你在这个阶段末尾着重关注编程理论：面向对象/过程、代码组织形式、编译、代码规范、其它的框架设计等等。

我建议这个级别的工程师做一做webeditor控件，不要求完整功能，但是该控件里的模块划分、代码组织、编程思想做到位，给出一个系统的解决方案。

五.【化蝶】

破茧重生，这个层次关注的是编程语言本身，而不再关心产品需求。什么是茧？产品需求就是茧。当你一招胜万招，打遍天下需求之时，你如果还拘泥于需求开发，那就是你限于茧中而不自知。要么就在这个茧里默默地老去，要么就破开茧获得新生。

还是以那个”字符串剪裁”的老例子：

<pre class="sycode" name="code">  1: /** 

  2: * 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰

  3: * @author:meizz

  4: * @version: 2010/12/16

  5: * @param               {string}        str     被正则表达式字符串保护编码的字符串

  6: * @return              {string}                被保护处理过后的字符串

  7: */

  8: function escapereg(str) {

  9:         return str.replace(new regexp("([.*+?^=!:\x24{}()|[\\]\/\\\\])", "g"), "\\\x241");

 10: }

 11:  

 12: /** 

 13: * 删除url字符串中指定的 query

 14: * @author:meizz

 15: * @version:2010/12/16

 16: * @param               {string}        url     url字符串

 17: * @param               {string}        key     被删除的query名

 18: * @return              {string}                被删除指定 query 后的url字符串

 19: */

 20:  

 21: function delurlquery(url, key) {

 22:         key = escapereg(key);

 23:         var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +

 24:   "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");

 25:         return url.replace(reg, "\x241")

 26: }

 27: // 应用实例

 28: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

 29: delurlquery(str, "pn");

这段代码相对于层次4《入微》有什么区别吗？从代码实现上来说没有太大的区别，但是从思路上来说却有着本质的区别：1、不再是就事论事，头疼医头，而是把一类问题抽象理论化，一招破万招；2、有封装的概念，不再是每次从零开始，而是站在半山腰开始爬。

在web前端研发队伍里也有很大一部分人《入室》层次时就自我感觉良好，直接跨跃到《化蝶》，积累自己的代码库，抽象化问题。但没有基础，缺少强大的后劲，即使能够破茧也经受不了风吹雨打。一份不成熟的架构设计对团队开发带来的危害远大于它带来的好处，这种例子在业界屡见不鲜。不要拔苗助长，不要不会走就想着跑，夯实基础，水到渠成地成长，厚积薄发，强力地破茧而出。

进阶之路

你已经从原始积累，到厚积薄发，到破茧而出之后，你所关注的应该不再是一招一式、一个项目、一个模块，而应该是一种思路，一种理论。你可以做以下几个步骤以突破到更高层次：再仔细看几遍html/css/javascript接口帮助文档；选择一门强语言（c++/c#/java等）观察理解这些语言的组织结构，语言设计；看看原型链，链式语法编程，泛型，接口编程，dom遥控器等等；仔细阅读成熟的web前端开发框架的设计文档，看他们为什么要这样设计。

六.【大侠】

这里所说的大侠，不是大家互相吹捧的”大侠”，而是实至名归的高手。这个级别的人完全有能力写出不差于bindows/jquery/ext/yui/dojo的同等级别规模的前端开发框架。应用成熟的开发框架指导、解决问题。

<pre class="sycode" name="code">  1: // 库文件 /mz/string/escapereg.js

  2: /** 

  3: * 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰

  4: * @author:meizz

  5: * @version: 2010/12/16

  6: * @param               {string}        str     被正则表达式字符串保护编码的字符串

  7: * @return              {string}                被保护处理过后的字符串

  8: */

  9: mz.string.escapereg = function (str) {

 10:         return str.replace(new regexp("([.*+?^=!:\x24{}()|[\\]\/\\\\])", "g"), "\\\x241");

 11: }

 12:  

 13: // 库文件 /mz/url/delquery.js

 14: /// include mz.string.escapereg;

 15: /** 

 16: * 删除url字符串中指定的 query

 17: * @author:meizz

 18: * @version:2010/12/16

 19: * @param               {string}        url     url字符串

 20: * @param               {string}        key     被删除的query名

 21: * @return              {string}                被删除指定 query 后的url字符串

 22: */

 23: mz.url.delquery = function (url, key) {

 24:         key = mz.string.escapereg(key);

 25:         var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +

 26:   "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");

 27:         return url.replace(reg, "\x241")

 28: }

 29:  

 30: // 应用实例

 31: /// include mz.url.delquery;

 32: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

 33: mz.url.delquery(str, "pn");

 

自成体系，有基础，也有理论高度。知道为什么这样设计，也知道什么样的设计最好。比如这个例子可以有这样的封装：

<pre class="sycode" name="code">  1: // 库文件 /mz/url/delquery.js

  2: /// include mz.string.escapereg;

  3: /** 

  4: * 删除url字符串中指定的 query

  5: * @author:meizz

  6: * @version:2010/12/16

  7: * @param               {string}        url     url字符串

  8: * @param               {string}        key     被删除的query名

  9: * @return              {string}                被删除指定 query 后的url字符串

 10: */

 11: string.prototype.delquery = function ( key) {

 12:         key = mz.string.escapereg(key);

 13:         var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +

 14:   "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");

 15:         return this.replace(reg, "\x241")

 16: }

 17:  

 18: // 应用实例

 19: /// include mz.url.delquery;

 20: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

 21: str.delquery("pn");

而为什么不采用下面的那种封装呢？经过了《知微》和《化蝶》你就懂了。

进阶出路

道法自然，从根上去寻找突破的契机。你可以研读html解析引擎设计与实现，js解析引擎设计与实现，其它语言的代码解析与编译实现等等。
或者出些书。低级别的人写的书要么是一大抄，空无一物；要么是害人。

七.【宗师】

这个级别的人已然到了无招胜有招的境界。项目开发中的难题？没有难题！运行平台的差异？从根本上搞定！代码规范、开发模式，早已经被抛在身后。这个级别的人已经不再关注于某个前端开发框架，而是应对具体的环境给出最佳的理论指导。

这个级别的人所注意的应该是以最合理的系统架构引领着整个团队的进步，在什么样的场景下该用什么样的架构设计。3个、10个、50个、100个人的团队最应该用哪种模式？等你到了宗师级别，你再来回答吧。

进阶出路

每一个宗师就是一个高山，就是一个领域里的神，但是你仅满足于在一群比你弱的群体展现你的强大吗？如果还你是止步原地，那总会有人乘着飞机、宇宙飞船从你的头领掠过，高处不胜寒！

このフィールドを突破するには、このフィールドから飛び出なければなりません。 Web フロントエンドの研究開発のマスター レベルを突破したい場合は、Web フロントエンドから飛び出し、その上に Web 開発もあります。たとえあなたが Web フロントエンドのマスターであっても、高速なデータ応答、高速ネットワーク アーキテクチャ、美しいシステム サポートがなければ、何ができるでしょうか?したがって、ブレークスルーへの方法は、Web 開発チェーン全体に焦点を当てることです。

8. 【アセンション】

実際、厳密に言えば、アセンションは本来の領域の範囲内ではなくなりました。 Web R&D の分野では、このレベルに適した称号「アーキテクト」があります。もちろん、それらの「似非建築家」は別問題です。

1 つの方法がすべての方法につながる可能性があります。他の技術分野でも同様に、「入門」、「ホールへの入場」、「ハウスへの入場」、「マイクロへの入場」、「バタフライ」、「ヒーロー」、「グランドマスター」に応じてレベルを分けることができます。ここに書いたことに従ってレベルを分けることもでき、早く上達することができます。

新たな栄光おめでとうございます!

転載元: http://www.rjboy.cn/?p=1048