关于前端:Dart-Web应用及常用语法

72次阅读

共计 7575 个字符，预计需要花费 19 分钟才能阅读完成。

概述

随着 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);//DIV
print(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 事件，新增 list
import '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。

正文完
前端
发表至： 前端
2021-05-20
 0
关于前端:聊聊JavaScript性能优化
关于前端:你还在为组件文档烦恼吗
关于前端:前端周刊第十七期
关于前端:3分钟科普Web30究竟是个啥