您的位置:新葡亰496net > 新葡亰官网 > 基于组件的样式的未来,JS函数动作分层结构详解

基于组件的样式的未来,JS函数动作分层结构详解

发布时间:2019-09-23 02:30编辑:新葡亰官网浏览(185)

    CSS in JS 简介

    2017/04/05 · CSS · CSS

    原稿出处: 阮一峰   

    1、

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

    新葡亰496net 1

    它的意味是,各样技术只担任自身的小圈子,不要混合在一同,产生耦合。对于网页开荒以来,重假诺三种技巧分离。

    新葡亰496net 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 的走红和零部件格局路人皆知,这种”关怀点混合”的新写法渐渐成为主流。

    新葡亰496net 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种。老实说,今后也看不出来,哪二个库会产生主流。

    新葡亰496net 4

    你只怕会问,它们与”CSS 预管理器”(举例 Less 和 Sass,包蕴PostCSS)有怎么着分别?回答是 CSS in JS 使用 JavaScript 的语法,是 JavaScript 脚本的一有的,不用从头学习一套专项使用的 API,也不会多一道编写翻译步骤。

    5、

    下十三日,笔者看来叁个新的 CSS in JS 库,叫做 polished.js。它将部分常用的 CSS 属性封装成函数,用起来非常便宜,充足突显使用 JavaScript 语言写 CSS 的优势。

    新葡亰496net 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的用法。

    新葡亰496net,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提供的另外艺术如下,详细用法请仿照效法文档。

    • 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 收藏 评论

    新葡亰496net 6

    JavaScript 中的 CSS:基于组件的体裁的前景

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

    本文由 伯乐在线 - dimple11 翻译,刘唱 校稿。未经许可,禁止转发!
    斯洛伐克共和国(The Slovak Republic)语出处:Jonathan Z. White。款待出席翻译组。

     

    新葡亰496net 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,值造成了字符串。伪类选择器、媒体询问和字体定义都以可完毕的,别的,会自行抬高浏览器引擎前缀。

    以下是结果:

    新葡亰496net 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),垂直规律能协助实现要素之间的间隔统一。

    要打听越多的垂直规律,你能够翻阅那篇小说:怎么垂直规律是一种入眼的排版习于旧贯?

    新葡亰496net 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: `基于组件的样式的未来,JS函数动作分层结构详解及Document。${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,那是因为在贰个趋势上定义全部的垂直外边距,能够幸免外边距碰撞,何况帮您立时跟进通晓规划的垂直规律。你能够在哈利罗Bert的稿子《单向外省距注明》中看到更加多那上边包车型大巴原委。

    谈起底一点,你也足以将定义的距离常量用作内边距。

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

    因此对内外边距使用同样的距离常量,你便得以使自个儿的设计更有着视觉上的一致性。

    那是结果或者现身的标准:

    新葡亰496net 10

     

     

     

     

     

     

     

    既然您对 Javascript 中的 CSS 有料定调控,那就去试试,尝试将内联式 Javascript 样式放入你的下叁个门类。假如能够在单纯的条件下管理全数的样式和视图,小编想你会对此格外感谢。

    针对 CSS 和 Javascript,有怎样让您以为振憾的新进展吗?作者个人因为 async/await 而感到快乐不已,你能够留言或在 Twitter 上给本身发 tweet。

    您能够透过 Medium 找到自个儿,作者周周都会发文章,或许关怀我的 Facebook,笔者总在上头对布置、前端开垦以及虚构现实东拉西扯。

    附记:假诺你喜欢那篇小说,那么点击

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:基于组件的样式的未来,JS函数动作分层结构详解

    关键词: