整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
功的意義不在于你取得多大的成就，也不在于你有多么的偉大。因為，成功總會與努力過的人握手，只要享受了努力的過程，我們就不是失敗者。
命名
通常，使用 functionNamesLikeThis, variableNamesLikeThis, ClassNamesLikeThis, EnumNamesLikeThis, methodNamesLikeThis 和 SYMBOLIC_CONSTANTS_LIKE_THIS 。具體如下：
屬性和方法
文件或類中的私有屬性，變量和方法名應(yīng)該以下劃線 "_" 開頭；
保護屬性, 變量和方法名不需要下劃線開頭，和公共變量名一樣。
方法和函數(shù)參數(shù)
可選參數(shù)以 opt_ 開頭；
函數(shù)的參數(shù)個數(shù)不固定時，應(yīng)該添加最后一個參數(shù) var_args 為參數(shù)的個數(shù)。你也可以不設(shè)置 var_args 而取代使用 arguments；
可選和可變參數(shù)應(yīng)該在 @param 標記中說明清楚。
雖然這兩個規(guī)定對編譯器沒有任何影響，但還是請盡量遵守。
Getters 和 Setters
Getters 和 setters 并不是必要的。但只要使用它們了，就請將 getters 命名成 getFoo() 形式，將 setters 命名成 setFoo(value) 形式。(對于布爾類型的 getters，使用 isFoo() 也可。)
命名空間
JavaScript 不支持包和命名空間。
不容易發(fā)現(xiàn)和調(diào)試全局命名的沖突，多個系統(tǒng)集成時還可能因為命名沖突導(dǎo)致很嚴重的問題。為了提高 JavaScript 代碼復(fù)用率，我們遵循下面的約定以避免沖突。
為全局代碼使用命名空間
在全局作用域上，使用一個唯一的，與工程/庫相關(guān)的名字作為前綴標識。比如：你的工程是 "Project Sloth", 那么命名空間前綴可取為 sloth.* 。
var sloth={};
sloth.sleep=function() {
...
};
明確命名空間所有權(quán)
當選擇了一個子命名空間，請確保父命名空間的負責(zé)人知道你在用哪個子命名空間。比如說, 你為工程 'sloths' 創(chuàng)建一個 'hats' 子命名空間, 那確保 Sloth 團隊人員知道你在使用 sloth.hats.
外部代碼和內(nèi)部代碼使用不同的命名空間
"外部代碼" 是指來自于你代碼體系的外部，可以獨立編譯。內(nèi)外部命名應(yīng)該嚴格保持獨立。如果你使用了外部庫，他的所有對象都在 foo.hats.* 下，那么你自己的代碼不能在 foo.hats.* 下命名，因為很有可能其他團隊也在其中命名。
重命名那些名字很長的變量，提高可讀性
主要是為了提高可讀性。局部空間中的變量別名只需要取原名字的最后部分。
/**
* @constructor
*/
some.long.namespace.MyClass=function() {
};
/**
* @param {some.long.namespace.MyClass} a
*/
some.long.namespace.MyClass.staticHelper=function(a) {
...
};
myapp.main=function() {
var MyClass=some.long.namespace.MyClass;
var staticHelper=some.long.namespace.MyClass.staticHelper;
staticHelper(new MyClass());
};
不要對命名空間創(chuàng)建別名
myapp.main=function() {
var namespace=some.long.namespace;
namespace.MyClass.staticHelper(new namespace.MyClass());
};
不要在全局范圍內(nèi)創(chuàng)建別名，而僅在函數(shù)塊作用域中使用。
myapp.main=function() {
var MyClass=some.long.namespace.MyClass;
MyClass.staticHelper(null);
};
文件名
文件名應(yīng)該使用小寫字符，以避免在有些系統(tǒng)平臺上不識別大小寫的命名方式。文件名以 .js 結(jié)尾，不要包含除 - 和 _ 外的標點符號(使用 - 優(yōu)于 _)。
自定義 toString() 方法
可自定義 toString() 方法，但確保你的實現(xiàn)方法滿足：（1）總是成功；（2）沒有其他負面影響。如果不滿足這兩個條件，那么可能會導(dǎo)致嚴重的問題。比如：如果 toString() 調(diào)用了包含 assert 的函數(shù)，assert 輸出導(dǎo)致失敗的對象，這在 toString() 也會被調(diào)用。
延遲初始化
可以延遲變量的初始化，沒有必要在每次聲明變量時就將其初始化。
明確作用域
任何時候都要明確作用域，以提高可移植性和清晰度。
例如，不要依賴于作用域鏈中的 window 對象。可能在其他應(yīng)用中，你函數(shù)中的 window 不是指之前的那個窗口對象。
代碼格式化
大括號
分號會被隱式插入到代碼中，所以你務(wù)必在同一行上插入大括號。例如：
if (something) {
// ...
} else {
// ...
}
數(shù)組和對象的初始化
如果初始值不是很長，就保持寫在單行上：
var arr=[1, 2, 3]; // No space after [ or before ].
var obj={a: 1, b: 2, c: 3}; // No space after { or before }.
初始值占用多行時，縮進2個空格：
// Object initializer.
var inset={
top: 10,
right: 20,
bottom: 15,
left: 12
};
// Array initializer.
this.rows_=[
'"Slartibartfast" ',
'"Zaphod Beeblebrox" ',
'"Ford Prefect" ',
'"Arthur Dent" ',
'"Marvin the Paranoid Android" ',
'the.mice@magrathea.com'
];
// Used in a method call.
goog.dom.createDom(goog.dom.TagName.DIV, {
id: 'foo',
className: 'some-css-class',
style: 'display:none'
}, 'Hello, world!');
比較長的標識符或者數(shù)值，不要為了讓代碼好看些而手工對齊：
CORRECT_Object.prototype={
a: 0,
b: 1,
lengthyName: 2
};
//不要這樣做
WRONG_Object.prototype={
a : 0,
b : 1,
lengthyName: 2
};
函數(shù)參數(shù)
盡量讓函數(shù)參數(shù)在同一行上。如果一行超過 80 字符，每個參數(shù)獨占一行，并以4個空格縮進，或者與括號對齊，以提高可讀性。盡可能不要讓每行超過80個字符。
// Four-space, wrap at 80. Works with very long function names, survives
// renaming without reindenting, low on space.
goog.foo.bar.doThingThatIsVeryDifficultToExplain=function(
veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
// ...
};
// Four-space, one argument per line. Works with long function names,
// survives renaming, and emphasizes each argument.
goog.foo.bar.doThingThatIsVeryDifficultToExplain=function(
veryDescriptiveArgumentNumberOne,
veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy,
artichokeDescriptorAdapterIterator) {
// ...
};
// Parenthesis-aligned indentation, wrap at 80. Visually groups arguments,
// low on space.
function foo(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
// ...
}
// Parenthesis-aligned, one argument per line. Emphasizes each
// individual argument.
function bar(veryDescriptiveArgumentNumberOne,
veryDescriptiveArgumentTwo,
tableModelEventHandlerProxy,
artichokeDescriptorAdapterIterator) {
// ...
}
傳遞匿名函數(shù)
如果參數(shù)中有匿名函數(shù)，函數(shù)體從調(diào)用該函數(shù)的左邊開始縮進2個空格，而不是從 function 這個關(guān)鍵字開始。這讓匿名函數(shù)更加易讀 (不要增加很多沒必要的縮進讓函數(shù)體顯示在屏幕的右側(cè))。
var names=items.map(function(item) {
return item.name;
});
prefix.something.reallyLongFunctionName('whatever', function(a1, a2) {
if (a1.equals(a2)) {
someOtherLongFunctionName(a1);
} else {
andNowForSomethingCompletelyDifferent(a2.parrot);
}
});
更多的縮進
事實上，除了初始化數(shù)組和對象，和傳遞匿名函數(shù)外，所有被拆開的多行文本要么選擇與之前的表達式左對齊，要么以4個(而不是2個)空格作為一縮進層次。
someWonderfulHtml='' +
getEvenMoreHtml(someReallyInterestingValues, moreValues,
evenMoreParams, 'a duck', true, 72,
slightlyMoreMonkeys(0xfff)) +
'';
thisIsAVeryLongVariableName=
hereIsAnEvenLongerOtherFunctionNameThatWillNotFitOnPrevLine();
thisIsAVeryLongVariableName=siblingOne + siblingTwo + siblingThree +
siblingFour + siblingFive + siblingSix + siblingSeven +
moreSiblingExpressions + allAtTheSameIndentationLevel;
thisIsAVeryLongVariableName=operandOne + operandTwo + operandThree +
operandFour + operandFive * (
aNestedChildExpression + shouldBeIndentedMore);
someValue=this.foo(
shortArg,
'Some really long string arg - this is a pretty common case, actually.',
shorty2,
this.bar());
if (searchableCollection(allYourStuff).contains(theStuffYouWant) &&
!ambientNotification.isActive() && (client.isAmbientSupported() ||
client.alwaysTryAmbientAnyways())) {
ambientNotification.activate();
}
空行
使用空行來劃分一組邏輯上相關(guān)聯(lián)的代碼片段。
doSomethingTo(x);
doSomethingElseTo(x);
andThen(x);
nowDoSomethingWith(y);
andNowWith(z);
二元和三元操作符
操作符始終跟隨著前行，這樣就不用顧慮分號的隱式插入問題。如果一行實在放不下，還是按照上述的縮進風(fēng)格來換行。
var x=a ? b : c; // All on one line if it will fit.
// Indentation +4 is OK.
var y=a ?
longButSimpleOperandB : longButSimpleOperandC;
// Indenting to the line position of the first operand is also OK.
var z=a ?
moreComplicatedB :
moreComplicatedC;
括號
括號只在需要的時候使用。
不要濫用括號，只在必要的時候使用它。
對于一元操作符(如 delete, typeof 和 void )，或是在某些關(guān)鍵詞(如 return, throw, case, new )之后，不要使用括號。
字符串
使用 單引號(') 優(yōu)于 雙引號(") 。
var msg='This is some HTML';
可見性
用 @private 和 @protected 來指名類、函數(shù)、屬性的可見性。
標記為 @private 的全局變量和函數(shù)，表示他們只能在當前文件中訪問。
標記為 @private 的構(gòu)造函數(shù)，表示該類只能在當前文件或是其靜態(tài)/普通成員中實例化。私有構(gòu)造函數(shù)的公共靜態(tài)屬性在當前文件的任何地方都可訪問，通過 instanceof 操作符也可。
永遠不要為全局變量，函數(shù)，構(gòu)造器加 @protected 標記。
// File 1.
// AA_PrivateClass_ and AA_init_ are accessible because they are global
// and in the same file.
/**
* @private
* @constructor
*/
AA_PrivateClass_=function() {
};
/** @private */
function AA_init_() {
return new AA_PrivateClass_();
}
AA_init_();
標記為 @private 的屬性，在當前文件中可訪問它。如果是類屬性私有，"擁有"該屬性的類的所有靜態(tài)/普通成員也可訪問，但它們不能被不同文件中的子類訪問或覆蓋。
標記為 @protected 的屬性，在當前文件中可訪問它。如果是類屬性私有，那么"擁有"該屬性的類及其子類中的所有靜態(tài)/普通成員也可訪問。
// File 1.
/** @constructor */
AA_PublicClass=function() {
};
/** @private */
AA_PublicClass.staticPrivateProp_=1;
/** @private */
AA_PublicClass.prototype.privateProp_=2;
/** @protected */
AA_PublicClass.staticProtectedProp=31;
/** @protected */
AA_PublicClass.prototype.protectedProp=4;
// File 2.
/**
* @return {number} The number of ducks we've arranged in a row.
*/
AA_PublicClass.prototype.method=function() {
// Legal accesses of these two properties.
return this.privateProp_ + AA_PublicClass.staticPrivateProp_;
};
// File 3.
/**
* @constructor
* @extends {AA_PublicClass}
*/
AA_SubClass=function() {
// Legal access of a protected static property.
AA_PublicClass.staticProtectedProp=this.method();
};
goog.inherits(AA_SubClass, AA_PublicClass);
/**
* @return {number} The number of ducks we've arranged in a row.
*/
AA_SubClass.prototype.method=function() {
// Legal access of a protected instance property.
return this.protectedProp;
};
這是小編的一部分總結(jié)，有想看下面的內(nèi)容點播關(guān)注哦，等待小編的更新，有想學(xué)習(xí)前端的伙伴可以私信我！
JSS是CSS的創(chuàng)作工具，它允許你使用JavaScript以聲明，無沖突和可重用的方式描述樣式。它可以在瀏覽器，服務(wù)器端或在構(gòu)建時在Node中編譯。JSS與框架無關(guān)。它由多個包組成：核心部分，插件以及框架集成等。
https://github.com/cssinjs/jss stars:5.1k
如果你已經(jīng)對使用JSS感興趣，可以使用在線代碼編輯器。在CodeSandbox（一個非常實用的在線編輯器，可以用來學(xué)習(xí)各種編程技能）上嘗試Hello World示例。以下是三種不同框架下的用法（代碼圖片生成自carbon網(wǎng)站）：
JSS生成實際的CSS，而不是內(nèi)聯(lián)樣式。它支持每個現(xiàn)有的CSS功能。CSS規(guī)則只創(chuàng)建一次，并使用其類名與元素重復(fù)使用，與內(nèi)聯(lián)樣式相反。此外，當DOM元素更新時，將應(yīng)用先前創(chuàng)建的CSS規(guī)則。
JSS默認生成唯一的類名。它允許避免典型的CSS問題，默認情況下一切都是全局的。它完全消除了命名約定的需要。
使用JavaScript作為宿主語言使我們有機會以常規(guī)CSS無法實現(xiàn)的方式重用CSS規(guī)則。您可以利用JavaScript模塊，變量，函數(shù)，數(shù)學(xué)運算等。如果做得好，它仍然可以完全聲明。
CSS規(guī)則的明確使用允許您跟蹤消費者并確定是否可以安全地刪除或修改它。
使用JavaScript函數(shù)和Observable可以在瀏覽器中動態(tài)生成樣式，使有機會訪問應(yīng)用程序狀態(tài)，瀏覽器API或遠程數(shù)據(jù)以進行樣式設(shè)置。你不僅可以定義一次樣式，還可以在任何時間點以有效的方式更新樣式。
JSS可以高效地處理CSS更新，可以使用它創(chuàng)建復(fù)雜的動畫。使用函數(shù)值，Observables并將它們與CSS過渡相結(jié)合，可以為用戶控制的動畫提供最大的性能。對于預(yù)定義的動畫，使用@keyframes和transition更好，因為它們將完全取消阻止JavaScript線程。
要優(yōu)化第一次繪制的時間，你可以使用服務(wù)器端渲染并提取關(guān)鍵CSS。可以將CSS的呈現(xiàn)與HTML的呈現(xiàn)結(jié)合起來，這樣就不會生成未使用的CSS。它將導(dǎo)致在服務(wù)器端呈現(xiàn)期間提取的最小關(guān)鍵CSS，并允許內(nèi)聯(lián)它。
JSS核心實現(xiàn)了基于插件的架構(gòu)。它允許您創(chuàng)建可以實現(xiàn)自定義語法或其他強大功能的自定義插件。JSS有許多官方插件，可以單獨安裝或使用默認預(yù)設(shè)。社區(qū)插件的一個很好的例子是jss-rtl。
由于各種插件，JSS允許您使用現(xiàn)有的全局類名來嵌套，全局選擇器和組合。例如，允許您以比CSS更可讀的方式表達屬性。如果要直接從瀏覽器開發(fā)工具復(fù)制粘貼樣式，也可以使用模板字符串。jss-plugin-expandbox-shadow
另一個有用的插件示例是，它允許您完全隔離元素與全局級聯(lián)規(guī)則，并可能覆蓋不需要的屬性。在創(chuàng)建應(yīng)該在第三方文檔內(nèi)部呈現(xiàn)的窗口小部件時尤其有用。jss-plugin-isolate
React-JSS包提供了一些額外的功能：
CSS不需要額外的構(gòu)建管道配置。無論你選擇構(gòu)建JavaScript的工具是什么，它都可以與JSS一起使用。
yarn add jss
yarn add jss-preset-default //使用默認設(shè)置
import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 創(chuàng)造你的style.
const style={
myButton: {
color: 'green'
}
}
//編譯樣式，應(yīng)用插件。
const sheet=jss.createStyleSheet(style)
//如果要在客戶端上呈現(xiàn)，請將其插入DOM。
sheet.attach()
//如果要渲染服務(wù)器端，請獲取CSS文本。
sheet.toString()
import jss from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'
//使用插件。
jss.use(camelCase(), somePlugin())
// Create your style.
const style={
myButton: {
color: 'green'
}
}
//編譯樣式，應(yīng)用插件。
const sheet=jss.createStyleSheet(style)
// 如果要在客戶端上呈現(xiàn)，請將其插入DOM
sheet.attach()
// 如果要渲染服務(wù)器端，請獲取CSS文本。
sheet.toString()
<head> <title>JSS</title> <!-- 自定義插入點 --> </head>
import jss from 'jss'
jss.setup({insertionPoint: 'custom-insertion-point'})
<head> <title>JSS in body</title> </head> <body> <div id="insertion-point"> 這可能是你選擇的任何DOM節(jié)點，可以作為插入點。 </div> </body
import jss from 'jss'
jss.setup({
insertionPoint: document.getElementById('insertion-point')
})
通過兩張圖片來體驗：
JSS的功能是十分強大的，不僅僅讓寫css的方式放到了JavaScript，這樣對更加喜愛編寫javascript的小伙伴來說是值得嘗試的，而且還支持服務(wù)器端渲染等更多高級的特性，前端技術(shù)百花齊放，但目前仍然不變的是掌握JavaScript者得天下的時代！
擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個問題！
關(guān)于JavaScript如何獲取一個元素的所有樣式值，及設(shè)置一個元素的樣式值，所有相關(guān)知識點，看這兩篇夠了。記住了，都很簡單的。來來來...
想要獲取一個元素的一個或者多個CSS樣式設(shè)置，這應(yīng)該是搞前端的都碰到過的一件事。如果你平時用JavaScript實現(xiàn)過一些動畫效果什么的。肯定就會知道一個問題：元素內(nèi)聯(lián)樣式和動態(tài)設(shè)置的樣式容易獲取，但默認樣式表設(shè)置的及用戶代理默認設(shè)置的樣式獲取比較費勁。
其實現(xiàn)代碼說難不難，說容易吧，這其中還真有一些需要特別清楚的地方，今天，我這里給大家簡單聊聊，將需要注意的地方全部捋出來。
下面的講解用這個例子：
上面這個例子很簡單，看這篇文章的人沒有看不懂的，一個ID值為elem的DOM元素具有內(nèi)聯(lián)樣式和樣式表設(shè)置的默認樣式。下面開始講重點
獲取內(nèi)聯(lián)和動態(tài)設(shè)置的樣式
獲取內(nèi)聯(lián)和動態(tài)設(shè)置的樣式方式有兩種
1. 直接訪問元素的style屬性
2. 使用getAttribute方法
有些結(jié)論可能好多人沒有證實過，模模糊糊。比如，上面提到的這兩種方式是否可以獲取樣式表設(shè)置的樣式，如font-size/background-color等。
var elem=document.getElementById('elem')
console.log(elem.style.fontSize)
// 無輸出
console.log(elem.getAttribute('style'))
// 輸出：height:30px; width:150px;
直接訪問style對象的方式必須使用一種特殊的語法。
不帶連字符的屬性值，如width，可以直接訪問。
elem.style.width
帶連字符的屬性值，需要使用駱駝表示法。如background-color
elem.style.backgroundColor
使用方法來訪問style對象，然而你必須從字符串中解析出來。
使用setAttribute設(shè)置樣式時，之前動態(tài)樣式和內(nèi)聯(lián)樣式都會被重置。這一點也很好理解。因為它設(shè)置的是style。
當然，使用getAttribute來訪問style屬性的時候，IE7也會返回一個對象，而不是帶有CSS值的一個字符串。
來簡單總結(jié)一下
上面說了兩種獲取動態(tài)樣式和內(nèi)聯(lián)樣式的方式及一些需要注意的地方。下一篇我來講一下如何使用一種跨瀏覽器方式同時獲取內(nèi)聯(lián)樣式，動態(tài)設(shè)置樣式，用戶代理以及樣式表設(shè)置的樣式。也是常用的一種方式。還有各自獲取的優(yōu)先級。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
