Comment transformer ce code javascript couramment utilisé en plugin?

Vue d’ensemble

Je développe un site Web basé sur WordPress qui permet à un visiteur de télécharger des images à différents endroits de la page. J’ai (après beaucoup d’essais et d’erreurs) obtenu un code fonctionnel, mais comme le code diffère légèrement entre chaque zone de «téléchargement», j’ai pensé essayer de le rendre réutilisable sous la forme d’un «plugin».

Mon fond

Je suis un programmeur autodidacte, donc je suis sujet à beaucoup d’erreurs et je fais les choses de manière complètement illogique, en plus d’écrire mille lignes de code alors qu’une ligne aurait suffi.

Historique du problème (veuillez ignorer cette section pour voir le code ci-dessous)

Je pensais inclure un peu d’histoire pour ne pas tomber sous le problème de XY . J’ai 4 endroits sur la page Web que les visiteurs peuvent télécharger sur le site. 3 d’entre elles sont des images téléchargées qui devraient permettre au visiteur de “rogner” également l’image. J’utilise les plugins jQuery plupload et jcrop afin de fournir la fonctionnalité.

Au départ, j’ai tenté d’écrire le code de manière à ce que la page inclue le code pertinent dans le DOM au moment de l’exécution. Afin d’avoir plusieurs instances plupload sur la même page, j’ai créé une “variable dynamic”, puis appelé le code comme ceci …

var dynamicPartOfVar = "imageUploadAreaOne"; imageManipulationObject["imageUploader"+dynamicPartOfVar] = new plupload.Uploader(plupload_init); 

Cela a fonctionné (d’une manière) mais j’ai découvert que si le code est dans le DOM, le navigateur ne le cache pas. Alors, j’ai ensuite choisi d’avoir un fichier js séparé pour chaque zone de téléchargement, de les “inclure” et de transmettre les variables pertinentes avec:

 wp_localize_script("imageUploadAreaOne", "inputVar", $relevantVariableArray); wp_enqueue_script("imageUploadAreaOne"); 

Cependant, je me suis vite rendu compte que si je pouvais “passer” différentes variables dans le même fichier, je ne pouvais créer qu’un seul ensemble de code et (par exemple) passer une variable appelée “allowCropping” qui activerait / désactiverait jCrop, etc.

Problème

J’ai un code tel que (juste un exemple):

 var isAdmin = inputVar.isAdmin; var notAdmin = inputVar.notAdmin; var thisUser = inputVar.thisUser; var ajaxurl = inputVar.ajaxurl; imageManipulationObject["imageUploader"+dynamicPartOfVar] = new plupload.Uploader(plupload_init); imageManipulationObject["ProgressLoader"+dynamicPartOfVar] = $('#ProgressLoader'+dynamicPartOfVar).percentageLoader({width: 170, height: 170, progress:0.0}); /* **************************** */ // HIDE CROPPING DIV WHEN USER SELECTS A DIFFERENT IMAGE /* **************************** */ $('.imageSelection').on('click', function() { closeCropWindow(); }); $('.imageThumb').on('click', function() { closeCropWindow(); }); 

Exemple HTML

 <div id="mainCropDivIDdynamicPartOfVar; ?>"> 
<div id="innerCropDivIDdynamicPartOfVar; ?>" class="innerCropDiv"> <img class="croppingImage" id="croppingImageIDdynamicPartOfVar; ?>" alt="Cropping Image" src=""/>
<form id="cropimgdynamicPartOfVar; ?>" name="cropimg" method="post" action=""> <input type="hidden" id="x_dynamicPartOfVar; ?>" name="x"> <input type="hidden" id="y_dynamicPartOfVar; ?>" name="y"> <input type="hidden" id="w_dynamicPartOfVar; ?>" name="w"> <input type="hidden" id="h_dynamicPartOfVar; ?>" name="h"> <input type="hidden" name="typeOfImage" value="typeOfImage; ?>"> <input type="hidden" id="imageIDtoCropdynamicPartOfVar; ?>" name="imageIDtoCrop" value=""> <input id="performCropButtondynamicPartOfVar; ?>" type="submit" value="Crop Image">
 

En supposant que le tout soit inclus dans un “plugin”, c’est la voie à suivre. Comment pourrais-je m’y prendre? Je veux pouvoir passer des variables dans le plugin, y compris plusieurs éléments du DOM (c’est-à-dire que je voudrais transmettre au plugin la div qui contient l’image qui doit être recadrée, la div qui contient l’aperçu de l’image, la div. qui contient l’image actuellement téléchargée, etc.). Plus d’autres variables telles que d’autoriser ou non le “recadrage”.

Merci de votre aide.

vous aurez besoin de créer un nouveau fichier JS (qui sera votre plugin) le code nécessaire pour cela est

 (function ($) { $.fn.myFunctionPlugin= function (options) { var defaults = { }; var settings = $.extend(true, {}, defaults, options); } function dosomthing() { //CODE HERE } } (jQuery)); 

Ajoutez une référence au plugin sur votre page (de la même manière que vous ajoutez une référence à jquery ou à un autre tiers js)

  

append un autre segment de script sur la même page

  

PS: Veuillez vous reporter au livre JQuery en action, deuxième édition, à partir de la page 205.

Référence pour l'écriture d'un plugin jquery simple: exemple de plugin jquery