【亚洲必赢官网】JS函数动作分层结构详解及Document,用法教程

CSS in JS 简介

2017/04/05 · CSS ·
CSS

原稿出处:
阮一峰   

1、

先前,网页开发有一个尺码,叫做“关切点分离”(separation
of concerns)。

亚洲必赢官网 1

它的意思是,各样技能只担负协调的领域,不要混合在一道,形成耦合。对于网页开发以来,重假如二种技术分离。

亚洲必赢官网 2

  • HTML 语言:负责网页的结构,又称语义层
  • CSS 语言:负责网页的样式,又称视觉层
  • JavaScript 语言:负责网页的逻辑和相互,又称逻辑层或相互层

概括说,就是一句话,不要写”行内样式”(inline style)和”行内脚本”(inline
script)。比如,下边代码就很糟糕(查看一体化代码)。

XHTML

<h1 style=”color:red;font-size:46px;” onclick=”alert(‘Hi’)”> Hello
World </h1>

1
2
3
<h1 style="color:red;font-size:46px;"  onclick="alert(‘Hi’)">
  Hello World
</h1>

2、

React
出现之后,那一个规则不再适用了。因为,React 是组件结构,强制须求把
HTML、CSS、JavaScript 写在一起。

地点的例证使用 React
改写如下(查看全部代码)。

JavaScript

const style = { ‘color’: ‘red’, ‘fontSize’: ’46px’ }; const clickHandler
= () => alert(‘hi’); ReactDOM.render( <h1 style={style}
onclick={clickHandler}> Hello, world! </h1>,
document.getElementById(‘example’) );

1
2
3
4
5
6
7
8
9
10
11
12
13
const style = {
  ‘color’: ‘red’,
  ‘fontSize’: ’46px’
};
 
const clickHandler = () => alert(‘hi’);
 
ReactDOM.render(
  <h1 style={style} onclick={clickHandler}>
     Hello, world!
  </h1>,
  document.getElementById(‘example’)
);

上边代码在一个文书之中,封装了社团、样式和逻辑,完全背离了”关切点分离”的规格,很三个人不适应。

而是,那便于组件的隔断。各个组件包括了具有必要使用的代码,不依靠外部,组件之间从未耦合,很有益复用。所以,随着
React 的成名和组件方式如雷贯耳,那种”关切点混合”的新写法渐渐改为主流。

亚洲必赢官网 3

3、

表面上,React 的写法是 HTML、CSS、JavaScript
混合在联合。不过,实际上不是。今后实在是用 JavaScript 在写 HTML 和 CSS。

React 在 JavaScript 里面完毕了对 HTML 和 CSS 的包裹,大家经过封装去操作
HTML 和 CSS。相当于说,网页的协会和体制都因此 JavaScript 操作。

4、

React 对 HTML 的包装是 JSX 语言 ,这些在各样React 教程都有详尽介绍,本文不再涉及了,上面来看 React 对 CSS 的包裹。

React 对 CSS 封装极度不难,就是沿用了 DOM 的 style
属性对象,这些在面前早已观看过了。

JavaScript

const style = { ‘color’: ‘red’, ‘fontSize’: ’46px’ };

1
2
3
4
const style = {
  ‘color’: ‘red’,
  ‘fontSize’: ’46px’
};

下面代码中,CSS 的font-size天性要写成fontSize,这是 JavaScript 操作
CSS
属性的约定。

鉴于 CSS 的包裹至极弱,导致了一名目繁多的第三方库,用来增长 React 的 CSS
操作。它们统称为 CSS in JS,意思就是利用 JS 语言写
CSS。依照不完全总计,各样 CSS in JS
的库至少有47种。老实说,以往也看不出来,哪一个库会变成主流。

亚洲必赢官网 4

你或者会问,它们与”CSS 预处理器”(比如 Less 和
Sass,包罗PostCSS)有啥样分别?回答是 CSS in JS 使用 JavaScript 的语法,是
JavaScript 脚本的一有些,不用从头学习一套专用的
API,也不会多一道编译步骤。

5、

下周,笔者见到一个新的 CSS in JS 库,叫做
polished.js。它将一些常用的 CSS
属性封装成函数,用起来格外有益,充裕展现使用 JavaScript 语言写 CSS
的优势。

亚洲必赢官网 5

自作者觉着这些库很值得推荐,那篇作品的关键目标,就是想从那个库来看怎么选用CSS in JS。

首先,加载 polished.js。

JavaScript

const polished = require(‘polished’);

1
const polished = require(‘polished’);

一经是浏览器,插入上边的剧本。

XHTML

<script
src=”;
</script>

1
2
<script src="https://unpkg.com/polished@1.0.0/dist/polished.min.js">
</script>

polished.js时下有50七个措施,比如clearfix主意用来清理浮动。

JavaScript

const styles = { …polished.clearFix(), };

1
2
3
const styles = {
  …polished.clearFix(),
};

上边代码中,clearFix就是一个惯常的 JavaScript 函数,重临一个对象。

JavaScript

polished.clearFix() // { // &::after: { // clear: “both”, // content:
“”, // display: “table” // } // }

1
2
3
4
5
6
7
8
polished.clearFix()
// {
//  &::after: {
//    clear: "both",
//    content: "",
//    display: "table"
//  }
// }

“展开运算符”(...)将clearFix回到的目的进行,便于与其余 CSS
属性混合。然后,将样式对象赋给 React
组件的style属性,这些组件就能清理浮动了。

JavaScript

ReactDOM.render( <h1 style={style}>Hello, React!</h1>,
document.getElementById(‘example’) );

1
2
3
4
ReactDOM.render(
  <h1 style={style}>Hello, React!</h1>,
  document.getElementById(‘example’)
);

从那么些事例,大家应该可以体会polished.js的用法。

6、

上边再看多少个很有用的函数。

ellipsis将超过指定长度的公文,使用简单号代替(查看全体代码)。

JavaScript

const styles = { …polished.ellipsis(‘200px’) } // 返回值 // { //
‘display’: ‘inline-block’, // ‘max-width’: ‘250px’, // ‘overflow’:
‘hidden’, // ‘text-overflow’: ‘ellipsis’, // ‘white-space’: ‘nowrap’, //
‘word-wrap’: ‘normal’ // }

1
2
3
4
5
6
7
8
9
10
11
12
13
const styles = {
  …polished.ellipsis(‘200px’)
}
 
// 返回值
// {
//   ‘display’: ‘inline-block’,
//   ‘max-width’: ‘250px’,
//   ‘overflow’: ‘hidden’,
//   ‘text-overflow’: ‘ellipsis’,
//   ‘white-space’: ‘nowrap’,
//   ‘word-wrap’: ‘normal’
// }

hideText用来隐藏文本,展现图片。

JavaScript

const styles = { ‘background-image’: ‘url(logo.png)’,
…polished.hideText(), }; // 返回值 // { ‘background-image’:
‘url(logo.png)’, ‘text-indent’: ‘101%’, ‘overflow’: ‘hidden’,
‘white-space’: ‘nowrap’, }

1
2
3
4
5
6
7
8
9
10
11
12
const styles = {
  ‘background-image’: ‘url(logo.png)’,
  …polished.hideText(),
};
 
// 返回值
// {
  ‘background-image’: ‘url(logo.png)’,
  ‘text-indent’: ‘101%’,
  ‘overflow’: ‘hidden’,
  ‘white-space’: ‘nowrap’,
}

hiDPI点名高分屏样式。

JavaScript

const styles = { [polished.hiDPI(1.5)]: { width: ‘200px’, } }; //
返回值 //’@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
// only screen and (min–moz-device-pixel-ratio: 1.5), // only screen
and (-o-min-device-pixel-ratio: 1.5/1), // only screen and
(min-resolution: 144dpi), // only screen and (min-resolution: 1.5dppx)’:
{ // ‘width’: ‘200px’, //}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const styles = {
[polished.hiDPI(1.5)]: {
   width: ‘200px’,
}
};
 
// 返回值
//’@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
// only screen and (min–moz-device-pixel-ratio: 1.5),
// only screen and (-o-min-device-pixel-ratio: 1.5/1),
// only screen and (min-resolution: 144dpi),
// only screen and (min-resolution: 1.5dppx)’: {
//  ‘width’: ‘200px’,
//}

retinaImage为高分屏和低分屏设置不一样的背景图。

JavaScript

const styles = { …polished.retinaImage(‘my-img’) }; // 返回值 //
backgroundImage: ‘url(my-img.png)’, // ‘@media only screen and
(-webkit-min-device-pixel-ratio: 1.3), // only screen and
(min–moz-device-pixel-ratio: 1.3), // only screen and
(-o-min-device-pixel-ratio: 1.3/1), // only screen and (min-resolution:
144dpi), // only screen and (min-resolution: 1.5dppx)’: { //
backgroundImage: ‘url(my-img_2x.png)’, // }

1
2
3
4
5
6
7
8
9
10
11
12
13
const styles = {
…polished.retinaImage(‘my-img’)
};
 
// 返回值
//   backgroundImage: ‘url(my-img.png)’,
//  ‘@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
//   only screen and (min–moz-device-pixel-ratio: 1.3),
//   only screen and (-o-min-device-pixel-ratio: 1.3/1),
//   only screen and (min-resolution: 144dpi),
//   only screen and (min-resolution: 1.5dppx)’: {
//    backgroundImage: ‘url(my-img_2x.png)’,
//  }

7、

polished.js【亚洲必赢官网】JS函数动作分层结构详解及Document,用法教程。提供的其余方法如下,详细用法请参考文档。

  • normalize():样式表先导化
  • placeholder():对 placeholder 伪成分设置样式
  • selection():对 selection 伪成分设置样式
  • darken():调节颜色深浅
  • lighten():调节颜色深浅
  • desaturate():下降颜色的饱和度
  • saturate():增添颜色的饱和度
  • opacify():调节光滑度
  • complement():再次回到互补色
  • grayscale():将一个颜料转为灰度
  • rgb():指定红、绿、蓝三个值,重回一个颜色
  • rgba():指定红、绿、蓝和发光度多少个值,再次来到一个颜料
  • hsl():指定色调、饱和度和亮度多少个值,再次回到一个颜色
  • hsla():指定色调、饱和度、亮度和发光度三个值,重回一个颜料
  • mix():混合三种颜色
  • em():将像素转为 em
  • rem():将像素转为 rem

目前,polished.js只是1.0版,将来应该会有更为多的艺术。

8、

polished.js再有一个特点:所有函数默许都以柯里化的,由此可以拓展函数组合运算,定制出团结想要的函数。

JavaScript

import { compose } from ‘ramda’; import { lighten, desaturate } from
‘polished’; const tone = compose(lighten(10), desaturate(10))

1
2
3
4
import { compose } from ‘ramda’;
import { lighten, desaturate } from ‘polished’;
 
const tone = compose(lighten(10), desaturate(10))

上边代码应用 Ramda 函数库已毕重组运算。Ramda
的用法可以参照作者写的教程。

 

 

1 赞 2 收藏
评论

亚洲必赢官网 6

JavaScript 中的 CSS:基于组件的样式的前程

2017/12/03 · CSS ·
体制组件

本文由 伯乐在线 –
dimple11
翻译,刘唱
校稿。未经许可,禁止转发!
英文出处:Jonathan Z.
White。欢迎参预翻译组。

 

亚洲必赢官网 7

 

 

 

 

 

 

 

 

 

大家通过运用内联式 CSS 样式,可以获取
Javascript 中持有编程协助,它的好处就好像 CSS
预处理器(变量、混入和函数)一样,而且也能缓解 CSS
中的很多题材,比如全局命名空间和体裁争辩。

为了长远探究 Javascript 中写 CSS
化解的标题,可以看这么些闻名的以身作则:ReactJS中引入CSS。关于 Aphrodite 上的习性创新范例,你可以在Khan
Academy: Aphrodite 上查到内联式 CSS
代码,借使想学学愈多Javascript 中 CSS 最佳实践的相干知识,可以查阅 Airbnb
的体制指南。

别的,我们选拔内联式 Javascript
样式来确立组件,处理小编前一篇小说中介绍的有的统筹基本原理:在你能操纵设计前面,必须先精晓设计的基本原理。

一个启发式的例证

我们从一个不难易行的例子入手:创立和规划一个按钮。

不以为奇,组件 Button 和其有关的体裁
ButtonStyles
会被放入相同的文本,那是因为它们处理的是同个难点:视图。然而以那个事例来说,小编是因为多样考虑要将代码分开,使代码更易被了然。

那会儿是按钮组件:

<span style=”color: #000000″>… function Button(props) { return
( <input type=”button” className={css(styles.button)}
value={props.text} /> ); }</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">…
function Button(props) {
  return (
    <input
      type="button"
      className={css(styles.button)}
      value={props.text}
    />
  );
}</span>

此间没什么越发的——就是一个无状态 React
组件。Aphrodite 发挥成效的地点是在 className 属性那里。函数 css
的成效是引入了一个styles 对象,并将其转移为 css。styles 对象是由此Aphrodite 的 StyleSheet.create({ … }) 语句所生成,你可以经过 Aphrodite
playground 查看 StyleSheet.create({ …
}) 的输出结果。

此时是按钮的样式表:

CSS

<span style=”color: #000000″>… const gradient =
‘linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)’; const styles =
StyleSheet.create({ button: { background: gradient, borderRadius: ‘3px’,
border: 0, color: ‘white’, height: ’48px’, textTransform: ‘uppercase’,
padding: ‘0 25px’, boxShadow: ‘0 3px 5px 2px rgba(255, 105, 135, .30)’,
}, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">…
const gradient = ‘linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)’;
const styles = StyleSheet.create({
  button: {
    background: gradient,
    borderRadius: ‘3px’,
    border: 0,
    color: ‘white’,
    height: ’48px’,
    textTransform: ‘uppercase’,
    padding: ‘0 25px’,
    boxShadow: ‘0 3px 5px 2px rgba(255, 105, 135, .30)’,
  },
});</span>

 

Aphrodite 的益处之一是搬迁简单直接,而且学习曲线低缓。像
border-radius
那种个性改为了borderRadius,值变成了字符串。伪类拔取器、媒体询问和字体定义都以可完结的,别的,会自动抬高浏览器引擎前缀。

以下是结果:

亚洲必赢官网 8

 

 

 

 

 

 

 

 

牢记那么些例子,大家来看看哪些利用 Aphrodite
来树立一个着力的可视化设计系统,大家重视于以下为主设计法则:排版和间隔。

基本法则1——排版

笔者们从排版入手,它是安顿性的重大基础。第一步是概念排版常量,与
Sass 和 Less 分化,Aphrodite 中常量能够置身 Javascript 或 JSON
文件中。

概念排版常量

在成立常量时,给变量起名要语义化。比如说,不要给其中的字号起名
h2,而应起像 displayLarge
那种可以描述其成效的名字。类似的,设置字体粗细时,不要给其中的粗细值起名
600,而应起像半粗体那样的名字,方便描述其功用。

CSS

<span style=”color: #000000″>export const fontSize = { // heading
displayLarge: ’32px’, displayMedium: ’26px’, displaySmall: ’20px’,
heading: ’18px’, subheading: ’16px’, // body body: ’17px’, caption:
’15px’, }; export const fontWeight = { bold: 700, semibold: 600, normal:
400, light: 200, }; export const tagMapping = { h1: ‘displayLarge’, h2:
‘displayMedium’, h3: ‘displaySmall’, h4: ‘heading’, h5: ‘subheading’, };
export const lineHeight = { // heading displayLarge: ’48px’,
displayMedium: ’48px’, displaySmall: ’24px’, heading: ’24px’,
subheading: ’24px’, // body body: ’24px’, caption: ’24px’,
};</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<span style="color: #000000">export const fontSize = {
  // heading
  displayLarge: ’32px’,
  displayMedium: ’26px’,
  displaySmall: ’20px’,
  heading: ’18px’,
  subheading: ’16px’,
 
  // body
  body: ’17px’,
  caption: ’15px’,
};
 
export const fontWeight = {
  bold: 700,
  semibold: 600,
  normal: 400,
  light: 200,
};
 
export const tagMapping = {
  h1: ‘displayLarge’,
  h2: ‘displayMedium’,
  h3: ‘displaySmall’,
  h4: ‘heading’,
  h5: ‘subheading’,
};
 
export const lineHeight = {
  // heading
  displayLarge: ’48px’,
  displayMedium: ’48px’,
  displaySmall: ’24px’,
  heading: ’24px’,
  subheading: ’24px’,
 
  // body
  body: ’24px’,
  caption: ’24px’,
};</span>

对诸如字号和行高等变量正确赋值非常主要,因为它们会一贯影响设计的垂直规律(vertical
ryth),垂直规律能支援完毕要素之间的间距统一。

要打听愈来愈多的垂直规律,你可以阅读那篇小说:为何垂直规律是一种紧要的排版习惯?

亚洲必赢官网 9

用统计器确定行高

想让行高和字号取值正确,背后大有知识。我们可以动用算数比率来暴发一层层潜在尺寸以作备选。几周前,小编写了一篇详述方法论的文章:排版可以做到或损毁你的陈设性:一个门类采纳的经过。你可以动用Modular
Scale 来决定字号,使用垂直规律总结器来控制行高。

概念一个题目组件

概念了排版常量之后,下一步是开创一个零件使用其值。本条组件的对象是在代码库中加深标题设计和落成的一致性。

<span style=”color: #000000″>import React, { PropTypes } from
‘react’; import { StyleSheet, css } from ‘aphrodite/no-important’;
import { tagMapping, fontSize, fontWeight, lineHeight } from
‘../styles/base/typography’; function Heading(props) { const { children,
tag: Tag } = props; return <Tag
className={css(styles[tagMapping[Tag]])}>{children}</Tag>;
} export default Heading; export const styles = StyleSheet.create({
displayLarge: { fontSize: fontSize.displayLarge, fontWeight:
fontWeight.bold, lineHeight: lineHeight.displayLarge, }, displayMedium:
{ fontSize: fontSize.displayMedium, fontWeight: fontWeight.normal,
lineHeight: lineHeight.displayLarge, }, displaySmall: { fontSize:
fontSize.displaySmall, fontWeight: fontWeight.bold, lineHeight:
lineHeight.displaySmall, }, heading: { fontSize: fontSize.heading,
fontWeight: fontWeight.bold, lineHeight: lineHeight.heading, },
subheading: { fontSize: fontSize.subheading, fontWeight:
fontWeight.bold, lineHeight: lineHeight.subheading, }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<span style="color: #000000">import React, { PropTypes } from ‘react’;
import { StyleSheet, css } from ‘aphrodite/no-important’;
import { tagMapping, fontSize, fontWeight, lineHeight } from ‘../styles/base/typography’;
 
function Heading(props) {
  const { children, tag: Tag } = props;
  return <Tag className={css(styles[tagMapping[Tag]])}>{children}</Tag>;
}
 
export default Heading;
 
export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  displayMedium: {
    fontSize: fontSize.displayMedium,
    fontWeight: fontWeight.normal,
    lineHeight: lineHeight.displayLarge,
  },
  displaySmall: {
    fontSize: fontSize.displaySmall,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displaySmall,
  },
  heading: {
    fontSize: fontSize.heading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.heading,
  },
  subheading: {
    fontSize: fontSize.subheading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.subheading,
  },
});</span>

 

Heading
是无状态的函数式组件,它引入一个标签作为质量,并回到该标签相应的体裁。因为大家早前已在常量文件中定义了标签映射,所以这么是有理的。

<span style=”color: #000000″>… export const tagMapping = { h1:
‘displayLarge’, h2: ‘displayMedium’, h3: ‘displaySmall’, h4: ‘heading’,
h5: ‘subheading’, };</span>

1
2
3
4
5
6
7
8
<span style="color: #000000">…
export const tagMapping = {
  h1: ‘displayLarge’,
  h2: ‘displayMedium’,
  h3: ‘displaySmall’,
  h4: ‘heading’,
  h5: ‘subheading’,
};</span>

笔者们在组件文件的平底定义styles对象,就在那里会用到排版常量。

<span style=”color: #000000″>export const styles =
StyleSheet.create({ displayLarge: { fontSize: fontSize.displayLarge,
fontWeight: fontWeight.bold, lineHeight: lineHeight.displayLarge, }, …
});</span>

1
2
3
4
5
6
7
8
9
<span style="color: #000000">export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  
  …
});</span>

那就是标题组件的行使格局:

<span style=”color: #000000″>function Parent() { return (
<Heading tag=”h2″>Hello World</Heading> ); }</span>

1
2
3
4
5
<span style="color: #000000">function Parent() {
  return (
    <Heading tag="h2">Hello World</Heading>
  );
}</span>

利用那种艺术,可以减掉设计系统中出现的意想不到变动。通过免去对全局样式的必要,以及对代码库题目标准化,可以使我们防止各类不一致字号的苦恼。其它,大家用来确立标题组件的法子也可用于在代码主体建立文本组件。

基本法则2——间隔

距离可以同时控制规划中的垂直和水平规律,那使得间隔对于建立一个可视化设计系统首要。和排版部分同样,处理间隔的率先步就是概念间隔常量。

概念间隔常量

概念成分间距离常量时,大家能够使用一种算数方法。通过应用
spacingFactor
常量可以生出一多重基于一个公因数的长度,那种艺术可以保险成分间的间隔具有逻辑性和一致性。

<span style=”color: #000000″>const spacingFactor = 8; export
const spacing = { space0: `${spacingFactor / 2}px`, // 4 space1:
`${spacingFactor}px`, // 8 space2: `${spacingFactor * 2}px`, // 16
space3: `${spacingFactor * 3}px`, // 24 space4: `${spacingFactor *
4}px`, // 32 space5: `${spacingFactor * 5}px`, // 40 space6:
`${spacingFactor * 6}px`, // 48 space8: `${spacingFactor * 8}px`,
// 64 space9: `${spacingFactor * 9}px`, // 72 space13:
`${spacingFactor * 13}px`, // 104 };</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${spacingFactor / 2}px`,  // 4
  space1: `${spacingFactor}px`,      // 8
  space2: `${spacingFactor * 2}px`,  // 16
  space3: `${spacingFactor * 3}px`,  // 24
  space4: `${spacingFactor * 4}px`,  // 32
  space5: `${spacingFactor * 5}px`,  // 40
  space6: `${spacingFactor * 6}px`,  // 48
 
  space8: `${spacingFactor * 8}px`,  // 64
  space9: `${spacingFactor * 9}px`,  // 72
  space13: `${spacingFactor * 13}px`, // 104
};</span>

地点的例子用了一个从一到十三的线性刻度,可是用不一样的刻度和比例做试验。设计当中因为用途、受众以及目标设备的两样而需求不一样的刻度。以下为例,那是值为
8 的 spacingFactor 用黄金比例算出来的前七个长度

<span style=”color: #000000″>Golden Ratio (1:1.618) 8.0 x (1.618
^ 0) = 8.000 8.0 x (1.618 ^ 1) = 12.94 8.0 x (1.618 ^ 2) = 20.94 8.0 x
(1.618 ^ 3) = 33.89 8.0 x (1.618 ^ 4) = 54.82 8.0 x (1.618 ^ 5) =
88.71</span>

1
2
3
4
5
6
7
<span style="color: #000000">Golden Ratio (1:1.618)
8.0 x (1.618 ^ 0) = 8.000
8.0 x (1.618 ^ 1) = 12.94
8.0 x (1.618 ^ 2) = 20.94
8.0 x (1.618 ^ 3) = 33.89
8.0 x (1.618 ^ 4) = 54.82
8.0 x (1.618 ^ 5) = 88.71</span>

那就是距离刻度在代码中突显的规范,小编加了一个帮扶函数,把统计结果处理成最接近的整数像素。

<span style=”color: #000000″>const spacingFactor = 8; export
const spacing = { space0: `${computeGoldenRatio(spacingFactor, 0)}px`,
// 8 space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 13
space2: `${computeGoldenRatio(spacingFactor, 2)}px`, // 21 space3:
`${computeGoldenRatio(spacingFactor, 3)}px`, // 34 space4:
`${computeGoldenRatio(spacingFactor, 4)}px`, // 55 space5:
`${computeGoldenRatio(spacingFactor, 5)}px`, // 89 }; function
computeGoldenRatio(spacingFactor, exp) { return Math.round(spacingFactor
* Math.pow(1.618, exp)); }</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${computeGoldenRatio(spacingFactor, 0)}px`,  // 8
  space1: `${computeGoldenRatio(spacingFactor, 1)}px`,  // 13
  space2: `${computeGoldenRatio(spacingFactor, 2)}px`,  // 21
  space3: `${computeGoldenRatio(spacingFactor, 3)}px`,  // 34
  space4: `${computeGoldenRatio(spacingFactor, 4)}px`,  // 55
  space5: `${computeGoldenRatio(spacingFactor, 5)}px`,  // 89
};
 
function computeGoldenRatio(spacingFactor, exp) {
  return Math.round(spacingFactor * Math.pow(1.618, exp));
}</span>

概念了区间常量之后,大家就可以用它给规划中的成分加外边距。一种格局就是在组件中引入间隔常量并运用它们。

比如说,咱们在 Button 组件中投入
marginBottom。

<span style=”color: #000000″>import { spacing } from
‘../styles/base/spacing’; … const styles = StyleSheet.create({ button:
{ marginBottom: spacing.space4, // adding margin using spacing constant
… }, });</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">import { spacing } from ‘../styles/base/spacing’;
 
 
const styles = StyleSheet.create({
  button: {
    marginBottom: spacing.space4, // adding margin using spacing constant
    …
  },
});</span>

那在大部分情况下都管用,可是只要大家想依照按钮放置的职位去改变它的
marginBottom 属性值,该如何是好吧?

一种已毕三种外省距的点子是从父组件覆盖外边距样式,其余一种艺术是开创一个
Spacing 组件来控制成分的垂直外边距。

<span style=”color: #000000″>import React, { PropTypes } from
‘react’; import { spacing } from ‘../../base/spacing’; function
getSpacingSize(size) { return `space${size}`; } function
Spacing(props) { return ( <div style={{ marginBottom:
spacing[getSpacingSize(props.size)] }}> {props.children}
</div> ); } export default Spacing;</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span style="color: #000000">import React, { PropTypes } from ‘react’;
import { spacing } from ‘../../base/spacing’;
 
function getSpacingSize(size) {
  return `space${size}`;
}
 
function Spacing(props) {
  return (
    <div style={{ marginBottom: spacing[getSpacingSize(props.size)] }}>
      {props.children}
    </div>
  );
}
 
export default Spacing;</span>

透过那种办法,我们得以将设置异地距的任务从子组件中抽离出来,转而放入父组件中履行。那样的话,子组件布局就不得而知了,不要求知道子组件本身与其它因素之间的地点关系。

那很有用,因为有的像按钮、输入和卡片之类的组件或者要求三种异地距。比如说,一个表格中的按钮大概比一个导航栏中的按钮需求更大的异地距。尤其告诫一点,若是一个零件的外省距总是一样的,那么在组件内处理外边距会更合理。

再就是你也只怕曾经注意到了例子中仅用了
marginBottom,那是因为在一个势头上定义所有的垂直外边距,能够免止外边距碰撞,并且帮您立即跟进了然规划的垂直规律。你可以在哈利罗伯特的文章《单向内地距评释》中看看越多这方面的情节。

末尾一点,你也可以将概念的距离常量用作内边距。

<span style=”color: #000000″>import React, { PropTypes } from
‘react’; import { StyleSheet, css } from ‘aphrodite/no-important’;
import { spacing } from ‘../../styles/base/spacing’; function
Card(props) { return ( <div className={css(styles.card)}>
{props.children} </div> ); } export default Card; export const
styles = StyleSheet.create({ card: { padding: spacing.space4}, // using
spacing constants as padding background: ‘rgba(255, 255, 255, 1.0)’,
boxShadow: ‘0 3px 17px 2px rgba(0, 0, 0, .05)’, borderRadius: ‘3px’, },
});</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<span style="color: #000000">import React, { PropTypes } from ‘react’;
import { StyleSheet, css } from ‘aphrodite/no-important’;
import { spacing } from ‘../../styles/base/spacing’;
 
function Card(props) {
  return (
    <div className={css(styles.card)}>
      {props.children}
    </div>
  );
}
 
export default Card;
 
export const styles = StyleSheet.create({
  card: {
    padding: spacing.space4}, // using spacing constants as padding
    
    background: ‘rgba(255, 255, 255, 1.0)’,
    boxShadow: ‘0 3px 17px 2px rgba(0, 0, 0, .05)’,
    borderRadius: ‘3px’,
  },
});</span>

透过对上上面距使用同样的区间常量,你便足以使和谐的布置性更兼具视觉上的一致性。

那是结果只怕出现的楷模:

亚洲必赢官网 10

 

 

 

 

 

 

 

既是你对 Javascript 中的 CSS
有自然控制,那就去试试,尝试将内联式 Javascript
样式纳入你的下一个品类。假若可以在单一的条件下处理所有的体制和视图,作者想你会对此十分感谢。

针对 CSS 和
Javascript,有啥样让您倍谢谢动的新进展吗?作者个人因为 async/await
而倍感欢跃不已,你可以留言或在 推特 上给自个儿发 tweet。

你可以通过 Medium
找到自个儿,我周周都会发作品,恐怕关心自身的
推特(Twitter),小编总在上头对统筹、前端开发以及虚拟现实东拉西扯。

附记:倘诺你欢悦这篇文章,那么点击 💚 并享受给心上人会很有含义。

1 赞 1 收藏
评论

CSS Modules 用法教程

2016/06/19 · CSS ·
Modules

初稿出处:
阮一峰   

学过网页开发就会清楚,CSS 不可以算编程语言,只是网页样式的一种描述方法。

为了让 CSS
也能适用软件工程措施,程序员想了各个方法,让它变得像一门编程语言。从最早的Less、SASS,到新兴的
PostCSS,再到如今的 CSS in JS,都以为了消除这么些题材。

亚洲必赢官网 11

本文介绍的 CSS Modules
有所差别。它不是将 CSS
改造成编程语言,而是功效很单纯,只加入了一部分功效域和模块依赖,那刚刚是网页组件最急需的效果。

所以,CSS Modules
很容命理术数,因为它的规则少,同时又丰硕有用,可以保障某个组件的体制,不会潜移默化到任何零件。

亚洲必赢官网 12

html +css 静态页面

关于小编:dimple11

亚洲必赢官网 13

简介还没赶趟写 :)
个人主页 · 亚洲必赢官网,
小编的小说 ·
15

亚洲必赢官网 14

零、示例库

自小编为这几个课程写了一个示例库,包括多个Demo。通过它们,你可以轻松学会CSS
Modules。

首先,克隆示例库。

JavaScript

$ git clone

1
$ git clone https://github.com/ruanyf/css-modules-demos.git

下一场,安装依赖。

JavaScript

$ cd css-modules-demos $ npm install

1
2
$ cd css-modules-demos
$ npm install

紧接着,就可以运作第二个示范了。

JavaScript

$ npm run demo01

1
$ npm run demo01

开拓浏览器,访问

js     动态 交互

一、局部成效域

CSS的条条框框都以大局的,任何一个零件的体裁规则,都对全体页面有效。

暴发局地功用域的绝无仅有办法,就是运用一个无比的class的名字,不会与任何选拔重视名。这就是
CSS Modules 的做法。

下边是一个React组件App.js。

JavaScript

import React from ‘react’; import style from ‘./App.css’; export default
() => { return ( <h1 className={style.title}> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import style from ‘./App.css’;
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

地方代码中,我们将样式文件App.css输入到style对象,然后引用style.title代表一个class。

CSS

.title { color: red; }

1
2
3
.title {
  color: red;
}

创设工具会将类名style.title编译成一个哈希字符串。

XHTML

<h1 class=”_3zyde4l1yATCOkgn-DBWEL”> Hello World </h1>

1
2
3
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

App.css也会同时被编译。

JavaScript

._3zyde4l1yATCOkgn-DBWEL { color: red; }

1
2
3
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

那样一来,这一个类名就改为独一无二了,只对App组件有效。

CSS Modules
提供各类插件,扶助不一样的创设工具。本文使用的是
Webpack
的css-loader插件,因为它对
CSS Modules 的支撑最好,而且很不难选拔。顺便说一下,假如你想学
Webpack,可以翻阅小编的科目Webpack-Demos。

上边是那么些示例的webpack.config.js。

JavaScript

module.exports = { entry: __dirname + ‘/index.js’, output: {
publicPath: ‘/’, filename: ‘./bundle.js’ }, module: { loaders: [ {
test: /.jsx?$/, exclude: /node_modules/, loader: ‘babel’, query: {
presets: [‘es2015’, ‘stage-0’, ‘react’] } }, { test: /.css$/, loader:
“style-loader!css-loader?modules” }, ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  entry: __dirname + ‘/index.js’,
  output: {
    publicPath: ‘/’,
    filename: ‘./bundle.js’
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: ‘babel’,
        query: {
          presets: [‘es2015’, ‘stage-0’, ‘react’]
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

地点代码中,关键的一行是style-loader!css-loader?modules,它在css-loader前面加了一个查询参数modules,表示打开
CSS Modules 功效。

近日,运行那个Demo。

JavaScript

$ npm run demo01

1
$ npm run demo01

打开
,可以看出结果,h1标题呈现为革命。

 

二、全局作用域

CSS Modules
允许行使:global(.className)的语法,声惠氏(WYETH)个大局规则。凡是那样申明的class,都不会被编译成哈希字符串。

App.css投入一个大局class。

JavaScript

.title { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
.title {
  color: red;
}
 
:global(.title) {
  color: green;
}

App.js运用普通的class的写法,就会引用全局class。

JavaScript

import React from ‘react’; import styles from ‘./App.css’; export
default () => { return ( <h1 className=”title”> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import styles from ‘./App.css’;
 
export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

运作这一个示例。

JavaScript

$ npm run demo02

1
$ npm run demo02

打开

CSS Modules
还提供一种显式的有些功用域语法:local(.className),等同于.className,所以地点的App.css也得以写成下边那样。

JavaScript

:local(.title) { color: red; } :global(.title) { color: green; }

1
2
3
4
5
6
7
:local(.title) {
  color: red;
}
 
:global(.title) {
  color: green;
}

规律: js就是修改样式, 比如弹出一个对话框. 弹出的进度就是那些框由disable
变成display:enable.
又只怕当鼠标指向的时候换一个颜色,就是一个改动样式的工具.

三、定制哈希类名

css-loader暗中同意的哈希算法是[hash:base64],这会将.title编译成._3zyde4l1yATCOkgn-DBWEL那样的字符串。

webpack.config.js个中可以定制哈希字符串的格式。

JavaScript

module: { loaders: [ // … { test: /.css$/, loader:
“style-loader!css-loader?modules&localIdentName=[path][name]—[local]—[hash:base64:5]”
}, ] }

1
2
3
4
5
6
7
8
9
module: {
  loaders: [
    // …
    {
      test: /.css$/,
      loader: "style-loader!css-loader?modules&amp;localIdentName=[path][name]—[local]—[hash:base64:5]"
    },
  ]
}

运行那几个示例。

JavaScript

$ npm run demo03

1
$ npm run demo03

你会发现.title被编译成了demo03-components-App—title—GpMto。

  • 编写JS的流程

    • 布局:HTML+CSS
    • 事件:确定用户做哪些操作(产品设计)
    • 编制JS:在事件中,用JS来修改页面成分的体制(外加属性:确定要修改哪些属性)

四、 Class 的组合

在 CSS Modules
中,一个选取器可以持续另一个接纳器的条条框框,那名叫”组合”(“composition”)。

在App.css中,让.title继承.className

JavaScript

.className { background-color: blue; } .title { composes: className;
color: red; }

1
2
3
4
5
6
7
8
.className {
  background-color: blue;
}
 
.title {
  composes: className;
  color: red;
}

App.js永不修改。

JavaScript

import React from ‘react’; import style from ‘./App.css’; export default
() => { return ( <h1 className={style.title}> Hello World
</h1> ); };

1
2
3
4
5
6
7
8
9
10
import React from ‘react’;
import style from ‘./App.css’;
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

运转那个示例。

JavaScript

$ npm run demo04

1
$ npm run demo04

打开

App.css编译成下边的代码。

JavaScript

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 {
background-color: blue; }

1
2
3
4
5
6
7
._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
 
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

对应地, h1的class也会编译成<h1 class=”_2DHwuiHWMnKTOYG45T0x34
_10B-buq6_BEOTOl9urIjf8″>。

     

五、输入任何模块

拔取器也足以一连其余CSS文件之中的规则。

another.css

JavaScript

.className { background-color: blue; }

1
2
3
.className {
  background-color: blue;
}

App.css可以继承another.css里面的条条框框。

JavaScript

.title { composes: className from ‘./another.css’; color: red; }

1
2
3
4
.title {
  composes: className from ‘./another.css’;
  color: red;
}

运转这些示例。

JavaScript

$ npm run demo05

1
$ npm run demo05

打开

  • 怎么是事件

六、输入变量

CSS Modules 援救使用变量,不过需求设置 PostCSS 和
postcss-modules-values。

JavaScript

$ npm install –save postcss-loader postcss-modules-values

1
$ npm install –save postcss-loader postcss-modules-values

把postcss-loader加入webpack.config.js。

JavaScript

var values = require(‘postcss-modules-values’); module.exports = {
entry: __dirname + ‘/index.js’, output: { publicPath: ‘/’, filename:
‘./bundle.js’ }, module: { loaders: [ { test: /.jsx?$/, exclude:
/node_modules/, loader: ‘babel’, query: { presets: [‘es2015’,
‘stage-0’, ‘react’] } }, { test: /.css$/, loader:
“style-loader!css-loader?modules!postcss-loader” }, ] }, postcss: [
values ] };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var values = require(‘postcss-modules-values’);
 
module.exports = {
  entry: __dirname + ‘/index.js’,
  output: {
    publicPath: ‘/’,
    filename: ‘./bundle.js’
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: ‘babel’,
        query: {
          presets: [‘es2015’, ‘stage-0’, ‘react’]
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules!postcss-loader"
      },
    ]
  },
  postcss: [
    values
  ]
};

接着,在colors.css里头定义变量。

JavaScript

@value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200;

1
2
3
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

App.css可以引用那个变量。

JavaScript

@value colors: “./colors.css”; @value blue, red, green from colors;
.title { color: red; background-color: blue; }

1
2
3
4
5
6
7
@value colors: "./colors.css";
@value blue, red, green from colors;
 
.title {
  color: red;
  background-color: blue;
}

运作这些示例。

JavaScript

$ npm run demo06

1
$ npm run demo06

打开

1 赞 3 收藏
评论

亚洲必赢官网 15

 

一个完好无损的轩然大波= <在某个功用域 事件声明=’函数动作’> </>

效率域: 成效的标签

事件声明:一个用户操作 例如: 鼠标的进出onmouseover, onmouseout,

函数动作: 一个封装好可以清楚为相比复杂的动作.

事件声明也是以此功用域的某部属性, 函数就是那本性格作出的一各个动作

 

亚洲必赢官网 16

 

  • 函数的规范职位与包装

格式:

<script>

function+名称+()

{动作1+动作2+动作3+……}

</script>

 

义务: <script>: Js 代码标签, 函数一般位于head里面.

封装:

函数: fuction+名称+()

  1. 在标签中放置未封装的代码会造成阅读者视觉混乱,
    把整段整段的代码封装成函数, 再在标签中调用函数. 文挡会变得整洁.
  2. 当三个标签重复调用时同一个函数时,不用再行把整段代码再敲一遍,
    只要调用函数的名字就可以了.

变量:var + 名字+()    

变量就是把一部分结构复杂的靶子赋值到一个简练的名号,
当调用的时候就会缩减代码量.

 

<script>

function toGreen()

{

    var oDiv=document.getElementById(‘div1’); 动作1:div1赋值2给oDiv

    

    oDiv.style.width=’300px’; 动作2/3改变div1的宽度

    oDiv.style.height=’300px’; …….高度

    oDiv.style.background=’green’; 动作4, 背景变成绿色

}

</script>

注, 假设在script内有暂不运行的话语可以//注释掉

函数动作分层结构详解及Document.getElementById
释义: (重点)

目的属性分为许多层, 用’.’ 隔开每一层.后边的是前方的子属性(属性),
可以了然为华语的’的’

实质上各种函数动作都以被剪切开来的,
所以你们看到的是一节一节的,实际上举例子

oDiv.style.width=’300px’; 那些动作, 是属于:

Document.getElementById(‘div1’).style.width = ‘300px’ 而这一整段又属于:

Window.Document.getElementById(‘div1’).style.width = ‘300px’

这一整条就是一条完整的事件动作,

window是上层对象

document是二层对象

<节点+属性>节点<节点+属性>节点<节点+属性>节点<节点+属性>节点

getElementById是三层对象(方法)

style四层对象 (二层属性)

height 五层对象 (三层属性)

 

window 省略是因为,大家在html内操作, 默许是属于document

而因为我们定义了oDiv, 所以在结尾的表述上改为了oDiv.style.width=’300px’;的方式.

亚洲必赢官网 17

有关Document是一个JS操作文档层面的办法(动作的点子),
<html>文档的基本节点都要受它决定, 那一个节点包括文件节点,
标签(属性)节点 . 所有尖括号外的范围都改成文本节点,
尖括号内部的脚属性节点.
如果大家不说是怎么节点一般暗中同意指的是尖括号内部的.

DOM(Document对象):

亚洲必赢官网 18

(方法就是大家地方描述的动作)

 

  • 自定义标签
    与Javascript函数动作
<div
                                    id="div1" onmouseover="toGreen()" onmouseout="toRed()">

 

既是大家可以定义出toGreen这几个复合的动作,
那就足以将那些函数动作嵌入到标签的性质当中

亚洲必赢官网 19

<div id class type display…… >
</div>

当’=’ 等号还没现身的时候,
那么些id等那个属性都以隐藏的, 或许予以专断认同的值.

一经’=’出现, 这么些事件性质就会被赋值,
也等于发生变化. 最后那个赋值会指向一个数据.

 

而差其余风浪性质或然会被予以不一样的值,
浅层属性id 只怕会针对一个字符串.    有些会针对一个javascrip大概css style
而结尾指向的叫数据(数据类型).

 

  • CSS 与
    JavaScript 的数据类型不相同

 

css的数额类型
(而那些所有的花色都以字符串,可能说是text类型,
他们是经过包装的)

文本(Textual)

  • 关键词(Keywords): <ident>

  • 自定义关键词:<custom-ident>

  • 引用字符串: <string>

  • 资源定位器:<url>

    着力数字(Basic
    Numeric)

  • 整数(Integers):<integer>

  • 实数:<number>

  • 比率:<ratio>

  • 百分比:<percentage>

    维度(Dimensions)

  • 距离(Distances):<length>

  • 角度:<angle>

  • 延迟时间(Duration):<duration>

  • 频率(Frequency):<frequency>

  • 分辨率(Resolution):<resolution>

    其它(Other)

  • 颜色:<color>

  • 图片:<image>

  • 位置:<position>

     

    而javascrip多样五种的, 例如字符串、数字、布尔、数组、对象、Null、Undefined
    那个是纯粹的数据类型, 没有经过封装.

     

    说到此地, 闲谈一下,
    javascript的难度和css比较, 没包装过的一定要难一个数量级. css
    2天就入门了, js可能要10天…

     

     

    <html>

    <head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

    #div1 {

        width:200px;

        height:200px;

        background:red;

    }

    </style>

    <script>

    function toGreen()

    {

        var oDiv=document.getElementById(‘div1’);

        

        oDiv.style.width=’300px’;

        oDiv.style.height=’300px’;

        oDiv.style.background=’green’;

    }

     

    function toRed()

    {

        var oDiv=document.getElementById(‘div1’);

        

        oDiv.style.width=’200px’;

        oDiv.style.height=’200px’;

        oDiv.style.background=’red’;

    }

    </script>

    </head>

     

    <body>

    <div

    
                                                id="div1" onmouseover="toGreen()" onmouseout="toRed()">

    </div>

    </body>

    </html>

网站地图xml地图