MIP個性化組件一般用來實現(xiàn)前后端數(shù)據(jù)傳輸或特殊的交互效果，由廣大開發(fā)者貢獻。出于性能、可維護性等方面的考慮，開發(fā)者在新增組件或升級組件時，請遵守以下規(guī)范。

規(guī)范中的必須（MUST），禁止（MUST NOT），應(yīng)該（SHOULD），不應(yīng)該（SHOULD NOT），建議（MAY），不建議（MAY NOT）關(guān)鍵詞使用遵循TFC2119規(guī)范。

新增組件

速度&展現(xiàn)相關(guān)

1.1 不應(yīng)該使用 jQuery（SHOULD NOT）

MIP是主要用在移動端，應(yīng)該使用原生JS或Zepto。jQuery代碼過于龐大冗余。如有特殊依賴，需在注釋中說明。

define(function (require) {// 推薦var $ = require('zepto'); // 特殊情況：使用jQuery的xx特性，Zepto不支持var $ = require('jquery'); });

1.2 不應(yīng)該使用外鏈JS （SHOULD NOT）

為了更好的頁面性能，不建議以外鏈的方式引入JS。開發(fā)者本站維護的腳本必須封裝為組件或AMD方式引入。廣告，第三方統(tǒng)計等JS，請在代碼注釋中說明用途及服務(wù)提供商。未來會上線第三方JS引入機制，新機制上線后不允許引用更多外鏈JS。

1.3. 組件生命應(yīng)該使用 firstInviewCallback（SHOULD）

為了首屏元素優(yōu)先展示，加速頁面顯示速度。組件聲明周期應(yīng)該統(tǒng)一使用 firstInviewCallback。如有特殊情況需要使用其它聲明周期，請在代碼注釋中說明。

// 推薦：組件進入首屏時加載 customElement.prototype.firstInviewCallback = function () {var ele = this.element; };// build說明: 導航組件，在首屏展示，需要盡快加載 customElement.prototype.build = function () {var ele = this.element; };

1.4 不應(yīng)該提交重復功能組件 (SHOULD NOT)

應(yīng)該使用官方組件，官方組件會測試各個常見瀏覽器兼容性。
第三方提供的通用服務(wù)（廣告，統(tǒng)計，評論等其他網(wǎng)站也會用到的功能），不應(yīng)該自己封裝。請到GitHub提交issue，MIP項目組會聯(lián)系通用服務(wù)提供方開發(fā)組件。

1.5 異步請求使用建議（MAY）

異步請求建議使用核心代碼提供的 fetch 和 fetchJsonp，文檔：https://www.mipengine.org/doc/3-widget/6-help/1-introduce.html

1.6 建議將非固定屬性寫入配置（MAY）

數(shù)字如果經(jīng)常變化，可以作為配置寫在組件屬性中，在組件內(nèi)部讀取屬性并使用。避免未來屬性變化還需要升級組件。

// html： 在DOM中配置 data-target 變量 <mip-aa data-target="#id1"></mip-aa>// 組件JS：獲取 data-target 變量用于后續(xù)邏輯 customElement.prototype.firstInviewCallback = function () {var _element = this.element;this.target = _element.getAttribute('data-target'); }

1.7 CSS樣式，style標簽建議和HTML，JavaScript分離（MAY）

為了分離JS，HTML和CSS，增強代碼的可維護性，請不要在頁面內(nèi)使用內(nèi)聯(lián)style；建議在head中含有mip-custom屬性的style標簽內(nèi)自定義樣式。

1.8 不建議在循環(huán)中綁定事件（MAY NOT）

為了更好的頁面性能，不建議循環(huán)綁定事件，建議使用官方方法將事件代理到element，文檔：https://www.mipengine.org/doc/3-widget/6-help/1-introduce.html

// 不推薦 var list = document.querySelectorAll('.unorder li'); for(var i=0; i<list.length; i++) {list[i].addEventListener('click', clickHandler); }// 推薦 var util = require('util'); var delegate = util.event.delegate(document, document.querySelectorAll('.unorder li'),'click',clickHandler);

1.9 不應(yīng)該使用 document.write和document.writeln（SHOULD NOT）

不應(yīng)該使用嚴重影響頁面性能的操作。

1.10 建議使用框架接口調(diào)用localStorage、sessionStorage （MAY）

使用方式：https://www.mipengine.org/doc/3-widget/6-help/6-storage.html

1.11 MIP 組件操作應(yīng)該遵循分離原則 (SHOULD)

當前組件 JS 腳本只為當前組件容器服務(wù)，不應(yīng)該處理組件以外的 dom 和交互。

customElement.prototype.firstInviewCallback = function () {// 不應(yīng)該這樣使用, 全局選擇var lists = document.querySelectorAll('li');// 推薦, 組件內(nèi)選擇var ele = this.element;var lists = ele.querySelectorAll('li'); }

代碼維護相關(guān)

2.1 完整填寫readme.md（MUST）

必須詳細填寫readme.md文件，說明組件用法、所需屬性、注意事項等信息。方便其它開發(fā)者直接使用。

// 默認生成，不可直接提交 mip-xxx-xxx 組件說明// 內(nèi)容太少，未說明清楚 mip-xxx-xxx// 優(yōu)秀的組件說明 mip-carousel 用來支持 MIP 中圖片展示，支持多圖輪播。

2.2 命名符合規(guī)范（MUST）

組件命名規(guī)則：mip-站點域名-功能，盡量簡潔。 如mip-mipengine-search。

2.3 package.json 描述不全（SHOULD）

在package.json中的description字段中應(yīng)該添加詳細描述：組件功能，當前版本號，組件維護者聯(lián)系方式。

MIP業(yè)務(wù)相關(guān)

3.1 新增組件應(yīng)該使用MIP組件平臺提交（SHOULD）

新增個性化組件，請確認符合 FECS 規(guī)范后，在組件平臺提交（使用文檔）或在 GitHub/mip-extensions-platform 提交PR. GitHub/mip-extensions倉庫僅提交通用的組件。

3.2 前后端通信，服務(wù)器地址必須支持HTTPS（MUST）

由于MIP頁會在百度搜索結(jié)果頁的HTTPS環(huán)境打開。組件與服務(wù)器的數(shù)據(jù)請求，必須支持https://。但<mip-img> 的src不強制要求HTTPS，在組件代碼中有轉(zhuǎn)換邏輯。

3.3 MIP頁面使用JS跳轉(zhuǎn)，跳轉(zhuǎn)操作必須使用window.top.location.href=”“（MUST）

由于MIP頁會在百度搜索結(jié)果頁以iframe內(nèi)嵌形式打開，跳轉(zhuǎn)鏈接需要使用window.top.location.href來修改iframe外層URL。

升級組件

4.1 舊組件不符合以上規(guī)則處理辦法（MUST）

已上線組件可以繼續(xù)使用，但升級組件必須按照上述規(guī)則執(zhí)行，升級組件代碼時必須確認修改后代碼符合上述規(guī)則。

4.2 組件升級改版本號（MAY）

組件升級，為了表明便于維護區(qū)分，建議修改package.json中的組件version版本號。

總結(jié)

以上是生活随笔為你收集整理的MIP个性化组件提交规范的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。