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

Chrome插件开发 - Custom options page


## 抽奖类型

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

### 圆形抽奖

代码如下：

```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为回调函数
}
```

待续


移动端抽奖


## 搭建开发环境

让我们创建一个目录，在该目录中编写我们的 hello world 程序。打开终端并运行以下命令。

```bash
mkdir ~/Documents/learngo/
```

上面的命令将 learngo 在当前用户的 Documents 目录中创建一个名为目录。

### 你好，世界

使用您喜欢的文本编辑器 main.go 在 learngo 目录中创建一个名为以下内容的文件。

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello World")
}
```

按照 Go 中的约定，将包含 main 函数的文件命名为 main.go。

### 运行程序

1. go install

```bash
cd ~/Documents/learngo/
go install
#此命令将编译程序并将编译好的二进制文件复制到~/go/bin内
ls -al ~/go/bin/

~/go/bin/learngo
#输出hello world
```

2. go build

```bash
cd ~/Documents/learngo/
go build
#上面的命令将learngo在当前目录中创建一个二进制文件。ls -al将显示learngo已创建一个名为的文件。
./learngo
#输出Hello World
```

3. go run

cd ~/Documents/learngo/在终端中键入命令以将当前目录更改为 learngo。

```bash
go run main.go
Hello World
#go run和go build/go install命令之间的细微差别是，go run需要.go文件名作为参数。
```

go run 工作原理非常相似 go build。无需将程序编译并安装到当前目录，而是将文件编译到一个临时位置并从该位置运行文件。如果您想知道 go run 将文件编译到的位置，请 go run 使用--work 参数运行。

```bash
go run --work main.go
```

4. go playground

```go
package main

import "fmt"

func main() {
    fmt.Println("Hi! I want to be a Gopher!")
}
```

我们将简要讨论该程序的每一行的作用。

- package main - 每个 go 文件必须以 package name 开始。
- import "fmt" - import 语句用于导入其他软件

  包

- func main（）- func 关键字标记函数的开始。
- fmt.Println（"H​​ello World"）


Go - Hello World


## Promise

> 用于一个异步操作的最终完成或失败及其结果

## 状态

1. pending，初识状态
2. fulfilled，操作成功
3. rejected，操作失败

## 流程

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

## 语法

```js
new Promise((resolve, reject) => {
  /*executor*/
})
```

> Promise 执行时立即调用 executor 函数（通常是一些异步操作），resovle 将 Promise 的状态改为 fulfilled，reject 将 Promise 的状态改为 rejected，如果 catch 到了错误，将忽略 executor 内的返回值，Promise 的状态被改成 rejected

## 属性

1. Promise.length //1
2. Promise.prototype //Promise 的构造器的原型

## 方法

1. Promise.all //Promise.all 方法常被用于处理多个 promise 对象的状态集合
2. Promise.race //当 iterable 参数里的任意一个子 promise 被成功或失败后，父 promise 马上也会用子 promise 的成功返回值或失败详情作为参数调用父 promise 绑定的相应句柄，并返回该 promise 对象。
3. Promise.reject //返回一个状态为失败的 Promise 对象，并将给定的失败信息传递给对应的处理方法
4. Promise.resolve //返回的 Promise 对象状态为 fulfilled

## 原型

1. Promise.prototype.constructor //返回被创建的实例函数. 默认为 Promise 函数.
2. Promise.prototype.catch //添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的 promise
3. Promise.prototype.then //添加解决(fulfillment)和拒绝(rejection)回调到当前 promise, 返回一个新的 promise, 将以回调的返回值来 resolve.
4. Promise.prototype.finally //添加一个事件处理回调于当前 promise 对象，并且在原 promise 对象解析完毕后，返回一个新的 promise 对象。回调会在当前 promise 运行完毕后被调用，无论当前 promise 的状态是完成(fulfilled)还是失败(rejected)

## 使用

```js
const P=new Promise((resolve,reject)=>{
    if(/*success*/){
        resolve()
    }else{
        reject()
    }
})
```


Promise


Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

> 在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

例如如下代码：props 的传递需要层层传递，使用`context`则可以简化数据传递。

```jsx
function App() {
  return <Body name="John Doe" />
}

function Body({name}) {
  return <Greeting name={name} />
}

function Greeting({name}) {
  return <h1>Welcome, {name}</h1>
}
```

```jsx
import { createContext } from 'react';

const NameContext = createContext('');

function App() {
  return (
    <NameContext.Provider value="John Doe">
      <Body />
    <NameContext.Provider>
  );
}

function Body() {
  return <Greeting />;
}

function Greeting() {
  return (
    <NameContext.Consumer>
      {name => <h1>Welcome, {name}</h1>}
    </NameContext.Consumer>
  );
}
```

`context`的设计目的是为了共享那些对于一个组件树而言是“全局”的数据。


Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

React Context


React components 由一组元素构成。

基本函数组件的编写方式与常规 `JavaScript` 函数类似，但有几个不同之处。

- 组件名称必须以大写字母开头（即 MyComponent，而不是 myComponent）。
- 与 `JavaScript` 函数不同，组件必须返回 JSX。

以下是 `React` 函数组件的基本语法：

```jsx
function App() {
  return <div>Hello world!</div>
}
```


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

React Components


## 文档(Documentation)

MDN (Mozilla) JavaScript 参考是带有示例和其他信息的主要文档。

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript.)

## 兼容性(Compatibility tables)

由于 `JavaScript` 是一门持续开发中的语言，所以会定期添加新的特性，其中一些特性可能不会被所有的浏览器或引擎所支持。下面的网站可以帮助你识别哪些功能是由哪些浏览器/引擎或浏览器版本等所支持的。

- [Can i Use](https://caniuse.com/#search=javascript)
- [Compat Table](https://kangax.github.io/compat-table)

## 编辑器(IDE's)

一些比较热门的编辑器

- [Sublime Text](https://www.sublimetext.com/)
- [Atom](https://atom.io/)
- [WebStorm](https://www.jetbrains.com/webstorm/)
- [Visual Studio Code](https://code.visualstudio.com/)

## 教程(Tutorials / Courses)

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
- [The Modern Javascript Tutorial](https://javascript.info/)
- [Getting Started with JavaScript for Web Development Courses](https://scotch.io/courses/getting-started-with-javascript-for-web-development)
- [ES6-features.org](http://es6-features.org/)
- [JavaScript Tutorial](https://www.javascripttutorial.net/)
- [ES6 Tutorial](https://www.javascripttutorial.net/es6/)
- [Intro to ES6](https://scrimba.com/learn/introtoes6)
- [Tutorials Point - ES6 for beginners](https://www.tutorialspoint.com/es6/index.htm)
- [JavaScript Free Resources](https://www.java5cript.com/)

## 视频(Videos/ Courses)

- [Learn JavaScript - Full Course for Beginners - Video By freecodecamp.org](https://www.youtube.com/watch?v=PkZNo7MFNFg&list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V&ab_channel=freeCodeCamp.orgfreeCodeCamp.orgVerified)
- [ES6 - JavaScript Improved](https://www.udacity.com/course/es6-javascript-improved--ud356)
- [Javascript Essentials](https://www.udemy.com/course/javascript-essentials/)
- [Learning ECMAScript The Next Generation of Javascript](https://www.udemy.com/course/ecmascript2015/)

## 书籍(Books)

- [Eloquent JavaScript](https://eloquentjavascript.net/)
- [Understanding ECMAScript 6](http://superherojs.com/)
- [JavaScript the Good Parts](https://andersonguelphjs.github.io/OReilly_JavaScript_The_Good_Parts_May_2008.pdf)
- [Speaking JavaScript](http://speakingjs.com/es5/index.html)

## 练习(Learn JavaScript by building small projects)

- [30 Day Vanilla JS Coding Challenge](https://javascript30.com/)
- [Learn Javascript by building 7 games](https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/)
- [24days of christmas](https://scrimba.com/learn/adventcalendar/welcome-to-24-days-of-javascriptmas-cg2QbehG)
- [Learn JavaScript](https://scrimba.com/learn/learnjavascript)
- [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
- [Freecodecamp.org](https://www.freecodecamp.org/)
- [Build a Quiz App with HTML, CSS, and JavaScript](https://www.udemy.com/course/build-a-quiz-app-with-html-css-and-javascript/)
- [Smarter Way to learn JavaScript](http://www.asmarterwaytolearn.com/js/index-of-exercises.html)
- [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript)
- [Learn JavaScript Online](https://learnjavascript.online/)
- [learn-js.org interactive JavaScript tutorial.](https://www.learn-js.org/en/)

## GitHub

- [Javascript Algorithm and Data Structures](https://github.com/trekhleb/javascript-algorithms)
- [33 JS Concepts](https://github.com/leonardomso/33-js-concepts)
- [20+ Web Projects With Vanilla JavaScript](https://github.com/bradtraversy/vanillawebprojects)
- [50 Projects in 50 Days - HTML/CSS and JavaScript](https://github.com/bradtraversy/50projects50days)
- [JavaScript Style Guide](https://blog.kritikapattalam.com/[https://github.com/airbnb/javascript)
- [30 seconds of code](https://github.com/30-seconds/30-seconds-of-code)
- [30 Day Vanilla JS Coding Challenge](https://github.com/wesbos/JavaScript30)
- [Clean Code Javascript](https://github.com/ryanmcdermott/clean-code-javascript)
- [Javascript Questions](https://github.com/lydiahallie/javascript-questions)
- [The Algorithms - JavaScript](https://github.com/TheAlgorithms/Javascript)

## 编程挑战(Programming Challenges)

- [Hackerrank](https://www.hackerrank.com/)
- [Coding Game](https://www.codingame.com/)
- [Leet Code](https://www.hackerrank.com/)
- [Coder Byte](https://coderbyte.com/)
- [Exercism](https://exercism.io/my/tracks/javascript)
- [Elevator Saga](http://play.elevatorsaga.com/)
- [Code Wars](https://www.codewars.com/)

## 在线编辑器(Coding Ground)

- [Codepen](https://codepen.io/)
- [Js fiddle](https://jsfiddle.net/)
- [Tutorials Point Coding Ground.](https://www.tutorialspoint.com/codingground.htm)
- [CodeSandBox](https://codesandbox.io/)

## 博客(Blogs)

- [Dmitri Pavlutin](https://dmitripavlutin.com/)
- [David Walsh](https://davidwalsh.name/)
- [SuperHero.JS](https://superherojs.com/)
- [Medium](https://medium.com/)
- [dev.to](https://dev.to/)
- [Hashnode](https://hashnode.com/)
