Javascript工厂,javascript工厂函数

如何用javascript在网页上实现实时数据更新，就像股市行情那样。我是想把工厂DCS的实时数据放在工厂OA上

在你的网页里面放一个ID=dinfo 的Div(div id="dinfo"/div) ，在head里面引用下Jquery，然后把下面的函数加入Head标签里面就可以用了

$(document.ready(){

setInfo();

});

function setInfo() {

setInterval(new function () {

$('#dinfo').html("");//清空显示区域

var s="工厂DCS的数据";//这个可以通过异步调用服务器端发过来的数据

$('#dinfo').html(s);//将新数据填充到网页中(具体为 id=dinfo 的div中)

}, 10000);//每隔10秒刷新一次，你可以改这里面的数值

}

相关问答

Q1: 如何理解Javascript中类和对象这两个概念

在说这个话题之前，我想先说几句题外话：最近偶然碰到有朋友问我“hoisting”的问题。即在js里所有变量的声明都是置顶的，而赋值则是在之后发生的。可以看看这个例子：

var a = 'global';

(function () {

alert(a);

var a = 'local';

})();

大家第一眼看到这个例子觉得输出结果是什么？‘global’？还是‘local’？其实都不是，输出的是undefined，不用迷惑，我的题外话就是为了讲这个东西的。

其实很简单，看一看JavaScript运行机制就会明白。我们可以把这种现象看做“预声明”。但是如果稍微深究一下，会明白得更透彻。

这里其实涉及到对象属性绑定机制。因为所有JavaScript函数都是一个对象。在函数里声明的变量可以看做这个对象的“类似属性”。对象属性的绑定在语言里是有分“早绑定”和“晚绑定”之分的。

【早绑定】

是指在实例化对象之前定义其属性和方法。解析程序时可以提前转换为机器代码。通常的强类型语言如C++，java等，都是早绑定机制的。而JavaScript不是强类型语言。它使用的是“晚绑定”机制。

【晚绑定】

是指在程序运行前，无需检查对象类型，只要检查对象是否支持特性和方法即可。可以在绑定前对对象执行大量操作而不受任何惩罚。

上面代码出现的“预声明”现象，我们大可用“晚绑定”机制来解释。在函数的作用域中，所有变量都是“晚绑定”的。 即声明是顶级的。所以上面的代码和下面的一致：

var a = 'global';

(function () {

var a;

alert(a);

a = 'local';

})();

在alert(a)之前只对a作了声明而没有赋值。所以结果可想而知。

!-- 题外话到此结束 --

RT:本文要说的是，在JavaScript里，我所知道的几种定义类和对象的方式：! -- 声明：以下内容大部分来自《JavaScript高级程序设计》，只是个人叙述方式不同而已 --

【直接量方式】

使用直接量构建对象是最基础的方式，但也有很多弊端。

var Obj = new Object;

Obj.name = 'sun';

Obj.showName = function() {

alert('this.name');

}

我们构建了一个对象Obj，它有一个属性name，一个方法showName。但是如果我们要再构建一个类似的对象呢？难道还要再重复一遍？

NO！，我们可以用一个返回特定类型对象的工厂函数来实现。就像工厂一样，流水线的输出我们要的特定类型结果。

【工厂方式】

function createObj(name) {

var tempObj = new Object;

tempObj.name = name;

tempObj.showName = function () {

alert(this.name);

};

return tempObj;

}

var obj1 = createObj('obj_one');

var obj2 = createObj('obj_two');

这种工厂函数很多人是不把他当做构建对象的一种形式的。一部分原因是语义：即它并不像使用了运算符new来构建的那么正规。还有一个更大的原因，是因为这个工厂每次产出一个对象都会创建一个新函数showName(),即每个对象拥有不同的版本，但实际上他们共享的是同一个函数。

有些人把showName在工厂函数外定义，然后通过属性指向该方法，可以避开这个问题：

代码

可惜的是，这种方式让showName()这个函数看起来不像对象的一个方法。

【构造函数方式】

这种方式是为了解决上面工厂函数的第一个问题，即没有new运算符的问题。可是第二个问题它依然不能解决。我们来看看。

function Obj(name) {

this.name = name;

this.showName = function () {

alert(this.name);

}

}

var obj1 = new Obj('obj_one');

var obj2 = new Obj('obj_two');

它的好处是不用在构造函数内新建一个对象了，因为new运算符执行的时候会自动创建一个对象，并且只有通过this才能访问这个对象。所以我们可以直接通过this来对这个对象进行赋值。而且不用再return，因为this指向默认为构造函数的返回值。

同时，用了new关键字来创建我们想要的对象是不是感觉更“正式”了。

可惜，它仍然不能解决会重复生成方法函数的问题，这个情况和工厂函数一样。

【原型方式】

这种方式对比以上方式，有个很大的优势，就是它解决了方法函数会被生成多次的问题。它利用了对象的prototype属性。我们依赖原型可以重写对象实例。

var Obj = function () {}

Obj.prototype.name = 'me';

Obj.prototype.showName = function () {

alert(this.name);

}

var obj1 = new Obj();

var obj2 = new Obj();

我们依赖原型对构造函数进行重写，无论是属性还是方法都是通过原型引用的方式给新建的对象，因此都只会被创建一次。可惜的是，这种方式存在两个致命的问题：

1。没办法在构建对象的时候就写入想要的属性，因为原型在构造函数作用域外边，没办法通过传递参数的方式在对象创建的时候就写入属性值。只能在对象创建完毕后对值进行重写。

2。致命问题在于当属性指向对象时，这个对象会被多个实例所共享。考虑下面的代码：

var Obj = function () {}

Obj.prototype.name = 'me';

Obj.prototype.flag = new Array('A', 'B');

Obj.prototype.showName = function () {

alert(this.name);

}

var obj1 = new Obj();

var obj2 = new Obj();

obj1.flag.push('C');

alert(obj1.flag); // A,B,C

alert(obj2.flag); //A,B,C

是的，当flag属性指向对象时，那么实例obj1和obj2都共享它，哪怕我们仅仅改变了obj1的flag属性，但是它的改变在实例obj2中任然可见。

面对这个问题，让我们不得不想是否应该把【构造函数方式】和【原型方式】结合起来，让他们互补。。。

【构造函数和原型混合方式】

我们让属性用构造函数方式创建，方法用原型方式创建即可：

var Obj = function (name) {

this.name = name;

this.flag = new Array('A', 'B');

}

Obj.prototype = {

showName : function () {

alert(this.name);

}

}

var obj1 = new Obj();

var obj2 = new Obj();

obj1.flag.push('C');

alert(obj1.flag); // A,B,C

alert(obj2.flag); //A,B

这种方式有效地结合了原型和构造函数的优势，是目前用的最多，也是副作用最少的方式。

不过，有些追求完美的家伙还不满足，因为在视觉上还没达到他们的要求，因为通过原型来创建方法的过程在视觉上还是会让人觉得它不太像实例的方法（尤其对于传统OOP语言的开发者来说。）

所以，我们可以让原型活动起来，让他也加入到构造函数里面去，好让这个构造函数在视觉上更为统一。而这一系列的过程只需用一个判断即可完成。

var Obj = function (name) {

this.name = name;

this.flag = new Array('A', 'B');

if (typeof Obj._init == 'undefined') {

Obj.prototype = {

showName : function () {

alert(this.name);

}

};

Obj._init = true;

}

}

如上，用_init作为一个标志来判断是否已经给原型创建了方法。如果是那么就不再执行。这样其实在本质上是没有任何变化的，方法仍是通过原型创建，唯一的区别在于这个构造函数看起来“江山统一”了。

但是这种动态原型的方式是有问题的，《JavaScript高级程序设计》里并没有深究。创建第一个对象的时候会因为prototype在对象实例化之前没来的及建起来，是根本无法访问的。所以第一个对象是无法访问原型方法的。同时这种方式在子类继承中也会有问题。

关于解决方案，我会在下一文中说明。

其实就使用方便来说的话，个人觉得是没必要做这个判断的。。。呵呵 ^_^

Q2: js中寄生构造函数模式和工厂模式的区别

寄生构造函数模式和工厂模式没有本质区别，通过new 操作符的就叫寄生构造函数模式，直接调用的就叫工厂模式

JS里的构造函数就是一个用来构造对象的普通函数，和JAVA不同

你要知道，通过new 来调用函数，会自动执行下面操作

创建一个全新的对象

这个对象会被执行[prototype]连接原型

函数调用中的this会绑定到新对象

如果函数没有返回其他对象，那么new 构造就会自动返回这个新对象

由于这里new调用和直接调用都返回values，所以a,b引用的数组对象是一样的

引：segmentfault.com/q/1010000004596650

Q3: javascript 工厂模式为什么无法识别对象类型

我是这么理解的；js 工厂模式里面，所有的函数都只是Object的实例，这样的判断没有多大的意义； 而在构造函数里面，构造出来的函数不仅是Object的实例，也是构造函数的实例，而构造函数是我们自己定义的，相当于我们自己定义了一个新的对象类型，可以识别的新的对象类型；

Q4: javascript的工厂模式和构造函数的区别

先给你介绍下JS常用的几种模式

1.原始模式

    //1.原始模式，对象字面量方式

var person = { 

    name: 'Jack',

    age: 18,

    sayName: function () { alert(this.name); }

};

//1.原始模式，Object构造函数方式

var person = new Object();

person.name = 'Jack';

person.age = 18;

person.sayName = function () {

    alert(this.name);

};

/*显然，当我们要创建批量的person1、person2……时，

每次都要敲很多代码，资深copypaster都吃不消！

然后就有了批量生产的工厂模式。*/

2.工厂模式

//2.工厂模式，定义一个函数创建对象

function creatPerson (name, age) {

    var person = new Object(); 

    person.name = name;

    person.age = age;

    person.sayName = function () {

        alert(this.name);

    };

    return person; 

}

/*

 工厂模式就是批量化生产，简单调用就可以进入造人模式（啪啪啪……）。

 指定姓名年龄就可以造一堆小宝宝啦，解放双手。

 但是由于是工厂暗箱操作的，所以你不能识别这个对象到底是什么类型、

 是人还是狗傻傻分不清（instanceof 测试为 Object），

 另外每次造人时都要创建一个独立的temp对象，代码臃肿，雅蠛蝶啊。

*/

3.构造函数

//3.构造函数模式，为对象定义一个构造函数

function Person (name, age) {

    this.name = name;

    this.age = age;

    this.sayName = function () {

        alert(this.name);

    };    

}

var p1 = new Person('Jack', 18); //创建一个p1对象

Person('Jack', 18);   

 //属性方法都给window对象，window.name='Jack'，window.sayName()会输出Jack

 

 

 4.原型模式

 //4.原型模式，直接定义prototype属性

function Person () {}

Person.prototype.name = 'Jack';

Person.prototype.age = 18;

Person.prototype.sayName = function () { alert(this.name); };

//4.原型模式，字面量定义方式

function Person () {}

Person.prototype = {

    name: 'Jack',

    age: 18,

    sayName: function () { alert(this.name); }

};

var p1 = new Person(); //name='Jack'

var p2 = new Person(); //name='Jack'

//这里需要注意的是原型属性和方法的共享，即所有实例中

//都只是引用原型中的属性方法，任何一个地方产生的改动会引起其他实例的变化。

5.混合模式（构造+原型）

//5. 原型构造组合模式，

function Person (name, age) {

    this.name = name;

    this.age = age;

}

Person.prototype = {

    hobby: ['running','football'];

    sayName: function () { alert(this.name); },

    sayAge: function () { alert(this.age); }

};

var p1 = new Person('Jack', 20); 

//p1:'Jack',20; __proto__: ['running','football'],sayName,sayAge

var p2 = new Person('Mark', 18); 

//p1:'Mark',18;__proto__: ['running','football'],sayName,sayAge

//通过上面的例子，有什么区别一目了然

Q5: Javascript的工厂函数指的是什么？

所谓工厂函数，就是指这些内建函数都是类对象，当你调用他们时，实际上是创建了一个“类实例”。

我们首先通过new关键字创建了一个对象，obj就相当于Object的实例。我们通过类实例化了一个对象，然后给这个对象相应的属性，最后返回对象。我们可以通过调用这个函数来创建对象，这样的话，实际上工厂函数也很好理解了：

1，它是一个函数。

2，它用来创建对象。

3，它像工厂一样，“生产”出来的函数都是“标准件”（拥有同样的属性）

JavaScript项目有一个趋势，变得难以测试和重构，因为我们经常鼓励使用复杂的抽象层。原型和类实现一个简单的想法使用复杂和不人性的工具，如 new 和 this ，即使现在，这仍然引起各种各样的困惑，几年后他们被添加到语言。