cell小白帮助_一个自驱动的Web应用程序框架

cell小白帮助

官方网址:https://www.celljs.org

cell小白帮助_一个自驱动的Web应用程序框架

GitHub:https://github.com/intercellular/cell

简介描述:一个自驱动的Web应用程序框架

cell一个由自驱动、自构建的Web应用程序框架。  Cell只有一个设计目标:简单,易于学习和使用。


cell的使用

<html>
<script src="https://www.celljs.org/cell.js"></script>
<script>
var el = {
  $cell: true,
  style: "font-family: Helvetica; font-size: 14px;",
  $components: [
    {
      $type: "input",
      type: "text",
      placeholder: "Type something and press enter",
      style: "width: 100%; outline:none; padding: 5px;",
      $init: function(e) { this.focus() },
      onkeyup: function(e) {
        if (e.keyCode === 13) {
          document.querySelector("#list")._add(this.value);
          this.value = "";
        }
      }
    },
    {
      $type: "ol",
      id: "list",
      _items: [],
      $components: [],
      _add: function(val) { this._items.push(val) },
      $update: function() {
        this.$components = this._items.map(function(item) {
          return { $type: "li", $text: item }
        })
      }
    }
  ]
}
</script>
</html>

代码中需要注意的几件事:

  1. 没有要继承和扩展的框架类。
  2. 没有API方法调用。
  3. 没有HTML正文标记。
  4. 我们所拥有的只是一个类似JSON的变量。
  5. DOM只是在没有运行任何功能的情况下构建自己。

海计划公众号
(0)
上一篇 2020/03/06 08:35
下一篇 2020/03/06 08:35

您可能感兴趣的内容