JavaScript中实现工厂模式.
第一次亲密接触:利用JavaScript中的prototype实现"基于多态的工厂模式".
老早就知道JavaScript中的prototype了,可一直没机会正式用下,虽说以前自己写着玩过,但由于没有与实际应用联系起来也就没能真真正正地感受到这个prototype的威力.
今天在工作中终于有幸用到这个了.
具体情况是这样的:项目中要提交一个表单,可这个表单有多层结构,用户在提交时可以具体情况而有选择性的提交.刚开始时,是用那种很笨很笨地纯粹表单提交,结果在Java那边要写一大串的代码来从request里取出各个Parameter再用这个生成JavaBean实例(想过用Spring的form标签,但配置起来很是复杂,终因得不偿失而放弃了).
决定用JSON来包装并用jQuery里的Post来Ajax地与后台交互.
刚开始时,用如下的代码来做JSON的包装:
var menu;
if(conditionOne){
menu = {name: $('nameColumn'), order: $('ordrColumn'), ...subCategory:{...,...}};
$.post('xxxx.htm',{para: JSON.stringfy(menu)}, success:function(){....});
}else if(conditionTwo){
menu = {name: $('nameColumn'), order: $('ordrColumn'), ...imageInfo:{...,...}};
$.post('xxxx.htm',{para: JSON.stringfy(menu)}, success:function(){....});
}
这样做很烦琐,写的代码也很不友好,很不面向对象.
经高手点拔后,采用了下面的方法.
step1:在一个单独的js文件中如下所示地写出menu类:
function Menu(name,order,...,condition...,option){
this.name = name;
this.order = order;
...
this.condition = condtion;
...
this.option = option;
}
Menu.prototype.toJsonString = function(){
var data;
if(this.conditionOne){
var subCategory = createSubCategory();
data = {name:nameVal,order:orderVal,...,subCategoryString:subCategory};
}else if(this.conditionTwo){
var imageInfo = createImageInfo();
data = {name:nameVal,order:orderVal,...,imageInfoString:imageInfo};
}
return JSON.stringfy(data);
}
function createMenu(){
if(conditionOne){
returne new Menu(.......);
}else if(conditionTwo){
returne new Menu(.......);
}
}
step2,这样有了上面的准备后,就可以直接在响应事件中写:
function eventHandler(){
var menu = createMenu();
$.post('xxxx.htm',{para: menu.toJsonString()}, success:function(){....});
}
从调用方的角度来看,代码简洁了许多.
利用这个prototype还实现了JavaScript版的工厂模式,呵呵,不错!
分享到:
相关推荐
工厂模式在 JavaScript 中的应用 工厂模式是一种常用的设计模式,它提供了一种创建对象的方式,而不需要指定具体的类别。工厂模式的主要优点是它可以将对象的创建过程与具体的类别分离,从而提高了代码的灵活性和可...
2. **工厂模式(Factory)**:用于创建对象,隐藏了对象创建的细节,提供一个统一的接口。可以用来解决JavaScript中没有类的局限。 3. **观察者模式(Observer)**:定义了对象之间的一对多依赖关系,当一个对象的...
通过本文的介绍,你应该能够理解工厂模式的基本概念,掌握在JavaScript中实现工厂模式的方法,并能够在实际项目中应用这一模式来构建灵活的对象创建机制。 通过本文的介绍,你应该能够理解工厂模式的重要性,掌握在...
5. **物理模拟**:利用JavaScript实现简单的物理效果,如碰撞检测、重力模拟等。 通过学习这两本书,开发者不仅可以掌握JavaScript的核心语法和最佳实践,还能了解到JavaScript在图形编程领域的强大潜力。不论是想...
包含javascript的基础语法,面向对象的实现和设计模式实现Javascript 代码其中很多都是伪代码的写法,便有回顾和总结。参考资料包含javascript的基础...工厂模式4.桥接模式 5.复合模式6.外观模式 7.适配器模式8.装饰器
在`JavaScript简单工厂模式.mht`文件中,可能包含了对这个实现的详细分析,包括代码的解释、运行示例以及可能的优化和改进方案。通过阅读这份文件,可以更深入地理解如何在JavaScript中应用面向对象和简单工厂模式来...
工厂模式在JavaScript中是一种常见的对象创建模式,它通过封装对象的创建过程,提高了代码的灵活性。然而,它也有自身的局限性,如无法直接识别对象类型。理解并熟练运用这些模式,能够帮助开发者编写出更可维护、可...
JavaScript设计模式.pdf JavaScript设计模式是指在软件开发中使用JavaScript语言编写的设计模式。这些设计模式旨在提高代码的重用性、可读性、维护性和扩展性。以下是JavaScript设计模式的知识点总结: 1. 单体...
1. 创建型模式:如工厂模式、抽象工厂模式、单例模式、建造者模式和原型模式。这些模式主要关注对象的创建,旨在提高代码的灵活性和可重用性。 2. 结构型模式:如适配器模式、装饰器模式、代理模式、桥接模式、组合...
在JavaScript中,常见的设计模式包括工厂模式、单例模式、观察者模式、装饰器模式、代理模式等。例如,工厂模式可以用来创建对象,避免直接使用new操作符,提高代码的可扩展性;单例模式确保一个类只有一个实例,常...
JavaScript设计模式是由张容铭编著的一本关于JavaScript编程领域的重要参考书籍,主要探讨了如何在JavaScript编程中应用设计模式来提升代码质量和可维护性。设计模式是软件工程中的最佳实践,它们是针对常见问题的...
- **工厂模式**: 使用函数作为工厂函数来创建对象实例。 - **构造函数模式**: 通过构造函数创建对象实例,利用`this`关键字绑定属性和方法。 - **原型链模式**: 通过继承来扩展对象的功能。 **8. 性能优化** - **...
**实现原理**:在JavaScript中实现单例模式可以通过以下步骤: 1. **定义一个构造函数**:定义一个用于创建对象的构造函数。 2. **设置静态属性**:为了跟踪已经创建的实例,可以在构造函数中或外部定义一个静态...
4. 设计模式的实现:书中将会涉及工厂模式(factory)、单例模式(singleton)、观察者模式(observer)、组合模式(composite)和外观模式(facade)等常用的设计模式,并展示如何在JavaScript中轻松理解并实现这些...
书中可能还会深入探讨JavaScript的原型继承机制、闭包特性以及如何利用这些特性来实现某些特定的设计模式。此外,随着JavaScript在服务器端的兴起(Node.js的流行),书中也可能包含了有关异步编程模式的讨论,如回...
另外,原型链是JavaScript实现继承的核心机制,所有对象都有一个`__proto__`属性,指向其构造函数的原型对象。 **设计模式** 设计模式是软件工程中经过验证的解决方案模板,它们在特定场景下提供了高效、可复用的...
工厂模式是一种设计模式,它提供了一种创建对象的最佳方式。在JavaScript中,工厂函数可以用来创建具有特定属性和方法的对象,而无需使用`new`关键字。这种方式的优点是创建对象的过程更加灵活,可以根据传入的参数...
- **工厂模式**:定义了一个创建对象的接口,但允许子类决定实例化哪一个类。 - **Mixin模式**:通过混合多个类的功能来创建新的类,通常用于实现多重继承。 - **装饰模式**:动态地给一个对象添加一些额外的职责,...
JavaScript设计模式是编程实践中一种优秀的代码组织方式,它总结了在特定场景下解决常见问题的最佳实践。...在实际开发中,构造函数模式常常与其他设计模式(如工厂模式、单例模式等)结合使用,以应对更复杂的场景。