本文主要是介绍前端组件化(一) 函数闭包 简单版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
实现功能: 输入几个字, 就实时显示几个字
截图:
作用域隔离
为了使整个代码的作用域清晰明了, 封装成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， 并加上了一点个人看法。希望可以抛砖引玉。
这篇关于前端组件化(一) 函数闭包 简单版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
