Question

我正在考虑创建一个Javascript库，它解析DOMs的class属性中的每个节点并查找命名空间，一旦找到名称空间，它就会解析它后面的值（_分隔值写入类名字符串）< / p>

以下是演示：http://codepen.io/nicholasabrams/pen/rVwyQK

正如您可以看到这个特定的概念证明，它将类名padding_25px_25pct_25px_22px变为 - ＆gt;

[elm]{
    padding-top: 25px;
    padding-right: 25%;
    padding-bottom: 25px;
    padding-left: 25px;
}

这里是JS代码的快速位置，可以处理任何类似的结构化DOM道具，但为了简单起见，我将方法硬编码以处理填充属性：

// Convention over configuration, dynamic style generator. Initialized and driven off of class name convention

(function inlineJs() {
  "use strict";
  var $paddingTarg = $('[class^="padding_"]');
  function replaceActionParseValues(action, subject){
    var res = subject.replace(action, '').replace('_', '').replace('pct', '%').split(/_/g); // % is invalid css selector value, so parse pct as the val and convert to a %
    return res;
  };
  $paddingTarg.each(function() {
    var dimsFullClass = $(this).attr('class');
    if (dimsFullClass.match('padding')) {
      var dims = replaceActionParseValues('padding', dimsFullClass)

      applyDims(dims.length);

      function applyDims(nDims) {

        switch (nDims) {

          case 1:
            $paddingTarg.css({
              'padding': dims[0]
            });
          break;

          case 2:
            $paddingTarg.css({
              'paddingTop': dims[0],
              'paddingRight': dims[1],
              'paddingBottom': dims[0],
              'paddingLeft': dims[1]
            });
          break;

          case 4:
            $paddingTarg.css({
              'paddingTop': dims[0],
              'paddingRight': dims[1],
              'paddingBottom': dims[2],
              'paddingLeft': dims[3]
            });
          break;

          default:
            throw new Error('Unknown param length sent to $.applyDims()');

        }
      }

    }
  });
})();

这种方法对吗？这些“助手”最终是否会因为类中错误的命名类型而乱丢DOM？对我而言，这似乎具有内联样式的所有速度，并具有使用集中式非内联样式表的所有共享代码优势。我只是想确保在投入任何开发时间之前将其变成开源实用程序。

感谢任何能够带领我朝着正确方向前进的人，不知道从哪里开始，在SO上没有看到任何与此类似的东西。

构建轻型框架是否值得开发？

0 个答案: