[發(fā)明專利]一種Web Components組件中引入樣式的方法及裝置

在審

• 申請?zhí)枺?/td>: 201610879438.0
• 申請日: 2016-10-08
• 公開（公告）號: CN108304179A
• 公開（公告）日: 2018-07-20
• 發(fā)明（設(shè)計）人: 馬立銘
• 申請（專利權(quán)）人: 阿里巴巴集團控股有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/41
• 代理公司: 北京市清華源律師事務(wù)所 11441
• 代理人: 沈泳;王永秀

1.一種Web Components組件中引入樣式的方法，其特征在于，包括：

獲取一個或者多個樣式模塊；

將各個所述樣式模塊編譯生成對應(yīng)的CSS結(jié)果；

將各個所述CSS結(jié)果進(jìn)行組件化封裝，分別轉(zhuǎn)換為對應(yīng)的樣式組件；

根據(jù)所預(yù)設(shè)的條件，將合適的所述樣式組件引入到需要該種或者該些樣式組件的WebComponents組件中。

2.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，所述樣式模塊，包括:

全局樣式拆分出的細(xì)粒度樣式模塊或直接編輯的樣式模塊。

3.根據(jù)權(quán)利要求2所述的Web Components組件中引入樣式的方法，其特征在于，所述直接編輯的樣式模塊，包括:

通過CSS預(yù)處理器語言編輯。

4.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，所述所預(yù)設(shè)的條件，包括：

所述待開發(fā)的新組件的需求。

5.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，所述將各個所述CSS結(jié)果進(jìn)行組件化封裝，分別轉(zhuǎn)換為對應(yīng)的樣式組件，包括：

在所述CSS結(jié)果外部包上一層Web Components的組件定義結(jié)構(gòu)體，并根據(jù)所述樣式模塊路徑確定所述樣式組件的唯一名稱。

6.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，所述將各個所述樣式模塊編譯生成對應(yīng)的CSS結(jié)果與將各個所述CSS結(jié)果進(jìn)行組件化封裝，分別轉(zhuǎn)換為對應(yīng)的樣式組件的步驟通過編譯引擎實現(xiàn)。

7.根據(jù)權(quán)利要求6所述的Web Components組件中引入樣式的方法，其特征在于，所述編譯引擎，包括：

將所述編譯引擎適配到本地服務(wù)器，以服務(wù)器的插件形式提供編譯服務(wù)。

8.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，所述以服務(wù)器的插件形式提供編譯服務(wù)，包括：

在開發(fā)階段，將所述樣式模塊進(jìn)行動態(tài)編譯輸出所述樣式組件。

9.根據(jù)權(quán)利要求6所述的Web Components組件中引入樣式的方法，其特征在于，所述編譯引擎，包括：

將所述編譯引擎適配到構(gòu)建工具的文件流中，以構(gòu)建工具的插件形式提供文件流處理服務(wù)。

10.根據(jù)權(quán)利要求9所述的Web Components組件中引入樣式的方法，其特征在于，所述以構(gòu)建工具的插件形式提供文件流處理服務(wù)用于，包括：

在構(gòu)建階段，對所述樣式模塊進(jìn)行固化編譯生成所述樣式組件的實體文件。

11.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，所述Web Components組件，包括一個或者多個所述樣式組件，以及一個或者多個普通組件，以及將上述樣式組件、普通組件組合為一個Web Components組件所需要的Web Components組件邏輯。

12.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，所述將合適的所述樣式組件引入到需要該種或者該些樣式組件的Web Components組件中，采用HTML Import引入。

13.根據(jù)權(quán)利要求1所述的Web Components組件中引入樣式的方法，其特征在于，包括:

使用Polymer框架實現(xiàn)。

14.一種Web Components組件中引入樣式的裝置，其特征在于，包括：

獲取單元，用于獲取一個或者多個樣式模塊；

編譯單元，用于將獲取單元中的各個所述樣式模塊文件編譯生成對應(yīng)的CSS結(jié)果；

封裝單元，用于將編譯單元的各個所述CSS結(jié)果進(jìn)行組件化封裝，分別轉(zhuǎn)換為對應(yīng)的樣式組件；

引入單元，用于根據(jù)所預(yù)設(shè)的條件，將封裝單元中的合適的所述樣式組件引入到需要該種或者該些樣式組件的Web Components組件中。