建立无需build的react单页面SPA框架

news/2025/2/2 1:56:55/

vue、react这种前端渲染的框架，比较适合做SPA。如果用ejs做SPA（Single Page Application），js代码控制好全局变量冲突不算严重，但dom元素用jquery操作会遇到很多的名称上的冲突（tag、id、name）。

SPA要解决的问题：

（1）业务组件用什么文件格式？如果使用*.jsx文件，需要在部署前build转换。本来js的初心就是“即改即用”，我不太喜欢ts,jsx这些需要build的东西，前端加一个babel来转换。

（2）业务组件如何加载？业务组件不可能写的时候全部知道（根据用户权限决定），也不可能一次性全部加载（影响首屏效率），应该是需要的时候，才从服务器加载。加载的jsx文件经过babel转换成js后，用eval函数执行。


demo.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Acro Multi-Lang Demo</title><script src="/js/jquery-1.11.1/jquery-1.11.1.min.js"></script><script src="/src/acroMulti.Resources.js"></script><!-- <script src="/src/acroMulti.HTML.TagMethod.js"></script><script src="/src/acroMulti.HTML.TagMethod.Register.js"></script><script src="/src/acroMulti.HTML.Replacer.js"></script> --><script src="/src/acroMulti.DD.js"></script><script src="/src/acroMulti.CSVText.js"></script><script src="/src/acroMulti.DD.CSVText.js"></script><!-- <script src="/src/acroMulti.Locale.js"></script> --><script src="/src/acroMulti.Culture.js"></script><script src="/src/acroMulti.Utils.js"></script><script src="/dd/dd.unicode.lng.base64.js"></script><script src="/src/acroMulti.Browser.Engine.js"></script><script src="/src/acroMulti.Tool.Chinese.js"></script><!-- <link rel="stylesheet" type="text/css" href="/jsx/src/css.main.css"/> --><!-- <link rel="stylesheet" type="text/css" href='/js/rc-easyui-1.2.9/dist/themes/default/easyui.css'><link rel="stylesheet" type="text/css" href='/js/rc-easyui-1.2.9/themes/icon.css'><link rel="stylesheet" type="text/css" href='/js/rc-easyui-1.2.9/themes/react.css'> --><script type="importmap">{"imports": {"react": "/js/react-18.1.0/react.development.js","easyui":"/js/rc-easyui-1.2.9/dist/rc-easyui-min.js"}}</script><style>@import '/js/rc-easyui-1.2.9/dist/themes/default/easyui.css';@import '/js/rc-easyui-1.2.9/dist/themes/icon.css';@import '/js/rc-easyui-1.2.9/dist/themes/react.css';</style></head><body><div><img src="/img/AcroMultiLanguage4.1.gif"/></div><div id="div_main"></div><script src="/js/react-18.1.0/react.development.js"></script><script src="/js/react-18.1.0/react-dom.development.js"></script><script src="/js/babel-7.17.11/babel.min.js"></script><script>let importMap=$('script[type="importmap"]').text();//console.log(importMap);importMap=JSON.parse(importMap).imports;function parseURI(url) {var m = String(url).replace(/^\s+|\s+$/g, '').match(/^([^:\/?#]+:)?(\/\/(?:[^:@]*(?::[^:@]*)?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/);// authority = '//' + user + ':' + pass '@' + hostname + ':' portreturn (m ? {href     : m[0] || '',protocol : m[1] || '',authority: m[2] || '',host     : m[3] || '',hostname : m[4] || '',port     : m[5] || '',pathname : m[6] || '',search   : m[7] || '',hash     : m[8] || ''} : null);}function absolutizeURI(base, href) {// RFC 3986function removeDotSegments(input) {var output = [];input.replace(/^(\.\.?(\/|$))+/, '').replace(/\/(\.(\/|$))+/g, '/').replace(/\/\.\.$/, '/../').replace(/\/?[^\/]*/g, function (p) {if (p === '/..') {output.pop();} else {output.push(p);}});return output.join('').replace(/^\//, input.charAt(0) === '/' ? '/' : '');}href = parseURI(href || '');base = parseURI(base || '');return !href || !base ? null : (href.protocol || base.protocol) +(href.protocol || href.authority ? href.authority : base.authority) +removeDotSegments(href.protocol || href.authority || href.pathname.charAt(0) === '/' ? href.pathname : (href.pathname ? ((base.authority && !base.pathname ? '/' : '') + base.pathname.slice(0, base.pathname.lastIndexOf('/') + 1) + href.pathname) : base.pathname)) +(href.protocol || href.authority || href.pathname ? href.search : (href.search || base.search)) +href.hash;}function invokeCode(file,rawCode){// console.log(file);// if (invokeCode.caller) console.log(invokeCode.caller.arguments);let code=rawCode;if (file.substr(file.length-4).toLowerCase()=='.jsx'){code = Babel.transform(code,{presets: ['es2015','react']}).code;//console.log(code); }//用hook模式支持jsx文件中的exportswindow.exports = {};window.module={exports:{}};window.eval(code);//console.log(window.exports);//console.log(window.module);let obj;if (window.exports.default)obj=window.exports.default;elseobj=window.module.exports;//let obj=g_eval(code);//全局作用域//let obj=eval.call(this,code);//let obj=g_eval('('+ code + ')');//let obj=window.Function('"use strict";return (' + code + ')')();// console.log('code3:',module);// console.log(obj);return obj;}//babel.min.js处理import指令需要require函数//js的import函数不能加载jsx文件window.require=function(file){//console.log('1.raw:',file);if (importMap[file]){file=importMap[file];}//处理相对路径let root;if (require.caller==invokeCode){root=require.caller.arguments[0];}else{root=window.location.pathname;}//console.log('2.root:',root);file=absolutizeURI(root,file);//console.log('3.absolute:',file);let xhr = new XMLHttpRequest();xhr.open("GET", file, false);xhr.send();if(xhr.status != 200) {throw new Error(file+",require error: http status " + xhr.status);}let code=xhr.responseText;//console.log(code);return invokeCode(file,code);}/*//require要求同步函数，fetch是异步函数无法使用window.require=async function(module){console.log(module);let res=await fetch(module);console.log(res);let code=await res.text();console.log(code);return invokeCode(module,code);}*/</script><script type="text/babel">import Com_Main from './com.main.jsx';let root_main,el_main,div_main;function render_main(){if (!root_main){div_main =$('#div_main')[0];root_main = ReactDOM.createRoot(div_main);}el_main=React.createElement(Com_Main);root_main.render(el_main);}acroMulti.engine.switchLanguage=function(){render_main();// acroMulti.engine.replaceElements($('title'));}acroMulti.engine.switchLanguage();</script></body>
</html>

babel需要require函数，浏览器没有这个函数，必须是同步函数，浏览器原生fetch函数是异步的不可用。我们自己写一个require函数来加载jsx业务组件文件。用了函数的caller来处理相对路径问题。用了importmap来处理组件加载名称问题。

页面划分为上中下三层，中间划分为左右两部分，左边是功能树，右边是功能区。

com.main.jsx

import Com_Header from './com.header.jsx';
import Com_Left from './com.left.jsx';
import Com_Right from './com.right.jsx';
import Com_Language_Engine from './com.language.engine.jsx';
import {Resizable} from 'easyui';
let t=acroMulti.t;
class Com_Main extends React.Component {constructor(props){super(props);this.switchTab=this.switchTab.bind(this);this.ref_right = React.createRef(null);}switchTab(name,file){this.ref_right.current.switchTab(name,file);}render() {return (<div><a href="/">{t('Home')}</a><h1>{t('Demo:translate at frontend browser,translate needed(React+jsx)')}</h1><span>SPA:Single Page Application</span><div className='layout-header' style={{backgroundColor:'bisque'}}><Com_Header></Com_Header></div><div className='layout-middle'><Resizable minWidth='200' handles='e'><div className='layout-left' style={{width:'200px',float:'left',overflow: 'hidden',backgroundColor:'aquamarine'}}><Com_Left switchTab={this.switchTab}></Com_Left></div></Resizable><div className='layout-right' style={{marginLeft:'200px',overflow: 'hidden'}}><Com_Right ref={this.ref_right}></Com_Right> </div><div style={{clear:'both'}}></div></div><div className='layout-footer' style={{backgroundColor:'brown',textAlign:'center'}}><span>copyright© Acroprise Inc. 2001-2023</span></div><Com_Language_Engine></Com_Language_Engine></div>);}
}
export default Com_Main;

com.left.jsx

class Com_Left extends React.Component {constructor(props) {super(props);//this.state = {};this.menu_click = this.menu_click.bind(this);}menu_click(e){//console.log(e);e.preventDefault();//root_right.render();let name=e.target.innerHTML;let file=e.target.getAttribute('file');this.props.switchTab(name,file);}render() {console.log('render left');return (<div><a href='/'>{acroMulti.t('Home')}</a><br/><a href='/DDEditor' onClick={this.menu_click} file='/react/app/DDEditor/page.ddeditor.jsx'>{acroMulti.t('Data Dictionary Editor')}</a><br/><a href='/likeButton' onClick={this.menu_click} file='/react/app/likeButton/page.likeButton.jsx'>{acroMulti.t('Like Button')}</a><br/><a href='/About' onClick={this.menu_click} file=''>{acroMulti.t('&About')}</a></div>);}
}
export default Com_Left;

com.right.jsx

import {Tabs,TabPanel} from 'easyui';
import Com_bizCom from './com.bizCom.jsx';class Com_Right extends React.Component {constructor(props){console.log('Com_Right constructor');super(props);this.state={tabs:[],tabIndex:0,tabSelected:''}this.ref_tabs=React.createRef(null);this.ref_tabItems=React.createRef(null);this.onTabClose=this.onTabClose.bind(this);this.onTabSelect=this.onTabSelect.bind(this);}switchTab(name,file){console.log(name,file);console.log(this.state.tabs);console.log(this.ref_tabs.current);//this.setState({file:file});//this.state.file=file;let tab=null;for(let i=0;i<this.state.tabs.length;i++){if (this.state.tabs[i].name==name){tab=this.state.tabs[i];this.ref_tabs.current.select(i);break;}}if (!tab){this.state.tabs.push({name,file});this.state.tabIndex=this.state.tabs.length-1;this.state.tabSelected=name;this.setState(this.state);//不能切换到新的tab，应该是个buglet self=this;//self.ref_tabs.current.replaceProps({selctedIndex:self.state.tabs.length-1})// this.forceUpdate(function(){//   self.ref_tabs.current.select(self.state.tabs.length-1);// });//my god，只有延迟1秒有效// setTimeout(function(){//   self.ref_tabs.current.select(self.state.tabs.length-1);// }, 1000);}//this.forceUpdate();//this.ref_tabs.current.forceUpdate();//this.ref_right.current.setState({file:file});//this.ref_right.current.forceUpdate();}onTabSelect(tab){console.log('onTabSelect',tab);console.log(this.ref_tabs.current);for(let i=0;i<this.state.tabs.length;i++){if (this.state.tabs[i].name==tab.props.title){this.state.tabIndex=i;this.state.tabSelected=tab.props.title;break;}}}onTabClose(tab){console.log(tab);for(let i=0;i<this.state.tabs.length;i++){if (this.state.tabs[i].name==tab.props.title){this.state.tabs.splice(i,1);console.log(this.state.tabs);this.setState(this.state);break;}}}componentDidUpdate(e){//不起作用console.log('componentDidUpdate',e,this.state.tabIndex);//this.ref_tabs.current.select(this.state.tabIndex);}render(){let self=this;let tabs=this.state.tabs.map(function(tab){return (<TabPanel title={tab.name} closable='true' key={tab.name} selected={self.state.tabSelected==tab.name}><Com_bizCom file={tab.file}></Com_bizCom></TabPanel>)});return(<Tabs ref={this.ref_tabs} onTabSelect={this.onTabSelect}plain='true' scrollable="true" onTabClose={this.onTabClose}>{tabs}</Tabs>);}
}export default Com_Right;

com.bizCom.jsx

class Com_bizCom extends React.Component {constructor(props) {super(props);}shouldComponentUpdate(nextProps, nextState) {//console.log(nextProps);//文件相同时不要再渲染if (nextProps.file && (nextProps.file === this.props.file)) return false;return true;}render() {//console.log('Com_bizCom',this.props);if (!this.props.file) return null;/*//import函数不能加载jsx文件import(this.state.file).then(function(res){console.log(res);});return;*/let Obj=window.require(this.props.file);//console.log(Obj);let com=React.createElement(Obj);return com;}
}
export default Com_bizCom;

效果如下图：

react版本的easyui的tabs元件，可能有bug，新增加的tabPanel不会被选中，无论用tabs的select函数，还是用tabs的selectedIndex属性，或者tabPanel的selected属性，都没搞定。


http://www.ppmy.cn/news/618739.html

相关文章

DAY34——贪心part3

DAY34——贪心part3

1. class Solution {public int largestSumAfterKNegations(int[] nums, int K) {// 将数组按照绝对值大小从大到小排序&#xff0c;注意要按照绝对值的大小nums IntStream.of(nums).boxed().sorted((o1, o2) -> Math.abs(o2) - Math.abs(o1)).mapToInt(Integer::intValue)…
阅读更多...
乱世王者服务器维护,乱世王者千变万化开服时间表_乱世王者新区开服预告_第一手游网手游开服表...

乱世王者服务器维护,乱世王者千变万化开服时间表_乱世王者新区开服预告_第一手游网手游开服表...

2021-07-16 11:00 微信641区虎啸风生 已经开服 2021-07-10 11:00 微信640区霸王别姬 已经开服 2021-07-05 11:00 微信639区无名英雄 已经开服 2021-07-02 11:00 微信638区予智予雄 已经开服 2021-06-29 11:00 微信637区一身正气 已经开服 2021-06-26 11:00 微信636区巾帼英雄 已…
阅读更多...
使用PCA可视化数据

使用PCA可视化数据

作者|Conor OSullivan 编译|VK 来源|Towards Data Science 主成分分析&#xff08;PCA&#xff09;是一个很好的工具&#xff0c;可以用来降低特征空间的维数。PCA的显著优点是它能产生不相关的特征&#xff0c;并能提高模型的性能。 它可以帮助你深入了解数据的分类能力。在…
阅读更多...
四、Docker仓库（一）

四、Docker仓库（一）

一、仓库说明 仓库&#xff08;Repository&#xff09;是集中存放镜像的地方。相对镜像和容器来说&#xff0c;对仓库的操作来说相对较少。 官方的镜像仓库地址为&#xff1a;https://hub.docker.com/&#xff0c;缺点&#xff0c;位于国外&#xff0c;有时候不能访问&#xf…
阅读更多...
【JZ2440笔记】系统时钟设置

【JZ2440笔记】系统时钟设置

目录 一、前言 二、实验目标 三、S3C2440的时钟体系 四、代码编写 五、实验总结 一、前言 JZ2440开发板上的外部晶振是12MHz的&#xff0c;开发板一上电时S3C2440的系统时钟为12MHz&#xff0c;但是S3C2440最高系统时钟可以跑到400MHz&#xff0c;为了发挥CPU更高的性能&…
阅读更多...
[微信] 客服接口调用的时候返回 40003 Invalid OpenID

[微信] 客服接口调用的时候返回 40003 Invalid OpenID

首先确认收件人在24小时内主动向公众号发过消息。该消息的 FromUserId 即是客服消息的 touser 参数的 OpenId 2017-05-19 更新&#xff1a;可以使用UTF-8了 string url $"https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token{token}"; using (var…
阅读更多...
微信小程序客服开发发送消息 40003 invalid openid hint

微信小程序客服开发发送消息 40003 invalid openid hint

我的错误原因&#xff1a;Access-Token 错了&#xff0c;与其他小程序混了。 排查工具 https://mp.weixin.qq.com/debug/ 思路&#xff1a; 1.确定json格式是否正确&#xff0c;openid 是否正确。 2.确定access-token是否正确。 排查问题&#xff1a; 发送消息的接口地址&a…
阅读更多...
支付宝接口的在线支付(https://openhome.alipay.com/platform/appDaily.htm?tab=info)

支付宝接口的在线支付(https://openhome.alipay.com/platform/appDaily.htm?tab=info)

项目中需要用到在线支付&#xff0c;实现了调用支付宝接口的在线支付&#xff0c;记录下来以便以后使用。 一、进入蚂蚁金服开放平台登录 网址&#xff1a;https://openhome.alipay.com/developmentDocument.htm 1.点击网址进入蚂蚁金服开放平台&#xff0c;用自己支付宝账号密…
阅读更多...
最新文章

Copyright @ 2022~2023