Dart 응용 프로그램에서 JavaScript 라이브러리 사용 방법

당신이 가장 좋아하는 JS 라이브러리를 떠나는 두려움을 겪은 적이 있습니까? 개발 창고에 Dart를 넣어야 합니까?우리는 더 이상 걱정하지 않습니다. 왜냐하면 Dart 팀은 당신이 가장 좋아하는 자바스크립트 라이브러리를 통합하는 방법을 제공했기 때문입니다!
이 솔루션은 js 패키지 형식으로 제공되며, 이 패키지는 자바스크립트 API 방법을 호출하는 에이전트를 제공합니다.본고에서 우리는 사용window 대상의 예시와 jQuery를 사용하는 실제 예시를 탐구하고자 한다.
이것은 용액을 포함하고 있다source code.

선결 조건

시작하기 전에 stagehand를 사용하여 웹 프로젝트를 구축합니다.

stagehand web-simple

pubspec에 다음 내용을 추가합니다.의존 항목의 yaml:

dependencies:
  js: ^0.6.0

그리고 실행pub get.웹 dev가 설치되어 있는지 확인합니다(pub global activate webdev.
이제 우리는 예시로 넘어갈 준비를 하고 있다.

창 객체 예

js 패키지를 설치하면 @JS() 주석을 공개하여 호스트 객체의 JavaScript API에 액세스하는 방식으로 사용합니다.
다음은 window 에서 호출 web/main.dart 에 사용되는 코드 세션입니다.

@JS() // Sets the context, which in this case is `window`
library main; // required library declaration called main, or whatever name you wish

import 'package:js/js.dart'; // Pull in our dependency

@JS('console.log') // This marks the annotated function as a call to `console.log`
external void log(dynamic str);

void main() {
  log('Hello world!'); // calling console.log() in JavaScript land
}

window.console.log()를 실행하고 로컬 호스트 URL에 접근하여 출력을 보십시오.업데이트를 보려면 파일을 저장하고 페이지를 다시 불러오기만 하면 됩니다!
주석이 있는 파일은 반드시 라이브러리 성명으로 시작해야 하며, 라이브러리 성명도 webdev serve 주석을 포함하고 있으며, 우리는 1-2행에서 주석을 보았다.첫 번째 주석은 매개변수가 없으므로 @JS() 객체에 대한 다른 주석의 컨텍스트를 설정합니다.따라서 이 선window에 도달하면 @JS('console.log')부터 window까지의 속성을 상세하게 설명하고 이 속성은 console방법을 가지고 있다.
다음은 컨텍스트를 log 로 설정한 또 다른 예입니다.

@JS('console') // Our `console` namespace
library main;

import 'package:js/js.dart';

@JS('log') // Setting the proxy to the `console.log` method
external void log(dynamic str);

void main() {
  log('Hello worlddd!');
}

파일은 window.console 명칭 공간으로 시작하기 때문에 console 방법의 다음 주석은 log 접두사를 포함하지 않습니다.console 메서드의 external 키워드는 Dart 외부에 이 메서드를 표시하는 데 사용되며, 그렇지 않으면 함수체가 필요합니다.또한 우리의 함수는 log의 방법과 동명이기 때문에 우리는 위의 주석을 완전히 삭제할 수 있다.

// @JS('log') // remove
external void log(dynamic str); 

주의: console에 있는 내장 속성만 접근하면 이 인터넷 패키지가 필요하지 않습니다.Dart의window 라이브러리를 사용하여 이 작업을 수행합니다.위의 코드 부분은 목적을 설명하는 데만 사용되기 때문에 dart:html 패키지는 외부 라이브러리를 사용할 때 역할을 발휘한다.

jQuery의 실제 예

jQuery를 사용하기 위해 스크립트 태그 요청 js 전에 가져오기 web/index.html:

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

다음 코드 세그먼트가 포함된 main.dart.js 파일을 만듭니다.

@JS()
library jquery;

import 'package:js/js.dart';

// new jQuery() invokes JavaScript `new jQuery()`
@JS()
class jQuery {
  external factory jQuery(String selector);
  external int get length; // We get this from the jQuery instance
}

재구성web/jquery.dart을 테스트해 보겠습니다.

import './jquery.dart';

void main() {
  print(jQuery('#output')); // [object Object]
  print(jQuery('#output').length); // 1
}

main.dart 및 css() 방법으로 더 재미있는 일을 해 봅시다.

@JS()
class jQuery {
  external factory jQuery(String selector);
  external int get length;
  external jQuery css(Map options);
  external jQuery animate(Map options);
}

이 두 가지 방법을 호출하면 JS 기반 API와 같은 jQuery 인스턴스를 반환합니다.
현재, 이것은 예상대로 작동하지 않을 것이다. 왜냐하면 animate() 매개 변수는 options 유형이 필요하기 때문이다.DartMap 객체는 JavaScript에서 불투명하기 때문에 전달할 수 없습니다.다시 말하면 원하는 내용을 포함하지 않는 대상을 얻을 수 있습니다.
이를 위해서는 필요한 키를 사용하여 공장 구조 함수를 정의해야 합니다.

@JS()
@anonymous // This annotation is needed along with the unnamed factory constructor
class CssOptions {
  external factory CssOptions({ backgroundColor, height, position, width });
  external String get backgroundColor;
  external String get position;
  external num get height;
  external num get width;
}

그리고 Map 외부 메소드 선언을 다음과 같이 수정합니다.

external jQuery css(CssOptions options);

애니메이션 방법에 대해 동일한 작업을 수행합니다.

@JS()
@anonymous
class AnimateOptions {
  external factory AnimateOptions({left, top});
  external dynamic get left;
  external dynamic get top;
}

그리고 css() 외부 메소드 선언을 다음과 같이 수정합니다.

external jQuery animate(AnimateOptions options);

다음과 같이 animate() 의 방법을 사용할 수 있습니다.

import './jquery.dart';

void main() {
  jQuery('#output')
      .css(CssOptions(
          backgroundColor: 'green',
          height: 100,
          position: 'relative',
          width: 100))
      .animate(AnimateOptions(left: 100, top: 100));
}

다음 결과가 기대됩니다.

결론

Dart 개발자로서 자바스크립트 라이브러리 생태계에 대한 접근을 유지하는 동시에 효율을 유지할 수 있다는 것을 알고 있습니다. 이것은 새로운 라이브러리가 여전히 당신의 손에 있기 때문에 더욱 좋아질 것입니다.
이 솔루션은 web/main.dart 개체 아래에 네임스페이스가 있는 모든 JavaScript 라이브러리에 적용되며 99% 를 덮어씁니다.
여느 때와 마찬가지로, 나는 이 문장이 매우 통찰력이 있기를 바란다. 너는 오늘 새로운 것을 배웠다.이것은 온전한 용액을 포함하고 있다the gist.
다음은 Vue의 확장 예입니다.js:

Vue。js – Dart 시작 섹션 1

제메인 오봉・ 2018년 11월 5일・ 5분 읽기

#dart #javascript #showdev #vue

한층 더 읽다

js package on Pub

Free Dart screencasts on Egghead.io

나누는 게 관심이에요.🤗

만약 당신이 이 글을 즐겨 읽는다면, 각종 사교 채널을 통해 공유하세요.Dart의 비디오도 볼 수 있습니다(시계 아이콘 클릭).
Subscribe to my email newsletter 무료 35페이지의 Dart 전자책을 다운로드하여 시작하고 새로운 내용이 발표될 때 알림을 받습니다.
좋아하다😍 Dart에 대한 자세한 내용은