質問概要
jQueryのajax
や、.click
を多用したWebページの、見やすさはどのように行っているのか?
質問詳細
独学でフレームワークなどはほとんど触れたことがありません。
jQueryくらいです。
その、jQueryを多用したWebページを作っているのですが、<script></script>
の中身が200行以上あり、とてつもなく見難いです。
特に私は、BASIC言語(VBではありません。N88です)スタートの人間なので、完全なる手続き型人間ですので、余計に……
今、現役のエンジニアさんはどのようにそういった、イベントや処理を分けて見やすくしているのでしょうか。
何かフレームワークを使うと、そういったものがまとめられるのでしょうか。
それともこれ(script内が200行以上など)が普通なのでしょうか。
これから社会人エンジニアとして働く私にアドバイスをいただけると幸いです。
よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答6件
0
反抗期ですので、あえてHTML内に全部詰め込んでも綺麗に見える(かもしれない)方法を伝授しましょう。
Slim + SASS + CoffeeScript
これです。SCSSではなくSASSを使うのがコツです。これらは全てインデントブロックです。そう、Pythonのように美しいコードになります。Slimの中に全部書けるので、何も怖がる必要はありません。
Slim
1doctype html 2html 3 meta charset="UTF-8" 4 title Slimはすばらしい 5 script src="https://code.jquery.com/jquery-3.1.0.min.js" 6 sass: 7 ul.nonestyle 8 list-style-type: none 9body 10 h1 すごよね? 11 button#agree 同意 12 ul#say.nonestyle 13 coffee: 14 $('#agree').click -> 15 $('#say').append '<li>その通りだ!</li>'
これならどんなに長いコードでもすっきりしているように見えるような気がしませんか?
投稿2016/08/29 13:14
総合スコア21733
0
ベストアンサー
「コールバック地獄」に陥っているのでしょうか。Promise を使うと地獄から抜け出せるらしいです。
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶)
AjaxとPromiseの実験 - Ajaxの順次呼び出し、並行呼び出し
コーディング規約とかも知りたいです。
Promiseは私も勉強中です。
設計についても模索中です。どう網羅的にイベントハンドラを設定するか、どうテストするか、などに興味があります。
投稿2016/08/29 05:47
総合スコア2493
0
行数でいえば、どんな処理が必要なのかによるので多い・少ないは言えないと思いますが、
見やすくしたり、メンテナンスや再利用がしやすくなるようにするためには、
なるべく少ない処理で関数を切り分けるのが良いと思います。
たとえば、
数字を入力する→入力された数字から計算する→計算結果を表示する
というような機能を作るとき、
ひとつのfunction()の中ですべて完結させるのではなく、
①数字が入力されたときに実行されるfunction()
②入力された数字を計算するためのfunction()
③結果を表示するためのfunction()
というふうに分けておき、
必要なときにそれを呼び出すようにするなどです。
似たような処理を行うけれど一部の処理が異なる、という機能を作る場合にも、
共通の処理部分は同じfunction()を呼び出しして再利用することができます。
これをやるとむしろ行数は増えるかもしれませんが、
無理やりひとつのfunction()の中であれこれ分岐したり判定をするよりも、
実行される処理の量は、極力必要な部分のみに減らすことができます。
投稿2016/08/29 04:04
総合スコア1298
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/30 02:52
2016/08/30 03:27
2016/09/01 03:56
0
基本的に外部ファイル化
html
1<script src="/path/to/file.js" ></script>
として外部ファイルとして読み込むですね。
ライブラリとしてある jquery-3.1.0.js は1万行を超えてます。
追記
内部だろうが外部だろうが
javascript
1$(function(){ 2 $('selector').on('click', function(){}); 3});
のように イベント設定は onload 後に設定されるように記述します
投稿2016/08/29 03:55
編集2016/08/30 04:25退会済みユーザー
総合スコア0
0
普通に外部ファイル化すればHTMLを汚すこともないので問題ないのでは?
もちろん機能ごとにユーザー関数を設定してもよいかと思いますが
jQueryのコンセプトから考えると冗長に書きがちですよね
投稿2016/08/29 03:52
総合スコア114572
0
JavaScriptは便利ですが、どうしてもクライアントにソースコードを渡す事になる為、可能なものはサーバ側で処理するようにはしていますね。
ajaxでデータを取得したりすることは当然として、データのvalidationもajaxでサーバ経由でやる事も出来ます。
ただまぁ、一歩目の対応としては、yambejpさんが言っているように外部ファイル化する事です。
1ファイルのコードが増えることに関しては、実処理は別ファイルとして読み込み、イベント発生時のコールバックで、無名関数ではなく別ファイルに用意したファイルを使う、等。
jQueryを使っていると、まるでそれが当然と言うように無名関数が使われ、コードは見辛くなりますので。
コレなんでなんでしょうね。確かに個別関数化する必要もない局所的利用のfunctionもあるにはありますが、逆に分けた方がよさそうなモノまで無名関数化する文化がある気がします。
投稿2016/08/29 04:11
総合スコア5405
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/30 02:53
2016/08/30 04:17
2016/09/01 03:55
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。