Question

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

可以包含在使用任何框架编写的任何现有Web应用程序中。
重量轻
可以由使用它的人通过传递一些动态属性进行自定义。

我想建议人们使用哪种框架？我经历了带有preact-habitat的ReactJS，RiotJS，VueJS，Web组件，Preact。他们认为他们不能完全满足我的要求。我想创建类似Stripe所做的事情。

Answer 1

我找不到此链接的来源。它很老，所以可能有更好的例子。我认为它应该满足您的每一项要求。使用蛇形情况执行带有参数的功能。

带有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);
}

Answer 2

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

您可以在此Custom Elements中找到有关Google Dev presentation的很好的介绍，并在Stackoverflow中找到关于它们的数百个答案。

使用某些JS框架的可重用组件或小部件

2 个答案: