js 自体はオブジェクト指向言語ではありません。実際の開発ではオブジェクト指向の考え方はほとんど使用されませんでしたが、プロジェクトとして再利用する場合はオブジェクトにカプセル化されると考えていました。現在やっているのは後のテスト段階ですが、オブジェクト指向の役割は再利用だけではありません。オブジェクト指向にも継承やポリモーフィズムの概念があると言えるかもしれませんが、オブジェクト指向にはポリモーフィズムの概念は存在しません。 JavaScript と継承では、Web ページが実行前にまず js をダウンロードする必要があるため、js の継承はバックグラウンドほど柔軟にできず、js にはオーバーロードがなく、書き換えが不便です (そして、js で書き換える意味はあまり重要ではありません)。そのため、JS ではオブジェクト指向が使用されることはほとんどなく、一部のプラグインではオブジェクトが使用されることがあります。一般に、プラグイン関数は、最初に を介して書き出されます。しかし、実際のプロジェクト開発では、リファクタリング前にプロセス指向の実装機能を使用できる時間はほとんどありません。実際の開発では、基本的にプロセス指向のプロセスを使用して作成し、直接送信します
この作成方法の問題は、このページを作成した後、しばらくしてから、このページの機能要件やページ レイアウトが突然必要になることです。このページのコードを見ると、フロントエンドを書く多くの人が同じように感じていると思います。数年前に虫眼鏡プラグインをリリースしたところ、Google Chrome が最初にレンダリングしたときに、そのプラグインが効果を示さなかったことがわかりました。コードは次のとおりです。
/// <reference path="../jquery11.js" /> (function ($) { $.fn.extend({ jqoom: function (potions) { var settings = { width: 350, height: 350, position: "right" } if (potions) { $.extend(settings, potions); } var ImgUrl = $("img", this).attr("src"); var ImgMinWidth = $("img", this).width(); var ImgMinHeigth = $("img", this).height(); var ImgWidth = 0; var ImgHeight = 0; var de = true; $(this).hover(function (e) { }, function () { $("#jqoomz").remove(); $(document).unbind("mousemove"); $("#jqoomy").remove(); de = true; }); $("img", this).hover(function (e) { var pagex = e.x || e.pageX; var pagey = e.y || e.pageY; var pagex1 = 0; var pagey1 = 0; var leftcha = 0; var topcha = 0; _this = $(this).parents("div"); if ($("#jqoomz").length == 0) { _this.after("<div id='jqoomz'></div>"); var obj = new Image(); obj.src = ImgUrl; obj.onload = function () { if (de && obj.height > 0) { de = false; ImgWidth = obj.width; ImgHeight = obj.height; finder.call(_this.find("img")[0]); } }; $("#jqoomz").width(settings.width).height(settings.height).offset({ left: $(_this).outerWidth() + $(_this).offset().left, top: $(_this)[0].offsetTop }).append($("<img src="/static/imghwm/default1.png" data-src="jquery11.js" class="lazy" alt="JavaScript オブジェクト指向の階層的思考の包括的分析" ></img>").attr("src", ImgUrl)); if (de && obj.height > 0) { de = false; ImgWidth = obj.width; ImgHeight = obj.height; finder.call(this); } } function mover(event) { var pagex2 = event.x || event.pageX; var pagey2 = event.y || event.pageY; if (parseInt(pagex2 + leftcha) <= parseInt($(_this).width() + $(_this).offset().left) && pagex2 >= leftcha + $(_this).offset().left) { $(this).offset({left: pagex2 - leftcha}); } else { if (parseInt(pagex2 + leftcha) > parseInt($(_this).width() + $(_this).offset().left) && pagex2) $(this).offset({left: $(_this).width() + $(_this).offset().left - leftcha * 2}); else $(this).offset({left: $(_this).offset().left}); } if (parseInt(pagey2 + topcha) <= parseInt($(_this).height() + $(_this).offset().top) && pagey2 >= topcha + $(_this).offset().top) { $(this).offset({top: (pagey2 - topcha)}); //document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px"; } else { if (parseInt(pagey2 + topcha) > parseInt($(_this).height() + $(_this).offset().top)) $(this).offset({top: ($(_this).height() + $(_this).offset().top - topcha * 2)}); //document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px"; else $(this).offset({top: $(_this).offset().top}); //document.getElementById("move").style.top = "0px" } var bilx = ($(this).offset().left - $(_this).offset().left) / (ImgMinWidth / ImgWidth); var bily = ($(this).offset().top - $(_this).offset().top) / (ImgMinHeigth / ImgHeight); $("#jqoomz img").css({"margin-left": -bilx, "margin-top": -bily}); } function finder() { if (parseFloat($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth)) >= parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) && parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) >= parseFloat($(this).offset().top)) { pagey1 = (pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2); } else { if ((pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) < $(this).offset().top) { pagey1 = $(this).offset().top; } else { pagey1 = ($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth)); } } if (($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth) >= (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) && (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) >= $(this).offset().left) { pagex1 = (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2); } else { if ((pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) < $(this).offset().left) { pagex1 = $(this).offset().left; } else { pagex1 = ($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth); } } leftcha = ImgMinWidth / ImgWidth * ImgMinWidth / 2; topcha = ImgMinHeigth / ImgHeight * ImgMinHeigth / 2; if ($("#jqoomy").length == 0) { $(this).after("<div id='jqoomy'></div>") .siblings("#jqoomy") .addClass("jqoomy").show() .width((ImgMinWidth / ImgWidth * ImgMinWidth)) .height((ImgMinHeigth / ImgHeight * ImgMinHeigth)).offset({ top: pagey1, left: pagex1 }); } $(document).on("mousemove", $.proxy(mover, $("#jqoomy"))); } }, function () { }); } }); })(jQuery);
html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script ></script> <script src="OppJqoom.js"></script> <style type="text/css"> .jqoom { width: 350px; height: 350px; border: solid 1px #DFDFDF; z-index: 10; } .jqoom img { cursor: pointer; z-index: 10; max-height: 350px; max-width: 350px; } .jqoomy { background-color: white; position: relative; z-index: 999; opacity: 0.5; cursor: pointer; border: solid 1px #DFDFDF; } #jqoomz { border: solid 1px #DFDFDF; position: absolute; overflow: hidden; } .lef { border: 1px solid #DFDFDF; display: block; height: 72px; line-height: 72px; text-align: center; text-decoration: none; width: 10px; background-color:#EBEBEB; float:left; } .lef:hover { color:red; } .jqooz { float:left; width:352px; margin-top:20px; } .jqooz ul { float: left; margin: 0; padding: 0; width:328px; height:72px; } .jqooz ul li { display: inline; list-style: none outside none; margin: 0 10px; } .jqooz ul li img { border: 1px solid #DFDFDF; max-height: 72px; max-width: 120px; } .jqooz ul li img:hover { border: 1px solid #ff6600; } </style> <script type="text/javascript"> $(function () { $(".jqoom").jqoom(); }); </script> </head> <body> <div class="jqoom"> <img src="/static/imghwm/default1.png" data-src="b3.jpg" class="lazy" / alt="JavaScript オブジェクト指向の階層的思考の包括的分析" > </div> <div class="jqooz"> <a href="javascript:void(0)" class="lef"><</a> <ul> <li><a> <img src="/static/imghwm/default1.png" data-src="b3.jpg" class="lazy" / alt="JavaScript オブジェクト指向の階層的思考の包括的分析" ></a></li> </ul> <a href="javascript:void(0)" class="lef">></a> </div> </body> </html>
効果:
ここで、Google Chrome が初めてロードされたときにこのプラグインが効果がない理由を変更したいと思います。その後、全体を整理するためにもう一度コードに従う必要があります。虫眼鏡の機能ステップ。実際のプロジェクトでは、さまざまな関数コールバックのネスト、データ取得、データ処理、表示、およびページの動的効果がすべて onload または Ready に絡み合っています。変更するページのコード ロジックを整理するには数時間、場合によっては 1 日かかりますが、フロントエンドの同僚がコメントを追加するときに、包括的に整理することは不可能な場合があります。以前に書いたページをしばらく経つと、自分が書いたコードさえ理解できないと言われます。
JavaScript 自体の特徴の 1 つはイベント リスニング関数のコールバックであり、これが nodejs 作成者がその利点の 1 つです。 js は JavaScript のイベント リスニング関数のコールバックによってもたらされる利点がありますが、関数コールバックには、jQuery の従来の ajax コールバック成功メソッドが頻繁に発生するという欠点もあります。この ajax の出力を別の ajax の入力として使用するには、ajax をネストする必要があります。 ネストが多すぎると、このコードの可読性と複雑さが大幅に増加しました。 Promise が登場してからは、当然、難易度も高くなります。 jQuery と angular にも Promise が追加されました。 JavaScript はメンテナンスの後半段階でロジックを整理するのになぜこれほど時間がかかるのでしょうか?
バックグラウンドの Java または C# 言語がどのように使用されているかを見ていきます。典型的な Javaweb は、間違いなく、Web 用の .net MVC です。フロントエンドページは必要なデータに応じて1つずつ分割されており、MVCは実際には2次元に階層化されています。これは私の個人的な意見です。とコントロール、モデル、もう 1 つの次元は、ページ全体が複数の小さな関数に分割されているため、バックエンド コードを変更するときにロジックを簡単に整理できる場合は、フロントエンド JavaScript を階層化できます。全体のアイデアによると?
このプラグインには動的な数値の取得が含まれていないため、階層化の基準も異なります。最初の階層はマウスの後の一連の画像のアルゴリズムです。 2 番目の層は、イベント バインディングに分割された一連の DOM です。その操作、コードは次のとおりです。
/** * Created by on 2016/11/2. */ (function ($) { //构造函数逻辑主线路 var OppJqoom = function (_this, potions) { this._this = _this; this.ImgUrl = $("img", this._this).attr("src"); this.ImgMinWidth = $("img", this._this).width(); this.ImgMinHeigth = $("img", this._this).height(); this.ImgWidth ,this.ImgHeight ,this.leftcha,this.topcha; var settings = { width: 350, height: 350, position: "right" } $.extend(this,settings); if (potions) { $.extend(this, potions); } this.domOperation.Jqoomhover.call(this); this.domOperation.imghover.call(this); }; OppJqoom.prototype = { // 第一层 算法层 basicOperation: { /* 获取遮罩层的top和left*/ finder: function (that) { var pagey1, pagex1; if (parseFloat($(this).offset().top + $(this).height() - (that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth)) >= parseFloat(this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) && parseFloat(this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) >= parseFloat($(this).offset().top)) { pagey1 = (this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2); } else { if ((this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) < $(this).offset().top) { pagey1 = $(this).offset().top; } else { pagey1 = ($(this).offset().top + $(this).height() - (that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth)); } } if (($(this).offset().left + $(this).width() - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth) >= (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) && (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) >= $(this).offset().left) { pagex1 = (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2); } else { if ((this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) < $(this).offset().left) { pagex1 = $(this).offset().left; } else { pagex1 = ($(this).offset().left + $(this).width() - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth); } } that.leftcha = that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2; that.topcha = that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2; that.domOperation.docMousemove.call(that); return {top: pagey1, left: pagex1}; }, // 放大镜的图片的top和left mover: function (that) { if (parseInt(that.pagex2 + that.leftcha) <= parseInt(that._this.width() + that._this.offset().left) && that.pagex2 >= that.leftcha + that._this.offset().left) { $(this).offset({left: that.pagex2 - that.leftcha}); } else { if (parseInt(that.pagex2 + that.leftcha) > parseInt(that._this.width() + that._this.offset().left) && that.pagex2) $(this).offset({left: that._this.width() + that._this.offset().left - that.leftcha * 2}); else $(this).offset({left: that._this.offset().left}); } if (parseInt(that.pagey2 + that.topcha) <= parseInt(that._this.height() + that._this.offset().top) && that.pagey2 >= that.topcha + that._this.offset().top) { $(this).offset({top: (that.pagey2 - that.topcha)}); //document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px"; } else { if (parseInt(that.pagey2 + that.topcha) > parseInt(that._this.height() + that._this.offset().top)) $(this).offset({top: (that._this.height() + that._this.offset().top - that.topcha * 2)}); //document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px"; else $(this).offset({top: that._this.offset().top}); //document.getElementById("move").style.top = "0px" } var bilx = ($(this).offset().left - that._this.offset().left) / (that.ImgMinWidth / that.ImgWidth); var bily = ($(this).offset().top - that._this.offset().top) / (that.ImgMinHeigth / that.ImgHeight); return{left:bilx,top:bily}; } }, // 第二层 事件绑定层 domOperation: { // 鼠标移动到图片的一系列dom的操作 imghover: function () { var that = this; $("img", this._this).hover(function (e) { this.pagex = e.x || e.pageX; this.pagey = e.y || e.pageY; var offset; var obj = new Image(); obj.src = that.ImgUrl; obj.onload = function () { if (obj.height > 0) { that.ImgWidth = obj.width; that.ImgHeight = obj.height; if ($("#jqoomz").length == 0) { that._this.after("<div id='jqoomz'></div>"); } offset = that.basicOperation.finder.call(that._this.find("img")[0],that); } }; if ($("#jqoomz").length == 0) { that.ImgWidth = obj.width; that.ImgHeight = obj.height; that._this.after("<div id='jqoomz'></div>"); } offset = that.basicOperation.finder.call(this,that); if ($("#jqoomy").length == 0) { $(this).after("<div id='jqoomy'></div>") .siblings("#jqoomy") .addClass("jqoomy") .show() .width((that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth)) .height((that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth)) .offset({ top: offset.top, left: offset.left }); } $("#jqoomz").width(that.width).height(that.height).offset({ left: that._this.outerWidth() + that._this.offset().left, top: that._this[0].offsetTop }).append($("<img alt="JavaScript オブジェクト指向の階層的思考の包括的分析" ></img>").attr("src", that.ImgUrl)); },function () {}); }, //鼠标在图片上滑动的一系列dom操作 docMousemove: function () { var that=this; $(document).on("mousemove", function (event) { that.pagex2 = event.x || event.pageX; that.pagey2 = event.y || event.pageY; var offset=that.basicOperation.mover.call($("#jqoomy"),that); $("#jqoomz img").css({"margin-left": -offset.left, "margin-top": -offset.top}); }); }, //鼠标移除图片的一系列dom操作 Jqoomhover:function () { this._this.hover(function (e) { }, function () { console.log(111); $("#jqoomz").remove(); $(document).unbind("mousemove"); $("#jqoomy").remove(); }); } } }; $.fn.extend({ jqoom: function (potions) { return new OppJqoom(this, potions); } }) })(jQuery);
次に、ページの論理的な手順が非常に明確であることを示す簡単なコメントを追加します。この書き方で厄介なのは this の使い方です。オブジェクト内のネストされたオブジェクトは this メソッドを呼び出します。自分のオブジェクトを指します。
実際の開発では、データ読み取り層、データ処理層、ビジネスがより複雑な場合は、データ表示レイヤーに分割することもできます。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

Dreamweaver Mac版
ビジュアル Web 開発ツール
