hybird之web動態換膚實現

前言

最近在重構個hybird（原生的殼包著web頁面）的ui框架，進行到了做換膚功能的階段，所以這裡是我思考的解決的方法。

預想

目前實現換膚的功能無非就兩種做法。

1.寫幾個**檔案，然後切換使用這幾個檔案達到換膚的目的。

不得不說這是最常見的方式，效果也比較明顯，但是它有幾個缺點。

缺點：1.如果更改乙個**的內容，那其他的**檔案也要做相應修改（這挺麻煩，不過可以用less管理css解決，所以也不是什麼大問題）。

2.它是固定的，在使用的時候**檔案已經是寫好的了，而當我需要動態設定一些屬性的時候就無可奈何了。

2.使用less這種工具，在頁面載入時才動態生成**樣式。

但這種方式的缺點卻很明顯。

缺點：1.效率低，為了乙個換膚的功能，卻要引乙個less工具（壓縮後大概126kb），在終端web是無法忍受的。

2.速度慢，因為有乙個**檔案編譯（姑且把它叫做編譯）生成的過程，在終端也難以接受（有可能還出現頁面**閃），如果更換**又要重新編譯。

考慮

鑑於上面兩種方法的缺點，一種無法動態，另一種效率低。

所以上面兩種方法沒辦法使用，只能思考另外的方法了，於是就分析哪些是hybird 頁面需要換膚的元素

有幾個需要換膚的元素：

1.導航欄

2.底部欄

3.預設圖示

而又尋找需要設定的屬性：

1.背景色

2.字型顏色

3....（主要是這兩個）

根據上面的兩個東西，我發現沒必要把頁面換膚想成那麼複雜一件事，不是需要用什麼工具或切換css檔案。是不是可以獲取需要動態設定的屬性，然後然後設定到需要換膚的元素就可以了（就是這個簡單想法）。

ps:有人會說**怎麼會需要動態生成。我只能說有可能某些**屬性是頁面啟動時才知道，又或者支援自定義**的。

實現

說幹就幹，實現起來**很少，就直接貼出來給大家看看。

ui.skin = (function

()",
color : "@selector "} 
var init = function
(options)
var _createcss = function
(changeselectors, colortype, color)); 
return
html;
}return
})();

**很簡單，看看就明白

總結

我的實現方法很簡單，當然所能更換的內容也較少且固定，但這對hybird應用的換膚已經是夠的了。既能動態換膚，而且效率是不錯的。

——技術只是技術，工具只是工具，不能為用而用。

（本篇完）

hybird之web動態換膚實現

前言 最近在重構個hybird 原生的殼包著web頁面 的ui框架，進行到了做換膚功能的階段，所以這裡是我思考的解決的方法。預想 目前實現換膚的功能無非就兩種做法。1.寫幾個 檔案，然後切換使用這幾個檔案達到換膚的目的。不得不說這是最常見的方式，效果也比較明顯，但是它有幾個缺點。缺點 1.如果更改乙...

C linq查詢之動態OrderBy用法例項

grouplist是原始資料集合，list sortorder是排序型別，desc 或者asc sortname是排序屬性名稱 1.使用反射。private static object getpropertyvalue object obj,string property var resultlis...

Spring boot 之 動態的獲取不同的實現類

宣告介面 apiresult 就是返回值，可以根據自己的需求，定義 定義兩個實現類 service hdfsstoragetype public class hdfsstoragetype implements storagetype service ftpstoragetype public cl...