taro-script 0.4 釋出，基於Taro v3的js直譯器元件

隨心E發表於2020-09-12
JS元件

TaroScript

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>;

相關文章