• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Gliederung eines JS Plugins

L

le0m

New member
Hallo zusammen,

ich zerbreche mir gerade den Kopf darüber, wie ich mein derzeitiges JS Plugin gliedern soll. Momentan habe ich alles in einer einzigen Construtor Function in einier einzigen File. Ich würde den Code gern auf mehere Classes teilen. Am besten auch auf verschiedenen Files. Da ich mich mit JS noch nicht so gut auskenne weiß ich nicht genau wie ich vorgehen soll. Der vielfältige Umgang in JS mit Objekten, Functionen, Vererbungen usw. verwirrt mich noch etwas. Bis lang erstelle ich eine Class einfach so: function ClassName(){... und dann haue ich alles da rein. :rolleyes:

Mit PHP gliedere ich normalerweise so, dass ich pro Class eine Datei habe, die dann von einer weiteren Datei ausgeführt werden. So in etwa:

class.shared.php
PHP: 
<?php

class shared
{
   ...

class.modul_a.php
PHP: 
<?php

require_once('class.shared.php');

class modul_a extends shared
{
   ...

class.modul_b.php
PHP: 
<?php

require_once('class.shared.php');

class modul_b extends shared
{
   ...
index.php
PHP: 
<?php
require_once('class.modul_a.php');
require_once('class.modul_b.php');

$instance_a = new modul_a();
$instance_b = new modul_b();

Kann man diesen Ansatz auch mit JS verfolgen oder gibt es dort andere Verfahren, die sich besser eignen?

Ich hoffe ihr könnt mich erleuchten.
 
Zuletzt bearbeitet:
bei createModuleA wird das base-objekt verändert
bei createModuleB wird das base-objekt NICHT verändert
bei createModuleC wird das base-objekt NICHT verändert und ist prototyp vom ergebniss, die zusätzlichen eigenschaft(en) selbst sind eigene eigenschaften vom ergebniss
für Object.assign in createModuleB benötigst du ein polyfill
Code: 
<!DOCTYPE HTML>
<html>
  <head>
    <title>test</title>
    <script>
      function createModuleShared()
      {
        var privateF = function()
        {
          return "shared private function";
        };
        var publicF = function()
        {
          return "shared public function calls " + privateF();
        };
        return {
          sharedF: publicF
        };
      }
    </script>
    <script>
      function createModuleA(base)
      {
        var moduleA = base || {}; // in es6 kommen endlich defaults
        var privateF = function()
        {
          return "ModuleA private function";
        };
        var publicF = function()
        {
          return "ModuleA public function calls " + privateF();
        };
        moduleA.moduleAF = publicF;
        return moduleA;
      }
    </script>
    <script>
      function createModuleB(base)
      {
        var base = base || {};
        var privateF = function()
        {
          return "ModuleB private function";
        };
        return Object.assign({ // Object.assign es6 function, gibt aber ein polyfill
          moduleBF: function()
          {
            return "ModuleB public function calls " + privateF();
          }
        }, base);
      }
    </script>
    <script>
      function createModuleC(base)
      {
        var base = base || {};
        var privateF = function()
        {
          return "ModuleC private function";
        };
        return Object.create(base, {
          moduleCF: { value: function()
          {
            return "ModuleC public function calls " + privateF();
          }}
        }, base);
      }
    </script>
    <script>
      var shared = createModuleShared();
      var moduleA = createModuleA(shared);
      var moduleB = createModuleB(shared);
      var moduleC = createModuleC(shared);
      console.log(moduleA.sharedF());
      console.log(moduleA.moduleAF());
      console.log(moduleB.sharedF());
      console.log(moduleB.moduleAF());
      console.log(moduleB.moduleBF());
      console.log(moduleC.sharedF());
      console.log(moduleC.moduleAF());
      console.log(moduleC.moduleCF());
    </script>
  </head>
  <body>
    
  </body>
</html>
 
Wenn du da mit verschiedenen Dateien arbeiten willst, solltest du dir mal commonJS und/oder AMD anschauen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben