extension chemical

dart系列之：你的地盘你做主，使用Extension对类进行扩展

一般情况要扩展一个类，需要继承这个类，这是在大多数java或者其他面向对象语言中要做的事情。

但是有些时候扩展类并不是特别好用，首先在有些语言中，有些类是禁止被扩展的。即使可以被扩展，但是扩展之后的类是一个新的类，而不是原来的父类，所以在使用的过程中可能会出现一些类型转换的问题。

那么在dart中是怎么解决这个问题的呢？

dart在2.7之后，引入了extension，用来对类的方法进行扩展。

到底怎么扩展呢？我们举个例子.

我们可以将字符串转换为int，通过调用int的parse方法，如下所示：

但是通过int类来进行转换通常不太直观，我们希望能够在String类中提供一个toInt的方法，可以直接调用，将字符串转换成为int。

但是很遗憾，String并没有提供toInt的方法，所以我们可以通过extension来对String进行扩展：

如果这个文件的名字叫做string_to_number.dart，那么我们可以这样使用：

dart中方法扩展最为方便的是，你只要引入对应的lib，使用的时候甚至都不知道在使用lib的扩展。

当然，并不是所有的类都可以使用extention进行扩展。比如dynamic类型就不能进行扩展。

但是使用var类型，只要该类型可以被推断出来，那么就可以使用extention扩展。

既然可以对lib进行扩展，那么就有可能出现API冲突的情况。那么怎么解决API冲突呢?

比如我们需要使用两个lib扩展文件，extention1.dart和extention2.dart.但是两个扩展文件中都定义了parseInt方法对String进行扩展。

如果同时引用的话，就会出现问题。

这时候可以使用show或者hide来限制具体使用哪一个扩展文件的中的方法。

还有一种情况就是显示调用extension，如下所示：

通过extention的名字来进行区分。

如果两个extention的名字也相同的话，那么可以通过prefix来进行区分：

实现扩展很简单，实现语法如下：

下面是一个扩展String的例子：

extension还可以扩展泛型参数：

上面的实现是对List 进行扩展，添加了getter,操作符和split方法。

以上就是2.7的新特性，类的扩展。

本文已收录于 http://www.flydean.com/26-dart-extension-method/

最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！

欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！

下一代零配置、跨浏览器扩展框架 Extension 来袭！

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

Extension is a plug-and-play, zero-config, cross-browser extension development tool for browser extensions with built-in support for TypeScript, WebAssembly, React, and modern JavaScript.

Extension 是一款即插即用、零配置、跨浏览器扩展开发工具，适用于浏览器扩展，内置对 TypeScript、WebAssembly、React 和现代 JavaScript 的开箱即用的支持。

Extension 设计时考虑到实用性和快速原型设计，运行单个终端命令足以开始开发扩展，不需要额外的配置即可开始。同时，Extension 也无需构建配置即可创建跨浏览器实现。

目前 Extension 在 Github 通过 MIT 协议开源，有超过 2.3k 的 star、是一个值得关注的前端开源项目。

Extension 有一个默认的 create 命令，允许开发者生成下一个扩展项目的基础，其还通过 --template 标志支持模板。

如果有使用包管理器的现有扩展，则可以安装扩展包并手动创建用于运行扩展的脚本:

接着可以将 npm 脚本与可执行 Extension 命令链接：

接着可以通过下面步骤完成：

• 要开发扩展可以运行 npm run dev
• 要在生产模式下可视化扩展可以运行 npm run start
• 要在生产模式下构建扩展，可以运行 npm run build

如果开发者想针对特定浏览器，只需将 --browser 标志传递给 dev/start 命令，例如 npx extension dev path/to/extension --browser=edge。

当然，开发者也可以通过 --browser="all" 一次加载所有可用的浏览器：

Extension 还提供了对 WebAssembly (WASM) 的开箱即用的支持，同时支持 TypeScript、React 等最新研发堆栈。支持 CSS Modules、Tailwind CSS 等最新样式方案。

更多关于 Extension 的用法和特性可以参考文末资料，本文不再过多展开。

https://github.com/cezaraugusto/extension.js

https://extension.js.org/

https://extension.js.org/n/getting-started/templates/