master

分支 (1)

管理

管理

master

JavaScriptLearning
/
闭包与模块化.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let module_status = (function(){
				let status = {
					number:0,
					color:null
				}
				let get = function(prop){
					return status[prop]
				}
				let set = function(prop,value){
					status[prop] = value
				}
				return {
					get,
					set
				}
			})()
			let module_color = (function(){
				let state = module_status
				let colors = ['orange','#ccc','pink']
				function render(){
					let color = colors[state.get('number')%3]
					document.body.style.backgroundColor = color
				}
				return {
					render
				}
			})()
			let module_context = (function(){
				let state = module_status
				function render(){
					document.body.innerHTML = 'This Number is '+state.get('number')
				}
				return{
					render
				}
			})()
			let module_main = (function(){
				let state = module_status
				let color = module_color
				let context = module_context
				setInterval(function(){
					let newNumber = state.get('number')+1
					state.set('number',newNumber)
					color.render()
					context.render()
				},1000)
			})()
		</script>
	</body>
</html>