2
\$\begingroup\$

I have the library that I have found to be very useful when creating dynamic content rich web applications. I call it DO.js. It allows me to create entire DOM structures inside of Javascript in a similar manner that HTML markup should look. Additionally, it does it all without writing any HTML strings. It uses a hierarchy of embedded functions and objects to create the DOM structure. Please see my site below for examples.

My question is, is this a good way of doing this? I can and I have (the website below is created in this fashion) created whole websites using this method. I made it so that I could easily load and display large amounts of data pulled via ajax and where each bit of data will have events and variables attached. Of course, this is hard and tacky to do using normal HTML.

I kinda created documentation for it. However, I am not very good with documentation(or writing in general.)

What should/could be done better? What would be the best programming practices in this case? Anykind of critique would be awesome.

Thanks

http://hurdevan.com/#!Home/Projects/DO.js

Please note that the website does not work at all in IE due to a Hashbang.js bug. And, I don't care about IE.

Code Examples:

Simple Example

with(DO.dom)
   {
   div({parentElement:document.body},
       span(b('Hello World!'))
        );
   }

An example using events and such:

var win = {};
with(DO.dom)
    {
    win.root = div({parentElement:document.body,style:'border:1px solid black;width:200px;height:200px;position:fixed;'},
        win.bar = div({style:'height:20px;text-align:center;background-color:#333333;color:white;cursor:pointer;',
            onmousedown:DO.Func(true,function(eve,winobj)
                {
                window.onmousemove = winobj.bar.onmousemove;
                window.onmouseup = winobj.bar.onmouseup;
                winobj.offsetX = winobj.root.offsetLeft - eve.x;
                winobj.offsetY = winobj.root.offsetTop - eve.y;
                winobj.activeDrag = true;
                },win),
            onmouseup:DO.Func(true,function(eve,winobj)
                {
                window.onmousemove = false;
                window.onmouseup = false;
                winobj.activeDrag = false;
                },win),
            onmousemove:DO.Func(true,function(eve,winobj)
                {
                if(!winobj.activeDrag)return false;
                winobj.root.style.position="fixed";
                winobj.root.style.left = (eve.x + winobj.offsetX)+"px";
                winobj.root.style.top = (eve.y + winobj.offsetY)+"px";
                },win)
            },'Move Window'),


        win.body = div(
            div(b('First Name:'),
                win.firstName = input({type:'text'})
                ),
            div(b('Last Name:'),
                win.lastName = input({type:'text'})
                ),
            div(b('Email:'),
                win.email = input({type:'text'})
                ),
                input({type:'submit',onclick:DO.Func(function(winobj)
                {
                alert("First Name:"+winobj.firstName.value +"\n"+"Last Name:"+winobj.lastName.value +"\n"+"Email:"+winobj.email.value +"\n");
                },win)}),
            "This window was created with DO.dom"
            )
        );


    }

Another example that allows the DOM structure to be child/parent aware.

with(DO.dom)
   {
var foo =div({parentElement:document.body},
       div({nid:'inputElements';},
        input({nid:'firstName'}),
        input({nid:'lastName'}),
        input({nid:'email'})            
        )
    );
   }

foo.inputElements.firstName.value = 'Hello';
foo.inputElements.lastName.value = 'Word';
foo.inputElements.email.value = 'hello@world.com';
\$\endgroup\$

migrated from stackoverflow.com Apr 25 '13 at 7:20

This question came from our site for professional and enthusiast programmers.

  • \$\begingroup\$ Please include the code in your question, we shouldn't have to follow five different links to see it. \$\endgroup\$ – Dagg Apr 25 '13 at 9:25
  • \$\begingroup\$ developer.mozilla.org/en-US/docs/JavaScript/Reference/… <- might wanna read that before anyone sees this ;) \$\endgroup\$ – Dagg Apr 25 '13 at 19:10
  • \$\begingroup\$ I agree. But I have never had any issue. Additionally, could make $ = DO.dom and do $.div($.b('hello world')); I have used both. \$\endgroup\$ – user2317016 Apr 25 '13 at 20:25
2
\$\begingroup\$

A more typical approach these days, if you have to create a lot of DOM objects in javascript, is to use a templating system, such as Mustache (see also iCanHazjs), and thus translate javascript objects into HTML. The advantages are readable javascript and optimised DOM object creation. The disadvantage of this vs. your library is that this doesn't deal with the event binding.

Your library certainly seems powerful, but I would say that this might be very hard to read if you have are creating a lot of DOM objects.
What you'd end up with is a lot of .js code that essentially replicates an HTML document fragment, but with less readability.

This is the advantage of using HTML templates; that you can read the HTML structure easily, but in the javascript code, you don't have more than a line or two of code that does the DOM element creation. Also, templating systems generally build DOM objects in an efficient manner.

Also, I'd look into something like jQuery entwine as a possibility for easy-to-read event binding.

\$\endgroup\$
  • \$\begingroup\$ Was this supposed to be a code review? \$\endgroup\$ – Dagg Apr 27 '13 at 17:47
  • \$\begingroup\$ Fair comment, I was answering too much on StackOverflow and hadn't adapted my answer style. I was answering the question here from OP: "My question is, is this a good way of doing this?" \$\endgroup\$ – Luke H Apr 28 '13 at 10:56
  • \$\begingroup\$ Thanks for the answer. Readability can be a problem if said person did a sloppy job writing the code. It is definitely something that should not be abused. However, I believe use can be found when multiple elements have to later be readdressed(post creation) for updating. The traditional methods of pulling elements from the dom are insufficient in large quantities. DO.dom allows for hundreds of elements to be organized in an object oriented fashion. This allows for smaller lookup time during runtime. Or, is there a better way of looking up tons of elements? \$\endgroup\$ – user2317016 Apr 28 '13 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.