談JS面向對象【靜態與非靜態類】

雖然我研究過C++，有點C++面向對象的思想，但是其實面向對象僅僅是一種方法而已。使用JavaScript面向對象完全出於偶然，因為大部分時間我都是在無圖形界面的環境下工作，有時候就算是介入了web客戶端的工作的時候，在寫js和ajax時，最多的也只是寫寫function，從沒有考慮過要使用JavaScript面向對像這麼高級的技巧。直到有那麼一天，我開始在js中拼湊DOM標籤，而且需要不停的拼湊，我發現我的代碼變得愈發的醜陋，不僅上是代碼簡潔的問題，甚至有時候還引發了性能問題。長此以往，不出三個月，上帝都將會不知道我寫過些什麼，本篇的目的完全出於記錄使用心得。

首先，還是來看一下促使我改變書寫JavaScript習慣的垃圾代碼，在練習、測試、調試、甚至正式項目中，大量的充斥著下面的代碼。

三個函數
Function finduser(userId){….}Function showmessage(msg){….Var message=”提示，出錯了，錯誤原因”+msg;Alert(message);}Function append(obj){Var οnclick=”createdom( )”;Var title=”你好”;$(obj).append(“<a href='javascript:void(0)' οnclick='”+onclick+”' title='”+title+”'>”+ title+”</a>”);….}

不要告訴我你沒有見過上面的代碼，說實話，上面的代碼確實寫得快，調用簡單，如果前兩個函數還不足以引發你的憤慨，那麼第三個函數應該讓你有點想問候寫這代碼創建者的衝動了。是的，第三個函數直接觸發了我決定使用面向對象。

實際上，我完全可以把第三個函數改造成下面這樣。

function append(obj){var a=document.craeteElement(“a”);a.title=”你好”;a.href=”javascript:void(0);”;a.innerHTML=a.title;a .click=function(){createdom();};$(obj).append(a);….}

這樣如何？有進步吧，好，這就是我想要的代碼，但是還不夠簡潔。我希望可以把創建DOM對象封裝到一個類中，並且把以上的三個方法都裝到一個對像中；那好吧，動手起來是很簡單的事情，這種工作不需要上網搜索代碼和示例的，直接應用C#的面向對象思維就可以完成。

首先是封裝以上的三個方法到一個對像中,封裝很簡單，應該不用我多廢話的，直接上代碼。

封裝後的三個函數
User={Function finduser(userId){….},Function showmessage(msg){….Var message=”提示，出錯了，錯誤原因”+msg;Alert(message);},Function append(obj){Var a=document.craeteElement(“a”);a.title=”你好”;a.href=”javascript:void(0);”;a.innerHTML=a.title;a.click=function(){ createdom();};$(obj).append(a);….}}

只需要聲明一個User變量來存儲上面的三個方法即可，不同的方法間使用逗號分隔，需要注意的是，這時候的User是一個靜態的類，無構造函數或者構造函數私有（我猜的），反正不可new了。

其次，我再創建一個封裝創建DOM對象的靜態類，代碼如下：

createElement={ element=function(targetName){return document.createElement(targetName);},a=document. createElement(“a”) }

相當簡單，這樣我就可以測試一下上面的CreateElement對像是否可正常工作，這次測試是在append方法中進行測試。 append方法再次被改造成下面的代碼。

function append(obj){Var a= createElement .a;a.title=”你好”;a.href=”javascript:void(0);”;a.innerHTML=a.title;a.click=function( ){createdom();};$(obj).append(a);….}

目前看來，append工作得相當的良好，好吧，我需要作出一點小改動，我需要在append函數中創建三個a並把它依次添加到obj對像中，代碼如下：

代碼
function append(obj){For(i=0;i<3;i++){Var a= createElement .a;a.title=”你好”;a.href=”javascript:void(0);”;a .innerHTML=a.title;a.click=function(){createdom();};$(obj).append(a);….}}

最後顯示的結果是obj對像中只得到了一個a我十分的不理解，這一個a讓我覺得我又回到了C#的懷抱，多麼美好呀，經過分析，當我通過Var a= CreateElement .a;

第一次調用在CreateElement.a來獲取a對象時，a屬性中的document.createElement(“a”)就已經把a對象駐留到內存中，這之後不管我再怎麼調用CreateElement.a，實際上都只是得到了內存中a的一個引用，改變的都竟然是同一個對象，這就是靜態類的特別之處，但是，當我通過調用CreateElement.element函數來獲取對象時，每次我得到的都是一個新的對象，方法不會保存對象的引用，這是肯定的，解決方法就是通過調用CreateElement.element函數來創建新的對象，但是這種方法非面向對象推薦。

另外一種比較好的解決辦法是使用非靜態類，即實體類的方式，創建非靜態類的方式也是相當的簡單，代碼如下：

createElement=function(){ element=function(targetName){return document.createElement(targetName);};a=document. createElement(“a”);}
直接聲明createElement對象，並使之有構造函數，成員間以分號進行分隔，當然如果你喜歡，還可以直接這樣寫，也是沒有一樣的效果。

function createElement (){ element=function(targetName){return document.createElement(targetName);};a=document. createElement(“a”);}

經過上面的聲明，我們就可以在append函數中像C#一樣使用createElement類來創建DOM對象了。

函數
function append(obj){for(i=0;i<3;i++){var ele=new createElement();var a=ele.a;a.title=”你好”;a.href=”javascript: void(0);”;a.innerHTML=a.title;a.click=function(){createdom();};$(obj).append(a);….}}

這樣每次new createElement()都是一個新的對象，不存在引用的問題了。

實際上，上面提到的就是Javascript中靜態類和非靜態類的區別；當然也從中得知，使用靜態類非靜態類的效率上還是有些差別的，而且調用的時候肯定也是靜態類方便一些，如果不計較引用衝突問題，我覺得靜態類應該是首選的。

作者：飛鴿傳書（http://www.freeeim.com/ipmsg/）

談JS面向對象【靜態與非靜態類】相关推荐

java靜態常量_Java靜態變量、靜態常量、靜態方法
Java靜態變量.靜態常量.靜態方法靜態變量和靜態方法都屬於靜態對象.在外部調用靜態方法時,可以使用"類名.方法名"的方式,也可以使用"對象名.方法名"的方式 ...
面向對象在VB6語言中的應用
原文链接:http://blog.csdn.net/areyan/archive/2006/05/28/758765.aspx 一:面向對象(Object-Oriente)編程的基本概念什麼是面向對 ...
非靜態初始化塊與夠着函數的執行順序
題目: 子類A繼承父類B,A a=new A();則父類B夠着函數.父類B靜態代碼塊.父類B非靜態代碼塊執行的先後順序是? 正確的執行順序是:杜磊B靜態代碼塊->子類A靜態代碼塊->父類B ...
java书籍李清华_201772020113 李清華《面向對象程序設計（java）》第18周學習總結...
1.實驗目的與要求 (1) 綜合掌握java基本程序結構: (2) 綜合掌握java面向對象程序設計特點: (3) 綜合掌握java GUI 程序設計結構: (4) 綜合掌握java多線程編程模型: ...
js面向数据编程(DOP)一点分享(转载)
js面向数据编程(DOP)一点分享 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpr ...
JS面向过程+面向对象编程区别，原型的应用
1.1面向过程编程思路:面向过程就是分析出解决问题所需要的步骤,再用函数把这些步骤一步一步实现,使用的时候一个一个的依次调用即可. 1.2面向对象过程思路:把事务分解成一个一个对象,然后由对象之间 ...
Angular / Ionic，React，Vue？使用Stencil.js面向未来的应用程序！
简介: (A Brief Intro:) In this tutorial, I'm going to build a plain Stencil app with a working analog ...
AVG.js ——面向未来的文字冒险游戏框架
AVG.js 是一款开源 Web 游戏框架,以成为新一代的 AVG 类游戏制作框架为目标,兼顾与之相近的其他游戏类型,例如解谜.卡牌等. 一. 1.安装 npm install -g avg-cli ...
DAY27.XIA.面向對象
2018-07-23 08:43:17 转载于:https://www.cnblogs.com/twinkle-star/p/9352889.html

談JS面向對象【靜態與非靜態類】

談JS面向對象【靜態與非靜態類】相关推荐

最新文章

热门文章