コードでわかりやすく説明したつもりになったら、やたら長くなりました・・・
繰り返しを纏めます。
javascript
1$(document).on('turbolinks:load', function() {
2
3 $('.thumb li').click(function() {
4 var class_name, num;
5 class_name = $(this).attr('class');
6 num = class_name.slice(5);
7 $('.main li').hide();
8 $('.item' + num).fadeIn();
9 });
10
11 // 関数にまとめる(名前は適切に変更のこと)
12 var initializeMagazineTags = function(){
13 var i, len, ref, results, tag;
14 $('#magazine-tags').tagit({
15 fieldName: 'adviser[magazine_list]',
16 singleField: true
17 });
18 if (gon.magazine_tags != null){
19 ref = gon.magazine_tags;
20 results = [];
21 for (i = 0, len = ref.length; i < len; i++) {
22 tag = ref[i];
23 results.push($('#magazine-tags').tagit('createTag', tag));
24 }
25 return results;
26 }
27 };
28
29 // 関数にまとめる(名前は適切に変更のこと)
30 var initializeBrandTags = function(){
31 var i, len, ref, results, tag;
32
33 $('#brand-tags').tagit({
34 fieldName: 'adviser[brand_list]',
35 singleField: true
36 });
37
38 if (gon.brand_tags != null){
39 ref = gon.brand_tags;
40 results = [];
41 for (i = 0, len = ref.length; i < len; i++) {
42 tag = ref[i];
43 results.push($('#brand-tags').tagit('createTag', tag));
44 }
45 return results;
46 }
47 };
48
49 // 実行
50 var magazineTags = initializeMagazineTags();
51 var brandTags = initializeBrandTags();
52});
共通部分の差分を変数にして関数の先頭に変数として定義する。
動作が変わっていないか確認してください。
javascript
1$(document).on('turbolinks:load', function() {
2
3 $('.thumb li').click(function() {
4 var class_name, num;
5 class_name = $(this).attr('class');
6 num = class_name.slice(5);
7 $('.main li').hide();
8 $('.item' + num).fadeIn();
9 });
10
11 // 関数にまとめる
12 var initializeMagazineTags = function(){
13 var tagSelector = '#magazine-tags';
14 var fieldName = 'adviser[magazine_list]';
15 var initialTags = gon.magazine_tags;
16
17 var i, len, ref, results, tag;
18 $(tagSelector).tagit({
19 fieldName: fieldName,
20 singleField: true
21 });
22 if (initialTags != null){
23 ref = initialTags;
24 results = [];
25 for (i = 0, len = ref.length; i < len; i++) {
26 tag = ref[i];
27 results.push($(tagSelector).tagit('createTag', tag));
28 }
29 return results;
30 }
31 };
32
33 // 関数にまとめる
34 var initializeBrandTags = function(){
35 var tagSelector = '#brand-tags';
36 var fieldName = 'adviser[brand_list]';
37 var initialTags = gon.brand_tags;
38
39 var i, len, ref, results, tag;
40 $(tagSelector).tagit({
41 fieldName: fieldName,
42 singleField: true
43 });
44
45 if (initialTags != null){
46 ref = initialTags;
47 results = [];
48 for (i = 0, len = ref.length; i < len; i++) {
49 tag = ref[i];
50 results.push($(tagSelector).tagit('createTag', tag));
51 }
52 return results;
53 }
54 };
55
56 // 実行
57 var magazineTags = initializeMagazineTags();
58 var brandTags = initializeBrandTags();
59});
2つの関数の後半が同じ物になりました。
動作が変わっていないか確認してください。
javascript
1$(document).on('turbolinks:load', function() {
2
3 $('.thumb li').click(function() {
4 var class_name, num;
5 class_name = $(this).attr('class');
6 num = class_name.slice(5);
7 $('.main li').hide();
8 $('.item' + num).fadeIn();
9 });
10
11 // 共通する部分を関数にまとめる
12 var initializeTags = function(tagSelector, fieldName, initialTags){
13 var i, len, ref, results, tag;
14 $(tagSelector).tagit({
15 fieldName: fieldName,
16 singleField: true
17 });
18 if (initialTags != null){
19 ref = initialTags;
20 results = [];
21 for (i = 0, len = ref.length; i < len; i++) {
22 tag = ref[i];
23 results.push($(tagSelector).tagit('createTag', tag));
24 }
25 return results;
26 }
27 };
28
29 // 関数にまとめる
30 var initializeMagazineTags = function(){
31 var tagSelector = '#magazine-tags';
32 var fieldName = 'adviser[magazine_list]';
33 var initialTags = gon.magazine_tags;
34
35 // 関数呼び出しに変更する
36 return initializeTags(tagSelector, fieldName, initialTags);
37 };
38
39 // 関数にまとめる
40 var initializeBrandTags = function(){
41 var tagSelector = '#brand-tags';
42 var fieldName = 'adviser[brand_list]';
43 var initialTags = gon.brand_tags;
44
45 // 関数呼び出しに変更する
46 return initializeTags(tagSelector, fieldName, initialTags);
47 };
48
49 // 実行
50 var magazineTags = initializeMagazineTags();
51 var brandTags = initializeBrandTags();
52});
冗長系はなくなったと思います。
動作が変わっていないか確認してください。
initializeMagazineTagsとinitializeBrandTagsはもはや何もしていません。
共通関数を直接呼び出すように変更します。
javascript
1$(document).on('turbolinks:load', function() {
2
3 $('.thumb li').click(function() {
4 var class_name, num;
5 class_name = $(this).attr('class');
6 num = class_name.slice(5);
7 $('.main li').hide();
8 $('.item' + num).fadeIn();
9 });
10
11 // 共通する部分を関数にまとめる
12 var initializeTags = function(tagSelector, fieldName, initialTags){
13 var i, len, ref, results, tag;
14 $(tagSelector).tagit({
15 fieldName: fieldName,
16 singleField: true
17 });
18 if (initialTags != null){
19 ref = initialTags;
20 results = [];
21 for (i = 0, len = ref.length; i < len; i++) {
22 tag = ref[i];
23 results.push($(tagSelector).tagit('createTag', tag));
24 }
25 return results;
26 }
27 };
28
29 // マガジンのタグを初期化する
30 var magazineTags = initializeTags(
31 '#magazine-tags', 'adviser[magazine_list]', gon.magazine_tags);
32 // ブランドのタグを初期化する
33 var brandTags = initializeTags(
34 '#brand-tags', 'adviser[brand_list]', gon.brand_tags);
35});
共通関数を直接呼び出すように変更します。
冗長化を減らすというならこのような手順がよいと思います。
この先の改善点としては、initializeTagsは3つのことを行っていて、一つの関数にまとめていいのかという問題があります。つまり、保存先のfield設定、タグの初期値の設定、現在のタグの取得です。
保存先のタグのfiled設定に関してはもともと1行なので、共通の関数の中に隠す必要があるか疑問です。
現在のタグの取得も本来の目的外で分けたほうがわかりやすいかもしれません。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/09 23:26