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

規范中的必須（MUST），禁止（MUST NOT），應該（SHOULD），不應該（SHOULD NOT），建議（MAY），不建議（MAY NOT）關鍵詞使用遵循TFC2119規范。

新增組件

速度&展現相關

1.1 不應該使用 jQuery（SHOULD NOT）

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

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

1.2 不應該使用外鏈JS （SHOULD NOT）

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

1.3. 組件生命應該使用 firstInviewCallback（SHOULD）

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

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

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

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

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

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

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

數字如果經常變化，可以作為配置寫在組件屬性中，在組件內部讀取屬性并使用。避免未來屬性變化還需要升級組件。

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

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

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

1.8 不建議在循環中綁定事件（MAY NOT）

為了更好的頁面性能，不建議循環綁定事件，建議使用官方方法將事件代理到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 不應該使用 document.write和document.writeln（SHOULD NOT）

不應該使用嚴重影響頁面性能的操作。

1.10 建議使用框架接口調用localStorage、sessionStorage （MAY）

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

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

當前組件 JS 腳本只為當前組件容器服務，不應該處理組件以外的 dom 和交互。

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

代碼維護相關

2.1 完整填寫readme.md（MUST）

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

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

2.2 命名符合規范（MUST）

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

2.3 package.json 描述不全（SHOULD）

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

MIP業務相關

3.1 新增組件應該使用MIP組件平臺提交（SHOULD）

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

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

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

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

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

升級組件

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。