掌握了javascript如何快速的学习Dart?

写在前边

Flutter从发布至今的生命力大家是有目共睹的.随着Flutter 1.12的发布flutter对web的支持也更好. 相信未来fluter能得到更广泛的应用.

一个月前,我们接到了开发一个开发跨平台应用的项目,经过讨论(RN 和 flutter的大PK)我们决定使用flutter主要技术去做开发.

前端写flutter这就开始了.经过将近一个月的开发目前我们的app已经在GP上线,感兴趣的同学可以下载看下.

接下来我们一起看下以前端的技术去学习flutter中关键的点.

⚠️本文适用于有一定js基础的同学.如果用过TS那就更好了.

数据类型

• num : int double
• String
• bool
• List
• Map
• enum
• 等

常量和变量

dart有以下几种声明形式:

    const String AD_JUST_APPTOKEN = '123ds0qweasd'; //定义一个常量
    final pageSize = 5; //也可以定义常量
    final String name = 'bean';
    var page = 'qwe'; //创建变量并初始化,page的类型被推断为String
    dynamic isFirst = true; //定义动态类型
    bool loaded = false; //声明变量的类型
    List<String> idList = [];
    // 枚举 后边不要分号
    enum AdTypes { offerwall, rewarded, interstitial }
    // key为String value类型为dynamic
    Map<String, dynamic> data = {"page": 1, "type": 'user'};
  
  // final:定义实例变量
  class HomePage extends StatefulWidget {
      HomePage({Key key, this.title}) : super(key: key);

      final String title;

      @override
      _HomePageState createState() => _HomePageState();
    }

大多情况下我会用final定义实例变量(但是之后你不会改变它)
final和const唯一的区别是 final 可以接收一个变量但 const 不行，多数情况下我们会使用 final 来定义只赋值一次的值

函数

1. 与JS不同Dart需要做类型注释 如:

   String d()=> 'dd';

2. 参数的形式

   //声明 
   void showToast(String type, String msg,[String device = 'ios', String Skr]) {
      
   }
   
   showToast('success', msg) //调用,device为可选参数
   
   Future<bool> startFyber({
      @required String appId,//必传的参数
      String securityToken,
      String user,
      bool enableLogging = false,//设置默认值
    }) async {
      
    }
   
     Fyber4Flutter.startFyber(
        appId: '122747',
        securityToken: '',
      );

3. main函数:每个应用程序都必须有一个顶级的main()函数，它作为应用程序的入口点。main()函数返回void

运算符

// as 类型转换,设置类型,在将接口返回的json转map时经常用到
irst_award_amount = json['first_award_amount'] as String

// is is! 判断类型
list.where((event) => event is Map)

//??
final uuid = b ?? ''//b为null 的时候赋值

// ..  连续操作
querySelector('#confirm') // Get an object.
  ..text = 'Confirm' // Use its members.
  ..classes.add('important')
  ..onClick.listen((e) => window.alert('Confirmed!'));
//相当于:
var button = querySelector('#confirm');
button.text = 'Confirm';
button.classes.add('important');
button.onClick.listen((e) => window.alert('Confirmed!'));

// ?.  有该方法时调用 相当于js中 a.toList&&a.toList();
a?.toList();

//assert 在生产环境中，assert()调用被忽略。在开发环境中当assert(condition) 的condition条件不为真时抛出一个异常
assert(one == 1);

类

接口

dart中的类隐式地定义一个接口，该接口包含类的所有实例成员及其实现的任何接口. 并且一个类可以实现多个接口; 如:

class Person {
  final _name;
  Person(this._name);
  String greet(String who) => 'Hello, $who. I am $_name.';
}
//Impostor实现接口‘Person’
class Impostor implements Person {
  get _name => '';

  String greet(String who) => 'Hi $who. Do you know who I am?';
}

String greetBob(Person person) => person.greet('Bob');

void main() {
  print(greetBob(Person('Kathy')));
  print(greetBob(Impostor()));
}

构造函数

class Point {
  //实例属性
  num x;
  num y;
  Point(this.x, this.y);
  // 实例方法
  num distanceTo(Point other) {
    var dx = x - other.x;
    var dy = y - other.y;
    return sqrt(dx * dx + dy * dy);
  }
}
//等同于

class Point {
  num x, y;

  Point(num x, num y) {
    // There's a better way to do this, stay tuned.
    this.x = x;
    this.y = y;
    //这里也可以做一些其它的操作
  }
  //...
}
// 你也可以这么写
class Point {
  num x;
  num y;
  Point({this.x,this.y = 0})
}

重定向构造函数

class Point {
  num x, y;

  // The main constructor for this class.
  Point(this.x, this.y);

  // Delegates to the main constructor.
  Point.alongXAxis(num x) : this(x, 0);
}

工厂构造函数

在实现构造函数时使用factory关键字，该构造函数并不总是创建类的新实例。例如，工厂构造函数可以从缓存返回实例，也可以返回子类型的实例.
单例:

class Manager {
  // 工厂模式
  factory Manager() => _getInstance();
  //静态方法&静态属性 用static?
  //Getter方法,对应的还有setter
  static Manager get instance => _getInstance();
  static Manager _instance;
  Manager._internal() {
    // 初始化
  }
  static Manager _getInstance() {
    if (_instance == null) {
      _instance = new Manager._internal();
    }
    return _instance;
  }
}

抽象类&抽象方法

使用abstract修饰符定义不能实例化的抽象类。抽象类对于定义接口非常有用。抽象方法特别适合用于让实现者实现的某些事情

abstract class Doer{
  void doing();
}

class EffeDoer extends Doer{
  void doing(){

  }
}

继承和重写

class ICe {
  void say(){
    print(2);
  }
}

class ICCC extends ICe {
  @override
  say(){
    // super.say();如果需要;
    print(1);
  }
}

void main(){
  new ICCC().say();
}

异步

Dart中支持 then的写法也支持async & await

// 链式的then写法
  device.init().then((info) {
    deviceInfo = info;
    return config.init({});
  }).then((res) {});

GameDetail gameDetailRes = await Service().getGameDetail({
        "game_id": widget.arguments["game_id"],
        "flag": widget.arguments["flag"]
      });
      

结语

这次总结,希望能够为有js基础想学习flutter开发的前端小伙伴们提供帮助.

有一点要说明的是: 我们不搬迁文档, 我们只做有必要的记录和总结. 希望后续的前端同学们能有更高的效率.

后边我会继续在这个专栏中介绍 以前端的视角快速开发flutter应用中遇到的问题. 希望大家多多关注.