2016-11-26 8 views
1

私はJavaからJavaScriptに移植したクラスをいくつか持っています。私はそれらを図書館で組み合わせたいと思っています。例えば単一のネームスペースでjavascript擬似クラスオブジェクトを結合する

var myLibrary = { 
    version: 1.0, 
    ...more code... 
}; 

は、今私は(これは、JavaからJavaScriptに移植されました!)このライブラリに追加したいクラスは、次のとおりです。

Edit: new version below 

このクラスは、として美しくとして動作しますそれをカプセル化することは困難であることが判明しています。私はこのようなことをしたいと思います:

var ticker = new myLibrary.jTicker(30,10); 
var otherObj = new myLibrary.object2(); 

問題は私がプロトタイプのものを追加することはできないようです。カプセル化の外で定義する必要があるようです。それらを内部に含めることさえ可能ですか?私は、プロトタイプのものを内部関数として入れ、this.that = thisハックを使うことができると理解していますが、私はむしろそうは思わないでしょう。

私はJavaScriptを(jTickerクラスのように)簡単に移植することができるJavaで6つのクラスにゲームを分割しており、それらをすべて同じライブラリ名前空間で結合したいと思います。

編集:@Jamiecの提案のおかげで、私は小さなユーティリティライブラリを完成させました。そのような疑似クラスを2つ含んでいます。いくつかのクロスブラウザシムが含まれています。誰もがその技術を見て、誰もがそれを享受できるように、私はここでそれを共有しました。

ccLibrary.js:

/*****************************/ 
/* Crawford Computing  */ 
/* JavaScript IIFE Library */ 
/*****************************/ 
/* Author: Jonathan Crawford */ 
/* Created: Nov 2016   */ 
/*****************************/ 
/* Current Version: 1.1  */ 
/* Version 1.1: added util */ 
/* Version 1.0: added ticker */ 
/*****************************/ 
/*Please credit me if you use*/ 
/*my code in whole or in part*/ 
/*****************************/ 
var ccLibrary = (function(){  
    /************************************************************************/ 
    /*       Ticker Class        */ 
    /************************************************************************/ 
    /* Author: Jonathan Crawford           */ 
    /* Created: Nov 2016             */ 
    /* version 3.0 IIFE encapsulated version        */ 
    /************************************************************************/ 
    /*construct:               */ 
    /*var testTicker = new ccLibrary.jTicker(viewLength,spaceSize);   */ 
    /*add a message               */ 
    /*testTicker.addMessage(number,message);        */ 
    /*this will get increment the start index and return the ticker   */ 
    /*var temp = testTicker.getTicker();         */ 
    /*call that in a timed loop and stick it wherever      */ 
    /*to remove/change              */ 
    /*if(testTicker.keyExists(number);){testicker.removeMessage(number);} */ 
    /*then add the updated version           */ 
    /*testTicker.addMessage(number,newMessage);        */ 
    /*message numbers need not be added in order(but will display in order) */ 
    /*numbers may be skipped, i.e 0,1,5,6,9 is a valid key list    */ 
    /*testTicker.removeMessage(number);          */ 
    /************************************************************************/ 
    var Ticker = function(length,spaces) { 
     //make space even 
     if (spaces%2 != 0) { spaces += 1; } 
     //set space size] 
     this.spaceSize = spaces; 
     //set length 
     this.viewLength = length; 
     //start position 
     this.position = 0; 
     this.key = 0; 
     //all messages 
     this.messages = {}; 
    } 
    //add message 
    Ticker.prototype.addMessage = function(key,msg) { 
     var halfspace = ""; 
     var half = this.spaceSize/2; 
     for (var i = 0; i < half; i++) { halfspace += "\u00A0"; } 
     var temp = halfspace + msg + halfspace; 
     this.messages[key] = temp; 
    } 
    //remove message 
    Ticker.prototype.removeMessage = function(key) { 
     delete this.messages[key]; 
    } 
    //does key exist? 
    Ticker.prototype.keyExists = function(key) { 
     return (key in messages); 
    } 
    //get string snipit 
    Ticker.prototype.getTicker = function() { 
     this.position += 1; 
     //set pointer to next key when end of current message reached 
     var stop = false; 
     for (key in this.messages) { 
      if (stop) { //execute once 
       this.key = key; 
       stop = false; //if this does not run we can fix it 
       break; //or key will match and it will excute again 
      } 
      else { 
       // only execute when key matches and position is past end of message 
       if (key == this.key && this.position > this.messages[this.key].length-1) { 
        this.position = 0; 
        stop = true; //set flag for an execution on next key 
       } 
      } 
     } 
     while(stop){ //if new key never set 
      for (key in this.messages) { 
       this.key = key; //we want the first key 
       stop = false; 
       break; 
      } 
     } 
     var temp = this.messages[this.key].substring(this.position); 
     var work = false; 
     for (key in this.messages) { 
      //starting at next key 
      if (work) { temp += this.messages[key]; } 
      //work rest of keys 
      if(key == this.key){ work = true; } 
     } 
     //contiue if short 
     for (key in this.messages) { 
      temp += this.messages[key]; 
      if (temp.length > this.viewLength) { break; } 
     } 
     //return exactely enough 
     return temp.substring(0,this.viewLength); 
    } 

    /****************************************/ 
    /*  Javascript Utilities   */ 
    /****************************************/ 
    /* Author: Jonathan Crawford   */ 
    /* Created: October, 2015    */ 
    /****************************************/ 
    /* Change History:      */ 
    /* Current Ver. 2.0 Nov 2015   */ 
    /* Version 2.0:IIFE encapsulated version*/ 
    /* Version 1.1: Added fixDate   */ 
    /* and isIE functions.    */ 
    /* Version 1.0: First Version   */ 
    /* Made from Textbook.     */ 
    /****************************************/ 
    /*construct:       */ 
    /*var util = new ccLibrary.Utilities(); */ 
    /*call members:       */ 
    /*if(util.isIE()){}      */ 
    /*util.$(id) is getElementById(id)  */ 
    /*add text to element     */ 
    /*util.setText(id)      */ 
    /*add event        */ 
    /*util.addEvent(obj,type,fn)   */ 
    /*remove event       */ 
    /*util.removeEvent(obj,type,fn)   */ 
    /****************************************/ 
    var Utilities = function(){ 
     if (!Date.now) { //Older Browser Fix for Timings 
      Date.now = function now() { 
       return new Date().getTime(); 
      } 
     } 
    } 
    Utilities.prototype.isIE = function() { 
     var myNav = navigator.userAgent.toLowerCase(); 
     return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false; 
    } 
    Utilities.prototype.$ = function(id) { //Shortcut to the element 
     if (typeof id == 'string') { 
      return document.getElementById(id); 
     } 
    } 
    Utilities.prototype.setText= function(id, message) { 
     if ((typeof id == 'string') && (typeof message == 'string')) { 
      var output = this.$(id); 
      if (!output) return false; 
      if (output.textContent !== undefined) { 
       output.textContent = message; 
      } else { 
       output.innerText = message; 
      } 
      return true; 
     } 
    } 
    Utilities.prototype.addEvent = function(obj, type, fn) { 
     if (obj && obj.addEventListener) { 
      obj.addEventListener(type, fn, false); 
     } else if (obj && obj.attachEvent) { 
      obj.attachEvent('on' + type, fn); 
     } 
    } 
    Utilities.prototype.removeEvent = function(obj, type, fn) { 
     if (obj && obj.removeEventListener) { 
      obj.removeEventListener(type, fn, false); 
     } else if (obj && obj.detachEvent){ 
      obj.detachEvent('on' + type, fn) 
     } 
    } 

    return{ 
     version:"1.1", 
     Ticker:Ticker, 
     Utilities:Utilities 
    }; 
})(); 

答えて

1

生命維持を使用し

var myLibrary = (function(){ 

    var jTicker = function(length,spaces) { 
    //make space even 
    if (spaces%2 != 0) { spaces += 1; } 
    //set space size] 
    this.spaceSize = spaces; 
    //set length 
    this.viewLength = length; 
    //start position 
    this.position = 0; 
    this.key = 0; 
    //all messages 
    this.messages = {}; 
    } 

    // you can have all your prototype code here here 

    return{ 
     version:"1.0", 
     jTicker:jTicker 
    }; 

})(); 

使い方

var myInstance = new myLibrary.jTicker(10,30); 
+0

この平均は私が生命維持によりjTickerのようなオブジェクトを追加することができませんか?ただそれらをすべて返さなければならない?どうもありがとうございます! –

+1

ES6モジュールを使用しているときにIIFEが必要なのはなぜですか? –

+0

これはjure javascript、モジュールなし、フレームワークなしです。 –

関連する問題