我分享一個JS封裝的程式B4X案例

1.B4X BANano+BANanoElement(Umbrella JS) 封裝JS+HTML

這是我製作的說明影片(有一系列喔)
https://www.youtube.com/watch?v=fH8fvy7P4Vs

B4X 介紹在 https://www.b4x.com/

2.我希望利用Basic(B4X)優點來撰寫網頁程式
未來有一個新的小範例影片(我還未製作出來)

https://b234.top/ 帳號密碼都是1
你可以看原始碼都是HTML+JS

底下的程式碼.我先列出來給你看.
不是看不到JS.而是我封裝起來了..變成物件class.
利用物件的優點...

Sub Class_Globals
	'Private fx As JFX
	Private BANano As BANano 'ignore
	Dim page As xPage	'HTML Page物件
	Dim mdl As xModal	'BS物件
	
	Dim uname As xTextBox	'BS物件
	Dim upwd As xTextBox	'BS物件
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize
	
End Sub


public Sub show
	page.Initialize("body",Me)

	page.Root.Empty
	page.Root.AddLoginFormV1("Login")
	mdl = page.Root.AddModal("mdlLogin")
	
	uname = page.Root.GetElement("xTextBox","uname")
	upwd = page.Root.GetElement("xTextBox","upwd")
End Sub


Sub Login_Yes_click(e As BANanoEvent)
	
	If uname.Value.trim = "" Or upwd.Value.trim = "" Then
		mdl.Message = "登入失敗!!帳號/密碼必須輸入"
		mdl.Show

		Return
	End If
	
	Dim headers As Map
	headers.Initialize
	headers.put("Content-Type", "application/json")
	headers.Put("Authorization", "BANBasic " & BANano.ToBase64(uname.value & ":" & upwd.value))
	Dim res As String = BANano.CallAjaxWait("http://localhost/api","POST","json", $""$, False, headers)
	
	Log(res)
	
	'{"BANanoStatus": 801, "BANToken": "zJVAI1eYfjJh+UN1p80Bp/IiW60+hKMguZxT4T6Rp6ZnsbEFpinYBw==", "BANExpires": 90}
	'{"BANanoStatus": 800,"Message": "ERROR!!驗證失敗"}
	Dim json As BANanoJSONParser
	json.Initialize(res)
	Dim m As Map = json.NextObject
	Dim CheckStatus As Int = m.GetDefault("BANanoStatus",0)
	
	Log("res狀態: "&CheckStatus)
	Select Case CheckStatus
		Case 801 '登入成功
			Dim expires As Int = m.GetDefault("BANExpires", 0)
			BANano.SetCookie("BANanoDemoCookie", m.GetDefault("BANToken", ""), $"{"expires": ${expires}}"$)
		
			Dim p As PageMain	'主頁面
			p.Initialize
			p.show
			
		Case Else ' login is not ok
			Log("登入失敗!!")
			mdl.Message = "登入失敗!!"
			mdl.Show
	End Select
	
 
End Sub
  

所以阿!!最後.變成我都用B4X去寫程式碼?!!!

底下是一位網友製作出來的SithasoDaisy..給你參考
https://www.b4x.com/android/forum/threads/sithasodaisy-tailwindcss-webapps-using-b4x.143950/
SithasoDaisy: TailwindCss WebApps using B4x

其實，這個東西跟你之前問的「臭長程式碼」那一篇，本質是一樣的道理。

在那一篇中，我有說到了其實那個作法等同物件化的前身處理作做。
這只是一種物件封裝化。

但一樣就如那一篇說的。這樣的做法並沒有所謂的好與不好，重要及不重要。
一切還是得看功能性而定。

就如單純1+1的程式碼，你將其封裝「加1」
這樣就太過矯往過正。

但如果是封裝了一個「計算機」裏面包含了所有的運算子。這樣就不錯。

封裝程式碼，並不一定是為了風險及安全性。
其也包含了可讀性、可利用性、可組合性。

看事情並不能單看一面來看待。