taro-script 0.4 发布,基于 Taro v3 的 js 解释器组件

nobotaro-script 0.4 发布,基于 Taro v3 的 js 解释器组件

taro-script

Github 地址

基于Taro v3开发,支持多端小程序动态加载远程 JavaScript 脚本并执行,支持 ES5 语法

最近更新内容

  • 新增useScriptContext获取当前执行上下文
  • 参数名称调整:useCache -> cache
  • 缓存策略调整
  • 新增text属性,可直接传入 js 字符串
  • src支持数组,解决多层 TaroScript 嵌套问题

Usage

npm install --save taro-script
import TaroScript from "taro-script";

<TaroScript text="console.log(100+200)" />;
import TaroScript from "taro-script";

<TaroScript src="https://xxxxx/xx.js">
	<View>Hello TaroScript</View>
</TaroScript>;

注 1:同一taro-script只会执行一次,也就是在componentDidMount后执行,后续改变属性是无效的。示例

function App({ url }) {
	// 只会在第一次创建后加载并执行,后续组件的更新会忽略所有属性变动
	return <TaroScript src={url} />;
}

注 2:多个taro-script会并行加载及无序执行,无法保证顺序。如:

// 并行加载及无序执行
<TaroScript  src="path1" />
<TaroScript  src="path2" />
<TaroScript  src="path3" />

如需要确保执行顺序,应该使用数组或嵌套,例如:

数组方式(建议)

<TaroScript src={["path1", "path2", "path3"]} />

或 嵌套方式

<TaroScript src="path1">
	<TaroScript src="path2">
		<TaroScript src="path3"></TaroScript>
	</TaroScript>
</TaroScript>

globalContext

内置的全局执行上下文

import TaroScript, { globalContext } from "taro-script";

<TaroScript text="var value = 100" />;

此时 globalContext.value 的值为 100

自定义context示例

import TaroScript from "taro-script";

const app = getApp();

<TaroScript context={app} text="var value = 100" />;

此时 app.value 的值为 100

TaroScript 属性

src

类型:string | string[]

要加载的远程脚本

text

类型:string | string[]

需要执行的 JavaScript 脚本字符串,text 优先级高于 src

context

类型:object

默认值:globalContext = {}

执行上下文,默认为globalContext

timeout

类型:number
默认值:10000 毫秒

设置每个远程脚本加载超时时间

onExecSuccess

类型:()=> void

脚本执行成功后回调

onExecError

类型:(err:Error)=> void

脚本执行错误后回调

onLoad

类型:() => void

脚本加载完且执行成功后回调,text存在时无效

onError

类型:(err: Error) => void

脚本加载失败或脚本执行错误后回调,text存在时无效

fallback

类型:React.ReactNode

脚本加载中、加载失败、执行失败的显示内容

cache

类型:boolean

默认值:true

是否启用加载缓存,缓存策略是已当前请求地址作为key,缓存周期为当前用户在使用应用程序的生命周期。

children

类型:React.ReactNode | ((context: T) => React.ReactNode)

加载完成后显示的内容,支持传入函数第一个参数为脚本执行的上下文

useScriptContext()

获取当前执行上下文 hook

import TaroScript, { useScriptContext } from "taro-script";

<TaroScript text="var a= 100">
	<Test />
</TaroScript>;

function Test() {
	const ctx = useScriptContext();
	return ctx.a; // 100
}

evalScript(code: string, context?: {})

动态执行给定的字符串脚本,并返回最后一个表达式的值

import { evalScript } from "taro-script";

const value = evalScript("100+200"); // 300

其他

  • 该组件使用eval5来解析JavaScript语法,支持 ES5

  • 上生产环境前别忘记给需要加载的地址配置合法域名

  • TaroScript 内置类型及方法:

NaN,
Infinity,
undefined,
null,
Object,
Array,
String,
Boolean,
Number,
Date,
RegExp,
Error,
URIError,
TypeError,
RangeError,
SyntaxError,
ReferenceError,
Math,
parseInt,
parseFloat,
isNaN,
isFinite,
decodeURI,
decodeURIComponent,
encodeURI,
encodeURIComponent,
escape,
unescape,
eval,
Function,
console,
setTimeout,
clearTimeout,
setInterval,
clearInterval,

注:内置类型和当前运行 JavaScript 环境相关,如环境本身不支持则不支持!

导入自定义方法或类型示例:

import TaroScript, { globalContext } from "taro-script";

globalContext.hello = function(){
  console.log('hello taro-script')
}

<TaroScript text="hello()"></TaroScript>;

或自定义上下文

import TaroScript from "taro-script";

const ctx = {
  hello(){
    console.log('hello taro-script')
  }
}

<TaroScript context={ctx} text="hello()"></TaroScript>;

这个网站是 Node.js 搭建的吗?

yunyingsilue:小弟不懂,想问问大家www.ruanfa.cn这个网站是 Node.js 搭建的吗?能不能看出来Node.js 搭建的网站有哪些优缺点?putaozhenhaochi:这就是你想出来的推广方式? imherer:是的,用的 next.js SingeeKing:不说是不是推广,看软件介绍里面的图我有点想 @1ychee jimmy2…

PD16 的 Linux 虚拟机不支持 OpenGL?

sharpy:Debian,编译完 GLFW 后,跑不了三角形 demo,其他 demo 的 gl 是立即模式,倒是可以跑,用 glxinfo 看,确实缺了一些东西。 但我用 Fusion 装 Debian 虚拟机是可以运行的。

请问有什么比较火,并且好用的 go 的 job 调度框架吗?

secretName:由于公司技术栈的原因,所以现在打算在 go 里面找一个 job 调度框架。 找了一圈,只发现 gocron 貌似还可以的样子,但是调度只支持 shell 与 http,连异步任务都没有,我这里常用的任务有时候调度时间通常都在好几小时,这样显然是满足不了要求的。 难道只能自己造一个轮子了吗?sirius1024:robfig/cron

像 Python 的 GC 这种代码是怎么一种开发逻辑?

oahebky:就是比如引用计数, 其它的如标记清除+分代回收、缓存就先不说了, 把循环引用当做 bug,下一代修复发布、缓存当做下一代发布。 就仅引用计数这个 GC 基本原理而言。 有了这么个原理,然后也设计出来双向环状链表的数据结构来实现。 就是到了具体代码,这么实现一下;看这种实现一下一次就是核心的上千行;不能一次加一点点代码; 就这样类似实现后,怎么…

Symfony2和Selectize.js:在实体字段类型中保留新项目的最清晰方法? - php

在Symfony2中,我具有BandType,在其中添加实体Tag:->add('tags', 'entity', [ 'label' => 'Tags', 'class' => 'DbBundle:Tag', '…