使用react或vue增强多页面应用程序的各个部分

Question

我正在服务器端使用java ＆ hibernate ＆ spring mvc开发一个企业应用程序，并在客户端使用jquery （而不是SPA）。

现在在搜索页面中我使用ajax并仅获取json响应，但我不想在每个搜索或分页请求中写下面这样的内容。

function(ajaxData) {
    ....
    $('#search').html('' +
        '<div class="search-container">' + 
          '<div class="search-item">' +
             '<div class="title-item">'+ajaxData.title+'</div>' + 
             ...
             ...
          '</div>' + 
        '</div>'
    )
    ....
}

我认为在此页面中使用带有react或vue 组件的 jsx很容易刷新结果。

我还想重用一些html块，我认为react或vue会很容易

我曾经建立了一个小型的SPA项目，这都是关于npm和webpack和捆绑的，但我真的不想使用它们，因为我有一个多页面应用程序 ，它非常适合我的项目。

我认为facebook正在做同样的事情，他们使用反应，但facebook不是SPA。

我怎样才能实现这种混合方式？

Answer 1

我过去做过类似的事情。 我在DOM中注入了一个小的反应组件。

我是这样做的：

在JSX中创建一个React组件，我们称之为Demo ：

export class Demo extends React.Component {
    render() {
        return <h1>This is a dummy component.</h1>
    }
}

现在使用renderToStaticMarkup函数来获取静态html。

const staticMarkup = renderToStaticMarkup(<Demo PASS_YOUR_PROPS/>);

你有HTML，现在你可以使用innerHTML在所需的位置插入这个标记。

如果我误解了你的问题，请道歉。

UPDATE

我们也可以使用render()来达到这个目的。 例：

document.getElementById("button").onclick = () => {
  render(
    <Demo PASS_YOUR_PROPS/>,
    document.getElementById("root")
  );
};

使用render（）和renderToStaticMarkup的工作解决方案： https ：//codesandbox.io/s/w061xx0n38

渲染（）

将ReactElement呈现到提供的容器中的DOM中，并返回对该组件的引用。

如果之前将ReactElement呈现到容器中，则会对其执行更新，并且仅在必要时改变DOM以反映最新的React组件。

renderToStaticMarkup（）

这不会创建额外的DOM属性，例如React在内部使用的data-react-id。 如果你想将React用作一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省大量的字节。

Answer 2

由于你有一个没有构建步骤的现有多页面应用程序（即没有webpack / babel），我相信一个非常简单的方法来实现你想要的是使用Vue.js.

您可以定义模板并仅更新数据。

以下是您将如何处理问题中显示的代码的演示：

 new Vue({ el: '#app', data: { ajaxDataAvailable: false, ajaxData: { title: '', results: [] } }, methods: { fetchUsers() { this.ajaxDataAvailable = false; // hide user list $.getJSON("https://jsonplaceholder.typicode.com/users", (data) => { this.ajaxData.title = 'These are our Users at ' + new Date().toISOString(); this.ajaxData.results = data; this.ajaxDataAvailable = true; // allow users to be displayed }); } } }) 

 /* CSS just for demo, does not affect functionality could be existing CSS */ .search-container { border: 2px solid black; padding: 5px; } .title-item { background: gray; font-weight: bold; font-size: x-large; } .result-item { border: 1px solid gray; padding: 3px; } 

 <script src="https://unpkg.com/vue"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <div id="app"> <button @click="fetchUsers">Click to fetch the Users</button><br><br> <div class="search-container" v-if="ajaxDataAvailable"> <div class="search-item"> <div class="title-item"> {{ ajaxData.title }}</div> <div class="result-item" v-for="result in ajaxData.results"> Name: {{ result.name }} - Phone: {{ result.phone }} - Edit name: <input v-model="result.name"> </div> </div> </div> </div> 

在这个例子中，我们有：

• 一个执行ajax调用的方法fetchUsers ;
• fetchUsers方法绑定到<button>的click事件，通过@click="methodName" （这是v-on:click="methodName"的简写v-on:click="methodName" ）。
• 一个v-if （ v-if="ajaxDataAvailable" ），它使v-if="ajaxDataAvailable" .search-container div隐藏，直到ajaxDataAvailable属性为true 。
• 使用插值在{{ ajaxData.title }}渲染模板中的一些数据，请注意，这将从data:声明的对象中选择值data: Vue实例的一部分（下面是new Vue({... code））并且每当ajaxData.title发生更改时都会自动更新（当Ajax调用完成时， fetchUsers方法内部会发生什么。
• 使用v-for ： v-for="result in ajaxData.results"呈现列表。 这会在ajaxData.results数组中进行迭代，该数组在fetchUsers方法中过于更新。
• 使用带有v-model指令的<input>元素，它允许我们直接编辑result.name值（它也会自动更新模板）。

Vue还有很多，这只是一个例子。 如果需要，可以进行更详细的演示。

至于集成到现有应用程序中 ，您可以将此代码粘贴到任何HTML页面中，它已经可以正常工作，无需任何webpack / babel。

Answer 3

因此，您可以通过两件事来重复使用代码：

• 我建议React将代码共享为组件。 官方文档中的这个页面解释了如何使用jquery做出反应。 用于将react和jquery jquery-ui与react进行集成的其他资源， 将react和jquery结合使用 ，进行反应训练
• 或者，使用一些模板引擎，这样您就不必经历集成新库并使其与jquery一起工作的麻烦。 这个SO 答案为这样做提供了很多选择。

除非您计划从长远来看迁移您的jquery应用程序做出反应，否则我不建议仅针对一个页面使用react。 使用模板引擎路径会更容易。

Answer 4

从需求的外观来看，您只需要：

1. 动态的，数据驱动的HTML块
2. 哪个需要可重用

在这种情况下，由于我们不需要状态，因此使用像react / vue / angular这样的整个框架可能会有点过分。

我的建议是选择像jQuery Templates Plugin或Handlebars这样的模板引擎

您甚至可以将HTML块存储为单独的可重用模块，您可以根据需要在页面中调用这些模块。

使用把手的样本：

 var tmpl = Handlebars.compile(document.getElementById("comment-template").innerHTML); function simulatedAjax(cb){ setTimeout(function(){ cb(null, {title:'First Comment', body: 'This is the first comment. Be sure to add yours too'}); },2000); } simulatedAjax(function(err, data){ if(err){ // Handle error return; } document.getElementById('target').innerHTML = tmpl(data); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> <div id="target"> Loading... </div> <script id="comment-template" type="text/x-handlebars-template"> <div class="comment"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> </script> 

注意：

使用这种方法的一个缺点（与react / vue / angular等框架相反）是您需要手动处理事件绑定和解除绑定。 您可以通过将模板包装在自动装入和卸载的功能中来缓解此问题。

 // Single reuable JS file for each component (function(namespace) { var _tmpl = Handlebars.compile('<div class="comment"><h1>{{title}}</h1><p>{{body}}</p></div>'); function titleClickHandler(ev) { alert(ev.target.innerHTML) } function CommentWidget(target, data) { var self = this; self.data = data; self.target = document.querySelector(target); } CommentWidget.prototype.render = function() { var self = this; self.target.innerHTML = _tmpl(self.data); // Register Event Listeners here self.target.querySelector('h1').addEventListener('click', titleClickHandler) } CommentWidget.prototype.unmount = function() { var self = this; // Unregister Event Listeners here self.target.querySelector('h1').removeEventListener('click', titleClickHandler); self.target.innerHTML = ''; } window._widgets.CommentWidget = CommentWidget; })(window._widgets = window._widgets || {}) // Usage on your page var w = new _widgets.CommentWidget('#target', { title: 'Comment title', body: 'Comment body is remarkably unimaginative' }); // Render the widget and automatically bind listeners w.render(); // Unmount and perform clean up at a later time if needed //w.unmount(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script> <div id="target"></div>