提速javascript开发(二)

zxmlgh

浏览: 38653 次
性别:
来自: 广州

最近访客更多访客>>

天外天之人上人

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

JavaScript OO 框架 Spring Flex

我的邮箱是zxmloveforever@163.com，欢迎大家来信指点指点。

例子：

//得到当前对象的名称
Object.prototype.getClassName = function()
{
return this.toString().match(/function\s*(\w+)/)[1];
};
/**
* 实现单一多层结构的继承
* @param arguments[0] 指定的类名，非字符串型，不可以是null。
*/
Object.prototype.inherit = function()
{
try{
if(!(arguments[0] instanceof Object)) throw new Error("you can just inherit from a Object");
if(this["parent"]) throw new Error("there have inherited class,you can't inherit class "+arguments[0].getClassName());
}catch(e){
alert(e.message);
return;
}
var arg = new Array();
for(var i=0; i
arg[i] = arguments[i+1];
var temp = new arguments[0](arg);
for(var i in temp){
if(!this[i])
this[i] = temp[i];
}
this["parent"] = temp;
}
//用来访问父类的public资源
Object.prototype.father = function(){
if(this.parent==null) return;
if(this.parent[arguments[0]]){
var temp = this.parent[arguments[0]].toString();
if(temp.indexOf("function")<0)
return this.parent[arguments[0]];
else{
var arg = new Array();
for(var i=0; i
arg[i] = arguments[i+1];
return this.parent[arguments[0]](arg);
}
}else{
this.parent.father(arguments);
}
}
//与javascript的关键字typeof区别在：o大写
Object.prototype.typeOf = function(){
var target = arguments[0];
var result = this instanceof target;
if(!result){
var temp = this.parent;
while(temp!=null){
result = temp instanceof target;
if(!result)
temp = temp.parent;
else
break;
}
}
return result;
}
//将子类转换成父类，注意:如果子类覆盖了父类的方法，那么换转后的类，该方法的实现仍然是子类中的实现版
Object.prototype.toParent = function(){
var result = null;
var target = arguments[0];
var flag = this instanceof target;
if(!flag){
var temp = this.parent;
while(temp!=null){
flag = temp instanceof target;
if(!flag)
temp = temp.parent;
else{
result = {};
for(var p in temp){
if(this[p])
result[p] = this[p];
else
result[p] = temp[p];
}
break;
}
}
}else
result = this;
return result;
}
/**
* 下面的继承关系是A inheritB,B inherit C，D是一个测试多态的方法
*/
function A(){
this.inherit(B,"x");
this.inherit(C);
var locate1 = "1oh";
this.locate2 = "2oh";
//A类继承B中的methodB1()，并且在自己的method1中调用B的methodB1
this.method1 = function(){
alert("A:test继承——I am use B's variant: "+this.methodB1(true));
}
//A类覆盖B中的method2()，并且在自己的method2中调用B的method2
this.method2 = function(){
var str = "A:test覆盖method2，result is："+this.father("method2","ok");
alert(str);
}
//A类覆盖了类C中的method3
this.method3 = function(str){
return "excuting class A's method";
}
}
function B(){
this.inherit(C,"y");
var locateB2 = "";
var locateB1 = arguments[0];
this.methodB1 = function(flag){
if(flag)
return locateB1;
else
return "A converted B is success";
}
this.method2 = function(){
var str =arguments[0]+" B's "+locateB1+" "+this.method1();
return str;
}
//B类覆盖了类C中的method3
this.method3 = function(str){
return "excuting class B's method";
}
}
function C(){
var locate1 = arguments[0];
this.method1 = function(){
return "C's "+locate1;
}
this.method3 = function(){
return locate1;
}
}
/**
* 在这个方法中，只会对C类的method3方法，如果参数是C的子类也会处理这个参数的method3方法。
*/
function D(){
var target = arguments[0];
if(!target.typeOf(C)){
alert("upper my scope");
return;
}
alert("test多态："+target.method3());
}
var a = new A;
a.method1();//在其中调用了从B中继承过来的methodB1()
a.method2();//A类覆盖B中的method2()，并且在自己的method2中调用B的method2
var temp = a.toParent(B);
alert(temp.methodB1(false)+": "+temp.method3());//转换成父类后，对象执行的方法仍然是子类版的。
var b = new B("b^-^");
D(a);
D(b);
//现在业务需要，扩展出一个E
function E(){
this.inherit(C,"change is so much!");
}
D(new E());//扩展性与通用性的表现

【注意事项】：

1）需要用这种继承的写法，请将下面的方法当作javascript 的api，不要覆盖。

方法名称	方法作用	参数说明
getClassName	获得对象的名称。	无
inherit	实现对象之间的单一多层的继承	1：被继承的父类名，非字符串 2：父类初始化需要的参数
father	如果子类覆盖了父类的某个方法，用它来回调父类的这个方法	1：回调的方法名称，字符串格式 2：回调方法需要的参数
typeOf	判断子类的类型，与typeof是不一样的。	类的名称,非字符串形式。
toParent	将子类转换成父类	父类的名字，非字符串形式。

2）在子类的第一行执行继承。如果要覆盖父类的某个方法，并且要用父类的这个方法，那么请在子类的方法中回调父类的那个方法。

3.3、活用闭包

所谓闭包，通俗的讲，使用函数的范围，已经不在函数的定义范围。

优点：进一步提高代码的封装性。

缺点：ie6的垃圾收集机制存在着bug，当进行ui编码时会出现一些问题。

闭包的特点

1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

闭包的写法

function A(){
var answer1 = function(str){
alert("这里提供复杂功能1");
}
var answer2 = function(str){
alert("这里提供复杂功能2");
}
this.getAnswer = function(flag){
if(flag)
return answer1;
else
return answer2;
}
}
var control = new A();
var a1 = control.getAnswer(true);
var a2 = control.getAnswer(false);
a1();//弹出文字:这里提供复杂功能1
a2();//弹出文字:这里提供复杂功能2
/**
* 1）通过闭包，对象A将自己的资源提供给了外部。
* 2）并且外部的代码对a1之类的变量做出了改变，不会影响到A对象内部
* 下面对A类稍作修改，我们看看效果
*/
function A(){
var answer1 = function(str){
alert("这里提供复杂功能1");
}
var answer2 = function(str){
alert("这里提供复杂功能2");
}
this.getAnswer = function(flag){
if(flag)
return answer1;
else
return answer2;
}
this.answer = function(){
answer1();
}
}
var control = new A();
var a1 = control.getAnswer(true);
a1();
a1 = "1";
control.answer();//弹出文字:这里提供复杂功能1

3.4、函数式编程

它的基本特点是：将函数(或对象)赋值给一个变量。前面我们已经采用了这种写法。

优点：代码可读性好。适合web页ui方面的开发

错误的写法

function A(){

    alert(B());

    var B = function(){

        return "ok";

    }

}

A();

正确的写法

function A(){

    var B = function(){

        return "ok";

    }

    alert(B());

}

A();

附：javascript是非常灵活的：

1）基于对象的：有对象与类的概念，也有独立于对象的函数概念

2）解释型：请把握住运行时与时间轴这个概念：它能自动转化变量的类型与这个特点紧密相连;一段代码是当作函数，还是一个类，也与这个有关。

2）弱类型：会将变量自动转化为当前合适的类型或者基本数据类型，这个特点基于它是解释型的语言。

这些充分体现了javascript的灵活型。建议使用它，不要走极端：将其对象的一面在需要的时候充分运用，但没有必要任何情况下都这样做。所谓灵活：在不同的情况，可以有适合的方式可用。

（完）

分享到：

web开发平台路线选择分析-1 | 提速javascript开发(一)

2007-03-10 01:44
浏览 15256
评论(34)
论坛回复 / 浏览 (29 / 27274)
分类:Web前端
查看更多

34 楼 mmme 2007-06-28

中中中

33 楼 mmme 2007-06-28

一直不知道什么是“侵入”“无侵入”
长见识了

32 楼 mmme 2007-06-28

一直不知道什么叫“侵入”，“无侵入”
长见识了

31 楼 mmme 2007-06-28

一直搞不懂什么叫　“侵入”　”无侵入“　
长见识了

30 楼笨笨狗 2007-06-28

web前端架构师？这种算起来应该不会很差吧，呵呵，努力中……

29 楼 hax 2007-06-28

所以关键是找到适合自己的。

当然纯粹搞js代码确实不会薪水很高。但是做ux的可以很高。做usablity的可以很高。搞js库和web开发库的也许会很高（jindw偷笑中）。。。

28 楼 googleme 2007-06-28

apollo7733 写道

记得刚毕业面试时候，就是让我用javascript模拟oo,这大概是02的事情，那时候国内还很少看到这些写法。那么现在呢，prototype,dojo,yui等等很多很多框架；
但是个人认为，没有必要花太多的时间在javascript上面，大家有都有从客户端-->服务器，从页面到架构，工资也是一步步高起来，开发了这么多，页面其实是累活，脏活，我觉得怎么简单，怎么做，写得再oo,也没有什么意义，ajax是个好东西，这是被google带起来的，但是将来，flex,wpe,谁能知道下一代的技术。
与其花时间研究这些，还不如，尽早服务器转型，早日提升自己的money,客户端，用经典的就可以了。

呵呵，我就是从服务器端转到客户端的。。
感觉现在的工作专注多了，不像以前要关注数据库、应用服务器、linux，还有各种开源框架。。
现在就做javascript开发，不用考虑太多，主要考虑些usability方面的东西，ajax等技术只是辅助手段。最主要的，工资是以前的好几倍~

27 楼 hax 2007-06-28

apollo7733 写道

不敢苟同也。

26 楼 hax 2007-06-28

<br/>
<strong>zxmlgh 写道：</strong><br/>
<div class='quote_div'>
<p>这些内容确实容易误导人，如果能在javascript语言实现这个级别，完成这些功能，会更好些。<strong><font color='#ff0000'>super与extends</font></strong>都是javascript的保留字，我想javascript语言的设计者，对这方面也是有自己的思考：要用这些，又没用。我不清楚这些设计者的思考是怎么样的，也不太清楚他们顾虑的是什么。既然保留了，那将来肯定是会实现这些功能的。这些编码模式平时自己用的也蛮爽<img src='/javascripts/fckeditor/editor/images/smiley/msn/tounge_smile.gif' alt=''/>，就暂时做个出头鸟吧！</p>
<p> 恩楼上说在Function中做这些值得思考，多谢指点。不过这样做，不是不好而是会遇上一些问题，我暂时无法用语言组织。大家多提些意见，我们一起前进。</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
super/extends成为保留字没有什么深谋远虑的，仅仅是因为这些都是java的保留字而已。当然es4会使用一些这些关键字，这也不是预留，而是既然有，那就用着……

25 楼 hax 2007-06-28

jindw 写道

居然不是精华了，那就评论一下：

先不论你这些API的优劣，首先，你严重的污染了JavaScript。
举例：
我原来有断代码：
var map = {key1:1,key2:2};
for(var k in map){
alert(map[k]);
}
加上你的程序之后，原来这段代码的行为就改变了！

有了这种风险，还有那位敢轻易使用这个？

老贴重评。

说句老实话，虽然我也不喜欢在object.prototype上动手脚，但是这样就评价他严重污染js，有点太苛刻了。毕竟，for in当map用只是一个惯用法，也可以认为应该更严谨的加上hasOwnProperty的判断，或者应该使用真正的Map类。

当然，做类库的话，最好不要做这种事情。

24 楼 blueaqua 2007-06-27

有关JavaScript程序设计，说一点自己的看法，与大家讨论。
不要为了OO而OO
框架级的代码或者JS控件使用OO进行设计，会带来很多好处，不仅可以简化开发的复杂度，实现代码复用，而且调用、维护起来也很方便。但是，OO在给我们带来方便的同时，也带来了较大的副作用：
1、很多情况下，是没有必要使用OO的，例如，对一个输入框中用户输入的内容进行校验，检验部分代码就没必要封装为对象。
2、OO的公有成员/私有成员、继承、覆盖等特性确实给我们的编程带来了方便，但是，这是有代价的。每封装一个层次，创建一个新的对象，都会带来性能上更多的损耗。JavaScript语言本身并不提供私有成员、继承这样的特性，而且，由于是解释性语言，其性能与预编译语言相比，要差很多。因此，扬短避长，为了实现一个OO特性，而用额外的代码去维护，消耗更多的资源，是否值得？在此基础上建立的程序，有可能封装了很多层，最上层应用的运行效率可想而知。
不要忘记，我们的代码最终是要交付用户使用的，即使代码写得多么合理，多么OO，如果运行效率很低的话，那么用户也是不会满意的。所以，在什么情况下使用OO，什么情况下不使用OO，是需要根据具体的应用目的，仔细考虑和规划的，而为了赶时髦而使用OO更是不可取。

23 楼 micrexp 2007-04-29

<br/>
<strong>zxmlgh 写道：</strong><br/>
<div class='quote_div'>
<div><strong>
<div><a href='mailto:我的邮箱是zxmloveforever@163.com'><font color='#0000ff'><span><span>我的邮箱是</span>zxmloveforever@163.com</span>，欢迎大家来信指点指点。</font></a></div>
</strong></div>
<div><strong>例子</strong>：</div>
<div>
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-c'>
    <li class='alt'><span><span class='comment'>//得到当前对象的名称 </span><span>  </span></span> </li>
    <li class=''><span>Object.prototype.getClassName = </span><span class='keyword'>function</span><span>()   </span> </li>
    <li class='alt'><span>{   </span> </li>
    <li class=''><span>    </span><span class='keyword'>return</span><span> </span><span class='keyword'>this</span><span>.toString().match(/</span><span class='keyword'>function</span><span>\s*(\w+)/)[1];   </span> </li>
    <li class='alt'><span>};         </span> </li>
</ol>
</div>
</div>
<div/>
<div style='margin: 6pt 0cm;'><br/>
var classA = function(){</div>
<div style='margin: 6pt 0cm;'>       this.name="test";</div>
<div style='margin: 6pt 0cm;'>}</div>
<div style='margin: 6pt 0cm;'>var a = new classA ();</div>
<div style='margin: 6pt 0cm;'>document.write("a 的类名是:" + a.<font>constructor);</font></div>
<div style='margin: 6pt 0cm;'>-----------------------------------</div>
<div style='margin: 6pt 0cm;'>输出: a 的类名是:classA </div>
<div style='margin: 6pt 0cm;'/>
<div style='margin: 6pt 0cm;'>有兴趣的朋友可看我正在开发的JAVASCRIPT GRID <font><a href='http://mic.jx88.net/HTMLPage13.htm'>http://mic.jx88.net/HTMLPage13.htm</a></font></div>
<div style='margin: 6pt 0cm;'>现目前还不支持非IE平台</div>
</div>

22 楼 wxn_yxm 2007-04-24

不错的方法，不过要小心使用，最好经过严格测试才作为框架，要不然谁也不敢用.

21 楼 YYSAM 2007-04-11

wtnhwbb 写道

不错NX

楼主的总结的很好，经过大家的讨论才可以更加深刻领会JavaScript的灵活性。对于Object原型的继承我不敢苟同，但加入方法还是可以的。
至于Spring，我想lz不应该和JavaScript来对比。两者不属于同一个层次，一个框架和一种语言就好比一个穿了漂亮衣服的美女和一个裸体的男人一样。

20 楼 wtnhwbb 2007-04-06

不错NX

19 楼 gwallan 2007-04-02

有点意思了，的确做前台开发的人需要了解的东西太多了，但是LZ提供了一种思路就是值得PF的。

18 楼过河卒 2007-03-15

对于LZ的这种做法无可厚非，复杂程度不同，自然处理方法也有变化。我们一般用的时候没有问题，只代表我们暂时没有遇见问题，不代表不会出现问题。LZ，我支持你！

17 楼 cozone_柯中 2007-03-15

apollo7733 写道

一针见血，不过任何行业，真正能精通就能拿高薪水。薪水的增长和经验是紧密不可分割的。

16 楼 qy33 2007-03-14

<br/>
<strong>zxmlgh 写道：</strong><br/>
<div class='quote_div'>
<p>这些内容确实容易误导人，如果能在javascript语言实现这个级别，完成这些功能，会更好些。<strong><font color='#ff0000'>super与extends</font></strong>都是javascript的保留字，我想javascript语言的设计者，对这方面也是有自己的思考：要用这些，又没用。我不清楚这些设计者的思考是怎么样的，也不太清楚他们顾虑的是什么。既然保留了，那将来肯定是会实现这些功能的。这些编码模式平时自己用的也蛮爽<img src='/javascripts/fckeditor/editor/images/smiley/msn/tounge_smile.gif' alt=''/>，就暂时做个出头鸟吧！</p>
<p> 恩楼上说在Function中做这些值得思考，多谢指点。不过这样做，不是不好而是会遇上一些问题，我暂时无法用语言组织。大家多提些意见，我们一起前进。</p>
</div>
<p><br/>
<br/>
<br/>
<br/>
这些都是楼主的心血嘛，能够拿出来交流，就应该获得赞赏。只有这样，才是不断进步的撒。</p>

15 楼 apollo7733 2007-03-13

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论