Swift 中的函数可以完成特定的任务，并且可以重复使用。函数使代码的组织和抽象化更加容易，也使代码更易于维护和重构。

Swift - 函数


![](https://cdn.jsdelivr.net/gh/manonicu/pics@master/img/20200427135628.png)

这是一份为 Web 开发准备的 Mac 配置指南，包括推荐工具，快捷方式，技巧等

- macOS Settings
  - System preferences
  - Finder
  - Screenshot
- macOS Shortcuts
- Command-line Tools
  - Homebrew
  - iTerm2
  - Git
  - Zsh
  - Oh My Zsh
  - Node.js
  - Docker
  - tldr
  - htop
  - fzf
  - ripgrep
  - path-extractor
  - lnav
- MacOS Applications
  - Visual Studio Code
  - Rectangle
  - GIMP
  - LICEcap
  - Alfred
  - Numi
- Tips and Tricks


MacbookPro-前端开发环境配置


## 什么是 BFC

Block Formatting Context（块级格式化上下文）

> Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

## 布局规则

- 内部的 Box 会在垂直方向一个接一个地放置
- Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- 每个盒子（块盒与行盒）的 margin box 的左边，与包含块 border box 的左边相接触，即使存在浮动也是如此
- BFC 的区域不会与 float box 重叠
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也是如此
- 计算 BFC 的高度时，浮动元素也参与计算

## 如何创建 BFC

- 根元素或其他包含他的元素
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素具有 position 为 absolute 或 fixed）
- 内联块（元素具有 display: inline-block）
- 表格单元格（元素具有 display: table-cell ，HTML 表格单元格默认属性）
- 表格标题（元素具有 display: table-caption，HTML 表格标题默认属性）
- 具有 overflow 且值不是 visible 的块元素
- 弹性盒子（flex 或 inline-flex）
- ` css display: flow-root`
- `css column-span: all`

## BFC 作用

- 利用 BFC 避免 margin 重叠
- 自适应两栏布局
- 清除浮动


css-BFC


![XBcHdy](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/XBcHdy.jpg)

Cypress 包含测试网站所必须的所有组件，可以快速编写测试用例。

## 下载源码

```bash
git clone github.com/ahfarmer/emoji-search
#安装依赖
cd emoji-search && npm install
#启动项目
npm run start
#访问http://localhost:3000
```

![65rXws](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/65rXws.jpg)

## 安装 Cypress

```bash
#安装
npm install cypress —save-dev

#启动
npx cypress open
#或者
./node_modules/.bin/cypress open
#或者
$(npm bin)/cypress open
```

以上命令将会在项目根目录创建`cypress`文件夹，如下： ![09GuGd](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/09GuGd.jpg)

## 创建测试用例

默认情况下，所有测试都存储在`cypress/integration`文件夹中，该文件夹在第一次`Cypress`启动时自动创建。在此示例中，我们将编写一个测试，该测试将：

检查输入单词`lollipop`后是否在页面上仅显示一个结果

检查标题类的标签是否包含正确的文本

首先在`cypress/integration`目录中创建一个`sample_spec.js`文件：

该文件应包含以下代码：

```js
describe('Sample test', () => {
  it('Search lollipop emoji', () => {
    cy.visit('http://localhost:3000/') // launch project website
    cy.get('input').type('lollipop') // enter 'lollipop' in search
    cy.get('.component-emoji-result-row').should('have.length', 1) // check if only 1 result is returned
    cy.contains('Lollipop').should('have.class', 'title') // check if returned element contains 'title' class
  })
})
```

你将会看到这样的窗口：

![ZabqgO](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/ZabqgO.jpg)

单击`sample_spec.js`后，将打开一个带有搜索引擎实例的窗口，您可以在其中实时预览执行的测试。结果应如下所示（请记住，带有示例性网站的项目应该正在运行）：

![3NotH3](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/3NotH3.jpg)


Cypress入门


`React`中应用元素样式有以下几种方式：

引入全局样式

![KUPCw2](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/KUPCw2.jpg)
![p96k3B](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/p96k3B.jpg)

行内样式

```jsx
function App() {
  return (
    <header className="App-header">
      <p style={{margin: '1px', padding: '5px'}}>
        <code>src/App.js</code>
      </p>
      <a
        style={{color: 'red', backgroundColor: 'green'}}
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
      >
        Learn React
      </a>
    </header>
  )
}
```

为各个组件创建单独的样式，并且在组件中使用

```jsx
import React from 'react'
import './App.css'

function App() {
  return (
    <header className="App-header">
      <p style={{margin: '1px', padding: '5px'}}>
        <code>src/App.js</code>
      </p>
      <a
        style={{color: 'red', backgroundColor: 'green'}}
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
      >
        Learn React
      </a>
    </header>
  )
}

export default App
```

将 `style` 属性附加到 `JavaScript` 样式对象

```jsx
import React from 'react'

var stylingObject = {
  div: {
    color: 'red',
    border: '1px solid red'
  },
  input: {
    margin: '2px',
    padding: '5px'
  }
}

function App() {
  return (
    <div style={stylingObject.div}>
      <input style={stylingObject.input} type="text" />
    </div>
  )
}

export default App
```


React是一个JavaScript库，致力于使UI开发变得简单

React Elements Styles


## 抽奖类型

- 圆形抽奖
- 方形抽奖
- 老虎机
- 刮刮卡

### 圆形抽奖

代码如下：

```js
// prefix补全
var CSSTransform = (function () {
  var _elementStyle = document.createElement('div').style
  var _vendor = (function () {
    var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
      transform,
      i = 0,
      l = vendors.length
    for (; i < l; i++) {
      transform = vendors[i] + 'ransform'
      if (transform in _elementStyle)
        return vendors[i].substr(0, vendors[i].length - 1)
    }
    return false
  })()

  function _prefixStyle(style) {
    if (_vendor === false) return false
    if (_vendor === '') return style
    return _vendor + style.charAt(0).toUpperCase() + style.substr(1)
  }
  return _prefixStyle('transform')
})()

// 转盘旋转效果
var Lottery = function (el) {
  this.running = false
  this.el = $(el)[0]
  /*
	    旋转转盘至指定位置
	    参数：
	    giftIndex: 礼物的索引（从0开始到数组.length - 1）
	    endCallback：转盘旋转完成时的回调
	    */
  this.rotateToGift = function (giftIndex, endCallback) {
    if (typeof endCallback != 'function') return
    if (giftIndex < 0 || giftIndex > CNST_GIFTS.length - 1) return
    if (this.running) return
    this.running = true
    var degToRotate = (giftIndex + 1) * 45 + 360 * 3 - 22.5 //最少转3圈
    var rotatedDeg = 0
    var speed = 20 //deg
    var speedRatio = 1
    var _this = this

    function r() {
      _this.el.style[CSSTransform] = 'rotate(' + -rotatedDeg + 'deg)'
      rotatedDeg += speed * speedRatio
      if (rotatedDeg + 180 >= degToRotate)
        //开始减速
        speedRatio = (degToRotate - rotatedDeg) / 180
      if (rotatedDeg >= degToRotate - 0.5) {
        rotatedDeg = degToRotate
        _this.el.style[CSSTransform] = 'rotate(' + -rotatedDeg + 'deg)'
        _this.running = false
        endCallback()
      } else setTimeout(r, 1000 / 24)
    }
    r()
  }
}
```

**使用方法：**

```html
<div class="lottery">
  <div class="lottery-bg"></div>
  <button id="btnStart" class="button start" onClick="startLottery()"></button>
</div>
```

调用方法：

```js

var myLottery = new Lottery($(".lottery .lottery-bg"));//初始化转盘
myLottery.rotateToGift(giftIndex, function() {
	    //giftIndex为后端接口下发的奖品ID，function为回调函数
}
```

待续


移动端抽奖


## 浏览器插件类型

通过浏览器插件可以实现一些自定义功能，比如：自定义背景、字体、浏览模式等。

在所有浏览器中，chrome 是最具扩展性，firefox、edge 等也不错。而且有些插件通用兼容 firefox 和 edge。

主题插件：[【All Chrome Themes】](https://chrome.google.com/webstore/category/themes?hl=en-GB)

新窗口插件：比如[daily.dev](https://daily.dev/) [【Some new tab extension on chrome】](https://chrome.google.com/webstore/category/collection/customize_your_new_tab_page)

弹窗插件：

- [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)
- [Developer toolbar](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)
- [Metamask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn)

以下是 Lighthouse 弹窗插件界面
![rxfcjO](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/rxfcjO.jpg)

页面注入插件

- [Redux devtools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
- [Black magic](https://chrome.google.com/webstore/detail/blackmagicso-extension/efnjehgfpbogpclnkikafpbgbahaflfd)
- [JSON viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh)

开发者工具插件

这可能是开发者接触的比较多的插件，比如：

- [React devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Polymer devtools](https://chrome.google.com/webstore/detail/polymer-devtools-extensio/mmpfaamodhhlbadloaibpocmcomledcg)
- [Ember inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)


基于react、tailwindcss开发自己的chrome插件