前端组件化(一) 函数闭包简单版

最新推荐文章于 2024-09-18 18:51:38 发布

JohnnyLiao_WJ

最新推荐文章于 2024-09-18 18:51:38 发布

阅读量299

点赞数

分类专栏： jquery 文章标签：组件化 JavaScript

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现功能: 输入几个字, 就实时显示几个字
截图:
单向绑定
作用域隔离
为了使整个代码的作用域清晰明了, 封装成textCont 函数

<!DOCTYPE HTML>
<html>
	<head>
		<title>单通道数据流</title>

	</head>
	<body>
		<input type="text" id="J_inp">
		<span id="J_text"></span>
	</body>
	<script src="./jquery.js"></script>
	<script>
		//初始版本 函数闭包的写法
		var textCont = (function(){
			//绑定 输入事件
			var _bind = function(that){
				that.input.on('input', function(e){
					that.render()
				})
			}
		//获得输入框的值得长度
			var _getNum = function(that){
				return that.input.val().length
			}

			var  textContFun= function(){
			}
			textContFun.prototype.init = function(config){
				this.input = $(config.id)
				_bind(this)
				return this;
			}
			//渲染文字
			textContFun.prototype.render = function(){
				var num = _getNum(this)
				if (num == 0){
					$('#J_text').text('0个字')
				}else
					$('#J_text').text(num + '个字')
			}
			  //返回构造函数
  			return textContFun;
		})()

		$(function(){
			 //初始化
			new textCont().init({id: '#J_inp'}).render()

		})
	</script>
	
</html>

文章转载至http://caibaojian.com/javascript-module-2.html，并加上了一点个人看法。希望可以抛砖引玉。