weex-html5 擴充開發指引建立新元件擴充API定制加載器loader參考連結

weex是一個高可擴充性的跨平台動态化開發方案，你可以在現有元件基礎上定制自己需要的三端元件。你可以為weex api子產品添加新的方法，或者建立新的api子產品和新的加載器。本文将介紹一些步驟和技巧用于幫助開發者更好的擴充weex-html5的元件，api或者加載器。

首先要明确的是，元件和api子產品是基于weex的擴充，但是獨立于weex，元件的定義本身是不需要依賴于weex的，這樣有助于元件的分散化管理，去除中心化依賴。

你應該将你的擴充釋出到weex開發者可以友善找到和使用的管道，比如<code>npm</code>. 推薦釋出到<code>npm</code>，友善其他weex開發者使用。

如果你想建立一個新的元件（這裡僅介紹web端建立元件的方法），你必須遵循以下步驟:

在你的元件實作中必須繼承<code>weex.component</code> 或者 <code>weex.atomic</code>這兩個基類之一, 并選擇性的重寫其中的一些方法.

你的元件的exports需要暴露一個<code>init</code>方法，并在其中使用<code>weex.registercomponent</code>注冊你的元件.

這裡用一個demo項目展示如何擴充一個新的元件

看這個元件擴充的代碼(web端上的元件)：

這個demo重寫了基類<code>component</code>中的<code>create</code>方法。你也可以選擇重寫<code>component</code>中的一些其他方法來定制元件的行為。典型的方法包括：

<code>create</code>: 建立元件的節點，在方法體中return這個節點.

<code>createchildren</code> 建立子節點.

<code>insertbefore</code> 在某個子節點之前插入一個新的子節點.

<code>appendchild</code> 在子節點清單的最後加上一個節點.

<code>removechild</code> 移除一個子節點.

重要的一點，注冊元件的關鍵方法是<code>weex.registercomponent</code>，如示例裡的<code>weex-hello</code>元件的注冊：

在某個需要使用該元件的weex項目中使用<code>weex.install</code>方法安裝該元件：

在你的<code>.we</code>檔案中直接使用這個元件：

以上就是建立一個新元件以及在你的業務代碼（dsl代碼）中使用它的基本流程（__注__ : 我們習慣上把使用weex及weex規定的dsl文法開發的項目代碼都叫dsl代碼，把開發者稱為dsl開發者，也就是編寫<code>.we</code>檔案的業務開發者，這不是某種規範，僅僅是一種習以為常的的叫法）。當然，這隻是元件擴充的一個最基本的流程，然而在實作一個新元件的過程中，你可能會遇到以下幾個疑問：

在元件的constructor裡需要幹些什麼？

在元件的其他方法中分别需要做哪些事情？

有哪些可以直接調用的父類的原型方法？

元件從注冊到渲染到頁面上的執行流程是怎樣的？

weex裡内置了一些api子產品供dsl開發者們調用，如果你已經擁有weex開發經驗你可能已經接觸過了，比如<code>stream</code>子產品，<code>dom</code>子產品等等。目前在dsl代碼裡調用api子產品的方式主要是：

你可以擴充自己的api子產品，或者為某個已有的子產品添加新的api. 比如，你可以添加一個api子產品叫做<code>user</code>，在裡面添加一些使用者登入處理的api，比如<code>login</code>, <code>logout</code>等等。

步驟:

實作你的api module.

在你的api安裝子產品裡暴露一個<code>init</code>方法，并在這個方法裡面使用<code>weex.registerapimodules</code> 注冊你的api module.

這裡用一個例子展示如何擴充一個新的api子產品

建立一個檔案<code>user.js</code>，在其中定義登入登出<code>login/logout</code>方法.

這個簡單的user helper子產品就實作好了，我們可以給這個子產品檔案取個名字，比如說<code>userhelper.js</code>。

在你的新的weex項目裡安裝這個子產品:

安裝了這個子產品，你就可以在dsl代碼裡引用這個子產品幹點事情了:

__loader僅用于weex-html5 (web端)，用來加載dsl打包出來的bundle代碼__。native平台有其他加載bundle檔案的機制。

已有的加載器包括<code>xhr</code>, <code>jsonp</code>和<code>source</code>. 你可以使用<code>weex.registerloader</code>注冊一個新的加載器。例如，你有一個擷取weex bundle的服務<code>myserve.getweexbundle</code>, 通過這個服務可以加載weex bundle，為此你可以定義一個加載器：

在你的weex-html5項目的啟動檔案裡安裝并使用這個加載器：

注意 : 一旦注冊安裝好自己的loader，你就可以把loader的注冊名稱做為參數傳遞在weex.init方法了，将init方法的參數配置<code>loader</code>指定為你的loader的注冊名即可。

<a href="http://alibaba.github.io/weex/">weex website</a>

<a href="http://alibaba.github.io/weex/doc/">weex docs</a>

<a href="https://github.com/weexteam/article/issues">weex 中文文檔</a>

<a href="https://github.com/alibaba/weex">weex github 倉庫</a>