上司(および他の開発者)に控えめなJavaScriptを使用/検討するよう説得するにはどうすればよいですか


21

私は開発チームでかなり新しいです。

いくつかの強力な議論や「落とし穴」の例が必要なので、上司は最終的にUnobtrusive JavaScriptの利点を理解し、彼とチームの他のメンバーがこのようなことをやめるようにします。

<input type="button" class="bow-chicka-wow-wow" 
       onclick="send_some_ajax(); return false;" value="click me..." />

そして

<script type="text/javascript">

function send_some_ajax()
{
  // bunch of code ... BUT using jQuery !!!
}
</script>

かなり一般的なパターンを使用することをお勧めします。

<button id="ajaxer" type="button">click me...</button>

そして

<script type="text/javascript">

// since #ajaxer is also delivered via ajax, I bind events to document 
//  -> not the best practice but it's not the point....

$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();

});

上司(および他の人)がこのアプローチを使用したくない理由は、FireBug(またはChrome Dev Tools)のイベント検査が、たとえば

<input type="text" name="somename" id="someid" onchange="performChange()">

change-eventでどの関数が実行されるかをすぐに確認し、spaghetti-codeでいっぱいの巨大なJSファイルでその関数にジャンプできます

控えめなJavaScriptの場合、彼が目にする唯一のものは次のとおりです。

<input type="text" name="somename" id="someid" />

そして、もしあれば、いくつかのイベントがこの要素にバインドされているかどうか、そしてどの機能がトリガーされるかについて彼は知りません。

私は解決策を探していましたが、それを見つけました:

$(document).data('events') // or .. $(document).data('events').click

しかし、この「アプローチ」により、どのイベントでどの関数が起動するかを見つけるのに「時間がかかりすぎます...」となるため、そのようなバインドイベントを停止するように言われました。

「なぜUJSを使用すべきか」について、いくつかの例や強力な利点、またはその他の提案をお願いしています。

更新:「仕事を変える」という提案は理想的な解決策ではありません。

更新2: OK、jQueryイベントバインディングの使用を提案しただけでなく、そうしましたすべてのイベント委任を書いた後、ボスが私のところに来て、私に尋ねました。なぜ私は彼が知らないアプローチとアプローチでイベント委任をしているのですか?

15の入力フィールドがあり、すべてにonchangeイベントがあります(だけでなく、それらの一部にもあるonkeyup)など、いくつかの明らかな利点に言及しました。特にHTMLのすべてがPHPのエコーでレンダリングされる場合、15回行う代わりに->echo '... <input type="text" id="someid" ... />...'


最初のコードボックスの「クラス」には、おそらく=が必要です。
ジョーZ.

6
1)上司に自分が知らない技術を使用するよう説得する。2)上司に新しいテクニックを教える。3)上司が知らない技術の使用をやめる。または4)ジョブを変更します。オプションを忘れましたか?4を望まず、1と2で成功できない場合、残っている選択肢は3だけです。市場価値は知っていることによって決まることに注意してください。したがって、上司が承認するすべてを学習した後、残りのオプションは次のとおりです。3B)空き時間に新しいテクニックを学び、使用します。オプション3Aには費用がかかり、オプション3Bには時間がかかります。
ヴィリアム・ブール

1
githubのようなアプローチを使用します。JSでイベントがバインドされているすべての要素にはjs-this-class-do-somethingクラスがあるため、コード内で簡単にCTRL + Fを使用できます。
caarlos0

FireQueryは、「時間がかかりすぎる」部分を解決できます。イベントでどの程度うまく機能するかはわかりませんが、少なくとも要素イベントがあることわかるはずです。
イズカタ

1
イベントを操作するときに使用するのが大好きな素敵なユーティリティ
次に示し

回答:


49
  1. 流行語の使用をやめて、代わりに強力な議論を試みてください。Unobtrusive JavaScriptの Wikipediaページでも、この用語は正式に定義されていないという。それは多くの良いアイデアの包括的な用語かもしれませんが、それが単なる流行やファッションのように聞こえるなら、あなたの上司や同僚はあまり注意を払わないでしょう。さらに悪いことに、彼らが役に立たないと思うものについて続ければ、彼らはあなたが支持する完全に無関係なアイデアを無視し始めるかもしれません。

  2. 控えめなJavaScriptのアイデアが重要だと思う理由理解してくださいベストプラクティスと見なされていることを読んだからですか?これらのアイデアに従わないことに起因する問題に遭遇しましたか?これらのアイデアを採用することは、会社の収益にどの程度影響しますか?

  3. 上司の頭の中に入ってください。なぜ彼は彼がするように物事をするのですか、そしてなぜ彼はあなたの変更を拒否したのですか?彼はおそらく愚かではなく、おそらくあなたよりも経験が豊富です。あなたはすでにそれらのいくつかに言及しました-そのスレッドを最後まで辿ってください。次に、あなたの提案が彼が最も心配していることを改善するかどうか、そしてどのように改善するかを考えてください。

  4. ヒント1:マネージャーはお金が好きです。あなたの提案を収入の増加または支出の減少に直接結び付けることができるほど、あなたの議論はより大きな影響を与えます。ヒント2:時は金なりです。ヒント3:それ自体では、コードの美的魅力は金をmakeけません。反対に、実際にはコードの見栄えを良くするには時間がかかります。うまく機能するUいコードは、ほとんどのマネージャーで問題ありません。

  5. それについて話すだけでなく、それをしてください。自己完結型の小規模なプロジェクトを実現できるほど幸運な場合は、「UJS」スタイルをデモの一種として使用できるかどうかマネージャーに尋ねてください。準備ができたら、コードレビューを開催して、すべてがどのように機能するか、現在のスタイルよりも優れていると思う理由を説明できます。

  6. 理想主義は素晴らしいですが、邪魔させないでください。物事を成し遂げる誰かとして見られることは、下品なコーディングスタイルについて文句を言うディレッタントとして見られることがより重要です。あなたが新しい人なら、これは特に当てはまります。今すぐUJSを使用できない場合は、代わりにいくつかの良い仕事をして、信頼を得るためにあなたがしたい変更のケースをゆっくりと構築してください。

  7. 読みスイッチ:どのように変更物事への変更が困難であるとき。ケースを効果的に作成する方法について、より多くの良いアイデアを提供します。


答えの要点は、ujsが現実的に機能することを証明することです。動作することを見せてください。
OnesimusUnbound

2
@AvinashR重要なのは、マネージャーをやる気にさせるものは、多くの場合、開発者にやる気を起こさせるものと同じではないということです。私たちの開発者は、コードをきれいに整頓したり、エレガントに設計したりすることを好みます。マネージャーは利益を最大化することを望んでいます。あなたの変更がより多くの販売をもたらすならば、素晴らしい。その結果、開発時間が短縮されたり、バグの修正や修正に費やされる時間が少なくなれば、素晴らしいことです。クライアントがあなたのGUIを気に入っているのを聞いてうれしいですが、ボスはUJSに、またはGUIの見た目に属性があると思いますか?クライアントがコードを見て、「コードをこのように見せたい!」あなたの主張を簡単にする必要があります。
カレブ

3
「スイッチ」に加えて、Terrance Ryanによる「Driving Technical Change」:terrenceryan.com/bookもお勧めします。また、「Hello HTML5 and CSS3」では、Rob Crowtherが「コンテンツ用のHTML、プレゼンテーション用のCSS、および動作用のJavaScript」と簡単に説明しています。JavaScriptをHTMLから除外することで、ビヘイビアーのライブラリを構築し、余分なコーディングなしでHTMLをあらゆる場所で再利用できます。それは、カレブのポイント#4に、時間とお金を節約します。
エイドリアンJ.モレノ

2
ポイント3:経験を過大評価しないでください。私のチームでは、32歳の過給の経験豊かな怠casualなプレミアリーグプレーヤーではなく、22歳の才能あふれるレオメッシが欲しいです。若い、新鮮な、才能のある血は非常に価値があります。
ロバートニーストロジ

1
「マネジャーは利益を最大化したい。」-マネージャーもリスクを軽減したい。別の道かもしれません。
ロジャーリップスコム

8

できることは、FireQueryツールとChrome Queryツールを使用してUSJ htmlをデバッグするデモを提供することです。

FireQueryはfirebugの拡張機能であり、かなり上手く機能します。Chrome Queryについては、どれだけ良いかを保証することはできませんが、いくつかの開発者によって確実に使用されています(stackoverflowの投稿)。

また.datajQuery 1.8.0以降、内部イベントデータを返すために関数が削除され$._data(element, "events")、公式の変更ログに従って不安定になる可能性のある関数に置き換えられることも知っています。

これは1.8で削除されましたが、$ ._ data(element、 "events")を介してデバッグ目的でイベントデータにアクセスできます。これはサポートされているパブリックインターフェイスではないことに注意してください。実際のデータ構造は、バージョンごとに互換性がない場合があります。

更新:
私が働き始めたとき、私は同じジレンマを抱えていました。しかし、動的に開くタブ(閉じることも可能)、アコーディオンメニュー(dbから動的に作成される)を含む、完全に機能するGUI(単一ページアプリケーション)を備えたデモを作成すると、最終的にUSJを使用する方がよいことがわかりました。

また、USJを使用することの利点は、アプリケーション全体を小さな(読み取り不可能な)スクリプトに縮小できることです。また、google.com / github.comのスクリプト(例として)を示し、サイトの閲覧者がセキュリティの欠陥を解読するのに苦労するため、コードが圧縮されていることを常に指摘します。そしてそれらを利用して、あなたのサイトで本格的な攻撃を開始します(恐らく)。

更新2
ところで、この質問を見るまではUSJをやっているとは知らなかったので、ある意味で感謝します。


2

インラインイベントハンドラは次の理由で悪臭を放ちます。

  • イベントの委任はありません-これは、再バインドすることなく要素をページに動的にリッピングしたり、ページから要素をリッピングできるようにする場合に便利です。

  • HTMLタグのクラス/ ID属性ではなく、HTMLタグに動作をバインドしました。アプリ全体に「combo_box」のクラスがあるとしましょう。突然、古いページの半分で、コンボボックスが別のコンテナーにある場合にコンボボックスを少し変化させたいと思います。クラスに関連付けられ、コンテナのコンテキストに基づいてその動作を変更できます"#special_container .combo_box"。ひどいHTML内にバインドされているため、1つのファイルの場所からフィルター処理するための新しいコード行を調整または作成するのではなく、任意の数のページで.combo_boxクラスを使用して小さな選択ボックスを追跡し、ハンドラー参照を1つずつ変更することができます。

  • 複数のハンドラが必要な場合は、それらを関数でラップし、特定のHTMLファイルに不必要にバインドします。それはどの程度保守可能ですか?

  • より微妙な点は、コントロールパネルのメンタリティーがより高い動作を処理するのがはるかに簡単/より保守可能/柔軟で堅牢であるということです。中央の場所からバインドすることで、ページで発生するすべての動作の概要を同時に取得できる場所が得られます。たとえば、特定のページが時々実行される理由を把握する必要がある場合に便利です。理解するのは難しいが他のバグではない特定のバグに。

  • これはクライアント側です。複数のブラウザがあり、すべて独自の方法で重い複雑さを説明しています。ここでは、すべてをまとめてIDEで整理し、メンタリティがうまく機能しないようにします。コードをタイト、最小限、疎結合、クリーンな状態に保つことは流行ではありません。変更や更新が簡単で、マネージャーが実際に先見の明を持っていることを前提とする保守可能なフロントエンドを確立するために絶対に不可欠です。 。

  • もう2002年ではありません。この引数は、レイアウトと同じくらい古いテーブルです。それを乗り越えて、あなたが彼らの専門知識を欠いていたためにあなたが明示的に雇った経験豊富なクライアント側専門の開発者を信頼し始めてください(私は個人的な経験や何かから怒りを向けているわけではありません)。

上司の議論に反論するために、イベントの委任やハンドラーバインドで使用されているクラスやIDを、CTRL + Fと、自分の個人的な恥ずかしいjqueryのようにページ上のすべてのJSを表示できるツールで追跡することは、それほど難しくありません/ prototype-only bookmarklet version Web開発ツールバーが私をひっくり返し始めたとき、私は急いで一緒に足を踏み入れました(色分けされました)。js fiddleページのリンクからブックマークするか、JSをコピーして独自に作成します。

おそらく最終的に期限切れになるJSフィドルリンク


+1最後に、インラインJSの主な欠点を誰かが指摘しました。私の上司との次の議論でこの議論を使用します。
Vライト

@ V-Light彼らは働きましたか?
エリックReppen

2
いや!「ChangeYourOrganization」オプションは、ソリューションでした
V-ライト

0

推奨される手法の主な利点の1つは、イベントハンドラーを「ドキュメント」などの親にバインドするだけでよく、このハンドラーは「button.anyclass」などの特定のセレクターを満たすすべての子からのイベントをキャッチできることです。 「。1つの編集インスタンスのみが必要で、すべての要素に影響するように、メモリを節約して保守可能です。

バインドされた関数を一度に認識できないことに関しては、おそらくページの最下部でそのような関数を宣言する方法を標準化できます。コメントは非常に有益ですが、ブラウザへの応答として提供する前にサーバーによって削除されていることを確認してください。

また、セキュリティの目的でjavascriptの難読化と縮小化を提供したい場合、チームがまだ使用している古いスタイルとは異なり、あなたのテクニックはそれを可能にします。


-2

明らかな答えは、onclick属性を使用してボタンに1つの関数しかバインドできないのに対し、JQueryイベントでは複数の関数をバインドできるということです。onloadイベントの一般的な問題:ドキュメントが複数のファイルで構成されている場合、衝突が頻繁に発生します。

あなたと上司の両方を満足させる別のソリューションは、KnockoutやAngularなどのライブラリを使用したデータバインディングの使用です。これにより、ビューの変更を追跡し、イベントハンドラの大部分の必要性を抑制できます。


1
Knockout、Angular、その他のクールな子供向けのJSフレームワークについて...残念ながら、これはオプションではありません。理由は上記と同じです...それは「多すぎる」、「新しすぎる」、「あまりにもクール」、または単に「何か新しいことを学びたくない、古い(愚かな/愚かな)方法でやりましょう。」 。 "
V-Light

@Niphra:さらに、関数は1つのコンポーネントにのみバインドできます。
ブルーノシェーパー

3
@ V-Light:「ChangeYourOrganizationまたはChangeYourOrganizationを使用できます。」たぶん、これはあなたにとって興味深いものです:jamesshore.com/Change-Diary
ブルーノシェーパー

ねえ、私の会社はASP.NETが「新しすぎる」のでクラシックASPを使い続けていますが、それでもコードでノックアウトをプッシュすることができました。彼らの懸念が実際に何であるかを確認し、変更を加えることができるかどうかを確認してください。
DistantEcho

1
@Niphra「私の会社はClassic ASPにこだわっています。」それは恐ろしいことです。
マイケルポールコニス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.