现在有个需求,我要把
<h1 id="main">XX</h1>
改变这个节点的值并给他添加点击动作(仅为测试用),这里我写怎么把这个功能封装成js类
我们的结果是:
<script src="js/test/test.js"></script>
<script type="text/javascript">
var t = new test({
object:jQuery("#main"),
text:"我要修改的内容",
click:function(){
alert("弹出内容");
}
});
t.init();
</script>
引入外部Js,创建这个对象,执行的init方法执行上面的动作。
这个例子包含JS类的基本内容,是个很简单的功能,因为我们这里不是要讲逻辑,而是怎么封装。
此处贴出test.js的内容
var test = function(data){
// 初始化参数
var $main = data.object;//定义时添加VAR表示是私有属性
var text=data.text;
var $fClick = data.click;
// 方法前加VAR表示私有方法
var changeText = function(text){
$main.html(text);
};
// 方法前加this表示公共方法
this.init = function(){
changeText(text);
$main.click(function(){
if(typeof($fClick)=="function"){
$fClick();
}
});
}
};
注意除非init这种方法需要外部调用,不然一律写成私有方法,避免与全局方法冲突。
---------------------------------------------------------------------------------------------------------------
现在发送在CSDN上的文章都能在手机端查看啦,走路上班、闲暇之余可以看看手机,共勉共进!