使用一些 JS 框架的可重用组件或小部件 [关闭]

Question

我想创建满足以下列表的视图组件：

• 可以包含在任何框架上编写的任何现有网络应用程序中。

• 重量轻

• 可以由使用它的人通过传递一些动态属性来自定义。

我想要关于人们使用哪个框架的建议？ 我用 preact-habitat 浏览了 ReactJS、RiotJS、VueJS、Web Components、Preact。他们认为他们不能完全满足我的要求。我想创建类似Stripe 所做的东西。

Answer 1

如 cmets 中所述，您可以选择与框架无关并选择 Vanilla Javascript Web Components。

您可以在此 Google Dev presentation 中找到对 Custom Elements 的良好介绍，并在 Stackoverflow 中找到数百个答案。

Answer 2

我找不到这个链接的来源。它很旧，所以可能有更好的例子。我认为它应该满足您的每一项要求。使用蛇案例执行带参数的函数。

jQuery 和下划线示例

$.when(
 $.getScript("path/to/script.js"),
  $.Deferred(function( deferred ){
   $( deferred.resolve );
  })
  ).done(function(){
    _.each([x,y,z], function(){
      //
    });
});

（2007-2009）

<form id="bclform" onsubmit="return bcl_go(this);">
  <input id="bclline" name="cmd">
</form>

// $Id$

function arguments_to_array( args )
{
  var arr = new Array();
  for (var i=0; i<args.length; ++i) {
    arr[i] = args[i];
  }
  return arr;
}

function bcl_go( e )
{
  var cmd = e.bclline.value;
  bcl_run( cmd );
  e.bclline.focus();
  return false;
}

function bcl_parse( cmd )
{
  return cmd.split( /\s+/ );
}

function bcl_remove_blank_words( words )
{
  // Remove leading and trailing blank words.
  while (words.length>0 && words[0]==="") {
    words = words.slice( 1 );
  }
  while (words.length>0 && words[words.length-1]==="") {
    words = words.slice( 0, words.length-1 );
  }
  return words;
}

function bcl_run( cmd )
{
  words = bcl_parse( cmd );
  words = bcl_remove_blank_words( words );

  var last_cmd_word = null;

  for (var i=0; i<words.length; ++i) {
    var fun_name = words.slice( 0, i+1 ).join( "_" );
    if (window[fun_name] == undefined) {
      break;
    } else {
      last_cmd_word = i;
    }
  }

  if (last_cmd_word===null || words.length==0) {
    alert( "No such command \""+words[0]+"\"" );
    return;
  }

  var fun_name = words.slice( 0, last_cmd_word+1 ).join( "_" );
  var fun = window[fun_name];
  var args = words.slice( last_cmd_word+1 );
  fun.apply( this, args );
}

function bcl_jump_cgi( url, kvs )
{
  var url = url+"?";
  for (var k in kvs) {
    var v = kvs[k];
    url += k+"="+escape( v );
  }
  location = url;
}

//commands


function g() {
  var search_string = arguments_to_array( arguments ).join( " " );
  bcl_jump_cgi( "http://www.google.com/search", { "q": search_string } );
}
//g my search term
function g_i() {
  var search_string = arguments_to_array( arguments ).join( " " );
  bcl_jump_cgi( "http://www.google.com/images", { "q": search_string } );
}

function wolf() {
  var search_string = arguments_to_array( arguments ).join( " " );
  bcl_jump_cgi( "http://www.wolframalpha.com/input", { "i": search_string } );
}

function w() {
  var search_string = arguments_to_array( arguments ).join( " " );
  bcl_jump_cgi( "http://en.wikipedia.org/wiki/Special:Search", { "search": search_string } );
}

function goto(o) {
  bcl_jump_cgi(o);
}