Question

在选择需要包含哪些模块后，jquery.ui或modernizr如何动态生成代码？它是否像这个https://npmjs.org/package/assemble或nodejs或PHP这样的插件咕噜咕噜？我已经阅读了jquery.ui切换到节点的下载构建器。我想建立类似的东西。

我有html模板，每次用户生成模板时都需要不同的css颜色或javascript组件。因此，在我的情况下，复选框的形式完美，就像jqueryui或modernizr。

感谢任何帮助。

Answer 1

我是assemble的核心团队，首先是Assemble只是另一个Grunt.js插件，我们只是试图通过利用Grunt来轻松构建组件和网站 - 因为它是一个如此惊人的构建系统。

我们创建Assemble的原因是针对您所描述的类似用例。作为程序员，我们总是阅读关于保持数据，结构，样式等的最佳实践。从理论上讲，这听起来很棒，但实际上我们找不到任何工具来帮助我们以这种方式实现维护代码。

我们确实找到了我们钦佩的工具，比如YUI和jQuery UI，它们都提供了强大而有趣的方式来处理模块化，可重用的代码。但我们决定构建Assemble，因为我们希望灵活使用任何模板框架或手头工作所需的数据格式。

以下是使用Assemble构建示例UI组件的方法：

该组件将是一个简单的Bootstrap警报
模板语言是Handlebars
数据格式是JSON，但我们也可以使用YAML或YAML Front-matter
我在示例中使用的变量是任意的，随心所欲地制作它们

模板：alert.hbs

<div class="alert {{ alert.modifier }}">
  <strong> {{ alert.strong }} </strong> {{ alert.message }} 
</div>

数据：alert.json

{
  "strong": "This is an alert",
  "modifier": "alert-info",
  "message": "This alert was assembled from a Handlebars partial and JSON data"
}

在实际的assemble任务中，有几种方法可以构建模板，但是假设您要构建一组组件，就像警告单个页面中的文档一样：

// Project configuration.
grunt.initConfig({
  assemble: {
    options: {
      // built-in variable for resolving relative path to specified folder
      assets: 'dist/assets',
      // "layout" to wrap pages with header and/or footer
      layout: 'src/layouts/default.hbs',
      data: 'src/data/*.{json,yml}'
    },
    pages: {
      files: {
        // This is where "pages" are usually defined, but here we're pointing 
        // to the partials folder to build them into pages for documentation.
        'dist/': ['src/partials/*.hbs'],
      }        
    }
  }
});

更进一步，您可以轻松地将变量添加到JSON文件，或者添加到部分中的YAML前端，以指定要用于组件的样式表。

使用PHP或Nodejs的组件构建器

1 个答案: