金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > Web重构之道,深入理解

Web重构之道,深入理解

发布时间:2019-11-05 08:30编辑:web前端浏览(132)

    深入理解 requestAnimationFrame

    2017/06/26 · HTML5 · requestAnimationFrame

    原文出处: 一像素   

    在Web应用中,实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现。除此之外,html5 还提供一个专门用于请求动画的API,那就是 requestAnimationFrame,顾名思义就是请求动画帧。 为了深入理解 requestAnimationFrame 背后的原理,我们首先需要了解一下与之相关的几个概念:

    CSS Modules 详解及 React 中实践

    2016/01/18 · CSS · CSS Modules, React

    原文出处: pure render - camsong   

    图片 1

    CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展,CSS 被远远甩在了后面,逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。

    CSS 模块化的解决方案有很多,但主要有两类。一类是彻底抛弃 CSS,使用 JS 或 JSON 来写样式。Radium,jsxstyle,react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力;缺点是不能利用成熟的 CSS 预处理器(或后处理器) Sass/Less/PostCSS,:hover:active 伪类处理起来复杂。另一类是依旧使用 CSS,但使用 JS 来管理样式依赖,代表是 CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力,API 简洁到几乎零学习成本。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React,只要你使用 Webpack,可以在 Vue/Angular/jQuery 中使用。是我认为目前最好的 CSS 模块化解决方案。近期在项目中大量使用,下面具体分享下实践中的细节和想法。

     

    Web重构之道

    2015/10/25 · 基础技术 · 重构

    原文出处: 大漠   

    1、屏幕刷新频率

    即图像在屏幕上更新的速度,也即屏幕上的图像每秒钟出现的次数,它的单位是赫兹(Hz)。 对于一般笔记本电脑,这个频率大概是60Hz, 可以在桌面上右键->屏幕分辨率->高级设置->监视器 中查看和设置。这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响,原则上设置成让眼睛看着舒适的值都行。

    市面上常见的显示器有两种,即CRTLCD, CRT就是传统显示器,LCD就是我们常说的液晶显示器。

    CRT是一种使用阴极射线管的显示器,屏幕上的图形图像是由一个个因电子束击打而发光的荧光点组成,由于显像管内荧光粉受到电子束击打后发光的时间很短,所以电子束必须不断击打荧光粉使其持续发光。电子束每秒击打荧光粉的次数就是屏幕刷新频率。

    而对于LCD来说,则不存在刷新频率的问题,它根本就不需要刷新。因为LCD中每个像素都在持续不断地发光,直到不发光的电压改变并被送到控制器中,所以LCD不会有电子束击打荧光粉而引起的闪烁现象。

    因此,当你对着电脑屏幕什么也不做的情况下,显示器也会以每秒60次的频率正在不断的更新屏幕上的图像。为什么你感觉不到这个变化? 那是因为人的眼睛有视觉停留效应,即前一副画面留在大脑的印象还没消失,紧接着后一副画面就跟上来了,这中间只间隔了16.7ms(1000/60≈16.7), 所以会让你误以为屏幕上的图像是静止不动的。而屏幕给你的这种感觉是对的,试想一下,如果刷新频率变成1次/秒,屏幕上的图像就会出现严重的闪烁,这样就很容易引起眼睛疲劳、酸痛和头晕目眩等症状。

    CSS 模块化遇到了哪些问题?

    CSS 模块化重要的是要解决好两个问题:CSS 样式的导入和导出。灵活按需导入以便复用代码;导出时要能够隐藏内部作用域,以免造成全局污染。Sass/Less/PostCSS 等前仆后继试图解决 CSS 编程能力弱的问题,结果它们做的也确实优秀,但这并没有解决模块化最重要的问题。Facebook 工程师 Vjeux 首先抛出了 React 开发中遇到的一系列 CSS 相关问题。加上我个人的看法,总结如下:

    1. 全局污染

    CSS 使用全局选择器机制来设置样式,优点是方便重写样式。缺点是所有的样式都是全局生效,样式可能被错误覆盖,因此产生了非常丑陋的 !important,甚至 inline !important 和复杂的[选择器权重计数表](Selectors Level 3),提高犯错概率和使用成本。Web Components 标准中的 Shadow DOM 能彻底解决这个问题,但它的做法有点极端,样式彻底局部化,造成外部无法重写样式,损失了灵活性。

    1. 命名混乱

     

    由于全局污染的问题,多人协同开发时为了避免样式冲突,选择器越来越复杂,容易形成不同的命名风格,很难统一。样式变多后,命名将更加混乱。

    1. 依赖管理不彻底

    组件应该相互独立,引入一个组件时,应该只引入它所需要的 CSS 样式。但现在的做法是除了要引入 JS,还要再引入它的 CSS,而且 Saas/Less 很难实现对每个组件都编译出单独的 CSS,引入所有模块的 CSS 又造成浪费。JS 的模块化已经非常成熟,如果能让 JS 来管理 CSS 依赖是很好的解决办法。Webpack 的 css-loader 提供了这种能力。

    1. 无法共享变量

    复杂组件要使用 JS 和 CSS 来共同处理样式,就会造成有些变量在 JS 和 CSS 中冗余,Sass/PostCSS/CSS 等都不提供跨 JS 和 CSS 共享变量这种能力。

    1. 代码压缩不彻底

    由于移动端网络的不确定性,现在对 CSS 压缩已经到了变态的程度。很多压缩工具为了节省一个字节会把 ’16px’ 转成 ‘1pc’。但对非常长的 class 名却无能为力,力没有用到刀刃上。

    上面的问题如果只凭 CSS 自身是无法解决的,如果是通过 JS 来管理 CSS 就很好解决,因此 Vjuex 给出的解决方案是完全的 CSS in JS,但这相当于完全抛弃 CSS,在 JS 中以 Object 语法来写 CSS,估计刚看到的小伙伴都受惊了。直到出现了 CSS Modules。

     

    前言

    Web重构之道是今年十月份参加上海Qcon全球软件开发大会的新时代的前端专题的一次分享的主题。这次有幸能跟@达峰、@sofish、@桂川等大神一起同台分享,感到非常的荣幸,也感到无比的压力。还好分享已结束,借此机会重新回忆这次大会上自己分享的主题。在此之前我首先要感谢@贺佬给我上台分享的机会,感谢@winter大大的推荐、建议与鼓励。最后感谢Qcon提供这样的分享平台。

    2、动画原理

    根据上面的原理我们知道,你眼前所看到图像正在以每秒60次的频率刷新,由于刷新频率很高,因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果,这个变化要以连贯的、平滑的方式进行过渡。 那怎么样才能做到这种效果呢?

    刷新频率为60Hz的屏幕每16.7ms刷新一次,我们在屏幕每次刷新前,将图像的位置向左移动一个像素,即1px。这样一来,屏幕每次刷出来的图像位置都比前一个要差1px,因此你会看到图像在移动;由于我们人眼的视觉停留效应,当前位置的图像停留在大脑的印象还没消失,紧接着图像又被移到了下一个位置,因此你才会看到图像在流畅的移动,这就是视觉效果上形成的动画。

    CSS Modules 模块化方案

    图片 2

    CSS Modules 内部通过 [ICSS](css-modules/icss · GitHub) 来解决样式导入和导出这两个问题。分别对应 :import:export 两个新增的伪类。

    JavaScript

    :import("path/to/dep.css") { localAlias: keyFromDep; /* ... */ } :export { exportedKey: exportedValue; /* ... */ }

    1
    2
    3
    4
    5
    6
    7
    8
    :import("path/to/dep.css") {
      localAlias: keyFromDep;
      /* ... */
    }
    :export {
      exportedKey: exportedValue;
      /* ... */
    }

     

    但直接使用这两个关键字编程太麻烦,实际项目中很少会直接使用它们,我们需要的是用 JS 来管理 CSS 的能力。结合 Webpack 的 css-loader 后,就可以在 CSS 中定义样式,在 JS 中导入。
    启用 CSS Modules

    JavaScript

    // webpack.config.js css?modules&localIdentName=[name]__[local]-[hash:base64:5]

    1
    2
    // webpack.config.js
    css?modules&localIdentName=[name]__[local]-[hash:base64:5]

    加上 modules 即为启用,localIdentName 是设置生成样式的命名规则。

    JavaScript

    /* components/Button.css */ .normal { /* normal 相关的所有样式 */ } .disabled { /* disabled 相关的所有样式 */ }

    1
    2
    3
    /* components/Button.css */
    .normal { /* normal 相关的所有样式 */ }
    .disabled { /* disabled 相关的所有样式 */ }

    JavaScript

    // components/Button.js import styles from './Button.css'; console.log(styles); buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    1
    2
    3
    4
    // components/Button.js
    import styles from './Button.css';
    console.log(styles);
    buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    生成的 HTML 是

    <button class="button--normal-abc53">Submit</button>

    1
    <button class="button--normal-abc53">Submit</button>

     

    注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName 自动生成的 class 名。其中的 abc53 是按照给定算法生成的序列码。经过这样混淆处理后,class 名基本就是唯一的,大大降低了项目中样式覆盖的几率。同时在生产环境下修改规则,生成更短的 class 名,可以提高 CSS 的压缩率。

    上例中 console 打印的结果是:

    JavaScript

    Object { normal: 'button--normal-abc53', disabled: 'button--disabled-def886', }

    1
    2
    3
    4
    Object {
      normal: 'button--normal-abc53',
      disabled: 'button--disabled-def886',
    }

    CSS Modules 对 CSS 中的 class 名都做了处理,使用对象来保存原 class 和混淆后 class 的对应关系。

    通过这些简单的处理,CSS Modules 实现了以下几点:

    • 所有样式都是 local 的,解决了命名冲突和全局污染问题
    • class 名生成规则配置灵活,可以此来压缩 class 名
    • 只需引用组件的 JS 就能搞定组件所有的 JS 和 CSS
    • 依然是 CSS,几乎 0 学习成本

    样式默认局部

    使用了 CSS Modules 后,就相当于给每个 class 名外加加了一个 :local,以此来实现样式的局部化,如果你想切换到全局模式,使用对应的 :global

    :local:global 的区别是 CSS Modules 只会对 :local 块的 class 样式做 localIdentName 规则处理,:global 的样式编译后不变。

    JavaScript

    .normal { color: green; } /* 以上与下面等价 */ :local(.normal) { color: green; } /* 定义全局样式 */ :global(.btn) { color: red; } /* 定义多个全局样式 */ :global { .link { color: green; } .box { color: yellow; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .normal {
      color: green;
    }
     
    /* 以上与下面等价 */
    :local(.normal) {
      color: green;
    }
     
    /* 定义全局样式 */
    :global(.btn) {
      color: red;
    }
     
    /* 定义多个全局样式 */
    :global {
      .link {
        color: green;
      }
      .box {
        color: yellow;
      }
    }

    Compose 来组合样式

    对于样式复用,CSS Modules 只提供了唯一的方式来处理:composes 组合

    JavaScript

    /* components/Button.css */ .base { /* 所有通用的样式 */ } .normal { composes: base; /* normal 其它样式 */ } .disabled { composes: base; /* disabled 其它样式 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* components/Button.css */
    .base { /* 所有通用的样式 */ }
     
    .normal {
      composes: base;
      /* normal 其它样式 */
    }
     
    .disabled {
      composes: base;
      /* disabled 其它样式 */
    }

    JavaScript

    import styles from './Button.css'; buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    1
    2
    3
    import styles from './Button.css';
     
    buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    生成的 HTML 变为

    <button class="button--base-fec26 button--normal-abc53">Submit</button>

    1
    <button class="button--base-fec26 button--normal-abc53">Submit</button>

    由于在 .normal 中 composes 了 .base,编译后会 normal 会变成两个 class。

    composes 还可以组合外部文件中的样式。

    JavaScript

    /* settings.css */ .primary-color { color: #f40; } /* components/Button.css */ .base { /* 所有通用的样式 */ } .primary { composes: base; composes: primary-color from './settings.css'; /* primary 其它样式 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* settings.css */
    .primary-color {
      color: #f40;
    }
     
    /* components/Button.css */
    .base { /* 所有通用的样式 */ }
     
    .primary {
      composes: base;
      composes: primary-color from './settings.css';
      /* primary 其它样式 */
    }

     

    对于大多数项目,有了 composes 后已经不再需要 Sass/Less/PostCSS。但如果你想用的话,由于 composes 不是标准的 CSS 语法,编译时会报错。就只能使用预处理器自己的语法来做样式复用了。
    class 命名技巧

    CSS Modules 的命名规范是从 BEM 扩展而来。BEM 把样式名分为 3 个级别,分别是:

    • Block:对应模块名,如 Dialog
    • Element:对应模块中的节点名 Confirm Button
    • Modifier:对应节点相关的状态,如 disabled、highlight

    综上,BEM 最终得到的 class 名为 dialog__confirm-button--highlight。使用双符号 __-- 是为了和区块内单词间的分隔符区分开来。虽然看起来有点奇怪,但 BEM 被非常多的大型项目和团队采用。我们实践下来也很认可这种命名方法。

    CSS Modules 中 CSS 文件名恰好对应 Block 名,只需要再考虑 Element 和 Modifier。BEM 对应到 CSS Modules 的做法是:

    JavaScript

    /* .dialog.css */ .ConfirmButton--disabled { /* ... */ }

    1
    2
    3
    4
    /* .dialog.css */
    .ConfirmButton--disabled {
      /* ... */
    }

    你也可以不遵循完整的命名规范,使用 camelCase 的写法把 Block 和 Modifier 放到一起:

    JavaScript

    /* .dialog.css */ .disabledConfirmButton { }

    1
    2
    3
    /* .dialog.css */
    .disabledConfirmButton {
    }

    如何实现CSS,JS变量共享

    注:CSS Modules 中没有变量的概念,这里的 CSS 变量指的是 Sass 中的变量。

    上面提到的 :export 关键字可以把 CSS 中的 变量输出到 JS 中。下面演示如何在 JS 中读取 Sass 变量:

    JavaScript

    /* config.scss */ $primary-color: #f40; :export { primaryColor: $primary-color; }

    1
    2
    3
    4
    5
    6
    /* config.scss */
    $primary-color: #f40;
     
    :export {
      primaryColor: $primary-color;
    }

     

    JavaScript

    /* app.js */ import style from 'config.scss'; // 会输出 #F40 console.log(style.primaryColor);

    1
    2
    3
    4
    5
    /* app.js */
    import style from 'config.scss';
     
    // 会输出 #F40
    console.log(style.primaryColor);

    分享感觉

    虽然技不如人,而且懂得知识也少,干货不多,但我是一位爱于分享的人。也是第一次到QCon这种高大上的会议上分享,加上@sofish、@达峰、@桂川、@王沛和@佳辰几位嘉宾分享的主题都是一些高大上的话题,让我感觉压力很大。加上自己国语不标准(被@点头猪称为鞋城国语“最好”一位),生怕把@贺佬的场子给砸了。不过好在一点,以前也经历了一些“场子”,学会一些自黑,不会怯场,最主要的还是自己的脸皮厚如城墙(毕竟是人老了,皮糙肉厚)。

    本文由金沙国际官网发布于web前端,转载请注明出处:Web重构之道,深入理解

    关键词:

上一篇:没有了

下一篇:没有了