How to apply PHP variables into a JS module. Old and New Way ...

MyJSFx.js

/**

 *
 * @param String RootSelector - e.g. MyForm as in <form id="MyForm"> or <div id="MyDiv">
 *
 */


var MyJSFx = function(RootSelector) {

	/**
	 * holds all the functions and variables
	 *
	 */
	var CoreMethodsAndVariablesObject = {

		/**
		 * @var Boolean
		 */
		debug: false,

		/**
		 * @var String
		 */
		mySelector: ".barClass",

		/**
		 * @var String
		 */
		formMessage: ".barClass",
		
		/**
		 * @var string
		 */
		rootjQueryObject: RootSelector,

		/**
		 * set up
		 *
		 */
		init: function(){
			CoreMethodsAndVariablesObject.rootjQueryObject = jQuery("#" + CoreMethodsAndVariablesObject.rootSelector);
			CoreMethodsAndVariablesObject.rootjQueryObject.find("li").addClass("boo");
			//do something, attach something, etc...
		},

		/**
		 *
		 * @return String
		 */
		myFunction: function(){
			return "hello";
		},

		/**
		 * returns a list of items selected
		 * that are not empty.
		 * @return Array
		 */
		myOtherFunction: function(){
			//do something else
		}
	}

	/********************
	 * Public API
	 *******************/
	return {

		/**
		 * get a variable from CoreMethodsAndVariablesObject
		 * @param String variableName
		 * @return this
		 */
		getVar: function( variableName ) {
			if ( CoreMethodsAndVariablesObject.hasOwnProperty( variableName ) ) {
				return CoreMethodsAndVariablesObject[ variableName ];
			}
		},

		/**
		 * change a variable in CoreMethodsAndVariablesObject
		 * @param String variableName
		 * @param Mixed value
		 * @return this
		 */
		setVar: function(variableName, value) {
			CoreMethodsAndVariablesObject[variableName] = value;
			return this;
		},

		/**
		 * start up method
		 * @return this
		 */
		init: function(){
			CoreMethodsAndVariablesObject.init();
			return this;
		}

	}

}

MyJSFx_V2.js

/**

 *
 * @param String RootSelector - e.g. MyForm as in <form id="MyForm"> or <div id="MyDiv">
 *
 */

if(typof MyJSFxOptions !== "undefined") {
  
  var MyJSFx = function(RootSelector) {
  
  	/**
  	 * holds all the functions and variables
  	 *
  	 */
  	var CoreMethodsAndVariablesObject = {
  
  		/**
  		 * @var Boolean
  		 */
  		debug: false,
  
  		/**
  		 * @var String
  		 */
  		mySelector: ".barClass",
  
  		/**
  		 * @var String
  		 */
  		formMessage: ".barClass",
  		
  		/**
  		 * @var string
  		 */
  		rootjQueryObject: RootSelector,
  
  		/**
  		 * set up
  		 *
  		 */
  		init: function(){
  			CoreMethodsAndVariablesObject.rootjQueryObject = jQuery("#" + CoreMethodsAndVariablesObject.rootSelector);
  			CoreMethodsAndVariablesObject.rootjQueryObject.find("li").addClass("boo");
  			//do something, attach something, etc...
  		},
  
  		/**
  		 *
  		 * @return String
  		 */
  		myFunction: function(){
  			return "hello";
  		},
  
  		/**
  		 * returns a list of items selected
  		 * that are not empty.
  		 * @return Array
  		 */
  		myOtherFunction: function(){
  			//do something else
  		}
  	}
  
  	/********************
  	 * Public API
  	 *******************/
  	return {
  
  		/**
  		 * get a variable from CoreMethodsAndVariablesObject
  		 * @param String variableName
  		 * @return this
  		 */
  		getVar: function( variableName ) {
  			if ( CoreMethodsAndVariablesObject.hasOwnProperty( variableName ) ) {
  				return CoreMethodsAndVariablesObject[ variableName ];
  			}
  		},
  
  		/**
  		 * change a variable in CoreMethodsAndVariablesObject
  		 * @param String variableName
  		 * @param Mixed value
  		 * @return this
  		 */
  		setVar: function(variableName, value) {
  			CoreMethodsAndVariablesObject[variableName] = value;
  			return this;
  		},
  
  		/**
  		 * start up method
  		 * @return this
  		 */
  		init: function(){
  			CoreMethodsAndVariablesObject.init();
  			return this;
  		}
  
  	}
  
  }

  jQuery(document).ready(
    function() {
      for(var i = 0; i < MyJSFxOptions.length; i++) {
        var obj = MyJSFxOptions[i];
        var MyObject = new MyJSFx('MyForm')
          .setVar('mySelector', obj.mySelector)
          .setVar('isThirteen', obj.isThirteen)
          .setVar('formMessage', obj.formMessage)
          .init();        
        
      }
    }
  );

}

Page.php

<?php
class Page extends SiteTree 
{
  private static $db = array(
    "MyFormMessage" => "Varchar"  
  );
  //...
}

class Page_Controller extends ContentController
{
  function init()
  {
    parent::init();
    Requirements::javascript("mymodules/javascript/MyJSFx.js");
    Requirements::customScript("
      jQuery(document).ready(
        function() {
          var MyObject = new MyJSFx('MyForm')
            .setVar('mySelector', '.foo')
            .setVar('isThirteen', function(num){ return 13 === num ? true : false; })
            .setVar('formMessage', '".Convert::raw2sql($this->MyFormMessage)."')
            .init();",
        }
      )
      
      "MyObjectCustomScript"
    );    
  }
}

Page_V2.php

<?php
class Page extends SiteTree 
{
  private static $db = array(
    "MyFormMessage" => "Varchar"  
  );
  //...
}

class Page_Controller extends ContentController
{
  function init()
  {
    parent::init();
    //module is now included via webpack
    //Requirements::javascript("mymodules/javascript/MyJSFx.js");
    Requirements::customScript("
      ;if(typeof MyJSFxOptions === "undefined") {  
        MyJSFxOptions = [];
      }
      MyJSFxOptions.push(
        {
          mySelector: foo,
          isThirteen: function(num){ return 13 === num ? true : false; },
          formMessage: '".Convert::raw2js($this->MyFormMessage)."'
        }
      );
    "); 
  }
}