前言

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供八公山網(wǎng)站建設(shè)、八公山做網(wǎng)站、八公山網(wǎng)站設(shè)計(jì)、八公山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、八公山企業(yè)網(wǎng)站模板建站服務(wù)，十年八公山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

在javascript的世界里，寫法是個(gè)神奇的現(xiàn)象，真是百家齊開放??！每次看到老外寫的js組件，思想和寫法都怪異，就沒看到一個(gè)js結(jié)構(gòu)基本相同的代碼出來(lái)。今天，我就來(lái)談?wù)刯s寫法，我在開發(fā)過程中，也寫了幾種。對(duì)于性能方面，如果代碼結(jié)構(gòu)或邏輯寫的不好，會(huì)造成計(jì)算機(jī)CPU的運(yùn)算加大，運(yùn)行性能降低，js的寫法對(duì)性能的影響也是至關(guān)重要的。

通常寫js組件開發(fā)的，都會(huì)用到匿名函數(shù)的寫法去封裝一個(gè)對(duì)象，與外界形成一個(gè)閉包的作用域。（這里對(duì)于js的繼承，多態(tài)，我就不多說了，高級(jí)程序員應(yīng)該具備這些知識(shí)，如果您也做過java開發(fā)，這個(gè)概念太熟悉了。）

主要對(duì)封裝進(jìn)行研究，因?yàn)榍昂笈_(tái)都會(huì)涉及到面向?qū)ο蟮母拍睿瑢?duì)于封裝，怎么封裝，封裝的性能，等等很重要概念。封裝（在程序世界是第一概念，我個(gè)人認(rèn)為），全天下漫天遍野的封裝，JQuery，EXT和Prototype.js封裝的是javascript，jQuery uI和jQuery mobile封裝著jQuery，java中的JDBC在spirng,Hibernate等框架封裝著，在這里列舉幾個(gè)例子，還有很多種不一一介紹。

回到主題javaScript封裝寫法，先來(lái)看看一個(gè)簡(jiǎn)單的

function hello(){
  var a = 'hello';
  alert(a);
}

js函數(shù)是最原始，最基礎(chǔ)的封裝，懂js一目了然，如果你的頁(yè)面不需要很多js交互操作，就可以用這種簡(jiǎn)單的方式，如果你喜歡用JQuery,則需要寫成這樣 

$(function(){
 $('#id').click(function(){
  alert('hello');
 })
});

如果用Node.js則比較復(fù)雜點(diǎn)，因?yàn)橐狽ode.js要加載一個(gè)HTTP模塊，寫法如下     

var http = require('http');
http.createServer(function(req,res){
 res.writeHead(200,{'Content-Type':'text/html'});
 res.write('<p>hello</p>');
}).listen(8080);

再深層次封裝寫法，如果遇到大量使用js操作，單憑每個(gè)小的函數(shù)無(wú)法滿足，因?yàn)樗鼈兇嬖谝粋€(gè)公共的域中，寫法多而散很容易造成了很多bug因素，需要規(guī)整。js創(chuàng)造者給我們提供了一個(gè)叫匿名函數(shù)，顧名思義，匿名函數(shù)就是沒有實(shí)際名字的函數(shù)，它的格式很多種， ！function(){}() , (function(){})() , (function(){}()) , new function(){} , void function(){}(); JQuery.js就是一個(gè)匿名函數(shù)封裝,先看最常用的

 (function(){
  star.init = (function(name){
    var e = new Editor(name, Data.toolbarData);
   });
 })();

如果開發(fā)一些js組件的時(shí)候，可以先創(chuàng)建一個(gè)對(duì)象，給這個(gè)對(duì)象屬性和方法，讓這個(gè)對(duì)象能夠單獨(dú)操作和可以和其他對(duì)象合作         

 var klm = klm || {};

 klm = (function(){

    //第一個(gè)寫法
    klm.init = function(){

     alert('hello');

    }

    //第二個(gè)寫法
     klm.browser = (function(ua){
       var b = {
        msie:/msie/.test(ua) && !/opera/.test(ua),
        opera:/opera/.test(ua),
        safari:/webkit/.test(ua) && !/chrome/.test(ua),
        firefox:/firefox/.test(ua),
        chrome:/chrome/.test(ua)
       };
      })(window.navigator.userAgent.toLowerCase());

      //將其定義方法以接口方式返回給外界引用

      return{
        init: klm.init,
        browser:klm.browser 
      }

  })();

接下來(lái)這種js封裝寫法是我自己比較喜歡的    

 var myOpinion = myOpinion || {};
 myOpinion.prototype={
    init:function(obj,i){
       alert('hello');
     },
     closeWindow:function(obj,d){
      obj.click(function(){
       d.hide();
      });
     }
    }
    $(function(){
     var my = myOpinion.prototype;
     my.init($(".z-sidebar li em"),$("#contact"));    
     $("#contact").add(my.closeWindow($(".z-sidebar li em"),$("#contact")));

 });

這種方式先通過prototype繼承方式把每一個(gè)小的操作封裝成屬性，init和closeWindow，然后可以進(jìn)行初始化加載如my.init();也可以綁定到某個(gè)操作事件上如$("#contact").add(my.closeWindow());這些封裝一氣而成。

還有定義單個(gè)屬性封裝

 WinShow.create = function(c,body){  
      var _head = '<div class="+ c.heacss +"><span class="+ c.concss +">' + c.title + '</span></div>';
      this.container.innerHTML = _head;
      return this.container;
      this.container.onclick = function(e){

        alert('hello');

     }
 }

在這里我創(chuàng)建一個(gè)create屬性以匿名函數(shù)形式封裝一段HTML代碼，并給這個(gè) HTML代碼綁定點(diǎn)擊事件。

列舉以上幾種js封裝形式，但是小生還在研究中，這幾種都能實(shí)現(xiàn)相同操作，可是寫法有些區(qū)別，對(duì)于性能方面誰(shuí)有更好的見解可以點(diǎn)評(píng)我，進(jìn)行交流。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

本文名稱：javaScript中封裝的各種寫法示例（推薦）
標(biāo)題鏈接：http://jinyejixie.com/article28/pgehjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、Google、定制網(wǎng)站、域名注冊(cè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)