07. A combination of JavaScript design patterns -- Composite

07. Combination of JavaScript design patterns ---- Composite

Combination Mode is a mode tailored to create dynamic Web user interfaces. In this mode, you can use a command to stimulate complex or recursive behavior on multiple objects, which can simplify the code of adhesion and make it easier to maintain, complex actions are delegated to various objects.

This article describes the combination mode through an example of a Windows file directory structure.

Problem Introduction

The Windows file directory structure is like a tree with a root node (my computer), a subnode (such as drive C and drive D), and a subnode (folder under drive letter ), folder may also contain folders or separate files. Therefore, in the tree concept,
We call separate file nodes as leaves, while folders as branches.

So this time there is such a proposition that we want to selectively hide or display specific parts of the Windows directory structure. This may be a separate file or a folder. Considering the complexity of the Windows file directory structure, we only focus on displaying and hiding files or folders.

Definition of composite mode class

For the above proposition, we need to design two classes, one is used as the combination object class of folders, and the other is used as the leaf object class of the file itself.

// Folder interface: Combination object var idirectory = new interface ("idirectory", ["add", "delete", "GetFile"]); // file interface: leaf object var ifile = new interface ("ifile", ["show", "hide"]);

Next, we will define a dynamic file system class dynamicfilesystem, which is the implementation class of idirectory and ifile. That is to say, an object instantiated through the dynamicfilesystem class may be either a file or a folder.

The Code is as follows:

// File system class var dynamicfilesystem = function (ID, filename) {This. files = []; // subfile list (note that a folder is also a file) This. createdate = new date (); // file creation date this. filename = filename; // file name // to describe this problem well on the Web, we need to use htmldomelement this. element = document. createelement ("Div"); this. element. id = ID ;}; // implement two interfaces implements (dynamicfilesystem, idirectory, ifile); // implement all the Abstract METHODS dynamicfilesystem. prototype = {Add: function (filesystemchild) {This. files. push (filesystemchild); this. element. appendchild (filesystemchild. getelement () ;}, Delete: function (filesystemchild) {for (var file, I = 0; node = This. getFile (I), I ++) {If (file = filesystemchild) {This. files. splice (I, 1); break;} This. element. removechild (filesystemchild. getelement () ;}, GetFile: function (INDEX) {return this. files [Index] ;}, show: function () {// display file or folder this. element. style. display = "Block"; for (var file, I = 0; node = This. getFile (I), I ++) {file. show (); // recursive call}, hide: function () {for (var file, I = 0; node = This. getFile (I), I ++) {file. hide (); // recursive call} // hide a file or folder this. element. style. display = "NONE" ;}, // extended method getelement: function () {return this. element ;}};

In the code above, we first define the interfaces that the composite object class and the leaf object class should implement. In addition to conventional object combination methods, the operations to be defined by these classes only include hide and show.
Next we define the composite object class. Because dynamicfilesystem only packs Div objects, the file system can nest sub-file systems. Therefore, we only need to use a combined object class.

Instantiation demonstration

The following is what you can't wait to see. How can we instantiate and operate the entire Windows directory tree structure?

In fact, this is not complete yet. We must have a real file entity class, such as Word documents, PDF documents, text documents, and so on. They are all files, therefore, you can define a file class and inherit the dynamicfilesystem class (because it also has the file system function ),
The following uses the text document as an example to create a textfile class:

VaR textfile = function (ID, filename) {// file name this. filename = filename; this. element = document. createelement ("Div"); this. element. id = ID ;}; // The implementation inherits (textfile, dynamicfilesystem );

In this way, the textfile class has all the methods of the dynamicfilesystem class, and has its own unique constructor that receives a parameter named file name.

The next step is to start the application. First, create a file system (folder) instance and then create three textfile instances, add these three text files to the file system:

// Create a folder var filesystem = new dynamicfilesystem ("dirroot", "Drive C"); // create a text file var txtfile1 = new textfile ("txtfile1 ", "Text File 1"); var txtfile2 = new textfile ("txtfile2", "text file 2"); var txtfile3 = new textfile ("txtfile3 ", "text file 3"); // Add the three text files to the filesystem folder. add (txtfile1); filesystem. add (txtfile2); filesystem. add (txtfile3 );

At this time, you may want to say that I want to create two folders under drive C: "Windows" and "Program Files". What should I do? It's easy to proceed with the previous Code:

VaR windowsdir = new dynamicfilesystem ("dirwindows", "Windows"); // Windows Folder var programdir = new dynamicfilesystem ("dirprogram", "Program Files "); // Add the Program Files folder to the C drive filesystem. add (windowsdir); filesystem. add (programdir );

OK. At this step, everything went smoothly.

If you are an easy-to-ask student, you want to know that if I suddenly need to install a software, the installation directory of the software must be C: Program filesmicrosoft. after the installation is complete, how can I simulate a microsoft.exe file?

Pictures and tigers:

Step 1: Create an exefile class Step 2: Create a Microsoft directory Step 3: add it to C:/program filesstep 4: Create an exefilecategory of the local microsoft.exefile step 5, add microsoft.exe to the C:/program files/Microsoft directory, complete

Summary

If used properly, the combination mode will be a very useful design mode. It organizes a batch of sub-objects into a tree structure. As long as a command, all objects on the tree can be operated, which improves the modularity of the code and facilitates code reconstruction and object replacement. This mode is especially suitable for Dynamic HTML user interfaces. With its help, you can develop it without knowing the final structure of the user interface. For each of our front-end JavaScript programmers, mastering the combination mode will certainly be of great benefit.

This article references the Javascript design patterns [Ross harmes, Dustin Diaz]

If you have misstated this, please do not care about it.