Developing a modular JavaScript component

Today, although most Web applications use a lot of JavaScript, how to maintain the focus, robustness, and maintainability of client functionality is still a big challenge.

While other programming languages and systems have taken for granted the principle of focusing on the principles of separation and dry, these principles are often overlooked when developing browser-side applications.

Part of the reason for this is that the JavaScript language itself is in the throes of a history that, for a long time, has struggled to get serious attention and treatment from developers.

The more important reason may be due to differences between the server and the client. Although there are already a number of architectural style concepts in this area, such as Roca, the way to manage this difference is explained. But there is still a lack of guidance on how to implement these concepts in 1.

These reasons often result in highly procedural and relatively unstructured front-end code, which reduces the overhead of calls and simplifies the complexity of code calls, which is why JavaScript and browsers allow this invocation to exist. But soon, the code implemented in this way becomes difficult to maintain.

This article will show you the evolution of a simple component (widget) through an example, and see how it evolves from a large, unstructured code base into a reusable component.

Filter a Contact

The role of this example component is to filter a list of contacts by name. Its latest results, along with its full evolution, can be found in this GitHub code base. We encourage readers to review the submitted code and leave valuable comments.

In accordance with the principle of progressive enhancement, we begin with a basic HTML structure to describe the data used. Here is the H-card micro-format (microformat), which can play a semantic role in making the various information of the contact seem meaningful:

<!--index.html--> <ul> <li class= "H-card" >  <a href=" http://jakearchibald.com "class=" P-name u-url ">jake archibald</a> (<a href= "mailto:jake@example.com" class= "U-email" >e-mail</a>) </li> <l I class= "H-card" >  <a href= "Http://christianheilmann.com" class= "P-name u-url" >christian heilmann</a> (<a href= "Mailto:christ") Ian@example.com "class=" U-email ">e-mail</a>) </li> <li class=" H-card "> &L T;img src= "Png/john.png" alt= "Avatar" class= "U-photo" > <a href= "http://ejohn.org" class= "P-name U-url" & Gt John resig</a> (<a href= "mailto:john@example.com" class= "U-email" >e-mail</a>) </ Li> <li class= "H-card" >  <a href= " Http://www.nczonline.net "class=" P-name u-url ">nicholas zakas</a> (<a href=" Mailto:nicholas@examp Le.com "class=" U-email ">e-mail</a>) </li> </ul>

One thing to note here is that we don't care about this DOM structure is based on the server-side generated HTML code or generated by other components, as long as it is guaranteed that our components will be able to rely on this infrastructure when initializing. This structure actually forms a DOM based data structure for the table item [{photo, website, name, e-mail}].

With this infrastructure, we can begin to implement our components. The first step is to provide the user with an input field to enter the contact name. Although it does not belong to the contract of the DOM structure, our component is still responsible for creating it and adding it dynamically to the DOM structure (after all, if we don't have our components, adding this field doesn't make any sense at all).

Main.js     

 var contacts = jQuery ("ul.contacts");     
 JQuery (' <input type= ' search '  /> '). InsertBefore (contacts);

(We're only using jquery for convenience, but also considering its widespread usability.) If you use a different DOM to manipulate the class library, it is also for the same reason. ）

The JavaScript file itself and the jquery file it relies on are referenced at the bottom of the HTML file.

Next, start adding the functionality that you want, and this component hides them from contacts that don't fit into the new field's input name:

Main.js     

 var contacts = jQuery ("ul.contacts");     
 JQuery (' <input type= ' search '  /> '). InsertBefore (Contacts)
. On ("KeyUp", onFilter);     

 function OnFilter (EV) {     
     var Filterfield = JQuery (this);     
     var contacts = Filterfield.next ();     
     var input = Filterfield.val ();     

     var names = Contacts.find ("li. P-name");     
     Names.each (function (i, node) {     
         var el = jQuery (node);     
         var name = El.text ();     

         var match = Name.indexof (input) = = 0;     
         var contact = el.closest (". H-card");     
         if (match) {     
             contact.show ();     
         } else {     
             contact.hide ();}}     
    );     
 

(referencing a separate, named function, which typically makes a callback function easier to manage than defining an anonymous function.) ）

Note that this event-handling function relies on a particular DOM environment, depending on the element that triggers the event (its execution context is mapped to the this pointer). We'll start with this element to walk through the DOM structure to access the contact list and find all the elements that contain the name (which is defined by the semantics of the micro-format). If the beginning of a name does not match the current input, we iterate up again and hide the corresponding container element, otherwise, make sure that the element is still visible.

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/