響應式程式設計(Reactive Programming)是一種程式範式，它可以 將變數定義為訊號(Signal)，這個訊號會追蹤變數的變化，當變數有變 化時，訊號也會跟著變化。這樣的特性使響應式程式設計很適合使用在 圖形使用者介面(Graphical User Interface)開發上。因此許多響應式程 式設計函式庫(Library)或是框架(Framework)被建立出來，它們都 是以特定的程式語言作為宿主，去建立響應式程式設計相關的功能。但 是其宣告式(Declarative)的特性與原本指令式(Imperative)物件導向 (Object-Oriented)程式設計的程式語言結合，會使工程師需要學習不同 的操作方式。其中一個操作就是要將訊號抬升(Lift)後才能做運算，這 樣的操作增加了程式碼的量與複雜度。 本研究提供一種方法 - Invisible Reactivity ，透過預編譯器將原本的 響應式程式設計函式庫中需要訊號抬升的操作自動化，使工程師在使用 訊號變數時只需要像是使用程式語言中的一般變數一樣，不需要額外學 習響應式函式庫的訊號抬升操作，並且可以避免在兩種變數間互相操作 而造成錯誤。 我們在本研究中以 Invisible Reactivity 方法為 JavaScript 響應式框 架 Vue.js 加入訊號抬升自動化的功能實作，稱為 RJS 。以 Babel 作為預 編譯器，透過 Babel 的插件來操作抽象語法樹(Abstract Syntax Tree) 來實現 Invisible Reactivity 。;Reactive Programming is a programming paradigm that defines vari- ables as signals, which track changes in variables and update accordingly when changes occur. This characteristic makes reactive programming par- ticularly suitable for developing graphical user interfaces (GUIs). Con- sequently, many reactive programming libraries or frameworks have been created, each tailored to specific programming languages to implement re- active programming functionalities. However, integrating its declarative nature with the traditional imperative object-oriented programming lan- guages requires engineers to learn different operational methods. One such operation is signal lifting, which must be done before performing calcula- tions, increasing code complexity and volume. This study presents a method called Invisible Reactivity. By using a precompiler, the method automates the signal lifting operations required by traditional reactive programming libraries. This allows engineers to use signal variables just like regular variables in the programming language without needing to learn the additional signal lifting operations of reactive libraries, thereby avoiding errors that can arise from operations between the two types of variables. In this study, we implemented the Invisible Reactivity method to add automated signal lifting functionality to the JavaScript reactive framework Vue.js, naming the implementation RJS. Babel was used as the precom- piler, and the functionality was achieved by manipulating the Abstract Syntax Tree (AST) through Babel plugins.
