2
\$\begingroup\$

After posting some of this code on Stack Overflow I was told to have a look here and get some feedback.

I am having fun building a light JavaScript framework and have copied this pattern. It works fine, but I like to have some review on it. The reason that I was directed here is likely the use of CSSStyleDeclaration. I wonder if that is good practice, or just a dirty shortcut.

var $ = (function() {
     function doCSS(prop, val) {
       var isSet = Boolean(val),
         action = CSSStyleDeclaration.prototype.setProperty,
         args = arguments;
       if (isSet) {
         this.each(function(node) {
           action.apply(node.style, args);
         });
         return this;
       } else if (typeof(prop) === 'object') {
         this.each(function(node) {
           Object.keys(prop).forEach(function(property) {
             node.style[property] = prop[property];
           });
         });
         return this;
       } else {
         return this.nodes[0].style[prop];
       }
     }

     // 

     return function(selector, context) {
       var element = context || window.document;
       return {
         selector: selector,
         nodeList: element.querySelectorAll(selector),
         each: function(action) {
           [].forEach.call(this.nodeList, function(item, i) {
             action(item, i);
           });
           return this;
         },
         toString: function() {
           return selector;
         },
         css: function(prop, val) {
           return doCSS.call(this, prop, val);
         }
       };
     };
   }());

   $.extendingFunction = function() {
     alert("I am an extending function");
   };



   $("#string-css").css("background", "seagreen");
   $("#object-css").css({
     background: "olive",
     color: "yellow"
   });

   document.getElementById("extending")
   .addEventListener("click",$.extendingFunction,false);
h1 {
  padding: 5px;
}
<h1 id="string-css">CSS String</h1>

<h1 id="object-css">CSS Object</h1>

<button id="extending">call extended function</button>

Comparing function

As far as the CSSStyleDeclaration goes, I personally am not in favor of it. To be honest, the original was not as dirty as I made by extending it with the option for an object. The following is how I would think it should be.

function doCSS(prop, val) {

    if (typeof (prop) === 'string') {
        this.each(function(node) {
            node.style[prop] = val;
        });
    }

    if (typeof (prop) === 'object') {
        this.each(function(node) {
            Object.keys(prop).forEach(function(property) {
                node.style[property] = prop[property];
            });
        });
    }

    return this;

}
\$\endgroup\$
3
  • \$\begingroup\$ @wOxxOm - thanks ... Just looked at jsperf and it has quite an impact. jsperf.com/getelementbyid-vs-queryselector \$\endgroup\$ Commented Oct 22, 2016 at 20:06
  • \$\begingroup\$ That particular test is for qs, but qsa is much slower: link. Still, qsa is 2 times faster than jQuery :-) \$\endgroup\$ Commented Oct 22, 2016 at 20:40
  • \$\begingroup\$ @wOxxOm - my goodness. Then I thought about classname link. Burning rubber!... I am already updating that part ;-) .. thanks \$\endgroup\$ Commented Oct 22, 2016 at 22:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.