Question

我当然使用Ember 2.7.0和ember-cli。

我来自Rails，我曾经把“assets / application.js”放在我的所有javascript中，例如：

var ready = function () {

    myFunction('test');

    $('#btn-fluid').on('click', function () {
        $('#myPage').toggleClass('container')
    });
}

document.addEventListener("turbolinks:load", function () {
    ready()
})

现在有了Ember我必须把这个代码放在我的应用程序中吗？

我在网上看到使用：

Ember.Application.create({
   ready: function () {
});

但我不知道如何使用此代码：或许 app.js ，但我已经拥有：

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

如果我在root中创建另一个文件，例如“mycode.js”就像这样：

import {Ember} from 'ember';

let myCode;

myCode = Ember.Application.create({
  ready: function () {
    console.log('Test!');
  }
});

export default myCode;

并使用 ember-cli-build.js 在应用程序中导入它：

... app.import（ 'mycode.js'）;

它使用我的代码编译大js，但它在我的所有准备函数中都不起作用。

怎么办？

我必须使用组件？也许是一个应用程序组件？

顶级表演的最佳Ember方式是什么？

Answer 1

要开始使用Ember，必须了解Ember的结构和Ember的工作方式，只需要使用Ember指南即可获得最佳性能。我将向您解释一些步骤和示例，我希望它能帮助您了解更多。

首先检查此图片

<强> 1。查看Ember Guides和API Docs

此外，在Github上查看此存储库也是一件好事。 https://github.com/emberjs/guides/这将帮助开发人员习惯Ember。

<强> 2。安装Ember-CLI

Ember-CLI是一个命令行界面，专为创建强烈支持约定优于配置的Ember应用程序而设计。

第3。安装Ember Inspector Extension

Ember Inspector Extension对于调试您的Ember应用程序非常有用。您也可以在Google Play上找到Chrome应用程序。

<强> 4。阅读“从Rails到Ember”

既然您了解Ruby on Rails并且您是开发人员，那么you read the tips compiled in From Rails To Ember至关重要。

<强> 5。了解Ember.Component

想到Ember组件的一个简单方法是它是控制器和视图的组合，是隔离的和可重用的：

您应该将所需的状态传递给组件。

组件应与其父作用域（例如，控制器）通信   或其他组成部分）通过发送行动。

父范围（例如，控制器或其他组件）与之通信   组件通过更改它已传递给的组件的数据状态   成分

作为一个例子，我将解释你代码的某些部分。你有这个

 $('#btn-fluid').on('click', function () {
        $('#myPage').toggleClass('container')
    });

可能这是您的HTML代码

<a id="btn-fluid">Whatever for CLICK </a>
<div id="myPage" class="">dummy text </div>

但是，在Ember中，在路由或控制器中使用Actions定义动作函数的最佳做法是，例如，您在Ember中的代码将是这样的：

myPage: null,
actions: {
    clickOnbtnFliud() {
        this.set('myPage', 'container');
    }
  }

和控制器相同模板中的HTML就像

<a {{action 'clickOnbtnFliud'}}>Whatever for CLICK </a>
<div class="{{myPage}}">dummy text </div>

总结中，您可以根据需要使用组件，这是您的Ember应用程序的最佳实践，但您需要了解创建该组件的最佳位置。

您很少需要编辑Ember-Cli-Build.js，除非您想插入额外的插件库或...但我不建议您插入内部JS文件，因为您只需将其转换为Ember Native代码。例如，您不需要执行此操作app.import('mycode.js');，但您可以简单地创建Route并将您的自定义代码（例如我之前作为示例）添加到Route或Controller或Components中。

我可以向您保证，如果您按照您在Ember网站的指南中找到的方式使用Ember，您无需担心性能。只需尝试使用Ember Native方式来实现您的代码。

最后一句话，尽可能保持自己的动力使用EmberAddons而不是第三方插件，并始终选择最好的更新插件而不是全部。搜索最好的插件和流行的插件并使用它。

希望本指南能为您提供帮助。

实现自定义Javascript代码的最佳实践是什么？我应该从哪里开始使用Ember？

1 个答案: