Question

我开始阅读有关模块，组件，指令的内容。我想请你检查代码并说明我如何改进它。对我来说最重要的是弄清楚如何提高此代码的透明度。我还想学习如何将此代码拆分为文件，以及在这种情况下它应该如何看起来像文件结构。我听说我应该为组件创建一个文件，但它应该如何在内部看？

我真的很感激你的帮助。

因为程序员生命中最重要的是代码审查！：）

var App = angular.module('TodoListApp', ['dndLists', 'app.navbar']);

https://gist.github.com/Turqus/2a791c6b86adfc8b6732711eaec2e23d

主应用程序中的

：

tesseract --help-psm

Answer 1

首先，我建议您到这里学习如何使用webpack： https://webpack.github.io/

在您学习如何捆绑文件之后，您应该从js文件中分离模板并使用templateUrl加载模板 - 您可以使用webpack模板加载器 - 效果非常好。

然后为了进一步改进它，您可以学习使用javascript导出（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export）功能并将文件中的代码分开。

我喜欢以下目录结构（例如，您可以使用navbar代替my-component-name）：

/ my-component-name - 目录

my-component-name.component.js - 包含我的组件绑定和templateUrls，在这里我们还为该特定组件导入控制器。

my-component-name.controller.js - 设置组件的控制器

my-component-name.html - template

my-component-name.scss / less - 包含该特定组件的隔离样式的less / sass文件 - 包含在my-component-name {...}
中
index.js - 包含所有代码组合声明的角度模块，所有导入（组件，服务，指令）和依赖项。

index.js示例（您可以将其命名为navbar-module.js）：

import NavbarComponent from './navbar.component'; // <- here you import component

const NavbarModule = angular
  .module('navbar', [])
  .component('navbar', NavbarComponent) // <- here you define your component
  .name;
export default NavbarModule;

navbar.component.js示例：

import templateUrl from './navbar.html';
import controller from './navbar.controller.js'

const NavbarComponent = {
  bindings: {
    user: '<'
  },
  templateUrl, // just a shorthand for writing templateUrl: templateUrl
  controller,   // same as above
}
export default NavbarComponent;

最后是navbar.controller.js：

class NavbarController {
    constructor($scope, $timeout) {
      this.$scope = $scope; 
      this.$timeout = $timeout;
    }

    $onInit() {
      // set up your on init code here
      this.toggle = true;
    }

    // set up your functions on controller - they will behave same and you will be able to access them via $ctrl.activeMenu() or $ctrl.blockClosingList() in your templates
    activeMenu (name, $event) {
          this.blockClosingList($event);
          if (this.toggle === true && this.$scope.name == name) {
            this.toggle = !this.toggle;
          }
          else if (this.toggle === false) {
            this.toggle = !this.toggle;
          }

          this.$scope.name = name;
        }


    blockClosingList($event) {
       $event.stopPropagation();
    }
}

NavbarController.$inject = ['$scope', '$timeout']; // inject here and put $scope parameter in your constructor
export default NavbarController;

navbar.html - 只需使用您的HTML代码就可以正常使用。

如果您需要创建一些内部函数并保持对此（控制器）的访问，您可以使用箭头函数而不是function (param) {...}只使用(param)=>{...}，在括号内您将拥有控制器的范围。< / p>

还有一件事 - 尽可能多地隔离你的组件，并尝试通过$ emit / $ broadcasts与父组件进行通信，而不是像你的例子那样需要父组件。

请记住，我上面写的内容没有经过测试，很可能有错误。

事实上，关于AngularJS中基于组件的架构的最佳读物可以在这里找到，Todd Motto的风格指南：

https://github.com/toddmotto/angularjs-styleguide

AngularJS中的分离组件和代码视图

1 个答案: