JQuery面向对象写法

前端

发布日期: 2018-04-19

文章字数: 336

阅读时长: 1 分

书写Jquery代码时，普通的面向过程的写法可以实现功能，但不利于后期维护。现介绍面向对象的写法。

<html>
    <head>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <button data-event="list">列表</button>
        <button data-event="search" data-name="大班">搜索</button>
        <button data-event="add">添加</button>
        <button data-event="update">修改</button>
        <button data-event="del">删除</button>
    </body>
</<html>
    <head>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <button data-event="list">列表</button>
        <button data-event="search" data-name="大班">搜索</button>
        <button data-event="add">添加</button>
        <button data-event="update">修改</button>
        <button data-event="del">删除</button>
    </body>
</html>

<script>
var clickAct = {
	btn: $('button'),
	init: function(){
		var that = this;
		this.btn.click(function(){
			var func = $(this).attr('data-event');
			that[func]($(this).attr('data-name'));
		})
	},
	
	list: function(param){
		console.log('1');
	},
	
	search: function(param){
		console.log(param);
		
	},
	
	add: function(param){
		console.log('3');
	},
	
	update: function(param){
		console.log('4');
	},
	
	del: function(param){
		console.log('5');
	}
}

clickAct.init();
</<script>
var clickAct = {
	btn: $('button'),
	init: function(){
		var that = this;
		this.btn.click(function(){
			var func = $(this).attr('data-event');
			that[func]($(this).attr('data-name'));
		})
	},
	
	list: function(param){
		console.log('1');
	},
	
	search: function(param){
		console.log(param);
		
	},
	
	add: function(param){
		console.log('3');
	},
	
	update: function(param){
		console.log('4');
	},
	
	del: function(param){
		console.log('5');
	}
}

clickAct.init();
</script>