x
x
100.24.46.*

最新文章 Latest Blogs

2019-01-14 YHSPY 共  1185 个不明生物围观

《重新定义团队:谷歌如何工作》读书笔记(5/20)。最近花了一些时间来读《重新定义团队:谷歌如何工作》这本书,在这里记录一下书中提出的关键点。怎样才能发挥团队的最大效能,同时让团队中的成员保持高涨的激情,这些都是在团队管理中会经常遇到的问题。

2019-01-08 YHSPY 共  24 个不明生物围观

《阿米巴经营》读书笔记(4/20)。这里记录了一些在读书过程中提炼出我觉得有价值的观点,仅供参考。

2019-01-07 YHSPY 共  55 个不明生物围观

《零售的哲学》读书笔记(3/20)。这里记录了一些在读书过程中提炼出我觉得有价值的观点,仅供参考。读下来铃木先生以其自身的经历为线索介绍了7-11这40年来发展的重点历程。整个创业经验总结出一句话就是“以人为本,学会改变”。相信这样的态度可以让冰冷的“商业”与消费者走的更近,从而获得用户的信任和支持。但这样的创业信条是否适用于处在发展中国家的我们呢?这还是个疑问,持保留态度。

2019-01-05 YHSPY 共  47 个不明生物围观

《增长黑客:创业公司的用户与收入增长秘籍》读书笔记(2/20)。这里记录了一些在读书过程中提炼出我觉得有价值的观点,仅供参考。与其说本书是介绍“增长黑客”不如说是以“增长黑客”为视角来介绍针对创业中几个关键节点(AARRR)的案例和分析。前半部分干货还是有一些的,后半部分稍显不足。书中的案例主观分析只能用做参考,有一些营销技巧和产品准则倒是值得学习和借鉴。

2018-11-29 YHSPY 共  95 个不明生物围观

Git是一款免费、开源的分布式版本控制系统,相比于之前的CVS、SVN等版本控制系统,Git的优势大大凸显。Git是分布式的版本控制系统,相比之前的集中式系统,分布式版本控制系统的安全性要高很多。因为每个人电脑里都有完整的版本库,使得整个版本库不会轻易的丢失。

2018-08-29 YHSPY 共  275 个不明生物围观

鉴于网站的博客发布系统过于老旧,现将内容提交系统重构并增加支持对 Markdown 格式的内容转换。该文章为测试内容,用于测试网站对 MD 转换文本的支持效果。两套渲染模式将兼容存在,网站并无计划进行技术上的整体重构。

2018-01-08 YHSPY 共  1450 个不明生物围观

今天听了银奎老师分享的最近火热技术圈的 Meltdown 漏洞的基本原理,才知道原来底层系统的世界是如此的丰富多彩。Meltdown 漏洞的 POC 实现基于了一种名为 “Flush & Reload” 的黑客攻击技术,这项技术的基本原理是利用 Memory 和 Cache 之间的关系,同时利用统计学的置信程度来筛选关键信息的。

2017-12-24 YHSPY 共  943 个不明生物围观

最近在读《重新定义团队:谷歌如何工作》,学习谷歌在技术团队管理上的一些思考和方式。同时上周也刚刚从杭州 D2 前端技术论坛回来。在会上,来在360和阿里的技术主管也分享了各自在团队管理上的多年经验,特此整理一下会上和自己对技术团队管理的一些思考。

2017-12-17 YHSPY 共  881 个不明生物围观

一般来说,一项新技术是否会随着时代的推进而被快速地迭代和发展,要看这项技术所应用在的实际业务场景中是否有相应的技术需求,毕竟没有任何技术是会被凭空创造出来的。技术决定了业务需求的多样性,而业务需求的多样性又推动着技术不断向前发展,两者相辅相成最终才能推动行业整体的发展和进步。

2017-11-12 YHSPY 共  773 个不明生物围观

如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS)。12-Factor 为构建如下的 SaaS 应用提供了方法论。这套理论适用于任意语言和后端服务(数据库、消息队列、缓存等)开发的应用程序。

    文章日期索引 Date Index

    文章类别索引 Type Index

    文章主体 Detail

    前端常见技术点 - CSS / DOM / 布局

    这里总结一下 WEB 前端面试 CSS 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的,资深工程师则要对这些基本概念的纵向深度进行挖掘,问题解答全部原创,转载请注明来源

    CSS技术部分:

    1、介绍一下标准的 CSS 的盒子模型?与低版本IE的盒子模型有什么不同的?

    IE 盒子模型的范围同标准 CSS 盒子模型一样,包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding。分别对应于 box-sizing 属性的 content-box 和 border-box 两个值。

    2、如果需要手动写动画,你认为最小时间间隔是多久,为什么?

    多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为 1/60*1000ms = 16.7ms ;

    3、在网页中的应该使用奇数还是偶数的字体?为什么?

    偶数字号相对更容易和 Web 设计的其他部分构成比例关系,也是为了兼容 Windows Vista 上的点阵宋体字体(只提供了偶数字体点阵)。其他方面笔者感觉,并没有区别。

    4、设置元素浮动后,该元素的 display 值是多少?

    自动变成 display:block。

    5、让页面里的字体变清晰,变细用 CSS 怎么做?

    -webkit-font-smoothing: antialiased;(抗锯齿)

    6、用纯 CSS 创建一个三角形的原理是什么?

    
    border-top:solid 100px red;
    border-left:solid 100px green;
    border-right:solid 100px orange;
    border-bottom:solid 100px blue;
    width: 0;
    height: 0;
    

    7、如何修改 Chrome 记住密码后自动填充表单的黄色背景?

    浏览器自动添加了 input:-webkit-autofill 私有属性。

    8、浏览器是怎样解析 CSS 选择器的?

    CSS 选择器是从右往左解析的,这样效率较高,从子元素向上寻找父元素的情况在大多数正常情况下都比正向从父元素查找子元素要快得多,从左到右的查找在大多数规则读到最后(最右)才会发现是不匹配的,这样会做费时耗能,最后有很多都是无用的。

    浏览器渲染过程:HTML->HTML 解析器->DOM 树;样式->样式解析器->样式规则;DOM 树和样式规则进行结合形成渲染树。

    9、CSS 继承

    CSS 样式继承性是指下级的样式属性会继承上级的属性,比如 li 会继承 ul 的属性。

    10、如何居中 div?如何居中一个浮动元素?如何让绝对定位的 div 居中?

    对于定宽的非浮动元素我们可以在 CSS 中用 margin:0 auto 进行水平居中;对于浮动元素可以父子元素同时向一个方向浮动,父元素设置 left:50%;

    11、position 的值 relative 和 absolute 定位原点是?

    相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

    12、::before 和 :after 中双冒号和单冒号有什么区别?

    两个冒号和一个冒号的作用其实一致的,只是在 CSS3 中为了区分伪类选择器伪元素选择器,在语义上更清晰明了;

    伪类选择器::hover :link :active :target :not(s) :focus (伪类的效果可以通过添加一个实际的类来达到)

    伪元素选择器:::first-letter ::first-line ::before ::after ::selection (伪元素的效果是需要通过添加一个实际的元素才能达到的)

    13、transform 属性的几种常用方法

    rotate 旋转 translate 平移 skew 倾斜 scale 缩放 (以及各个方法的3d版本)

    transform-origin 属性设置动作原点

    perspective-origin 属性设置透视方位

    perspective 设置透视角度

    14、png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 WebP?

    PNG 可以存储 Alpha 通道,失真小,没锯齿,无损压缩,一种是Index(体积较小),一种是RGB,体积较大;GIF 可以存储动画;JPEG 图片色彩更加丰富,但是有损压缩,不适合多次读取储存;

    WebP 是一种谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3;

    15、style 标签写在 body 后与 body 前有什么区别?

    CSS 样式的加载顺序从上到下,同时应该符合样式的放置规范,外部、内部、内嵌。放在 body 里不符合规范也不利于代码维护。

    16、font-style 属性的 oblique 和 italic 有什么区别?

    italic 是斜体,是一种不同的字体,而 oblique 是一种仿斜体,是浏览器通过将普通字体通过变形而成的“斜体”,italic 选择字体族的 italic 变体,如果没有 italic 变体就妥协到 oblique 变体。如果字体族连 oblique 也未提供,则由浏览器合成倾斜的仿 oblique 字体。italic 和 oblique 在字体形态上有所不同。

    17、常见的移动端开发问题

    应该有很多,这里只列出笔者遇到过的一部分:

    若父容器设置了 transform 属性,则其内部子元素的 position:fixed; 属性会失效;

    18、对 line-height 的理解

    行高指的是文本行的基线间的距离,line-height 若使用百分比则实际像素值为所有继承的元素的 font-size 乘以这个百分比,是先计算然后转换为像素值;若使用直接像素值,则所有继承元素使用相同的 line-height 值;相对来说,用纯数字指定 line-height 比较好,可以动态改变行距;段落中的行间距最好是本身 font-size 的1.5倍最好,浏览器默认行间距为1.14左右

    containing-boxes:它包含了其他的 boxes,比如 p 本身就是一种;

    inline-boxes:让显示的内容排成一行,比如 span 元素;没有标签包裹的文字为匿名 inline-boxes;

    line-boxes:inline-boxes 在 containing-boxes 连接成了 line-boxed;

    content-area:是围绕着文字的一种看不见的 boxes,高取决于 font-size;

    * line-height 超出 font-size 部分的一半称为“半行间距”,它被平均的放到 content-area 的顶部和底部;

    20、CSS 里的 visibility 属性的 collapse 属性值有什么作用?在不同浏览器下有什么区别?

    该属性兼容性各个浏览器并不统一,对于一般的元素,它的表现跟 hidden 是一样的。但例外的是,如果这个元素是 table 相关的元素,它的表现却跟display: none一样。

    21、* position:absolute 的 containing block 计算方式与正常流有什么不同?

     

    22、视差滚动的原理

    视差滚动是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

    实现原理:主要利用了 background-attachment: fixed; 属性,随着页面的滚动轴背景图片不会移动。

    23、有一个高度自适应的 div,里面有两个 div,一个高度 100px,如何让另一个填满剩下的高度?

    使用 absolute 布局,通过设置left:0;right:0;top:100px;bottom:0;来自动拉伸子容器,同时父容器设置布局。

    24、display:inline-block 什么时候会显示间隙?

    浏览器的默认行为是把 inline 元素间的空白字符(空格、换行、Tab)渲染成一个空格,这个问题不止出现在 li 元素上;

    解决方案:

    1、所以把所有 li 放到同一行;

    2、将这些被渲染成空格的字符 font-size 设置为 0;

    3、设置 letter-spacing 为适当大小;

    25、Z-Index 栈

    Z-Index 只在设置了 position 属性(非 static)的元素上生效;父元素的 Z-Index 比子元素先生效;

    26、float、relative、absolute、fixed 基础重点

    relative:参照物为元素本身,即默认情况下在文档流中的位置;

    float:元素默认宽度为内容宽度;半脱离文档流(元素脱离文档流,内容不脱离文档流,即一种文字环绕图片的效果);

    absolute:元素默认宽度为内容宽度;脱离文档流;参照物为第一个定位祖先(设置了 position 并且值不是 static 的元素)/根元素;如果设置了 absolute 的元素没有设置宽高,则 LRTB 四个属性可以将该元素自适应抻开;

    fixed:元素默认宽度为内容宽度;脱离文档流;参照物为视窗;

    * float 会导致原有的 inline-boxes 消失,

    27、overflow:scroll 时不能平滑滚动(失去滚动惯性)的问题怎么处理?

    添加 -webkit-overflow-scrolling: touch; 属性,该属性创建了带有硬件加速的系统级控件,但比较耗费内存;也可以采用 iScroll 插件解决这个问题。

    28、常见的浏览器兼容性问题有哪些?

    HTML5 的兼容性问题等(笔者公司不考虑IE10以下的浏览器)。

    29、元素竖向的百分比设定是相对于容器的高度吗?

    当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-to、padding-bottom、margin-top、margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。

    30、两个 CSS 模型

    一个是 box 盒状模型,对应 CSS 为 “(height/width)+ padding + margin”,另外一个是 line box 模型,对应样式为“line-height”;

    31、弹性布局

    弹性父容器:display:flex;

    弹性元素:父容器的直接子元素,并且没有脱离文档流(非 absolute 属性)。

    指定弹性容器内元素排列方向:flex-direction:row | row-reverse | column | column-reverse

    指定弹性容器内元素换行方式:flex-wrap:no-wrap | wrap | wrap-reverse

    指定弹性容器内元素排队和换行方式:flex-flow:<flex-direction> <flex-wrap> 

    指定弹性元素的排列权重(重的在后边):order:<数字>

     

    设置元素空余空间分配权重:flex-grow:<数字>

    设置元素超出分配空间权重:flex-shrink:<数字>

    设置元素在主轴方向的基础长度:flex-basis:<数字>

    设置元素在主轴方向的弹性:flex:<flex-grow> <flex-shrink> <flex-basis>

     

    指定弹性容器内元素的间隔方式:justify-content:flex-start | flex-end | center | space-between | space-arount

    指定弹性容器内元素辅轴对齐方式:align-items:flex-start | flex-end | center | stretch | baseline

    设置元素在主轴方向的对齐方式:align-self:flex-start | flex-end | center | stretch | baseline

    指定弹性容器内元素的辅轴上行的对齐方式:align-content:flex-start | flex-end | center | space-between | space-arount | stretch

    32、font-family:serif sans-serif

    衬线体 serif:意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。

    非衬线体 sans-serif:没有这些额外的装饰,而且笔画的粗细差不多。

    33、DOMContentLoaded 和 load 的区别

    DOM文档加载的步骤为:

    1、解析HTML结构;2、加载外部脚本和样式表文件;3、解析并执行脚本代码;4、DOM 树构建完成。// DOMContentLoaded;5、加载图片等外部文件;6、页面加载完毕。// load

    34、DOM 树上的各种操作

    35、children 和 childNodes 的区别?nextElementSibling 和 nextSibling 的区别?

    children 只会包含元素节点,不会包含文字节点,childNodes 会包含所有子节点;nextElementSibling 只包含元素兄弟节点,nextSibling 会包含文字节点。

    36、CSS DOM 概览

    window.getComputedStyle([element]); // 可以获得一个元素计算后的样式 CSSStyleDeclaration 对象

    37、DOM 属性访问器访问属性和 (g/setAttribute)访问属性的区别?

    DOM 属性访问器:通用性差、扩展性差;但取到的是一个实用对象

    g/setAttribute:取到的只是字符串,通用性;

    dataset:element.dataset;(取到该 DOM 元素上所有的自定义属性,以 data- 开头的属性);

    38、DOM 事件触发、事件绑定与事件卸载

    IE8以上:ele.addEventListener ele.removeEventListener ele.dispatchEvent(type); W3C 标准;

    IE8及以下:ele.attachEvent ele.detachEvent ele.fireEvent(type);没有捕获阶段;

    39、onerror 事件的常用场景

    在 image 标签加入 onerror="this.src='default.png'" 在设置图片出错时显示默认图片;

    40、HTML 模块化构建

    41、position 属性各个值的分层关系

    static 不能通过 z-index 分层;relative、absolute 和 fixed 可以通过 z-index 分层;首先是遵循DOM的规则,同级的后面居上。一般有定位属性的元素会高于无定位属性的同级元素。都有定位属性的同级元素,z-index 大者居上;如果是非同级的元素, 则会忽略元素本身 z-index,取与对比元素同级的祖先元素的 z-index 属性,大者居上 。

    42、如何高效的插入 HTML 到 DOM 树的指定位置

    1、使用 createDocumentFragment() 创建一个内存中的文档片段,将所有需要追加到页面的 HTML 都 appendChild 到这个文档片段,最后一次性的将该文档片段 appendChild 到 DOM 树上;由于拼接子元素的过程是在内存中进行的因此可以减少页面的回流和重绘;

    2、使用 insertAdjacentHTML(position, text) 直接向页面插入 HTML 片段,position 分为四个值:beforebegin、afterbegin、beforeend、afterend;

    43、em rem vh vw vmin vmax ex ch

    em:现对于父元素的字体大小;

    rem:相对于根元素 html 的字体大小;

    vh vw:其中的 v 表示 viewpoint(视窗),所以这两个大小单位代表相对于当前视窗的大小,1vh vw 相当于百分之1的视窗高度 宽度。

    vmin vmax:同上,其中的 v 表示 viewpoint(视窗),vmin 取 vh vw 中两者较小的作为单位,vmax 则相反。

    ch:常与等宽字体联合使用“Consolas,Monaco,monospace”。1ch 表示一个0字符的宽度,因此只有在等宽字体的情况下,我们才能用 ch 来精确的调整字符的显示。

    ex:相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。利用 ex 可以实现内联图标与段落的垂直居中。

     

    发布时间 : 2016-12-13 00:16:19 作者 : YHSPY 类别 : WEB前端 Miscellaneous
    查看评论
    点击已评论用户的用户名可以@他

    一语浏览 Detail

    语言 C/C++
    
    // 智能指针的错误用法;
    shared_ptr<int> p(new int(42));
    int *q = p.get();
    {
      shared_ptr<int> p(q);
    }
    int foo = *p // 未定义行为,动态内存已被释放;
    
    
    服务器 Linux

    修改用户所属组:

    sudo usermod -G <group> <username>

    语言 C/C++

    inline functions

    优点:

    1、通过避免函数调用开销来加速程序。

    2、当函数调用发生时,它可以节省堆栈上变量调用的开销。

    3、它节省了函数返回的开销。

    4、它利用指令缓存增加了引用的局部性。

    5、通过将其标记为内联,可以将函数定义放在头文件中。

    缺点:

    1、由于代码扩展,它增加了可执行文件的大小。

    2、C++ 内联在编译时解决。这意味着如果更改内联函数的代码,则需要使用它重新编译所有代码以确保它将更新

    3、在头文件中使用时,会使头文件体积增大,进而应用体积增大。

    4、在某些嵌入式系统中无效。因为存储器限制,编译器不希望增大可执行文件大小。

    何时使用:

    1、需要性能时使用内联函数。

    2、在宏上使用内联函数。

    3、喜欢在类外部使用带有函数定义的内联关键字来隐藏实现细节。

    关键点:

    1、是否内联完全取决于编译器的判断。

    2、内联基于编译器控制,这与宏完全不同:宏将被强制内联,将污染所有命名空间和代码,将不容易调试。

    3、默认情况下,在类中声明和定义的所有成员函数都是内联的。所以不需要明确指定。

    4、虚函数不应该是被内联的。有时候,当编译器可以确切地知道对象的类型时,甚至虚函数也会被内联,因为编译器确切地知道了对象的类型。

    5、模板方法并不总是内联的。

    语言 C/C++
    
    // 拷贝构造函数与赋值运算符重载函数;
    #include 
    
    using namespace std;
    
    struct T {
        int x;
    
        T() = default;
    
        T (int x) : x(x) {};
    
        T (const T& t) {
            this->x = t.x;
            cout << "Copy Constructors: " << this->x << endl;
        }
    
        T& operator=(T& t) {
            if (this != &t) {
                this->x = t.x;
                cout << "Overload Function: " << this->x << endl;
            }
            return *this;
        }
    };
    
    int main (int argc, char **argv) {
        T x(10), t3;
        T* t = new T(20);
    
        /*************************/
        // Copy Constructors: 10 //
        /*************************/
        T t1(x); 
        T t2 = x;
    
        /*************************/
        // Overload Function: 10 //
        /*************************/
        t3 = x; 
        
        delete(t);
        return 0;
    }
    
    
    语言 C/C++

    dynamic_cast 可以用于沿继承层级向上、向下及侧向转换到类的指针和引用。但在确保待转换指针的子类型时,可以使用 static_cast 来进行,以避免检查时的开销(可能不安全,但高效)。

    其他 Others

    JWT(JSON WEB TOKEN)

    可用作分布式系统的单点登录验证系统(SSO)。由于 Token 中的 Signature 部分是由前两个字段和一个密钥一起进行加密后得出来的,因此前端无法擅自修改 Token 中的信息,得以保证信息的获取不会被滥用。同时由于 JWT 的 “self-contained“ 特性,原始 Session 中的信息被全部放到了 Token 中,后端不需要存储任何信息,保证了服务的无状态化,提高了可扩展性。

    数据结构:

    交互模式:

    前端 Javascript

    this 实例:

    1、非 ES5 严格模式下,函数调用的默认 this 指向 window,严格模式下指向 undefined

    2、对象中函数的 this 指向调用方;

    
    var person = {  
      name: "Jason",
      say: function(thing) {
        console.log(this.name + " says hello " + thing);
      }
    }
    person.say("world"); // "Jason says hello world"
    
    var iSay = person.say;
    iSay("world"); // "undefined says hello world"
    

    3、使用 bind 来固化 this

    
    var boundSay = person.say.bind(person);  
    boundSay("world") // "Jason says hello world"
    
    前端工程化

    GitFlow 工作流:

    1、主分支只用于 Hotfix 和发布后的发布分支合并;

    2、专门的 Develop 分支用于 Feature 分支的合并;

    3、从 Develop 分支拷贝的发布分支,发布分支只有 Hotfix 合并,发布后合并回主分支和 Develop 分支;

    4、Hotfix 分支合并回主分支和 Develop 分支;

    5、每一次到主分支的合并都需要打 Tag 以便追踪记录;

    前端 HTTP

    HTTPS 通信流程:

    前端 HTTP

    浏览器常用缓存策略流程:

    代码库 Code Depot

    React 实例 - 单一数据源原则
    
    const scaleNames = {
      c: 'Celsius',
      f: 'Fahrenheit'
    };
    
    function toCelsius(fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }
    
    function toFahrenheit(celsius) {
      return (celsius * 9 / 5) + 32;
    }
    
    function tryConvert(temperature, convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }
    
    function BoilingVerdict(props) {
      if (props.celsius >= 100) {
        return <p>The water would boil.</p>;
      }
      return <p>The water would not boil.</p>;
    }
    
    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }
    
      handleChange(e) {
        this.props.onTemperatureChange(e.target.value);
      }
    
      render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input value={temperature}
                   onChange={this.handleChange} />
          </fieldset>
        );
      }
    }
    
    class Calculator extends React.Component {
      constructor(props) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature: '', scale: 'c'};
      }
    
      handleCelsiusChange(temperature) {
        this.setState({scale: 'c', temperature});
      }
    
      handleFahrenheitChange(temperature) {
        this.setState({scale: 'f', temperature});
      }
    
      render() {
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
    
        return (
          <div>
            <TemperatureInput
              scale="c"
              temperature={celsius}
              onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput
              scale="f"
              temperature={fahrenheit}
              onTemperatureChange={this.handleFahrenheitChange} />
            <BoilingVerdict
              celsius={parseFloat(celsius)} />
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <Calculator />,
      document.getElementById('root')
    );
    

    使用方法:浏览器。

    代码说明:完整的 Reactjs 代码片段。

    一个完整的 React 实例
    
    // sub-component
    function ListItem(props) {
      // Correct! There is no need to specify the key here:
      return <li>{props.value}</li>;
    }
    
    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        // Correct! Key should be specified inside the array.
        <ListItem key={number.toString()}
                  value={number} />
    
      );
      return (
        <ul>
          {listItems}
        </ul>
      );
    }
    
    class Clock extends React.Component {
      constructor(props) {
        // 确保 props 能够正确传入;
        super(props);
        // Bind this
        this.handler = this.handler.bind(this);
        this.state = {
          date: new Date(),
          counter: 0,
          showWarning: true
        };
      }
      // 生命周期 Hook 函数;
      componentDidMount() {
        // 不需要在 View 中显示的属性不需要放到 State 中;
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
    
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
    
      tick() {
        this.setState({
          date: new Date()
        });
      }
      
      handler() {
        this.setState({
          counter: this.state.counter + 1
        });
      }
    
      render() {
        const numbers = [1, 2, 3, 4, 5];
        // JSX 中的 Callback 函数需要在构造函数中绑定 this 指针;
        return (
          <div>
            <NumberList numbers={numbers} />
            <h1 onClick={this.handler}>Hello, {this.props.user.toString()}!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            <h2>Counter: {this.state.counter}</h2>
            <p>{this.state.counter > 2 && <WarningBanner warn={this.state.counter} />}

    </div> ); } } ReactDOM.render( <Clock user="YHSPY"/>, document.getElementById('root') );

    使用方法:浏览器。

    代码说明:完整的 Reactjs 代码片段。

    Node8 之 Util.promisify 常见用法
    
    var util = require('util')
    
    const wait = (delay, callback) => {
      const id = setInterval(() => {
        const rand = Math.random()
        if (rand > 0.95) {
          callback('Got data successfully!', null)
          clearInterval(id)
        } else if (rand < 0.1) {
          callback(null, 'Sorry, something wrong!') 
          clearInterval(id)
        } else {
          console.log("Waiting...")
        }
      }, Number(delay))
    }
    
    /*
      wait(1000, (data, err) => {
        if (err) {
          throw new Error(err)
        }
        console.log(data)
      })
    */
    
    // Use util.promisify
    util.promisify(wait)(1000).then(data => {
      console.log(data);
    }).catch(err => {
      console.error(err);
    })
    
    // Use async/await instead
    waitAsync = util.promisify(wait)
    let asyncFunc = async () => {
      let result;
      try {
        result = await waitAsync(1000);
      } catch (err) {
        return console.error(err);
      }
      return console.log(result);
    };
    asyncFunc().then(data => {
      // undefined
      console.log(data)
    })
    

    使用方法:Node8 命令行下直接运行。

    代码说明:Node8 新增的函数可以直接 Promise 化一个特定格式的函数,函数的回调函数需要符合 Node 的标准回调函数格式 。

    Leetcode - 169.Majority Element HashMap基础解法
    
    public static int majorityElement(int[] nums) {
        if (nums.length == 0)  // 如果数组长度为0则返回-1
        	return -1;
        
        int arrLen = nums.length;
        Map<Integer, Integer> map = new HashMap<>();
        for (int i = 0;i < arrLen; i ++) {
        	int currentVal = 0;
        	if (map.containsKey(nums[i]))  // 如果HashMap中存在该值对应的元素则使用该值
        		currentVal = map.get(nums[i]);
    
        	if (currentVal > arrLen / 2) {  // 如果满足条件则返回该元素
        		return nums[i];
        	} else {
        		map.put(nums[i], currentVal + 1);  // 否则对应元素值加一
        	}
        }
        
        return -1;
    }
    

    使用方法:Eclipse新建工程,直接复制到主类里,通过类名静态调用即可。

    代码说明:本段代码为Leetcode题目“169.Majority Element”的实现代码,算法类代码建议先做题,再参考。题目详情请参考文章《Leetcode每日一题 - 169.Majority Element》。

    Leetcode - 219.Contains Duplicate II 窗口检测解法代码片段
    
    public static boolean containsDuplicateOptimizeFurther(int[] nums) {
        Set<Integer> set = new HashSet<Integer>();  
        int start = 0, end = 0;  // 定义窗口的首尾指针
        for(int i = 0; i < nums.length; i++) {   // 开始遍历
            if(!set.contains(nums[i])) {    
                set.add(nums[i]);   
                end++;   // 如果Set中没有此元素则加入,尾指针后移
            } else { 
                return true;   // 有则返回True
            }
            
            if(end - start  > k) {  // 保持首尾指针距离不大于k  
                set.remove(nums[start]);    //如果大于则移除首指针元素
                start++;   // 移除后首指针后移
            }  
        }  
        return false;
    }
    

    使用方法:Eclipse新建工程,直接复制到主类里,通过类名静态调用即可。

    代码说明:本段代码为Leetcode题目“219.Contains Duplicate II”的实现代码,算法类代码建议先做题,再参考。题目详情请参考文章《Leetcode每日一题 - 219.Contains Duplicate II》。