前言

本文是小结类文章，主要总结一下工作中遇到的父组件调用子组件方法。当然除了用ref之外还有很多其他方式，本文仅仅列举ref的方式。分别介绍父子组件都为class；父子组件都是hooks；父组件是class子组件是hooks；父组件是hooks，子组件是class的各种情况的调用方式。

父子组件都为class

父子组件都是class，父组件调用子组件方式比较传统，方法如下：

前言

css中clip-path我在很久之前就介绍过，还是2015年的文章css3的clip-path属性介绍，之前的文章介绍的有点粗略，今天这篇文章详细介绍一下。

语法

【clip-path】
　　值: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
　　<clip-source>: url()
　　<basic-shape>: inset() | circle() | ellipse() | polygon()
　　<geometry-box>: fill-box | stroke-box | view-box | margin-box | border-box | padding-box | content-box

初始值: none 应用于: 所有元素 继承性: 无

各形状语法：

Circle: circle(radius at x-axis y-axis)

Ellipse: ellipse(x-rad y-rad at x-axis y-axis)

Polygon: polygon(x-axis y-axis, x-axis y-axis, … ) // 每个点的坐标值

Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

前言

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。页面css做图片滑动，滚动，特别是手机端，可能出现卡顿，闪白等情况，解决这些动画卡顿的情况，我们通常可以采用GPU加速的方式。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。

如何开启 GPU 加速

CSS 中的以下几个属性能触发硬件加速：

transform

opacity

filter

will-change

前言

今天主要讲讲JSONP的实现及内容安全策略CSP,JSONP跨域方案是很老的一种形式，我们用封装好的ajax基本都提供了这个功能，例如jquery的jsonp，请看之前文章：https://www.haorooms.com/post/jquery_ajax_wg ，及跨域解决方案之JSONP,都有提及，但是究竟怎么实现的，没有写，今天主要写一下JSONP的简单实现，及内容安全策略CSP，就是一个网站，可以设置运行访问的域名安全策略。

JSONP实现

JSONP的原理非常简单，就是HTML标签中，很多带src属性的标签都可以跨域请求内容，比如我们熟悉的img图片标签。同理，script标签也可以，利用script标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的，来执行跨域的javascript代码。