JS フロントエンド フレームワークの失敗経験を refactoring_javascript スキルで共有

さて、始めましょう
リファクタリングは実際には大きな動きではありません。達成すべき主な機能は、既存の JS コードを再分割し、既存のモジュールを分離することです。次に、既存のプログラムをモジュールに分割し、それを名前空間に再パッケージして使用するか、Java のパッケージに似たものを実装する予定です。その後、 use js ファイルをロードし、このファイルの use 関数を呼び出すだけで、特定のパラメーターを設定することで、必要なモジュールを動的にロードできます。これは最も完璧なアイデアでした（当時の私は愚かで世間知らずでした）。 OK、悪夢が始まります。
前提として、私は3か月前、自分自身を過小評価していました。 //OK、下に野蛮な用語が表示されるかもしれません~~

まず、計画の初日に、私の意図は、このプログラムの最も切り離された部分、つまり自作の制御部分を分離することです。そういえば、Panel.jsやButton.jsなどのフォームコントロールも書こうとしている人がいますが、フォルダ分けしてあるのですが、インデックスページを見るとたくさんのjsファイルが入っています。この一連の <script> タグは非常に煩わしいです。そこで悪夢は第 2 段階に入りました。JS ファイルをロードしたいと思いました。この JS ファイルはすべてのコントロール JS を動的にロードできます。 「Dynamic Loading JS」についてさらに詳しく知りたい場合は、Du Niang G Niang にアクセスして説明を求めてください。 3 非同期 1 の Ajax 実装がたくさん見つかるはずです。これはすべてナンセンスです。「High Performance JavaScript」という本を参照して、次のコードを生成しました。 <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="2608" class="copybut" id="copybut2608" onclick="doCopy('code2608')"><U>コードをコピーします コードは次のとおりです。<div class="codebody" id="code2608"> <BR>function loadScript (url, callback){ <BR>var script = document.createElement("script"); <BR>script.type = "text/javascript" ; <BR>if (script.readyState){ //IE <BR>script.onreadystatechange = function(){ <BR>if(script.readyState == "ロード済み" || script.readState == "complete"){ <BR>script.onreadystatechange = null; <BR>callback(); <BR>} <BR>}else{ <BR>script.onload = function(){ <BR>callback(); >} <BR> } <BR>script.src = url; <BR>document.getElementsByTagName("head")[0].appendChild(script); <BR><BR> <BR>良い悲劇ですゆっくり始めます。まず、私のコントロールはすべて JQuery に基づいているので、loadScript(jqueryURL, function(){//Load my control s}) する必要があります。ここで中断して以下に進みます。 <BR>その後、突然名前空間関数を実装したくなり、オブジェクト指向、プロトタイプチェーン、その他のさまざまなことを調べました。その後、この参照管理関数が非常に抽象的であることがわかりました。 『JavaScript デザイン パターン』という本はとても欺瞞的です。結局のところ、プロトタイプモードを理解した後でも、それはまだ謎でした。さて、この問題については再考する必要があると思います。実際に必要なのは、コントロールをオブジェクトのプロパティとしてグローバル オブジェクトにバインドすることだけです。そこで、英語名 Gssl をオブジェクトとして使用し、次の構造を取得しました: <BR><BR><BR><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="94322" class="copybut" id="copybut94322" onclick="doCopy('code94322')"><U> コードは次のとおりです: var Gssl = {} <div class="codebody" id="code94322"> <BR> さて、上で中断したところに戻りますが、私のアイデアは、グローバル オブジェクトを構築し、Gssl という名前の JS を動的にロードするときにそれをスペースにバインドすることです。具体的な実装は次のとおりです: <BR><BR><BR><div class="codetitle">コードをコピー <span><a style="CURSOR: pointer" data="72296" class="copybut" id="copybut72296" onclick="doCopy('code72296')"><U> コードは次のとおりです: loadScript (jqueryURL , function(){ //コントロールをロードします <div class="codebody" id="code72296">loadScript(controlURL, function(){ <BR>//コントロールをバインドします <BR>Gssl.control = control; <BR>}); <BR>});<BR><BR><BR>As I write this, the test has been adjusted. I was a little happy last night, but I know from the programmer’s intuition that the nightmare is not over yet. <BR>I went back this morning and referenced this dynamically loaded JS JS file to my page. As a result, due to the asynchronous nature, the following code started executing before the Gssl object was generated (I go, this is unreasonable) ). Then I thought about it and wanted to make a ready flag on the last loaded control to mark whether Gssl has been loaded. But you find that each component has its own callback function, and you don't know which one is loaded last. Although the code execution is in order, the parallelism of this transmission makes you not sure which one is last. one. Okay, I was completely crushed, so I thought of a very 2B method. I simply wrote a function to jam the program for 2 seconds. Two seconds will definitely be enough~. Then he discovered that setTimeout TM cannot block codes, and his good friend setIXXXXX cannot block codes either. Okay, I got angry and wrote an infinite loop to determine the ready bit. OK, the browser quits. <br><br>Back to the starting point, I began to consider trying recursive loading, that is, loading the next control only during the Callback, so that I can know when the control has been loaded. But when I think about it carefully, I guess, if I want to load it like this, then I have to dynamically load it. Doesn’t this not improve the efficiency at all? Then I looked at the implementation of the ready method of various frameworks. Well, the one with single file is IMBA. Then there is only one way in front of me, which is to write all controls on a JS. This is simply avoiding the important and choosing the light. <br><br>Then I spent a nightmare day proposing solutions and then complaining about myself. It's almost time to get off work, and I'm still thinking about whether there is a solution to this problem. Then the third voice in my head started, Zhiwei~ (haha, this is my name~), is it really necessary? Okay, I have to admit that every time I escape from nightmares, I have to rely on him. Then I opened the folder of the entire project at each location and then returned it, and then I thought, okay, this is not writing a novel, so I won’t describe these little actions when thinking (I will tell you that when I think about a problem, it will be like Are mentally ill people just as stupid?) In the end, I found that even if I separated all these modules, I would still have to make certain modifications to other projects. Although there are interfaces, the interfaces are connected to the backend, and the interfaces between my modules have not been done yet. This kind of separation will be accompanied by a lot of additional payments (estimated, but based on experience these are inevitable~), and the new JS framework is not compatible with the overall framework (when I was off work, I found that some resources were not accessible. problem), although I didn’t give up, I still gave up (the progress of all evil, Ciao). This version of the code has not been saved, and SVN has not been updated~. There was no backup on my USB hard drive, but all the source codes were deleted in anger. I only keep this diary as a souvenir. <br><br>The lesson is that if I had a front-end modular idea from the beginning, I would not be where I am today. I can definitely do it with my ability, but now it’s hard to come back~ It’s still those evil milk powder advertisements, let the baby have a good start, then my goal is to give the code a good start~ Forgive me for being a failed daddy ~~ (T_T)<br><br>Also, I know that the Blog Forum is a magical place. If anyone has encountered the same problem and solved it, can you share it? There will always be a reply!</script>