概述

随着flutter的遍及，Dart语法逐步被应用起来，Dart是Google开发的一门编程语言。

次要利用方向：挪动开发、DartVM 命令行程序（Server 端）、浏览器（前端）。

Dart的利用

Dart有如下几个利用方向：

挪动开发

是泛滥 Dart 开发者开始接触学习 Dart 语言的起因。这个挪动开发的外围是叫做 Flutter 的一个框架，它应用Dart + C++ + Skia 开发，对外提供了齐全不依赖零碎平台的 Widget 的能力，只通过自绘图形的形式工作，因而具备极其优良的跨平台性。

服务端

DartVM ：就是写服务端的利用。比方写个 http 的服务，对利用提供 api ，都是及其简略的事件。

web开发

Google 公布的 Dart 2，从新定义了对这门语言的新认知：Dart 是针对 Web 和挪动客户端开发进行独特优化的语言。

Dart次要是替换了JavaScript，用Dart来做JavaScript这部分工作，但浏览器不能间接辨认，须要用Dart2js 编译器将Dart语言编译成js运行。除了编译器之外，Dart Web平台还提供了外围库，对DOM拜访以及从Dart 调用JavaScript的交互操作。

接下来咱们次要看下web端的我的项目的开发。

web环境搭建和利用

  1. 手动装置

    下载地址：http://www.gekorm.com/dart-wi...

  2. 配置环境变量
    将dart-sdk的bin门路增加到path环境变量中
  3. 在vscode中装置Code Runner插件，来调试咱们的dart代码

  4. 装置webdev和stagehand：

    pub global activate webdev

    pub global activate stagehand

  5. 创立一个Dart我的项目：

    stagehand web-simple

  6. 获取依赖包：

    pub get

我的项目运行：

命令行运行我的项目：

webdev serve

我的项目构建

如果想将dart文件编译转为js文件，应用webdev build 命令来构建一个版本，该命令应用dart sdk自带的dart2js这个工具来将dart文件编译为js文件：

web技术的利用次要包含js对html文档元素的事件处理和css对文档款式的润饰；

文档元素的操作

Dart提供了dart:html库来操作DOM中的对象和元素。基于控制台的应用程序无奈应用dart:html库。要在Web应用程序中应用HTML库，请导入dart:html，如果须要反对所有的html5的api，还需额定援用dart:web_audio 、dart:svg、dart:web_gl等。

获取文档元素：

Parent和Child

// 获取以后文档元素的父元素var oDiv = document.querySelector("#con");print(oDiv.parent.tagName);//DIVprint(oDiv.parent.id);//textContainerId

children和childNodes都能够失去子元素，不同的中央在于children返回的是List<Element>，因而能够不便的应用这些Element对象的属性和办法，而childNodes返回的是Node列表，能够对节点作具体操作：

// 获取子元素：var body = document.querySelector('body');body.children.forEach((el) => print(el.tagName));body.childNodes.forEach((el) => print(el));

HtmlElement

在dart:html中，所有货色都是结构化的，并应用类进行分类如：BodyElement、DivElement、ParagraphElement、InputElement 等；

document中所有的HTML元素都继承自HtmlElement；HtmlElement蕴含了所有元素通用的办法和属性如:innerHtml、id、click等；

元素的创立：

var oDiv = querySelector("#con");//创立输入框var input = new InputElement()  ..id = 'input'  ..name = 'input'  ..type = 'text'  ..placeholder = ''  ..width = 100;oDiv.nodes.add(input); //同时append多个对象需应用addAll([])//创立p标签var oP = new ParagraphElement();oP..id = 'text'    ..text = 'Paragraph Element!'    ..title = 'ParagraphElement';oDiv.nodes.add(oP);var div = new DivElement() //实例化一个Element并设置属性    ..id='div_id'    ..text = ' Replacement element';text.replaceWith(div);//替换元素//如果想删除元素：text.remove();

事件治理

增加事件的要害语法为：element.on['event'].listen，listen()函数返回的是StreamSubscription
能够调用pause、resume、cancel函数暂停、从新开始、勾销监听；

// 获取元素并绑定输入框的onchange事件，新增listimport 'dart:html';InputElement toDoInput;UListElement toDoList;ButtonElement deleteAll;void main() {  toDoInput = querySelector('#to-do-input');  toDoList = querySelector('#to-do-list');  toDoInput.onChange.listen(addToDoItem);}void addToDoItem(Event e) {  var newToDo = new LIElement();  newToDo.text = toDoInput.value;  toDoInput.value = '';  toDoList.children.add(newToDo);}
// 创立元素并增加点击事件void addToDoItem(Event e) {  var newToDo = new LIElement();  newToDo.text = toDoInput.value;  newToDo.onClick.listen((e) => newToDo.remove());  toDoInput.value = '';  toDoList.children.add(newToDo);}

对款式的解决

有如下两种解决形式：

1、对css款式的操作都集中到了CssClassSet类中：

// 创立一个button元素，并且绑定点击事件，点击按钮触发款式扭转var oBtn = new ButtonElement()  ..id = 'btn'  ..text = 'button'  ..onClick.listen((event) {    container.classes    ..clear()    ..add('error');    oP.text = 'msgtip';  });oBtn.classes.toggle('enlarge');

2、同js语言有雷同的解决形式，如：element.style.color = '#fff';

网络申请

对于如何申请网络资源和数据，客户端通常应用HttpRequest类提供的getString()办法申请服务器资源；

const  path = 'myData.json';HttpRequest.getString(path).then((String fileContents) {  print(fileContents.length); }).catchError((error) {   print(error.toString()); });

对于异步解决方案，Dart提供了Future对象，它的作用跟js中的Promise类似，它们都是异步编程的解决方案：

Future<void> makeRequest(Event _) async {  const path = 'https://XXXX';  try {    final jsonString = await HttpRequest.getString(path);    processResponse(jsonString);  } catch (e) {     }}void processResponse(String jsonString) {  for (final portmanteau in json.decode(jsonString)) {    wordList.children.add(LIElement()..text = portmanteau as String);  }}

web利用框架

Web是Dart的外围平台之一，让咱们用更加标准严格的代码去进行web开发，对于比较简单的web利用，咱们能够应用dart-to-javascript来疾速的编译代码；然而对于比较复杂的web利用，官网举荐：

与更高级别的Web应用程序框架一起应用，许多同时反对Web和挪动应用程序都是应用https://pub.flutter-io.cn/，...

目前，如果用Dart去开发咱们的web利用，存在的最大的问题就是dart2js之后文件的体积大小了，dart2公布以来，我的项目默认开启“tree-shaking”，构建命令减少“--minify”，曾经相较于上一版本压缩后的体积曾经有了很大的晋升。在今后的理论开发前，咱们还须要一直的不关注dart官网代码的更新和优化。

以上内容是 Dart在web端的利用，如果深刻的用Dart进行我的项目开发，还须要去学习Dart的根底语法，上面咱们来看下Dart的语言个性。

语言个性

强类型语言，必须申明，在编译阶段会查看类型，防止运行时报错，反对var申明（无类型），家喻户晓，JavaScript 是一门弱类型的语言，而 Dart 是强类型的语言，同时也反对一些弱类型，Dart 中弱类型有var, Object 以及dynamic。

  1. Dart所有的货色都是对象， 即便是数字numbers、函数function、null也都是对象，所有的对象都继承自Object类。
  2. Dart动静类型语言, 尽量给变量定义一个类型，会更平安，没有显示定义类型的变量在 debug 模式下会类型会是 dynamic(动静的)。
  3. Dart 在 running 之前解析你的所有代码，指定数据类型和编译时的常量，能够进步运行速度。
  4. Dart 反对顶级办法 (例如 main())，同时还反对在类中定义函数。 （动态函数和实例函数）。 你还能够在办法中定义方法 （嵌套办法或者部分办法）。
  5. 没有初始化的变量都会被赋予默认值 null。
  6. final和const都是常量申明，前者是应用时才申请内存，后者是编译时就先占内存，二者影响不大

罕用的数据类型

  1. String
  2. Numbers (int,double)
  3. Booleans（bool）
  4. Lists (也被称之为 arrays)
  5. Maps

变量与常量

申明变量类型：int double String List

  1. var 申明完数据类型，前期不能被批改
  2. dynamic代表未定义类型，会推断所有属性和办法，数据类型可动静变，躲避了校验，可能会引入bug
  3. final 应用时常量，用时才申请内存

  4. const 编译时常量，先占内存

    示例代码：

    void main() {    //1、申明完数据类型，前期不能被批改    var a = 'ahaha'; //var 申明会自动识别数据类型    // a = 123;  //会报错，类型不统一}

dart所有皆对象

 Object password = 123;    password = 1;

dynamic代表未定义类型，会推断所有属性和办法，数据类型可动静变，躲避了校验，可能会引入bug

dynamic as = 'halou';as = 12;print( as);//print( ab.length ); //object不具备length，编译阶段就会报错提醒String job = '你好';bool result =123<110;List list = [1,3,5,7,9];
//final 应用时常量，用时才申请内存//const 编译时常量，先占内存const aw = 'good';//aw = 'bad'; //不能被从新赋值

函数

每个应用程序都必须有一个顶层main()函数，它能够作为应用程序的入口点。函数必须要有返回值，加上void申明示意函数不须要有返回值。

示例代码：

String getUserName(){  return 'xiaomi';}// Dart中每个应用程序都必须有一个顶级main()函数，该函数作为应用程序的入口点。// (函数必须要返回值 ，加上void申明示意函数不须要返回值)void main() {    //return 'haha'; //此时返回会报错    String username = getUserName();    print(getPersonInfo('122'));    print(addAge(1));    }String getPersonInfo(String userId){    Map userInfo = {'122':'张三'};    return userInfo[userId];}

可选参数 不加可选的话，参数不传会报错

int addAge( int age1,[int age2=10]){    return age1+age2;}

反对箭头函数

void printNumber(num number) =>     print('The number is $number.');

类

· 一般类
· 抽象类
Dart抽象类次要用于定义规范，子类能够继承抽象类，也能够实现抽象类接口。

1、抽象类通过abstract 关键字来定义

2、Dart中的形象办法不能用abstract申明，Dart中没有办法体的办法咱们称为形象办法。

3、如果子类继承抽象类必须得实现外面的形象办法

4、如果把抽象类当做接口实现的话必须得实现抽象类外面定义的所有属性和办法。

5、抽象类不能被实例化，只有继承它的子类能够。

6、接口：应用implements关键字，个别应用抽象类定义接口。

示例代码：

void main() {     var p = new Person(10,'小米');   p.sayHello();   }class Person {   int age;   String name;   //构造函数 实例化时主动触发   Person(int age,String name){     this.name = name;     this.age = age;   }   void sayHello(){     print('my name is ${this.name}');   }}//子类继承父类，领有父类的属性和办法class Worker extends Person{  int number;  //构造函数 super继承父类的结构器 并对本身结构器进行拓展  Worker(int age, String name,int number) : super(age, name){    this.number = number;  }  //父类同名办法的笼罩  void sayHello(){    super.sayHello(); //调用父类的sayhello    print('my number is ${this.number}');  }}

接口的实现（implements）

如果有一个Class A,你想让类B领有A的API，但又不想领有A里的实现，那么你就应该把A当做接口，类B implements 类A：

/*一个类实现多个接口：*/abstract class A{  String name;  printA();}abstract class B{  printB();}class C implements A,B{    String name;   printA() {    print('printA');  }  printB() {    // TODO: implement printB    return null;  }}void main(){  C c=new C();  c.printA();}

泛型

泛型就是解决类 接口 办法的复用性，以及对不特定数据类型的反对（数据校验），默认泛型标识就是一个大写的T，也能够写其余的；
Dart 泛型类、泛型接口：

//泛型类class PrintClass<T>{  List list=new List<T>();  void add(T value){    this.list.add(value);  }  void printInfo(){    for( var i=0;i<this.list.length;i++ ){      print(this.list[i]);    }  }}void main(){  //泛型函数  getData<String>('你好');  //泛型类  PrintClass p = new PrintClass<int>();  p.add(1);}

泛型办法：

//泛型办法T getData<T>(T value){  return value;}

pub包治理

Dart的软件包管理器是pub。托管软件包的存储库能够在 https://pub.dartlang.org/ 找到；
每个Dart应用程序都有一个pubspec.yaml文件，蕴含了我的项目依赖包配置（类package.json）。
操作命令：
pub get：获取应用程序依赖的所有包。
pub upgrade：将所有依赖项降级到较新版本。
pub build：构建利用

库

Dart中的库次要有三种：

1、咱们自定义的库：

import 'lib/mylib1.dart' as lib1;

2、零碎内置的库：

import 'dart:math;
import 'dart:io';
import 'dart:convert';

3、pub包管理系统中的库：

import 'package:dio/dio.dart';

载入第三方库：

1）须要载入第三方库咱们是须要在 pubspec.yaml 文件中申明须要援用的库；
2）应用 pub get 进行拉取；
3）调用：import 'package:dio/dio.dart'; // Dio 一个很弱小的网络申请库；

小结

以上就是对Dart的一个入门级解说，对于web端：（1）因为dart语言设计的问题，它并不属于脚本语言，须要借助dart2js将代码转为js，效率并不高，（2）另外，dart的库绝对js来说比拟少，而ts能够间接应用js的库。尽管dart也能调用js，但用起来不太不便；

然而对于挪动端，尽管Dart目前生态还不是很欠缺，然而随着Flutter的宽泛推广，置信它也会很快失去利用，在开发过程中如果应用到一些类库，能够去查问相应的api。