

下記のコードで、 form.fileSelect()はどんな、意味かをどなた様かご教示頂けますでしょうか。  
このような関数ないかをしらべたが特になく、自己定義関数にしても、functionがなく、他で使用されている様子もありません。小括弧に中括弧を挟むのも初めて見ました。  
そもそも、関数でないとしたら、なにかもわからずに、記法自体調べても検討がつかなかったため、お願い申し上げます。

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      </head>
    <body>
      <form action="Z_confirm.php" method="post" enctype="multipart/form-data">
    
      <label for="files" class="fileupImg"><i class="plus icon"></i>ファイルを選択 
      <input type="file" id="files" style="display: none" value="2097152" name="file" multiple />
    </label>
        </div>
        <figure>
        <output id="list"></output>
        </figure>
        <div class="fileInfo"></div>
    
      <button type="button" name="button" id="delete" style="height:20px;">X</button>
    <br>
    <br>
      <input class="submit step-button" type="submit" value="登録する">
    </form>
    
    
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <script type="text/javascript">
          jQuery(function()
          {
              // セットアップ
              var obj = form.fileSelect({
                input : '#files',
                list : '#list',
                deleteBtn : '#delete',
                thumbnail : { width : 150, class : 'thumbnail' },
                //複数のファイルを許可するか？
                multipleFile : true
              });
    
              // ファイルをセットした時に発火するイベント 引数に選択したファイルが返ってくる
              obj.OnSelectFile(function(file)
              {
                console.log(file);
    
                //ファイルが存在するか？
                console.log(obj.hasFile());
    
                //すべてのファイルを取得 配列
                console.log(obj.getFiles());
              });
    
              //すべてのファイルをリセット
              obj.reset();
    
          });
        </script>
    
        <script>
        var form;
        (function(g,$)
        {
          g.fileSelect = function(setting)
          {
            var el = {}, data = {};
    
            var init = function()
            {
              el.input = $(setting.input);
              el.list = $(setting.list);
              el.deleteBtn = $(setting.deleteBtn);
    
              data.files = [];
    
              setUp();
            };
    
            var setUp = function()
            {
              el.input.on('change', handleFileSelect);
              el.deleteBtn.on('click', deleteFile);
            };
    
            var hasFile = function() { return data.files.length > 0; }
            var getFiles = function() { return data.files; };
    
            var handleFileSelect = function(e)
            {
                var file = e.target.files[0],
                    reader = new FileReader();
    
                if(file.type.indexOf("image") < 0) return false;
    
                reader.onload = (function(file)
                {
                  return function(e)
                  {
                    if(!setting.multipleFile) reset();
    
                    file.src = e.target.result;
                    data.files.push(file);
                    var spn = $('<span>');
                    spn.append($('<img>').attr({
                              src: file.src,
                              width: setting.thumbnail.width,
                              class: setting.thumbnail.class,
                              title: file.name
                          }));
    
                    el.list.append(spn);
    
                    el.input.trigger( "OnSelectFile", file );
    
                    reader.va
                  };
                })(file);
    
                reader.readAsDataURL(file);
            };
    
            var deleteVal = function()
            {
              el.input.prop('value','');
            };
    
            var deleteFile = function()
            {
              el.list.html('');
              data.files = [];
              deleteVal();
            };
    
            var OnSelectFile = function(fn)
            {
              el.input.on('OnSelectFile', function(e, f){
                fn(f);
              });
            }
    
            var reset = function(){
              data.files = [];
              el.list.html('');
              deleteVal();
            };
    
            init();
    
            return {
              OnSelectFile : OnSelectFile,
              hasFile : hasFile,
              getFiles : getFiles,
              reset : reset
            }
          };
        }(form || (form = {}), jQuery));
        </scrip
    
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      </head>
    <body>
      <form action="Z_confirm.php" method="post" enctype="multipart/form-data">
    
      <label for="files" class="fileupImg"><i class="plus icon"></i>ファイルを選択 
      <input type="file" id="files" style="display: none" value="2097152" name="file" multiple />
    </label>
        </div>
        <figure>
        <output id="list"></output>
        </figure>
        <div class="fileInfo"></div>
    
      <button type="button" name="button" id="delete" style="height:20px;">X</button>
    <br>
    <br>
      <input class="submit step-button" type="submit" value="登録する">
    </form>
    
    
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <script type="text/javascript">
          jQuery(function()
          {
              // セットアップ
              var obj = form.fileSelect({
                input : '#files',
                list : '#list',
                deleteBtn : '#delete',
                thumbnail : { width : 150, class : 'thumbnail' },
                //複数のファイルを許可するか？
                multipleFile : true
              });
    
              // ファイルをセットした時に発火するイベント 引数に選択したファイルが返ってくる
              obj.OnSelectFile(function(file)
              {
                console.log(file);
    
                //ファイルが存在するか？
                console.log(obj.hasFile());
    
                //すべてのファイルを取得 配列
                console.log(obj.getFiles());
              });
    
              //すべてのファイルをリセット
              obj.reset();
    
          });
        </script>
    
        <script>
        var form;
        (function(g,$)
        {
          g.fileSelect = function(setting)
          {
            var el = {}, data = {};
    
            var init = function()
            {
              el.input = $(setting.input);
              el.list = $(setting.list);
              el.deleteBtn = $(setting.deleteBtn);
    
              data.files = [];
    
              setUp();
            };
    
            var setUp = function()
            {
              el.input.on('change', handleFileSelect);
              el.deleteBtn.on('click', deleteFile);
            };
    
            var hasFile = function() { return data.files.length > 0; }
            var getFiles = function() { return data.files; };
    
            var handleFileSelect = function(e)
            {
                var file = e.target.files[0],
                    reader = new FileReader();
    
                if(file.type.indexOf("image") < 0) return false;
    
                reader.onload = (function(file)
                {
                  return function(e)
                  {
                    if(!setting.multipleFile) reset();
    
                    file.src = e.target.result;
                    data.files.push(file);
                    var spn = $('<span>');
                    spn.append($('<img>').attr({
                              src: file.src,
                              width: setting.thumbnail.width,
                              class: setting.thumbnail.class,
                              title: file.name
                          }));
    
                    el.list.append(spn);
    
                    el.input.trigger( "OnSelectFile", file );
    
                    reader.va
                  };
                })(file);
    
                reader.readAsDataURL(file);
            };
    
            var deleteVal = function()
            {
              el.input.prop('value','');
            };
    
            var deleteFile = function()
            {
              el.list.html('');
              data.files = [];
              deleteVal();
            };
    
            var OnSelectFile = function(fn)
            {
              el.input.on('OnSelectFile', function(e, f){
                fn(f);
              });
            }
    
            var reset = function(){
              data.files = [];
              el.list.html('');
              deleteVal();
            };
    
            init();
    
            return {
              OnSelectFile : OnSelectFile,
              hasFile : hasFile,
              getFiles : getFiles,
              reset : reset
            }
          };
        }(form || (form = {}), jQuery));
        </script>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2017-08-18T04:19:50.973
37299
2017-08-18T12:58:18.053
2017-08-18T12:58:18.053
5044
24931
question
javascript
form.fileSelect()の意味がわかりません

[code]

    var args = {
      input : '#files',
      list : '#list',
      deleteBtn : '#delete',
      thumbnail : { width : 150, class : 'thumbnail' },
      //複数のファイルを許可するか？
      multipleFile : true
    };
    var obj = form.fileSelect(args);
    
[/code]

上記のように書き直すと理解しやすいかと思います。  
`form.fileSelect`という関数に、オブジェクトを引数として渡している処理です。  
`form.fileSelect`はその次の`<script>`タグで

[code]

    var form;
    (function(g,$)
    {
      g.fileSelect = function(setting)
      {
        (省略)
      };
    }(form || (form = {}), jQuery));
    
[/code]

と定義されている関数です。


CC BY-SA 3.0
2017-08-18T05:10:04.207
37300
2017-08-18T05:10:04.207
20272
37299
answer