グローバル変数を使用しない設計方法

Question

###前提・実現したいこと
今、下記のようなグローバル変数が定義されているとします。
このグローバル変数はプログラム中のいたるところで使用されます。
（例えばボタンがクリックされたらクリックされたボタンに応じてグローバル変数の値を書き換えたり、これらの値を使って計算したり、色々です。）
実現したいこととしましては、これらのグローバル変数を使わないような設計にしたいということです。

最近Backbone.jsを勉強し始め導入を試みているのですが、グローバル変数があらゆるViewのメソッド内で乱用されています。
これでは、疎結合化を図るBackbone.jsの理念（？）からは大きく外れてしまうのではないかと懸念しています。
例の場合だと、ファイルを分割したときにglobal_1が様々なファイルをまたいでいるので、保守性のことなどを考えるとこれではいけませんよね…

Backbone.jsに限った話ではないですが、様々な処理で変数を共有させたい場合、どのような設計方法がベストなのでしょうか？
あまり具体例がなくぼんやりした質問ですが何かご回答を頂けると助かります。

###例

global_1;
global_2;
global_3;

###追記
より具体的な例で説明します。

<li>をクリックしたらその<li>内のテキストを取得して、<button>がクリックされたら先ほど取得したテキストを表示する。 という処理をjQueryだけでは以下のように記述しました。

###HTML

   <div class="demo">
      <ul>
        <li id="list1">list1</li>
        <li id="list2">list2</li>
        <li id="list3">list3</li>
      </ul>
      <button type="button" id="button">Button</button>
    </div>

###jQueryでの記述

$(function(){
  var listText;

  $('.demo li').click(function(){
    listText = $(this).text();
  });

  $('#button').click(function(){
    console.log(listText);
  });
});

これを私なりにBackbone.jsを使って書き換えると、以下のようなコードになりました。

###テンプレート

<script type="text/template" id="text-template">
  <%- text %>
</script>

###Backbone.jsでの記述

var listText;

//liのModel
var LiModel = Backbone.Model.extend({
  defaults: {
    text: 'list1'
  }
});

//liのView
var LiView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#text-template').html()),
  events: {
    'click': 'getText'
  },
  getText: function(){
    listText = this.model.get('text');
  },
  render: function(){
    var template = this.template(this.model.toJSON());
    this.$el.html(template);
    return this;
  }
});

//ボタンのView
var ButtonView = Backbone.View.extend({
  el: '#button',
  events: {
    'click': 'showText'
  },
  showText: function(){
    console.log(listText);
  }
});

var liModel = new LiModel();
var liView = new LiView({model: liModel});
$('.demo').append(view.render().el);
var buttonView = new ButtonView();

このような処理をBackbone.js的に実装しようとしても、「listText」というグローバル変数を記述するような方法でコーディングしてしまいます。
この程度ならlistTextが存在しても何の問題もないのですが、実装したい機能としてはもっと複雑で、listTextが様々な処理に絡み、listTextのような変数もかなり増えてくることが予想されます。

Backbone.jsに関係なく、クラス間でうまいこと変数を受け渡しできればいいのかなーと思うのですが、良い実装方法が思い浮かびません…

###追記2
liのViewがおかしかったので少し修正しました

Answer 1

サンプルコードではよくわからないのですが、書き換えがあるグローバル変数は良いものではありません。
バグを作りやすくし、デバックをやりづらくします。

また、通常はグローバル変数は極力使わない方法で作られているので、多用されている環境というのは珍しいと考えていいです。

逆に考えると、世間のほかのソースコードを見ればどのように組めばよいか書いてあるということになります。

ということで、Backbone.jsの本やwebで特にサイトを実際に作ってみるようなものを一通り自分の環境で作ってみましょう。また、さらに２つ３つレベルが違うものに挑戦すればだいたいどのようなパターンが存在するかつかめるようになると思います。

Answer 2

一般的に、グローバル変数を使わない書き方をするということは、その変数は何らかのクラスオブジェクトが保持し、必要になったらそのオブジェクトから値をGetしてくることになります。変更が必要になったらSetですね。（ゲッター・セッター）
セッターには範囲チェックを入れたりもできるので、より安全に作れるということになります。
ただし、設計の初期段階から、そういうことを意識し注意しながら設計する必要があります。途中からグローバル変数をなくそうとすると、影響度が大きく中々大変な作業になります。
例えば、Commonクラスのようなものを作成してこのクラスはシングルトンにしておき、複数のオブジェクトから参照や変更が必要な変数はこのCommonクラスが全て保持するような書き方をします。
ただ、Commonクラスの中に保持する変数のスコープはプラベートにしておかないと、クラス変数にした意味がありません。

グローバル変数は、全てではありませんが、設計やインターフェースを見直せば無くせるものも多いはずです。

Answer 3

複数の機能間でデータを共有する方法は handleEvent, data-*属性、カスタムイベント、WeakMap 等があります。

handleEvent

<div class="demo">
  <ul>
    <li id="list1">list1</li>
    <li id="list2">list2</li>
    <li id="list3">list3</li>
  </ul>
  <button type="button" id="button">Button</button>
</div>
<script>
'use strict';
document.querySelector('.demo').addEventListener('click', {
  text: '',
  handleEvent: function handleClick (event) {
    var target = event.target;
   
    if (target.tagName === 'LI') {
      this.text = target.firstChild.data;
    } else if (target.id === 'button') {
      console.log(this.text);
    }
  }
}, false);
</script>

data-*属性

要追記。

WeakMap

要追記。

カスタムイベント

要追記。

Re: kerokero335 さん

Answer 4

backbone.js を利用したことがないので、まちがっていたらごめんなさい。
backbone.js は MVC のフレームワークなので、編集中の値などは model に保持するのが正しいのではないでしょうか。 model内で自分の好きなように構造化し、その構造は view の構造と独立に設計できることが MVC のメリットだと思います。 MVC を使っている以上、グローバル変数は不要なのではないでしょうか？

それで、

getText: function(){
  listText = this.model.get('text');
},

このコーディングはやろうとしていることとあっていますか？
li をクリックしたらそのテキストの値を model にセットするべきなのでは？
click イベントの場合、引数に要素を受け取れるのではないでしょうか。それを this.model.set で格納し、button のイベントでは、そのモデルの値を this.model.get で参照すればよいのではないでしょうか。

Answer 5

色々なケースがありますのでこれが正解！と言うのはありませんが、一般にはグローバル変数は悪とされてますね。
個人的にはグローバル変数で困った事はほとんどありませんが使わないようにしてます。
で、どのような？という、問いに対しては、メイン的な処理でローカル宣言して、パラメータで渡す。と言うのが、昔の一般的な考えかと思います。

Answer 6

＞このグローバル変数はプログラム中のいたるところで使用されます。

のだからグローバル変数を利用するのが正しいと思いますが
どうしても気になるなら、
所詮javascriptのグローバル変数はユーザーによって改ざんされる可能性はあるので
クッキーやinput type=hiddenなどでタグのvalueとして保持し、都度参照・更新すれば
よいかもしれません。