«Dart Js Ts» — языковой билет Dart для фронтенд-инженеров.

внешний интерфейс Flutter
«Dart Js Ts» — языковой билет Dart для фронтенд-инженеров.

предисловие

Давно не виделись ребята~

Ах~ Давно я статей не писал, стыдно стыдно. 🐶

Маленький ноль недавно побежал писать Flutter ~

Flutter использует язык Dart для разработки, Xiao Null обнаружил некоторое сходство между Dart и Javascript/Typescript в процессе написания Flutter~

wordclouds
wordclouds

Эта статья разделяет эти сходства с картинкой выше, надеясь помочь вам, кто планирует сесть в автобус~

You might already know Dart. - from 10 good reasons to learn Dart

Да, вы можете быть знакомы с Dart еще до того, как начнете его изучать.

«Прошлое и настоящее. Упадок и подъем» Дарта

Рождение Дарта

В сентябре 2011 года в Интернете появилось внутреннее электронное письмо Google под названием «Будущее JavaScript», в котором указывалось, что из-за медленного развития языка Javascript Google разрабатывает лучший веб-язык, чем JavaScript, внутри компании. Цель этого нового языка — достичь всего, чего может достичь JavaScript. Его главная цель — «сохранить динамическую природу JavaScript, но с лучшим профилем производительности и инструментом, который можно адаптировать к более крупным проектам». Его также можно кросс-компилировать в JavaScript. Язык был представлен всему миру в качестве предварительной версии технологии и получил название Dart. - Цитата из Dart в действии

На конференции GOTO 10 октября 2011 г. два инженера Google, Ларс Бак (руководитель проекта движка JavaScript V8..) и Гилад Брача (внедрение пользовательских спецификаций Java/JVM, основные участники спецификации JVM..) выпустили «Dart», также проверенный предыдущие слухи по электронной почте. Dart — это совершенно новый язык программирования, призванный помочь разработчикам создавать веб-приложения.

2011goto
2011goto

Если вы заинтересованы в команде разработчиков языка Dart~, пожалуйста, нажмите 👉Кто такие большие коровы, стоящие за языком Dart?

Dart 1.0 «Dart 1.0: стабильный SDK для структурированных веб-приложений»

14 ноября 2013 года Google выпустил Dart версии 1.0. Выпущена версия Dart 1.0, не только версия Dart language 1.0, но и соответствующий набор инструментов с открытым исходным кодом и поддерживающий редактор. Чтобы продвигать Dart, Google встроил в Chrome движок DartVM (который был удален в 2015 г.) В то время у JavaScript была вторая весна из-за подъема экосистемы NodeJs, а Dart был прохладным и страдал от своей операционной эффективности. критиковал.

Таким образом, Dart также «победил в топ-20 худших языков» в 2018 году, подводя итог: «Javascript «занят», Dart «несостоятелен»».

2018-worst-lang
2018-worst-lang

Dart 2.0 «Объявляем стабильную версию Dart 2 и веб-платформу Dart»

8 августа 2018 года Google выпустила Dart 2.0. Google провела новую ревизию Dart, реконструировала язык Dart с нуля, добавила множество новых функций на будущее и значительно улучшила производительность языка. Команда разработчиков Dart подытожила преимущества и недостатки версии Dart1.0 и решила создать более быстрый и безопасный строго типизированный язык Dart2.0 (до Dart2.0 Dart был слабо типизированным языком. В этом выпуске Google не только выпустила Dart 2.0, но и переписать веб-платформу Dart.Новая версия веб-платформы предоставляет набор высокопроизводительных масштабируемых инструментов для повышения производительности.

Flutter выпускает Flutter 1.0: портативный набор инструментов пользовательского интерфейса Google

Google внутри компании написала и разработала фреймворк для мобильной разработки Sky с Dart, который позже был назван Flutter и вошел в область мобильной кроссплатформенной разработки.

4 декабря 2018 года Google выпустил Flutter 1.0.

Flutter — это SDK для разработки мобильных приложений с открытым исходным кодом от Google. Используя Flutter, вы можете напрямую разрабатывать приложения для Android и iOS. Его самой большой особенностью является набор кода, многоплатформенная работа, высокая производительность и Hot Reload (горячая перезагрузка). Google собирается выпустить систему Fuchsia с Flutter в качестве основного фреймворка для разработки. Flutter использует Dart в качестве основного языка. Dart также нравится многим разработчикам из-за светлого будущего Flutter.

Выбор технологии цвета фуксии, Dart смеется последним

Android и Chrome OS могут быть самыми известными проектами Google в области ОС, но на самом деле это третья операционная система, которую разрабатывает Google, Fuchsia, которая постепенно увеличивала свою известность за последние два года. Fuchsia — это проект с открытым исходным кодом, похожий на AOSP (Android Open Source Project), но Fuchsia может работать на различных устройствах, от умных домашних устройств до ноутбуков, мобильных телефонов и других. Также считается, что он построен на совершенно новом ядре под названием «циркон», созданном Google, а не на ядре Linux, которое составляет основу Android и Chrome OS.

Недавнее обновление на веб-сайте Google Fuchsia«Политика языка программирования Fuchsia», в котором подробно объясняются соображения по выбору языка программирования для проекта Fuchsia. Согласно официальным документам, языки C/C++, Dart, Rust и Go являются языками-кандидатами, разработанными Fuchsia.В дополнение к стабильному статусу старых языков программирования C и C++, которые были признаны официальных разработчиков, Dart обошел новые языки программирования. Языки Rust и Go стали официальными официальными языками пользовательского UI-интерфейса.

Javascript 🆚 Дартс

объявление переменной

// javascript

var name = 'null仔'

// dart

var name = 'null仔'

Как и в Javascript, в Dart мы можем определять переменные, используя var.

Разница в том, что в Dart все переменные являются ссылочными типами, что означает, что все переменные являются объектами, поэтому Dart — полностью объектно-ориентированный язык.

Dart безопасен для типов, поэтому, когда вы определяете переменную с помощью ключевого слова var, это, по сути, ссылка на конкретный тип.

Например, приведенный выше код на самом деле является ссылкой на объект типа String, а содержимое этого объекта равно null.

В Dart объявите неинициализированную переменную, тип переменной можно изменить, а ее начальное значение равно null.

variable
variable

В Dart объявляется инициализированная переменная, и тип переменной не может быть изменен.

variable
variable

объявление константы

// javascript

const name = 'null仔';

// dart

const name = 'null仔';

Как и в Javascript, в Dart мы можем определять константы с помощью const.

В Dart вы также можете использовать final для определения констант.Поскольку в этой статье основное внимание будет уделено сходству с Javascript, я не буду здесь вдаваться в подробности.

constant
constant

строка шаблона

// javascript

const name = 'null仔';

const word = `My name is ${name}`;

// dart

const name = 'null仔';

const word = 'My name is $name';

Как и Javascript, Dart также поддерживает строки шаблонов, синтаксис:Переменная.

Если результатом выражения является объект, вызывается метод объекта toString().

template-string
template-string

стрелочная функция

// javascript

  const getName = (name) => name;

  getName('null仔');

// dart

  String getName(name) => name;

  getName('null仔');

Как и Javascript, Dart также поддерживает стрелочные функции.Если функция содержит только одно выражение, вы можете использовать метод стрелочного выражения для сокращения. Выражение, следующее за =>, будет возвращаемым результатом функции.

Оператор спреда

// javascript

  const list=[1,2,3,4,5];

  [0,...list,6];

// dart

  const list=[1,2,3,4,5];

  [0,...list,6];

Dart v2.3 представил Spread Operator, артефакт, который нам нравится использовать в Javascript, и его также можно использовать в Dart~ Что ж, приятно пахнет~

spread
spread

Параметры по умолчанию и необязательные параметры

// javascript

  function getInfo({name='null仔',age}){
    console.log(`大家好,我是${name},今年${age}岁`);
  }
  getInfo({age:18});

// dart

  void getInfo({name="null仔",age}){
    print('大家好,我是$name,今年$age岁');
  }
  getInfo(age:18);

Подобно Javascript, Dart поддерживает значения параметров функции по умолчанию и дополнительные параметры. Получить ~

default
default

асинхронные/ожидающие функции

// javascript

  async function getData(){

    const name= await new Promise((resolve)=>setTimeout(()=>resolve('null仔'),1000));

    console.log(name);  // null仔
  }
  getData();

// dart

  Future getData() async{

    String name =  await Future.delayed(Duration(seconds: 1),()=>'null仔');

    print(name);  // null仔
  }
  getData();

Как и Javascript, Dart также предоставляет синтаксический сахар async/await, что позволяет нам лучше справляться с асинхронными операциями.

Асинхронная функция Javascript возвращает объект Promise, а асинхронная функция Dart возвращает объект Future~

async
async

Каскадные функции (цепочка вызовов)

// javascript

new Promise((r) => {
  r(1)
})
  .then((res) => ++res)
  .then((res) => ++res)
  .then((res) => console.log(++res)) // 4

// dart

 List<int> list =

   []..addAll([1,2,3,4,5])
     ..replaceRange(0,1,[6])
     ..sort((a,b)=>a-b);

  print(list);  // [2, 3, 4, 5, 6]

В Javascript мы обычно реализуем цепные вызовы, вручную «возвращая это», а Dart предоставляет Cascade (каскадный оператор). Помогите нам реализовать цепные вызовы ~ действительно ароматно!

Cascade
Cascade

модуль импорта и экспорта импорта

И Javascript, и Dart используют импорт для импорта модулей, но разница в том, что Dart не нужно использовать экспорт для экспорта модулей.

// 完全导入

// javascript

import abc from "abc";
import * as xx from "abc";

// dart

import 'package:abc/abc';

// 部分导入

// javascript

import { xx } from "abc";

// dart

import 'package:abc/abc' show xxx; // 只导出其中一个对象/方法 xxx
import 'package:abc/abc' hide xxx; // 导出模块时不导出xxx

класс класс

//javascript

class Person{
  // 私有属性提案
  #age=0;
  // 构造函数及参数默认值
  constructor(name='null仔'){
    this.name=name;
  }
  // 实例方法
  getName(){
    console.log(this.name);
  }
  // 静态方法
  static say(){
    console.log(`hello world`);
  }
  // getter && setter
  get age(){
    return this.#age;
  }
  set age(value){
    this.#age=value;
  }
}

//dart

class Person{
  // 私有属性
  int _age;
  String name;
   // 构造函数及参数默认值
  Person({this.name='null仔'});
   // 实例方法
  void getName(){
    print(this.name);
  }
   // 静态方法
  static say(){
    print("hello world");
  }
  // getter && setter
  int get age =>this._age;
  set age(int value)=>this._age=value;
}
fx
fx

Машинопись 🆚 Дартс

Дженерики

Обобщения существуют как в Typescript, так и в Dart. Давайте кратко представим их с помощью простой универсальной функции~

// typescript

  function identity<T>(arg: T): T {
    return arg;
  };

  identity<String>('null仔'); // null仔

  identity<Number>(18); // 18

// dart

  T identity<T>(T arg){
    return arg;
  }

  identity<String>('null仔'); // null仔

  identity<int>(18);  // 18
fx
fx

Утверждение типа машинописного текста 🆚 Дротик как оператор

Утверждение типа можно использовать для ручного указания типа значения.

值 as 类型
as-dart
as-dart
as
as

Typescript Необязательная цепочка 🆚 Dart ?. оператор

В TypeScript 3.7 реализована одна из наиболее востребованных функций ECMAScript: опциональная цепочка!

Наконец, нет необходимости писать длинный и вонючий оператор && для выполнения промежуточных проверок свойств и нулевых/неопределенных суждений~

// before
if (foo && foo.bar && foo.bar.baz) {
  // ...
}
// after

if (foo?.bar?.baz) {
  // ...
}

Dart предоставляет оператор ?., давайте посмотрим~

// typescript

let foo;

console.log(foo?.bar?.baz);


// dart

var foo;

print(foo?.bar?.baz);
optional-chaining
optional-chaining

Typescript Nullish Coalescing 🆚 Оператор Dart ??

Еще одна предстоящая функция ECMAScript, реализованная в TypeScript 3.7, — это нулевой оператор объединения!

??оператор может иметь значение null или обработка undefined "откатывается" к значению по умолчанию!

// typescript

let x = foo ?? bar()

// 等价于

let x = foo !== null && foo !== void 0 ? foo : bar()

Dart предоставляет оператор ??, давайте посмотрим~

// typescript
  let age;

  function setAge() {
    age = 18;
  }

  age ?? setAge();

  console.log(age) // 18

// dart

  var age;

  void setAge() {
    age = 18;
  }

  age ?? setAge();

  print(age); // 18
nullish coalescing
nullish coalescing

Ссылаться на

Прошлое и настоящее языка Dart

постскриптум

Если вам нравится передняя часть так же, как и мне, и вы любите подбрасывать руками, пожалуйста, следуйте за мной и поиграйте со мной~ ❤️

адрес github, добро пожаловать в подписку~

блог

Мой блог, нажми на звездочку, не теряйся~

Нет публики

передний момент

前端时刻
передний момент