js面向对象实践

最新推荐文章于 2022-03-12 23:08:20 发布
最新推荐文章于 2022-03-12 23:08:20 发布
阅读量209 收藏
点赞数
分类专栏： javascript 文章标签： js面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzxomg/article/details/94728600
版权

没有用class新语法

demo

<html>
<script>
var Book = (function(){
    // 私有静态属性
    var numOfBook = 0;

    // 构造函数
    var construct = function(argument){
        // 私有属性
        var name;

		// 公共方法
        this.setName = function(name){
        	this.name=name;
        	return this;
        };
        this.getName = function(){
        	return this.name;
        };
        
        // 私有方法
        function checkName(name){
        	// ...
        }
        
        numOfBook++;
    };

    // 公共静态方法
    construct.getNumOfBook = function(){
    	return numOfBook;
    };

    // 返回构造函数
    return construct;
})();

// 公有静态方法
Book.display = function(){
	// ...
};

// 调用。。。
var book01 = new Book();
var book02 = new Book();
book01.setName("天书");
console.log(book01.getName()); // 输出 天书
console.log(Book.getNumOfBook()); // 输出 2
</script>
</html>

实践 后台管理列表数据页面 查询功能–多排序字段

GET http://localhost:8998/user?pageNum=1&pageSize=10&sortField=username,age&isAsc=true,false
排序字段：sortField，是否升序：isAsc
这两个字段的个数和顺序要对应

<html>
<script>
var LinkedMap = (function(){
	"use strict";
	// 静态私有属性
	var version = "1.0.0";
	
	// 构造函数
	var construct = function(argument){
	    // 公共属性
	    this.version =version;
	    // 私有属性
	    var fieldArr= new Array;
	    // 私有属性
	    var isAscArr= new Array;
	
	    // 私有方法
	    function serialize(o){
	        return o.toString();
	    }
	
	    // 公共方法
	    this.put = put;
	    function put (field, isAsc){
	        if(arguments.length !=put.length){console.error("arguments length Mismatch...");  return false;}
	        if(typeof field != 'string'){
	            console.error(" typeMismatch......"+field+" must string");
	            return false;
	        }else if(typeof isAsc != 'boolean'){
	            console.error(" typeMismatch......"+isAsc+" must boolean");
	            return false;
	        }
	        fieldArr.push(field);
	        isAscArr.push(isAsc);
	        return this;
	    };
	    
	    // 公共方法
	    this.getSortField = function(){
	        return serialize(fieldArr);
	    }
	    this.getIsAsc = function(){
	        return serialize(isAscArr);
	    }
	
	    // 公共方法 重写toString方法
	    this.toString = function() {
	        if(0===fieldArr.length || 0===isAscArr.length) return "";
	        return "sortField="+serialize(fieldArr)+"&isAsc="+serialize(isAscArr);
	    }
	
	};
	
	// 公共方法 重写toString方法
	// construct.prototype.toString = function() {
	//     return "这里无法访问到私有属性。。。";
	// }
	// 公共属性
	construct.prototype.name="linkedmap";
	
	// 返回构造函数
	return construct;
})();

// 调用
var lmap = new LinkedMap();
// username 升序
lmap.put('username',true);
// username 降序
lmap.put('age',false);
// 这个没用，写着玩
lmap.version // 输出 "1.0.0"
// 这个没用，写着玩
lmap.toString(); // 输出 "sortField=username,age&isAsc=true,false"
// 有用，还是写着玩
lmap.getSortField(); // 输出 "username,age"
lmap.getIsAsc(); // 输出 "true,false"
</script>
</html>

实践-优化 后台管理列表数据页面 查询功能–多排序字段

GET http://localhost:8998/user?pageNum=1&pageSize=10&sortField=username,age&isAsc=true,false
排序字段：sortField，是否升序：isAsc
这两个字段的个数和顺序要对应

<html>
<script>
    (function (r) {
        "use strict";
        if (typeof exports === "object" && typeof module !== "undefined") {
            module.exports = r();
        } else {
            if (typeof define === "function" && define.amd) {
                define("linkedmap",[], r);
            } else {
                var e; 
                if (typeof window !== "undefined") { 
                    e = window; 
                } else {
                    if (typeof global !== "undefined") {
                         e = global;
                    } else { 
                        if (typeof self !== "undefined") { 
                            e = self;
                        } else { 
                            e = this;
                        }
                    }
                } 
                e.LinkedMap = r;
            }
        }
    })(
    (function(){
        "use strict";
        // 静态私有属性
        var version = "1.0.0";

        // 构造函数
        var construct = function(argument){
            // 公共属性
            this.version =version;
            // 私有属性
            var fieldArr= new Array;
            // 私有属性
            var isAscArr= new Array;

            // 私有方法
            function serialize(o){
                return o.toString();
            }

            // 公共方法
            this.put = put;
            function put (field, isAsc){
                if(arguments.length !=put.length){console.error("arguments length Mismatch...");  return false;}
                if(typeof field != 'string'){
                    console.error(" typeMismatch......"+field+" must string");
                    return false;
                }else if(typeof isAsc != 'boolean'){
                    console.error(" typeMismatch......"+isAsc+" must boolean");
                    return false;
                }
                fieldArr.push(field);
                isAscArr.push(isAsc);
                return this;
            };
            
            // 公共方法
            this.getSortField = function(){
                return serialize(fieldArr);
            }
            this.getIsAsc = function(){
                return serialize(isAscArr);
            }

            // 公共方法 重写toString方法
            this.toString = function() {
                if(0===fieldArr.length || 0===isAscArr.length) return "";
                return "sortField="+serialize(fieldArr)+"&isAsc="+serialize(isAscArr);
            }

        };

        // 公共方法 重写toString方法
        // construct.prototype.toString = function() {
        //     return "这里无法访问到私有属性。。。";
        // }
		// 公共属性
		construct.prototype.name="linkedmap";
        // 返回构造函数
        return construct;
    })()
);

// 调用
var lmap = new LinkedMap();
// username 升序
lmap.put('username',true);
// username 降序
lmap.put('age',false);
// 这个没用，写着玩
lmap.version // 输出 "1.0.0"
// 这个没用，写着玩
lmap.toString(); // 输出 "sortField=username,age&isAsc=true,false"
// 有用，还是写着玩
lmap.getSortField(); // 输出 "username,age"
lmap.getIsAsc(); // 输出 "true,false"
</script>
</html>

http://localhost:8998/user?pageNum=1&pageSize=10&sortField=username,age&isAsc=true,false&rules={“username”:“admin”,“age”:22}
//serialize
var rulesObj = {username:“admin”,age:22};
window.encodeURIComponent(JSON.stringify(rulesObj)) // %7B%22username%22%3A%22admin%22%2C%22age%22%3A22%7D
http://localhost:8998/user?pageNum=1&pageSize=10&sortField=username,age&isAsc=true,false&rules=%7b%22username%22%3a%22admin%22%2c%22age%22%3a22%7d&rules=%7B%22username%22%3A%22admin%22%2C%22age%22%3A22%7D

lzxomg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS面向对象练习
BowenXu11的博客
03-31 323
<script type="text/javascript"> //1.可以通过new对象的方法，称之为“构造函数”,采用pascal命名法 function Person(name,age,email) { this.name = name; this.age = age; this.email = email; ...
js 对象操作
qypingi的博客
12-23 333
1.JS快速将对象中所有键赋值为空 一，Object.keys(obj).forEach(key=>{obj[key]=’’}) 二，/** * 处理空的参数 * @param datas * @returns */ function cleanParams(datas){ var v_data ={}; for(var a in datas){ if (datas[a] != null && datas[a] instanceof Array) { v_data[a]=[]; }el
js filter方法过滤数组 map 将数组中每个对象中的一个属性转化为字符串 将字符串转化为数组
kitesr的博客
03-12 1553
1.filter方法， let data=[{name:'晓明',age:'15',status:'1'}, {name:'小红',age:'15',status:'2'}, {name:'桃白白',age:'15',status:'3'}, {name:'白胡子',age:'15',status:'1'}， {name:'红发',age:'15',status:'2'}， {name
js面向对象编程class
weixin_44750781的博客
08-02 269
1.面向对象介绍 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 2.面向过程与面向对象对比 面向过程 面向对象 优点 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。 易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护 缺点 不易维护、不易复用、不易扩展 性能比面向过程低 3.类 在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来
js中的map()方法
boysky0015的博客
05-29 9万+
map定义和方法 map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。 map()方法按照原始数组元素顺序依次处理元素。 注意： map不会对空数组进行检测 map不会改变原始数组 arr.map(function(currentValue，index，arr),thisValue) 参数说明 function(currentValue,index,arr)
JS语法之：map()方法
热门推荐
王同学LM的专栏
01-14 37万+
MDN web docs上面说： map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 并举了个例子： var array1 = [1,4,9,16]; const map1 = array1.map(x => x *2); console.log(map1); 打印结果为： > Array [2,8,18,32] 而我这样写...
Js中的Map对象
John4July的专栏
09-08 12万+
Js中的Map对象
JavaScript 面向对象代码实践
10-29
JavaScript面向对象代码的写法与其它常见语言（Java C# C++）几乎完全不同。
JavaScript 面向对象基础简单示例
10-16
JavaScript是一种基于原型的面向对象编程语言...你可以通过阅读更多的JavaScript面向对象教程，学习错误调试技巧，以及数据结构和算法来深化你的理解。通过实践和不断探索，你将能够熟练掌握JavaScript的面向对象编程。
javascript面向对象程序设计实践常用知识点总结
10-16
这些实践展示了JavaScript面向对象编程的一些核心概念，包括原型链、属性访问、属性屏蔽以及`hasOwnProperty`方法的使用。理解这些知识点对于编写高效、可维护的JavaScript代码至关重要。在实际开发中，合理利用这些...
JS面向对象编程实现的拖拽功能案例详解
10-15
总结来说，JS面向对象编程实现的拖拽功能相比面向过程更符合现代开发的最佳实践，提高了代码的可读性和可维护性。通过实例化`Drag`类，我们可以轻松地为网页中的任何元素添加拖拽效果，同时避免了全局变量带来的潜在...
JavaScript中的面向对象及有关应用
小白菜的博客
03-31 162
JavaScript中的面向对象及有关应用 面向对象（OOP：Object Oriented Programming） 面向对象的概念 面向对象是一种程序设计思想，将数据和处理数据的程序封装到对象中。 特性：抽象、继承、封装、多态。 优点：提高代码的复用性及可维护性。 对象 JavaScript是一种基于对象的语言，几乎所有东西都是对象。 对象的创建方法： 1.字面量创建 2.new Object...
JS在项目里怎么应用
樊小勇的博客
04-17 590
前言 在实际项目里面，我们使用面向对象编程进行编程 在面向对象编程里面我们大致分为四个部分(个人分法) 开头、获取数据、渲染、方法函数 开头：一开始就会执行的代码放在开头里面比如一开始便要获取数据的方法 获取数据我们统一放在一个对象里面 渲染：使用后台数据渲染页面 方法函数:渲染页面时需要单个处理时写的方法放在一个对象里面 原生JS项目大致分层 var Object ={ // 开头 ...
js面向对象程序设计的最佳实践： 无成法，因地制宜
tiangej的专栏
09-12 497
js语法宽泛，实现同一目的可以有很多结构设计。 每一种设计都有其特点。 没有一成不变的且能够满足任意场合的“最佳实践”。 因地制宜地采用最恰当的设计是js开发者要领悟的要点。 在Canvas图表结构设计过程中，就要遵循上述思想。忌讳贪大求全，忌讳造“银弹”
JavaScript面向对象编程实践
shishengsoft的专栏
09-09 821
 JavaScript面向对象编程实践纵观方今天下，Web已然大势所趋，JavaScript地位彰显，VB、Delphi等逐渐淡出。但是，VB的事件机制使用起来确实很方便。下面，我们将在JavaScript中模拟这种事件机制，并就JavaScript的面向对象编程做些实践应用。目前JavaScript还不是纯正的面向对象语言，而是一种基于对象的语言。本文对其面向对象的一些概念不作探讨，
arguments.length
小米人的博客
10-20 1340
arguments.length表示的是实际上向函数传入了多少个参数,这个数字可以比形参数量大,也可以比形参数量小(形参数量的值可以通过Function.length获取到). function fun(a,b,c){ var l = arguments.length; var num = 0; for(var i=0;i<l;i++){ num+=arguments[i]; } alert(num) } fun(1,2,3); f
JS面向对象的应用场景
tangcc的博客
04-08 2218
reference:http://www.cnblogs.com/chiangchou/p/js-oop3.html
javascript面向对象编程指南pdf
最新发布
12-19
JavaScript面向对象编程指南是一本以JavaScript作为编程语言的基础，讲解面向对象编程（OOP）的指南。该指南主要介绍了JavaScript中如何使用面向对象的编程思想和技术来构建可重用、可扩展的代码。 该指南首先介绍...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值