使用供應商字首進行程式設計的最佳實踐

**商字首使web開發人員可以在到達候選推薦階段之前嘗試新的標準。之前，我曾寫過這些字首也是瀏覽器**商用來處理實現和規範之間的時序衝突的一種機制。在為ie test drive**構建新功能的演示並進行各種演示時，ie團隊中的許多人都在廣泛處理**商字首。

本文介紹了一種使用我們的團隊在使用**商字首進行開發時可以大大簡化工作的模式。我們想與您分享它，並聽聽您對這種方法或您認為是最佳做法的其他想法。

使用指令碼訪問帶有**商字首的css屬性時，很容易得到如下所示的**：

var elm = document.getelementbyid("myelement");
elm.style.mstransitionproperty = "all";
elm.style.mstransitionduration = "3s";
elm.style.mstransitiondelay = "0s";
elm.style.webkittransitionproperty = "all";
elm.style.webkittransitionduration = "3s";
elm.style.webkittransitiondelay = "0s";
elm.style.moztransitionproperty = "all";
elm.style.moztransitionduration = "3s";
elm.style.moztransitiondelay = "0s";
elm.style.otransitionproperty = "all";
elm.style.otransitionduration = "3s";
elm.style.otransitiondelay = "0s";

雖然功能強大，但它腫，醜陋且容易出錯。

更好的模式是定義乙個方法，該方法迴圈遍歷屬性名稱列表，並返回第乙個受支援的屬性；如果瀏覽器不支援其中任何乙個，則返回null。

function firstsupportedpropertyname(prefixedpropertynames) 
return null;
}

然後，我們為使用的每個**商字首屬性初始化乙個變數，並按照我們希望使用它們的順序將可能的屬性陣列傳遞給該變數。

var transformname = firstsupportedpropertyname(["transform", "mstransform", "moztransform", "webkittransform", "otransform"]);
var backfacevisibilityname = firstsupportedpropertyname(["backfacevisibility", "msbackfacevisibility", "mozbackfacevisibility", "webkitbackfacevisibility", "obackfacevisibility"]);
var transitionname = firstsupportedpropertyname(["transition", "mstransition", "moztransition", "webkittransition", "otransition"]);
var animationname = firstsupportedpropertyname(["animation", "msanimation", "mozanimation", "webkitanimation", "oanimation"]);
var gridname = firstsupportedpropertyname(["gridrow", "msgridrow", "mozgridrow", "webkitgridrow", "ogridrow"]);
var regionsname = firstsupportedpropertyname(["flowfrom", "msflowfrom", "mozflowfrom", "webkitflowfrom", "oflowfrom"]);
var hyphensname = firstsupportedpropertyname(["hyphens", "mshyphens", "mozhyphens", "webkithyphens", "ohyphens"]);
var columnname = firstsupportedpropertyname(["columncount", "mscolumncount", "mozcolumncount", "webkitcolumncount", "ocolumncount"]);

然後，使用這些屬性的整個站點中的**將變成這樣：

var elm = document.getelementbyid("myelement");
if (transitionname) 
else

請注意，通過在firstsupportedpropertyname返回null來啟用簡單功能檢測。

當css 屬性具有**商字首時，該模式也適用。對於css 值（例如，線性漸變）具有**商字首的情況，可以使用稍微不同的模式：

function firstsupportedfunctionname(property, prefixedfunctionnames, argstring) 
return null;
}var lineargradientname = firstsupportedfunctionname("backgroundimage", ["-ms-linear-gradient", "-moz-linear-gradient", "-webkit-linear-gradient", "-o-linear-gradient"], "(top, black, white)");
var radialgradientname = firstsupportedfunctionname("backgroundimage", ["-ms-radial-gradient", "-moz-radial-gradient", "-webkit-radial-gradient", "-o-radial-gradient"], "(50% 50%, circle cover, black, white)");

乙個常見的問題是，如果某些瀏覽器尚不支援該屬性，或者如果沒有瀏覽器支援不帶字首的基於標準的屬性，則使用什麼屬性名稱。有幾種方法，每種都有優點：

始終包括所有期望的名稱，即使它們尚未在瀏覽器中使用也是如此。此路徑的好處是，隨著瀏覽器新增帶有其**商字首的支援或新增對非字首屬性的支援，您的站點將「正常執行」而無需更改。風險在於該**將自動接受您從未測試過的行為。 **商名稱表示行為沒有最後確定，所有的字首屬性和不帶字首的屬性可能不具有相同的行為，從而為瀏覽器新增支援您的**可能「只是沒有工作。」

僅包括可以測試的屬性名稱。這樣做的好處是，即使瀏覽器新增了對新屬性的支援，您的站點也將與您首次編寫時的行為相同。風險是您不必要地降低了功能。對於示例站點或演示站點，人們可以將其解釋為根本沒有功能的瀏覽器。

您需要確定站點的正確路徑。在我們的大多數演示中，我們希望在任何支援它的瀏覽器中展示新的web平台功能。由於這些演示中的小錯誤不會給使用者帶來大問題，因此我們通常選擇選項＃1。另一方面，如果您的生產現場的行為改變會給您的業務造成問題，那麼您可以選擇更規避風險的途徑。

無論選擇哪種路徑，乙個常數都是測試。使用**商字首的屬性時，您會利用早期的經常不穩定的功能，即使在瀏覽器首次引入對屬性的支援之後，這些功能也可能會發生變化，因此，對每個瀏覽器進行更新以確保您的站點按預期執行至關重要。

from:

使用供應商字首進行程式設計的最佳實踐

供應鏈管理如何有效進行供應商管理？

技術供應鏈安全供應商範圍的定義

近期的技術問題讓雲供應商進行預設加密

使用供應商字首進行程式設計的最佳實踐

供應鏈管理 如何有效進行供應商管理？

技術供應鏈安全 供應商範圍的定義

近期的技術問題讓雲供應商進行預設加密

相關推薦

供應鏈管理如何有效進行供應商管理？

技術供應鏈安全供應商範圍的定義