Advanced Topics in Flutter Development


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

## 向浏览器扩展添加可选项

打开`manifest.json`，添加 options 选项，注册选项页面。

```json
{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  }
}
```

创建`options.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT Pop-up</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <div id="options"></div>
    <script type="module" src="src/options/index.jsx"></script>
  </body>
</html>
```

修改`src/index.jsx`

```jsx
import ReactDOM from 'react-dom'
import {App} from './App'

const app = document.getElementById('options')
ReactDOM.render(<App />, app)
```

修改`src/App.jsx`

```jsx
import {useState} from 'react'

export function App() {
  const [color, setColor] = useState('indigo')

  chrome.storage.sync.get('color', (storedColor) => {
    setColor(storedColor.color)
  })

  const pickColor = (pickedValue) => {
    setColor(pickedValue)
    chrome.storage.sync.set({color: pickedValue})
    window.close()
  }

  return (
    <div className="m-4">
      <select
        onChange={(event) => pickColor(event.target.value)}
        value={color}
        className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
      >
        <option>Pick a color</option>
        <option value="indigo">Indigo</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
        <option value="red">Red</option>
      </select>
    </div>
  )
}
```

修改`vite.config.js`，多页面打包配置

```js
import {defineConfig} from 'vite'
const {resolve} = require('path')
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        options: resolve(__dirname, 'options.html')
      }
    }
  }
})
```

最终效果如下：

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/options_zuppir.webm"
  autoPlay
></video>

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/options)


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

Chrome插件开发 - Custom options page


## 隐式类型转换

**布尔值**

以下值会被转换为 `false`：

- undefined, null
- false
- -0,+0,NaN
- ''

其他值都将被转换成`true`。

**字符串**

字符串的隐式类型转换是指，当一个值被赋值给一个字符串类型的变量时，会被转换成一个字符串。例如：加号（`+`）符号会被转换成字符串，因此，`1 + 2` 会被转换成 `'1+2'`。

```js
var x = '5'
x + 1 // '51'
```

**对象**

只有在需要用到数字或者字符串的时候，对象才会被转换。

当需要将对象转换成数字或者字符串时，会调用对象的 `valueOf()` 方法。具体步骤如下：

- 调用`valueOf()`方法，如果返回值是一个数字，则直接返回该数字。
- 否则，调用`toString()`方法，如果返回值是一个字符串，则直接返回该字符串。
- 否则，抛出一个 `TypeError` 异常。

![images](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/QaUjCe.png)


强制类型转换


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

JavaScript 是一种基于原型的面向对象编程语言。每一个 JavaScript 对象都有一个原型，它指向另一个对象。当试图访问一个对象的属性或方法时，如果对象本身不存在这个属性或方法，JavaScript 引擎会在对象的原型中寻找。

原型链是指一系列从一个对象到其他对象的链接。当我们试图访问一个对象的属性或方法时，JavaScript 引擎会沿着这个原型链一直向上搜索，直到找到该属性或方法，或者到达链的末端。

举个例子：如果我们有一个 "Person" 对象，它可以有一个原型 "Human"，而 "Human" 又有一个原型 "Animal"。当我们试图访问 "Person" 对象的某个属性或方法时，如果 "Person" 不存在该属性或方法，JavaScript 引擎就会在 "Human" 中寻找，如果 "Human" 中也不存在，就会在 "Animal" 中寻找。

简单来说，JavaScript 原型和原型链是为了解决对象继承问题，使得我们可以在多个对象之间共享属性和方法。


原型和原型链


[示例数据库](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/dvdrental.zip)

使用数据库时，最常见的就是使用`SELECT`语句来查询数据。

`SELECT`语句是 Postgresql 最复杂的一种查询语句，它可以查询数据库中的所有数据，也可以查询指定的数据。

- `DISTINCT`查询不同行的数据
- `ORDER BY`排序查询结果
- `WHERE`条件过滤查询结果
- `LIMIT`或`FETCH`限制查询结果的数量
- `GROUP BY`分组查询结果
- `HAVING`条件过滤分组查询结果
- `INNER JOIN`内连接查询结果
- `LEFT JOIN`左连接查询结果
- `FULL OUTER JOIN`全连接查询结果
- `CROSS JOIN`交叉连接查询结果
- `UNION`查询结果的并集
- `INTERSECT`查询结果的交集
- `EXCEPT`查询结果的差集

## SELECT 语法

`SELECT [select_list] FROM [table_name]`

- select_list:指定一个或多个查询字段，也可以使用`*`来查询所有字段
- table_name:指定查询的表名

## SELECT 语句的示例

#### 查询所有客户的名字

```sql
SELECT first_name FROM customer;
```

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

> `;`表示语句结束

#### 查询多个字段

```sql
SELECT first_name, last_name, email FROM customer;
```

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

#### 查询所有数据

```sql
SELECT * FROM customer;
```

> 尽量避免使用`*`，因为它会查询所有字段，会影响性能。

#### 表达式查询

使用`||`连接姓名查询

```sql
SELECT first_name || ' ' || last_name, email FROM customer;
```

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

```sql
SELECT 5*3;
```

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


Postgresql - Select


在 HTML 中，列表（Lists）是一种用于组织信息的结构。列表可以分为有序列表（Ordered Lists）和无序列表（Unordered Lists）两种类型。

无序列表：用于表示没有特定顺序或层次的项目列表。在 HTML 中，无序列表使用ul标签来定义，每个项目使用li标签来定义。示例如下：

```html
<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>
```

有序列表：用于表示按照特定顺序或层次的项目列表。在 HTML 中，有序列表使用ol标签来定义，每个项目使用li标签来定义。示例如下：

```html
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>
```

除了基本列表之外，HTML 还提供了其他类型的列表，如描述列表（Description Lists）和嵌套列表（Nested Lists）。

描述列表：用于表示一组术语及其定义的列表。在 HTML 中，描述列表使用dl标签来定义，每个术语使用dt标签来定义，每个定义使用dd标签来定义。示例如下：

````html
<dl>
  <dt>术语 1</dt>
  <dd>定义 1</dd>
  <dt>术语 2</dt>
  <dd>定义 2</dd>
  <dt>术语 3</dt>
  <dd>定义 3</dd>
</dl>
``` 嵌套列表：用于表示列表项目之间的嵌套关系。在 HTML
中，可以将一个列表放置在另一个列表的项目中，以创建嵌套列表。示例如下： `html
<ul>
  <li>项目 1</li>
  <li>
    项目 2
    <ul>
      <li>项目 2.1</li>
      <li>项目 2.2</li>
    </ul>
  </li>
  <li>项目 3</li>
</ul>
`
通过使用列表，可以有效地组织和呈现信息，使其更易于阅读和理解。在实际项目中，通常会使用
CSS 对列表进行样式设计，以使其更加美观和有用。
````


css - Lists


JavaScript 中的作用域绑定是指确定变量和函数在代码中的可见性和访问权限的机制。作用域定义了变量和函数的可访问范围，以及它们在代码中的生命周期。

JavaScript 中有两种主要的作用域绑定机制：词法作用域和动态作用域。

## 词法作用域

词法作用域是在代码编写阶段确定的作用域，它基于变量和函数在源代码中的位置进行绑定。也就是说，词法作用域是由代码的结构来决定的，不会被函数调用的位置或上下文影响。

在词法作用域中，当定义一个变量或函数时，它们会被绑定到最近的包含它们的函数或全局作用域中。当在代码中引用一个变量或函数时，JavaScript 解释器会按照词法结构从内层作用域向外层作用域进行查找，直到找到匹配的标识符或达到全局作用域。

示例：

```javascript
var globalVariable = 'Global'

function outerFunction() {
  var outerVariable = 'Outer'

  function innerFunction() {
    var innerVariable = 'Inner'
    console.log(globalVariable) // 可以访问全局变量
    console.log(outerVariable) // 可以访问外层函数的变量
    console.log(innerVariable) // 可以访问当前函数的变量
  }

  innerFunction()
}

outerFunction()
```

## 动态作用域

动态作用域是在运行时确定的作用域，它基于当前的执行上下文和调用链来绑定变量和函数。与词法作用域不同，动态作用域的可见性和访问权限取决于函数调用的位置和上下文。

JavaScript 并没有内置的动态作用域机制，它使用的是词法作用域。但是，一些编程语言（如 Bash 脚本）使用动态作用域来确定变量的可见性。

JavaScript 的作用域绑定机制是词法作用域，它基于代码的结构来决定变量和函数的可见性和访问权限。词法作用域通过将变量和函数绑定到最近的包含它们的作用域来实现。动态作用域是一种在运行时确定作用域的机制，但 JavaScript 并不支持动态作用域。
