markdown Javascript ES5模块设置

Posted 2021-05-06

Quick template for a ES5 module
```javascript
;(function () {
	if( !window.quotecalc ){
		window.quotecalc = {};
	}
	
	var self = window.quotecalc;
	
	
	/**
	 * Get "Location" value
	 * 
	 * @type Element.value
	 */
	self.location = document.getElementById("bmq-location").value;
	
	
	/**
	 * Get "Type of stay" value
	 * 
	 * @type Element.value
	 */
	self.typeOfStay = document.getElementById("bmq-type-of-stay").value;
	
	
	/**
	 * Get "Length of vessel" value
	 * 
	 * @type Element.value
	 */
	self.length = document.getElementById("bmq-quote-length").value;
	
	
	/**
	 * Get "Number of nights" value
	 * 
	 * @type Element.value
	 */
	self.nights = document.getElementById("bmq-no-of-nights").value;
	
	
	/**
	 * User information
	 */
	self.userInfo = document.getElementById("bmq-userInfo");
	
	
	/**
	 * "Total: " label
	 */
	self.totalLabel = document.getElementById("update-total");
	
	
	/**
	 * User errors
	 */
	self.userErrors = [];


	/**
	 * Grab overnight rate
	 * 
	 * @returns {Number}
	 */
	self.getOvernightRate = function () {
		switch (self.location) {
			case "marina":
				return 2.20;
				break;

			case "mid-river-pontoon":
				return 1.50;
				break;

			case "river":
				return 1.20;
				break;
		}
	};
	
	
	/**
	 * Grab short stay rate
	 * 
	 * @returns {Number}
	 */
	self.getShortStayRate = function () {
		switch (self.location) {
			case "marina":
				return 1.00;
				break;

			case "mid-river-pontoon":
				return 0.75;
				break;

			case "river":
				return 0.50;
				break;
		}
	};
	
	
	/**
	 * Update the "Type of stay" value 
	 */
	self.updateTypeOfStay = function () {
		self.typeOfStay = document.getElementById("bmq-type-of-stay").value;
		
		// If overnight, then enable "Number of nights" field, else disable it
		switch (self.typeOfStay) {
			case "overnight":
				self.enableNightsField();
				break;
				
			case "short-stay":
				self.disableNightsField();
				break;
		}
	};
	
	
	/**
	 * Update the "Location" value 
	 */
	self.updateLocation = function () {
		self.location = document.getElementById("bmq-location").value;
	};
	
	
	/**
	 * Update the "Length of vessel" value 
	 */
	self.updateLength = function () {
		self.length = document.getElementById("bmq-quote-length").value;
	};
							
	
	/**
	 * Update the "Number of nights" value 
	 */
	self.updateNights = function () {
		self.nights = document.getElementById("bmq-no-of-nights").value;
		console.log("Nights" + self.nights);
	};
	
	
	/**
	 * Disable "Number of nights" field
	 */
	self.disableNightsField = function () {
		var field = document.getElementById("bmq-no-of-nights");
		field.disabled = true;
		field.value = null;
	};
	
	
	/**
	 * Enable "Number of nights" field
	 */
	self.enableNightsField = function () {
		console.log("enable nights");
		document.getElementById("bmq-no-of-nights").disabled = false;
	};
	
	
	/**
	 * Update user information
	 */
	self.updateUserInfo = function (message) {
		self.userInfo.style.display = "block";
		self.userInfo.innerHTML = message;
	};


	/**
	 * Grab the total depending on the type of stay selection
	 * and return to two decimal places
	 * 
	 * @returns {Number}
	 */
	self.getTotal = function () {
		switch (self.typeOfStay) {
			case "overnight":
				return (self.getOvernightRate() * self.length * self.nights).toFixed(2);
				break;

			case "short-stay":
				return (self.getShortStayRate() * self.length).toFixed(2);
				break;
		}
	};
	
	
	/**
	 * Validate 
	 */
	self.validate = function () {
		self.userErrors = [];
		
		if (self.length === "" ){
			self.userErrors.push("Length field is empty");
		}

		if (self.nights === "" && self.typeOfStay === "overnight"){
			self.userErrors.push("Nights field is empty");
		}	
		
		// If errors, display them, else display total
		if (self.userErrors.length){
			alert(self.userErrors.join("\n"));
		} else {
			self.totalLabel.innerHTML = self.getTotal(); 
		}
	};


	/**
	 * First port of call
	 */
	self.construct = function () {
		self.updateTypeOfStay();
		self.updateNights();
		self.binds();
	};


	/**
	 * User events
	 */
	self.binds = function () {
		// When select is changed, refresh the value
		document.getElementById("bmq-type-of-stay").addEventListener("input", function () {
			self.updateTypeOfStay();
		});
		
		// When select is changed, refresh the value
		document.getElementById("bmq-no-of-nights").addEventListener("input", function () {
			self.updateNights();
		});
		
		// When select is changed, refresh the value
		document.getElementById("bmq-location").addEventListener("input", function () {
			self.updateLocation();
		});
		
		// When select is changed, refresh the value
		document.getElementById("bmq-quote-length").addEventListener("input", function () {
			self.updateLength();
			
		});
		
		// Listen for "Calculate" button click event
		document.getElementById("bmq-calculate").addEventListener("click", function () {
			self.userInfo.style.display = "none";
			self.validate();
		});
	};


	self.construct();
})();
```