Skip to content

Latest commit

 

History

History
104 lines (100 loc) · 2.92 KB

20210521.md

File metadata and controls

104 lines (100 loc) · 2.92 KB
Raw

87 - Tyga

2021. 05. 21

  1. Flutter Web 자바스크립트 쓰기 
    window.doStripePayment = (name) => {
// Your code
}

    <head>
<script src="app.js" defer></script>
</head>

    import 'dart:js' as js;

js.context.callMethod('doStripePayment', ['John Doe']);

https://codeburst.io/how-to-use-javascript-libraries-in-your-dart-applications-e44668b8595d 2. JS 패키지로 자바 스크립트 쓰기 - JQuery 쓰기 index.html, main.dart.js 이전에 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> web/jquery.dart
@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 jQuery instance } main.dart import './jquery.dart'; void main() { print(jQuery('#output')); // [object Object] print(jQuery('#output').length); // 1 } 3. css()와 animate() method 써 보기 @JS() class jQuery { external factory jQuery(String selector); external int get length; external jQuery css(Map options); external jQuery animate(Map options); } - options 매개변수에서 Map 형태가 필요하므로 작업이 예상대로 작동하지 않는다. - Javascript에서는 opaque이기 때문에, Dart Map 객체를 전달할 수 없다. - 즉, 예쌍한 내용을 포함하지 않는 개체를 얻게 된다. - 작동하게 하기 위해서는, key들과 함께 factory constructor를 정의해 주어야 한다.

```
@JS()
@anonymous // needed along with 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;
}
```
- css() 외부 method 선언을 다음과 같이 수정한다
```
external jQuery css(CssOptions options);
```
- animated method에도 똑같이 해 주자.
```
@JS()
@anonymous
class AnimateOptions {
external factory AnimateOptions({ left, top });
external dynamic get left;
external dynamic get top;
}
```
- animate() 외부 method 선언을 다음과 같이 수정한다.
```
external jQuery animate(AnimateOptions options);
```
- main.dart
```
import './jquery.dart';
void main() {
    jQuery('#output')
    .css(CssOptions(
    backgroundColor: 'green',
    height: 100,
    position: 'relative',
    width: 100))
    .animate(AnimateOptions(left: 100, top: 100));
}
```