一个基于Vue3的无编译小框架 byview( 二 ) _Vue3

byview_load_name_components 的第一个参数可以是个数组, 同时加载多个组件
加载外部的js脚本可以通过 $byview.loadScript 或者 byview_load_script 方法加载一个或多个外部的js库文件或者配置数据
<script >const [aResult, bResult] = await $byview.loadScript(['a.js', 'b.js']);</script>加载外部css文件可以通过 byview_load_css 或者 $byview.loadCss 方法加载一个或多个外部的css到页面中
在vue文件中可以通过link标签引入外部css文件:
<link rel="stylesheet" href=https://www.isolves.com/it/cxkf/jiagou/2021-12-30/"sample2/test.css" scoped />link 标签的scoped属性为可选, 表示样式是否仅当前组件生效和 style 的 scoped 属性作用一样 href 属性的路径是相对于网站根目录, 如果需要先对于当前vue文件, 必须以 ./ 开头
缓存所有组件、js、css等加载，只要下载成功，就会缓存到内存中，下次会从内存中直接取出.
除了内存缓存外, 组件下载还支持文件缓存，下载过的文件浏览器刷新之后不会再次下载，会从缓存数据库中读取以提高响应速度。
除了文件缓存之外，组件缓存会将已经解析好的组件结构直接缓存，不会再次解析vue文件的内容（浏览器刷新之后也不会再次解析vue文件中dom树）。
缓存是可以通过设置不同的 window.BYVIEW_RES_VERSION 值来清除缓存, 一般手动进行设置该值, 可以集成到后台系统的页面中手动更新所有缓存。
内存缓存每次刷新浏览器之后就会丢失。文件和组件缓存如果开启，在程序中可以通过 $
byview.superCache.clearAllResourceCache 方法清空资源(文件, js, css等)缓存。

文章插图
缓存效果
调试

在浏览器中查看vue文件的js

浏览器以chrome为例子, 可以在source面板按快捷键 ctrl+p 然后直接输入vue文件的名称即可找到对应的js文件, 可以在该文件中打断点调试vue文件.

文章插图

文章插图
【一个基于Vue3的无编译小框架 byview】
这里的.vue文件的内容只有js内容, 没有template的内容

在浏览器中查看vue文件的模板内容

我们可以在控制台输入 bv._loadedComponents 查看所有的已加载组件, 并找到其中的 template 属性查看具体的模板内容

文章插图

bv 是 $byview 变量的简称

查看vue组件的实例

当我们需要查看vue组件的实例对象已经其当前的数据, 可以通过 bv.$conmponents 查看所有的组件示例
例如 bv.$
components.TestComp.last.text
bv.$components.TestComp.last 表示最后一个 TestComp 组件(页面中可能有多个TestComp实例)

文章插图

在控制台中调用内置方法

我们可以通过 byview_get_gblprops 方法来获取 vue 的 globalPropertiesConfig 属性, 例如打开一个内置的带验证码的确认对话框:
console.log(await byview_get_gblprops().$byConfirmHtmlCode('确定进行危险操作吗?')? '继续' : '不继续' )