功的意义不在于你取得多大的成就，也不在于你有多么的伟大。因为，成功总会与努力过的人握手，只要享受了努力的过程，我们就不是失败者。

命名

通常，使用 functionNamesLikeThis, variableNamesLikeThis, ClassNamesLikeThis, EnumNamesLikeThis, methodNamesLikeThis 和 SYMBOLIC_CONSTANTS_LIKE_THIS 。具体如下：

属性和方法

文件或类中的私有属性，变量和方法名应该以下划线 "_" 开头；

保护属性, 变量和方法名不需要下划线开头，和公共变量名一样。

方法和函数参数

可选参数以 opt_ 开头；

函数的参数个数不固定时，应该添加最后一个参数 var_args 为参数的个数。你也可以不设置 var_args 而取代使用 arguments；

可选和可变参数应该在 @param 标记中说明清楚。

虽然这两个规定对编译器没有任何影响，但还是请尽量遵守。

Getters 和 Setters

Getters 和 setters 并不是必要的。但只要使用它们了，就请将 getters 命名成 getFoo() 形式，将 setters 命名成 setFoo(value) 形式。(对于布尔类型的 getters，使用 isFoo() 也可。)

命名空间

JavaScript 不支持包和命名空间。

不容易发现和调试全局命名的冲突，多个系统集成时还可能因为命名冲突导致很严重的问题。为了提高 JavaScript 代码复用率，我们遵循下面的约定以避免冲突。

为全局代码使用命名空间

在全局作用域上，使用一个唯一的，与工程/库相关的名字作为前缀标识。比如：你的工程是 "Project Sloth", 那么命名空间前缀可取为 sloth.* 。

var sloth={};

sloth.sleep=function() {

...

};

明确命名空间所有权

当选择了一个子命名空间，请确保父命名空间的负责人知道你在用哪个子命名空间。比如说, 你为工程 'sloths' 创建一个 'hats' 子命名空间, 那确保 Sloth 团队人员知道你在使用 sloth.hats.

外部代码和内部代码使用不同的命名空间

"外部代码" 是指来自于你代码体系的外部，可以独立编译。内外部命名应该严格保持独立。如果你使用了外部库，他的所有对象都在 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());

};

不要对命名空间创建别名

myapp.main=function() {

var namespace=some.long.namespace;

namespace.MyClass.staticHelper(new namespace.MyClass());

};

不要在全局范围内创建别名，而仅在函数块作用域中使用。

myapp.main=function() {

var MyClass=some.long.namespace.MyClass;

MyClass.staticHelper(null);

};

文件名

文件名应该使用小写字符，以避免在有些系统平台上不识别大小写的命名方式。文件名以 .js 结尾，不要包含除 - 和 _ 外的标点符号(使用 - 优于 _)。

自定义 toString() 方法

可自定义 toString() 方法，但确保你的实现方法满足：（1）总是成功；（2）没有其他负面影响。如果不满足这两个条件，那么可能会导致严重的问题。比如：如果 toString() 调用了包含 assert 的函数，assert 输出导致失败的对象，这在 toString() 也会被调用。

延迟初始化

可以延迟变量的初始化，没有必要在每次声明变量时就将其初始化。

明确作用域

任何时候都要明确作用域，以提高可移植性和清晰度。

例如，不要依赖于作用域链中的 window 对象。可能在其他应用中，你函数中的 window 不是指之前的那个窗口对象。

代码格式化

大括号

分号会被隐式插入到代码中，所以你务必在同一行上插入大括号。例如：

if (something) {

// ...

} else {

// ...

}

数组和对象的初始化

如果初始值不是很长，就保持写在单行上：

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!');

比较长的标识符或者数值，不要为了让代码好看些而手工对齐：

CORRECT_Object.prototype={

a: 0,

b: 1,

lengthyName: 2

};

//不要这样做

WRONG_Object.prototype={

a : 0,

b : 1,

lengthyName: 2

};

函数参数

尽量让函数参数在同一行上。如果一行超过 80 字符，每个参数独占一行，并以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) {

// ...

}

传递匿名函数

如果参数中有匿名函数，函数体从调用该函数的左边开始缩进2个空格，而不是从 function 这个关键字开始。这让匿名函数更加易读 (不要增加很多没必要的缩进让函数体显示在屏幕的右侧)。

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);

}

});

更多的缩进

事实上，除了初始化数组和对象，和传递匿名函数外，所有被拆开的多行文本要么选择与之前的表达式左对齐，要么以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();

}

空行

使用空行来划分一组逻辑上相关联的代码片段。

doSomethingTo(x);

doSomethingElseTo(x);

andThen(x);

nowDoSomethingWith(y);

andNowWith(z);

二元和三元操作符

操作符始终跟随着前行，这样就不用顾虑分号的隐式插入问题。如果一行实在放不下，还是按照上述的缩进风格来换行。

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 )，或是在某些关键词(如 return, throw, case, new )之后，不要使用括号。

字符串

使用 单引号(') 优于 双引号(") 。

var msg='This is some HTML';

可见性

用 @private 和 @protected 来指名类、函数、属性的可见性。

标记为 @private 的全局变量和函数，表示他们只能在当前文件中访问。

标记为 @private 的构造函数，表示该类只能在当前文件或是其静态/普通成员中实例化。私有构造函数的公共静态属性在当前文件的任何地方都可访问，通过 instanceof 操作符也可。

永远不要为全局变量，函数，构造器加 @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 的属性，在当前文件中可访问它。如果是类属性私有，"拥有"该属性的类的所有静态/普通成员也可访问，但它们不能被不同文件中的子类访问或覆盖。

标记为 @protected 的属性，在当前文件中可访问它。如果是类属性私有，那么"拥有"该属性的类及其子类中的所有静态/普通成员也可访问。

// 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;

};

这是小编的一部分总结，有想看下面的内容点播关注哦，等待小编的更新，有想学习前端的伙伴可以私信我！

绍

JSS是CSS的创作工具，它允许你使用JavaScript以声明，无冲突和可重用的方式描述样式。它可以在浏览器，服务器端或在构建时在Node中编译。JSS与框架无关。它由多个包组成：核心部分，插件以及框架集成等。

Github

https://github.com/cssinjs/jss stars:5.1k

快速开始

如果你已经对使用JSS感兴趣，可以使用在线代码编辑器。在CodeSandbox（一个非常实用的在线编辑器，可以用来学习各种编程技能）上尝试Hello World示例。以下是三种不同框架下的用法（代码图片生成自carbon网站）：

• JSS

• React-JSS

• Styled-JSS

特性

• 真实的CSS

JSS生成实际的CSS，而不是内联样式。它支持每个现有的CSS功能。CSS规则只创建一次，并使用其类名与元素重复使用，与内联样式相反。此外，当DOM元素更新时，将应用先前创建的CSS规则。

• 无冲突选择器

JSS默认生成唯一的类名。它允许避免典型的CSS问题，默认情况下一切都是全局的。它完全消除了命名约定的需要。

• 代码重用

使用JavaScript作为宿主语言使我们有机会以常规CSS无法实现的方式重用CSS规则。您可以利用JavaScript模块，变量，函数，数学运算等。如果做得好，它仍然可以完全声明。

• 易于拆卸和修改

CSS规则的明确使用允许您跟踪消费者并确定是否可以安全地删除或修改它。

• 动态Style

使用JavaScript函数和Observable可以在浏览器中动态生成样式，使有机会访问应用程序状态，浏览器API或远程数据以进行样式设置。你不仅可以定义一次样式，还可以在任何时间点以有效的方式更新样式。

• 用户控制的动画

JSS可以高效地处理CSS更新，可以使用它创建复杂的动画。使用函数值，Observables并将它们与CSS过渡相结合，可以为用户控制的动画提供最大的性能。对于预定义的动画，使用@keyframes和transition更好，因为它们将完全取消阻止JavaScript线程。

• 关键的CSS

要优化第一次绘制的时间，你可以使用服务器端渲染并提取关键CSS。可以将CSS的呈现与HTML的呈现结合起来，这样就不会生成未使用的CSS。它将导致在服务器端呈现期间提取的最小关键CSS，并允许内联它。

• 插件

JSS核心实现了基于插件的架构。它允许您创建可以实现自定义语法或其他强大功能的自定义插件。JSS有许多官方插件，可以单独安装或使用默认预设。社区插件的一个很好的例子是jss-rtl。

• Expressive 语法

由于各种插件，JSS允许您使用现有的全局类名来嵌套，全局选择器和组合。例如，允许您以比CSS更可读的方式表达属性。如果要直接从浏览器开发工具复制粘贴样式，也可以使用模板字符串。jss-plugin-expandbox-shadow

• 完全隔离

另一个有用的插件示例是，它允许您完全隔离元素与全局级联规则，并可能覆盖不需要的属性。在创建应该在第三方文档内部呈现的窗口小部件时尤其有用。jss-plugin-isolate

• React整合。

React-JSS包提供了一些额外的功能：

1. 动态主题 - 允许基于上下文的主题传播和运行时更新。
2. 关键CSS提取 - 仅提取渲染组件中的CSS。
3. 延迟评估 - 样式表在组件安装时创建。
4. 样式表的静态部分在所有元素之间共享。
5. 使用props作为参数自动更新函数值和规则。

• JavaScript构建管道

CSS不需要额外的构建管道配置。无论你选择构建JavaScript的工具是什么，它都可以与JSS一起使用。

安装使用

yarn add jss

yarn add jss-preset-default //使用默认设置

import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 创造你的style.
const style={
 myButton: {
 color: 'green'
 }
}
//编译样式，应用插件。
const sheet=jss.createStyleSheet(style)
//如果要在客户端上呈现，请将其插入DOM。
sheet.attach()
//如果要渲染服务器端，请获取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'
 }
}
//编译样式，应用插件。
const sheet=jss.createStyleSheet(style)
// 如果要在客户端上呈现，请将其插入DOM
sheet.attach()
// 如果要渲染服务器端，请获取CSS文本。
sheet.toString()

• 指定DOM插入点

<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节点，可以作为插入点。
 </div>
</body

import jss from 'jss'
jss.setup({
 insertionPoint: document.getElementById('insertion-point')
})

简单案例

通过两张图片来体验：

总结

JSS的功能是十分强大的，不仅仅让写css的方式放到了JavaScript，这样对更加喜爱编写javascript的小伙伴来说是值得尝试的，而且还支持服务器端渲染等更多高级的特性，前端技术百花齐放，但目前仍然不变的是掌握JavaScript者得天下的时代！

击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

关于JavaScript如何获取一个元素的所有样式值，及设置一个元素的样式值，所有相关知识点，看这两篇够了。记住了，都很简单的。来来来...

想要获取一个元素的一个或者多个CSS样式设置，这应该是搞前端的都碰到过的一件事。如果你平时用JavaScript实现过一些动画效果什么的。肯定就会知道一个问题：元素内联样式和动态设置的样式容易获取，但默认样式表设置的及用户代理默认设置的样式获取比较费劲。

其实现代码说难不难，说容易吧，这其中还真有一些需要特别清楚的地方，今天，我这里给大家简单聊聊，将需要注意的地方全部捋出来。

下面的讲解用这个例子：

上面这个例子很简单，看这篇文章的人没有看不懂的，一个ID值为elem的DOM元素具有内联样式和样式表设置的默认样式。下面开始讲重点

获取内联和动态设置的样式

获取内联和动态设置的样式方式有两种

1. 直接访问元素的style属性

2. 使用getAttribute方法

一. 证明二者都无法获得样式表设置的样式

有些结论可能好多人没有证实过，模模糊糊。比如，上面提到的这两种方式是否可以获取样式表设置的样式，如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设置样式时，之前动态样式和内联样式都会被重置。这一点也很好理解。因为它设置的是style。

当然，使用getAttribute来访问style属性的时候，IE7也会返回一个对象，而不是带有CSS值的一个字符串。

来简单总结一下

上面说了两种获取动态样式和内联样式的方式及一些需要注意的地方。下一篇我来讲一下如何使用一种跨浏览器方式同时获取内联样式，动态设置样式，用户代理以及样式表设置的样式。也是常用的一种方式。还有各自获取的优先级。