Question

我写了这段愚蠢的代码。（我还在学Dart）。我需要有人的帮助来指导我这个代码可以更有效率。特别是数据在DOM上的显示方式。

这是一个简单的代码，点击书籍API，在浏览器上显示响应。

import 'dart:html';
import 'dart:convert';

void onDataLoaded(String responseText) {
  var jsonString = responseText;
  Map data = JSON.decode(responseText);
  print(jsonString);
  querySelector('#mn_div').children.clear();
  var books = (
      data['items'] as List
    ).forEach((Map item) {
        DivElement first = new DivElement();
        DivElement forImg = new DivElement();
        ParagraphElement title = new ParagraphElement();
        ParagraphElement publisher = new ParagraphElement();
        ParagraphElement publishedDate = new ParagraphElement();
        ParagraphElement pagecount = new ParagraphElement();
        ParagraphElement language = new ParagraphElement();
        ParagraphElement description = new ParagraphElement();
        ParagraphElement athr = new ParagraphElement();
        ParagraphElement spc = new ParagraphElement();
        ParagraphElement tnail = new ParagraphElement();
        HRElement h = new HRElement();

       print('Thumbnail: ${item['volumeInfo']['imageLinks']['thumbnail']}');


        var thumb_img=item['volumeInfo']['imageLinks']['thumbnail'];
        ImageElement image = new ImageElement(src:thumb_img);

        querySelector('#mn_div').children.add(first);
        //first.classes.add(mdiv); 
        first.children.add(tnail);
        first.children.add(h);
        forImg.classes.add(".mdiv");
        forImg.children.add(image);
        tnail.children.add(forImg);



        print('Title: ${item['volumeInfo']['title']}');
        title.text = 'Title: ${item['volumeInfo']['title']}';
        tnail.children.add(title);

        print('Publisher: ${item['volumeInfo']['publisher']}');
        publisher.text = 'Publisher: ${item['volumeInfo']['publisher']}';
        tnail.children.add(publisher);

        print('Published Date: ${item['volumeInfo']['publishedDate']}');
        publishedDate.text = 'Published Date: ${item['volumeInfo']['publishedDate']}';
        tnail.children.add(publishedDate);


        print('Page count: ${item['volumeInfo']['pagecount']}');
        pagecount.text = 'Pages: ${item['volumeInfo']['pageCount']}';
        tnail.children.add(pagecount);

        print('Language: ${item['volumeInfo']['language']}');
        language.text = 'Language: ${item['volumeInfo']['language']}';
        tnail.children.add(language);

        print('Description: ${item['volumeInfo']['description']}');
        description.text = 'Description: ${item['volumeInfo']['description']}';
        tnail.children.add(description);
    });
} 

main() {
   print('Inside main');
  querySelector('#gbqfb').onClick.listen(loadData);
  querySelector('#gbqfq').onChange.listen(loadData);


}

void loadData(Event e) {
  print('Inside loadData');
  var phr=querySelector('#gbqfq').value;
  var url = "https://www.googleapis.com/books/v1/volumes?q=" + phr;
  var request = HttpRequest.getString(url).then(onDataLoaded);
}

Answer 1

您可以使用Polymer的模板功能。可能没有更高效但更好地分离模型/控制器和视图以及可能更好的可维护性。

示例如何

借鉴Seth Ladd's Dart polymer-examples

<link rel="import" href="my_nested.html">

<polymer-element name="my-test">
  <template>
    <h2>Fruits</h2>
    <ul>
      <template repeat="{{fruit in fruits}}">
        <li is="my-nested" fruit="{{fruit}}"></li>

        <template if="{{ fruit.length <= 5 }}">
          <li>Short name: [{{fruit}}]</li>
        </template>

      </template>
    </ul>
  </template>
  <script type="application/dart" src="my_test.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';

@CustomTag('my-test')
class MyTest extends PolymerElement {
  final List fruits = toObservable(['apples', 'oranges', 'pears']);

  MyTest.created() : super.created();
}

聚合物元素使用ShadowDOM，需要对CSS进行一些特殊考虑 A Guide to Styling Elements

另一种类似方法Angular.dart

Dart代码：增强，什么是HTML DOM显示的最佳和最有效的方式

1 个答案: