Domanda Rookie Javascript: Definisci le variabili in linea

Come hai notato, il problema principale è che, come scritto, lo script non è riutilizzabile. È codificato per un caso specifico. Non esiste un modo semplice per passare in diverse impostazioni su pagine diverse.

Quindi dovrai modificare lo script per renderlo riutilizzabile.

Ci sono molti modi in cui puoi farlo, ma eccone uno che comporta modifiche minime al codice originale:

< script >

// Define a global object containing the BookReader parameters for this
// page. Make sure this appears in your markup *before* the <script> tag
// that loads reader.js.
var BookReaderParams = {
    urlStart: "/exhibitions/bythebook/book8/W922/W922_",
    urlEnd: "_sap.jpg",
    numLeafs: 328,
    bookTitle: "Liber Amicorum (Friendship Book) of Joannes Carolus Erlenwein",
    bookUrl  = "http://thewalters.org/exhibitions/bythebook/book8/"
};

< / script > < script src="reader-modified.js" > < / script >

Quindi, modifica le seguenti righe nella versione modificata di reader.js:

La linea 28 diventa:

var url = BookReaderParams.urlStart + leafStr.replace(re, imgStr) + BookReaderParams.urlEnd;

La linea 80 diventa:

br.numLeafs = BookReaderParams.numLeafs;

E le righe 83 e 84 diventano:

br.bookTitle = BookReaderParams.bookTitle; br.bookUrl = BookReaderParams.bookUrl;

Questo non è il modo in cui strutturerei le cose se scrivessi questa funzionalità da zero; ci sono schemi molto più puliti per il codice riutilizzabile. Tuttavia, dato il codebase con cui stai lavorando, questo è un modo rapido e sporco per iniettare valori nello script senza bisogno di una copia separata di reader.js per ogni pagina.

Assolutamente! La modifica delle librerie javascript è praticamente una tradizione antica.

Dai uno sguardo a una delle righe:

br.getPageURI = function(index, reduce, rotate) {
    // reduce and rotate are ignored in this simple implementation, but we
    // could e.g. look at reduce and load images from a different directory
    // or pass the information to an image server
    var leafStr = '000000';            
    var imgStr = (index+1).toString();
    var re = new RegExp("0{"+imgStr.length+"}$");
    var url = '/exhibitions/bythebook/book8/W922/W922_'+leafStr.replace(re, imgStr) + '_sap.jpg';
    return url;
}

Un modo semplice e non intrusivo per modificare l'URL sarebbe aggiungere un parametro. Considera quanto segue:

br.getPageURI = function(index, reduce, rotate, baseurl) {
    baseurl = baseurl|| '/exhibitions/bythebook/book8/W922/W922_';
    var leafStr = '000000';            
    var imgStr = (index+1).toString();
    var re = new RegExp("0{"+imgStr.length+"}$");
    var url = baseurl + leafStr.replace(re, imgStr) + '_sap.jpg';
    return url;
}

Ciò significa che sostituire l'URL di base con il parametro passato come quarto parametro. La prima riga è essenzialmente un fail safe per garantire che abbia un valore se non viene passato nessun quarto parametro. È possibile applicare immediatamente questa modifica senza causare problemi altrove. Ogni volta che viene chiamato questo metodo, fornire il quarto parametro appropriato.

Per le righe 80, 83 e 84, sarà necessario essere in grado di fornire dinamicamente questi parametri. Poiché si tratta di un file js statico, è possibile rimuovere la sezione:

br.init();

$('#BRtoolbar').find('.read').hide();
$('#textSrch').hide();
$('#btnSrch').hide();

Ed eseguilo tu stesso in uno script dopo aver incluso il file statico javascript, modificando i parametri come meglio credi:

<script src="static.js"></script>
<script>
    br.bookTitle= 'Dynamic book title here ' + new Date();
    br.bookUrl  = 'http://thewalters.org/exhibitions/bythebook/book8/';

    br.init();

    $('#BRtoolbar').find('.read').hide();
    $('#textSrch').hide();
    $('#btnSrch').hide();
</script>

Oppure puoi avvolgere l'intero oggetto nella sua funzione e chiamarlo con i parametri da modificare:

// In static js
function MyBookReader(bookTitle, bookUrl) {
    br = new BookReader();

    ...

    br.bookTitle= bookTitle;
    br.bookUrl  = bookUrl;

    br.init();

    $('#BRtoolbar').find('.read').hide();
    $('#textSrch').hide();
    $('#btnSrch').hide();
}

// In script on page
MyBookReader('Tale of two cities', 'http://bookreader-url.com');

Spero che ti aiuti.