允许扩展网站功能的技术

Question

假设我想扩展网站功能，但我不确定我在寻找什么样的解决方案。这不是我的网站，所以显然我不能使用原始代码或数据库。

我想到的第一件事是简单的操作，只适用于html代码，如排序使用不同的列。在这种情况下，我想我应该考虑创建浏览器插件，对吧?

但是，如果我想存储额外的数据，然后在我的个人资料中显示它呢?我不确定什么样的解决方案允许我在网站内显示我的html代码，然后例如发送数据到我的数据库。不要误会我的意思-我知道如何在ASP中创建网站。. NET或使用Django，但我不知道我在寻找什么技术，当我想扩展不属于我的网站

Answer 1

听起来像是在询问来自JavaScript的客户端功能。有许多库可以让您通过编程改变HTML的功能，例如表列排序和用户输入数据收集。

流行的框架和库包括jQuery, angular, react, mithril和较新的，如vuejs和magjs。

有些需要特殊的模板语法或与html混合的行为，而其他的像magjs分开html &js 100%。

下面是一个MagJS表排序的例子:

JS:

var table = {}
table.controller = function(props) {
  this.list = [{
    name: "John",
    age: 21
  }, {
    name: "Mary",
    age: 25
  }, {
    name: "Bob",
    age: 47
  }]
}
table.view = function(state, props) {
  state.table = sorts(state.list)
}
function sorts(list) {
  return {
    _onclick: function(e) {
      var prop = e.target.getAttribute("data-sort-by")
      if (prop) {
        var first = list[0]
        list.sort(function(a, b) {
          return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
        })
        if (first === list[0]) list.reverse()
      }
    }
  }
}
mag.module("sortable", table)

HTML:

<div id="sortable">
  <table>
    <tr>
      <th data-sort-by="name">Name</th>
      <th data-sort-by="age">Age</th>
    </tr>
    <tr class="list">
      <td class="name"></td>
      <td class="age"></td>
    </tr>
  </table>
</div>

下面是工作示例的链接:http://jsbin.com/raqeluluxe/1/edit?html,js,output

希望有帮助!