在主流浏览器已全部支持原生ES6 Module的当下, 纯粹的原生前端写法是否已足够现实?
在一般的前端开发中小型项目中, 不打算支持古早浏览器的前提下, 抛弃nodejs那一套, 以原生的方式来进行前端开发是否已经足够现实？
下面就以ofd电子发票解析验证功能，尝试用纯粹HTML JS实现一个单页应用
用到的框架可以以单文件引入的方式, 比如vue, bootstrap等。。。
1.HTML <head> 标签中直接引入Vue.js，将其注册为一个全局变量
2.HTML <body>标签中使用 <div> 元素进行 HTML 布局，定义：上传按钮，缩放按钮，翻页按钮，验章按钮。
上传按钮，缩放按钮，翻页按钮：
验章按钮：
3. Javascript 脚本
历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import，但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。比如，CommonJS模块就是对象，输入时必须查找对象属性。
然而，ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。
以上是背景信息:
在HTML中引入<script type="module"> </script>
中间省去2万4千行代码
主要功能代码复制粘贴来源于node.js模块，用于文件解压，验证摘要值算法等：
node_modulesjsziplib
node_modulespakolib
node_modulessm-cryptodist
以上是代码概况部分
------------------------------------------------------------------------------
以下是代码核心逻辑部分
标签中定义了“打开OFD”按钮，并为其单击事件绑定了uploadFile方法，并为其修改绑定了fileChanged方法，
<div class="upload-icon" @click="uploadFile">
@change="fileChanged"
主要逻辑从fileChanged方法开始，
1.通过触发uploadFile，浏览器会获取传入的文件，并触发fileChanged方法
2.fileChanged -> getOfdDocumentObj -> parseOfdDocument-> doParseOFD
3. doParseOFD 异步调用unzipOfd(options.ofd), getDocRoot, getDocument, getDocumentRes, getPublicRes, getTemplatePage, getPage
unzipOfd 调用 JsZip.loadAsync，具体代码来自https://stuk.github.io/jszip/
getDocRoot 调用 getJsonFromXmlContent解析压缩包中的OFD.xml文件
getDocument调用 getJsonFromXmlContent解析压缩包中的Document.xml文件
getDocumentRes调用 getJsonFromXmlContent解析压缩包中的DocumentRes.xml文件
getPublicRes调用getJsonFromXmlContent解析压缩包中的PublicRes.xml文件
getTemplatePage调用getJsonFromXmlContent解析压缩包中的TemplatePage.xml文件
getPage调用getJsonFromXmlContent解析压缩包中的Pages文件夹（针对多页文档）
经过若干天，将Node.js中的代码整理、合并后写入单个HTML文件，最终index.html文件大小809 KB，实现了纯HTML + javascript单页应用，除在HTML中引入Vue.js，无任何其他依赖。
最后，将index.html部署在Tomcat服务器上，809K空间即可实现解析渲染到浏览器并实现验章功能
01,10,050001700111,25334523,10000.00,20200327,16010952070878339067,5F53 (二维码自动识别)
如有需要，可以联系Wechat： 22151011
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
