在redux上部署jquery有什么方法吗?

nkcskrwz  于 2023-06-05  发布在  jQuery
关注(0)|答案(1)|浏览(264)

我正在寻求Redux/React js的帮助,因为10名自由职业的现代JS技术人员放弃了这项任务。有问题的脚本来自我购买的WordPress商业主题,作者拒绝提供支持,因为支持许可证已过期(未使用)。
因此,主题的前台页面是通过Redux WP插件由名为“theme.js”的文件生成的。它包含javascript压缩代码,太复杂了,无法手动编辑,而我的任务只是将一些div内容块从默认位置移动到新的页面布局中,并具有更吸引人的页面布局。
有兴趣在这里,看看附件中的脚本,“theme.js”是实际生成的布局文件,“edit-blocks-positioning.txt”是我想应用的块修改(到theme.js*),它的jquery版本是“jquery-mod.js”(**),

  • 请建议如何编辑(*)或如何让jQuery(**)在Redux生成的“theme.js”之上工作。

我读过关于React,Node JS等.现代框架JS,其中提供了标准的方法来工作jQuery与导入jquey,自定义库方法“nodeQuery”,ES6语法jquery导入和“webpack”的“暴露加载器”,因为这个脚本是在10的js框架库下工作,如React,Node,Babel,WebPack...仍然与所有的NPM模块安装约100 k文件,设置和测试,但没有用在这个小任务!
要补充的是,我有最简单的适用解决方案“jquery-mod.js”,尽管只能在打开的浏览器开发工具中使用。
文件
https://file.io/nUqv7M01rNeP
edit-blocks-positioning.txt 3 KB theme.js 2 MB
jquery-mod.js:

jQuery(function() {
        jQuery('section.product--section:nth-child(1)').insertBefore('.profile--owner');
        jQuery('.product--actions.flex.justify-between.py-14.pl-24.pr-30.bg-grey-100').insertBefore('.product--advertisement.mt-30');
        jQuery('.product--section.product--section__actions.flex.flex-wrap.justify-between.mb-20').insertBefore('.product--advertisement.mt-30');
    });

这是我需要在theme.js ` //product id块中编辑的内容:

l.default.createElement("section",{className:"product--section product--section__meta flex flex-wrap mb-20 justify-between items-center item-info"},l.default.createElement("div",{className:"flex"},l.default.createElement("div",{className:"product--id text-grey-1000 text-13 font-light"},(0,c.sprintf)(lc_data.jst[504],o.ID)),(null==e||null===(t=e.options)||void 0===t?void 0:t.published_date)&&""!==(null==e||null===(n=e.options)||void 0===n?void 0:n.published_date)&&l.default.createElement("div",{className:"product--date text-grey-1000 mt-10 ml-10 text-13 font-light "},(0,c.sprintf)(lc_data.jst[728],null==e||null===(r=e.options)||void 0===r?void 0:r.published_date))),!e.premiumOnly&&!o.is_expired&&l.default.createElement("div",{className:"product--info"},l.default.createElement(g.default,{product:o,currentUser:x,options:e.options})),(null==o?void 0:o.is_expired)&&l.default.createElement("div",{className:"py-6 px-10 rounded border border-red-300 bg-red-100 text-base text-red-500"},lc_data.jst[711]))

//product id block,before:

,e.createElement("div",{className:"w-full sm:w-2/3"},e.createElement("div",{className:"profile--owner"},

///产品id块
//添加到比较块:

l.default.createElement("div",{className:"product--actions flex justify-between py-14 pl-24 pr-30 bg-grey-100"},"widget"!==e.options.calculator_position&&o.product_meta.price>0&&o.calculator&&o.calculator.display&&l.default.createElement(_.default,{product:o,currentUser:x}),"0"!==e.options.ad_compare&&l.default.createElement(b.default,{product:o,currentUser:x,options:S}))

//添加到比较块,在:

e.createElement("div",{className:"product--advertisement mt-30"} ...

/添加到比较块
//喜欢视图共享打印小部件:

!(0,a.default)(o)&&!o.is_expired&&l.default.createElement("section",{className:"product--section product--section__actions flex flex-wrap justify-between mb-20"},l.default.createElement("div",{className:"product--actions__left flex flex-wrap"},!(0,a.default)(x)&&l.default.createElement(d.default,{product:o,currentUser:x}),l.default.createElement(f.default,{product:o}),"0"!==e.options.ad_visits&&(null==o?void 0:o.views)&&("always"===S["membership-listings-visits"]||"logged_in"===S["membership-listings-visits"]&&"1"===lc_data.logged_in)&&l.default.createElement(p.default,{product:o}),!(0,a.default)(lc_data.user_ip)&&"0"!==e.options.ad_likes&&l.default.createElement(m.default,{product:o,currentUser:x}),!(0,a.default)(lc_data.user_ip)&&"no"!==e.options.report&&l.default.createElement(h.default,{product:o,options:e.options}),"small-screen"===T&&l.default.createElement(v.default,{product:o})),"default"===T&&l.default.createElement("div",{className:"product--actions__right"},l.default.createElement(v.default,{product:o})))

//喜欢视图共享打印小部件,之前:

e.createElement("div",{className:"product--advertisement mt-30"} ...

///喜欢视图共享打印小部件

093gszye

093gszye1#

在不同的JS模块和Redux/React框架方法之间进行了大量的测试,旨在允许jQuery脚本修改DOM元素,我发现实际上jQuery自定义脚本执行的问题是jQuery脚本在实际Virtual DOM元素渲染之前运行的时间,因此解决方案是在页面/脚本加载后运行jQuery脚本,并使用setTimeout函数延迟。

<script>
      function OnLoadingScript(url) {
         var script = document.createElement("script");
         script.src = "https://www.example.com/wp-content/themes/sample/customscript.js";
         document.head.appendChild(script);
      }
      window.onload = setTimeout(OnLoadingScript, 1000);
   </script>

相关问题