小编Yur*_*riy的帖子

我已经阅读了很多关于服务层和控制器之间差异的理论,我对如何在实践中实现这一点有一些疑问.服务层和控制器的一个答案:谁负责什么？说:

我尝试限制控制器执行与验证http参数相关的工作,决定使用什么参数调用什么服务方法,在httpsession或请求中放入什么,重定向或转发到哪个视图,或类似的Web相关内容.

来自http://www.bennadel.com/blog/2379-a-better-understanding-of-mvc-model-view-controller-thanks-to-steven-neiland.htm:

红旗:如果出现以下情况,我的控制器架构可能会变坏:

Controller向服务层发出过多请求.Controller向服务层发出许多不返回数据的请求.Controller在不传递参数的情况下向Service层发出请求.

目前我正在使用Spring MVC开发一个Web应用程序,我有这样的方法来保存更改的用户的电子邮件:

/**
     * <p>If no errors exist, current password is right and new email is unique,
     * updates user's email and redirects to {@link #profile(Principal)}
     */
    @RequestMapping(value = "/saveEmail",method = RequestMethod.POST)
    public ModelAndView saveEmail(
            @Valid @ModelAttribute("changeEmailBean") ChangeEmailBean changeEmailBean,
            BindingResult changeEmailResult,
            Principal user,
            HttpServletRequest request){

        if(changeEmailResult.hasErrors()){
            ModelAndView model = new ModelAndView("/client/editEmail");
            return model;
        }
        final String oldEmail = user.getName();
        Client client = (Client) clientService.getUserByEmail(oldEmail);
        if(!clientService.isPasswordRight(changeEmailBean.getCurrentPassword(), 
                                          client.getPassword())){
            ModelAndView model = …

有一个TypeScript,Babel,React和Karma示例.

Webpack配置包含带有ts-loader .tsx?文件的babel-loader .

请解释为什么需要它？为什么ts-loader不够用？

在我的项目中，我使用webpack和npm。我安装了moment.js ：npm install moment。然后，我要将其导入到我的app.js文件中：import moment from "moment"。

但这是行不通的。我得到：无法解决...

我尝试let moment = require('moment');但出现相同的错误。

但是我可以在我的webpack.config.js文件中要求它而不会出现错误。

我的app.js文件位于 /myapp/frontend/app.js

我的webpack.config.js文件位于：/myapp/webpack.config.js

因此，请解释为什么我不需要在app.js中花时间，我该怎么做？

我的配置文件：

const webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV || "development"
const path = require('path');

//example of successfull importing
let moment = require('moment');
console.log(moment(new Date()));

module.exports = {
    context: __dirname + "/frontend",
    entry: {
        app:"./app"
    },
    output: {
        path: path.resolve(__dirname,"./public/js"),
        publicPath:"/public/js/",//public path in internet
        filename: "build.js"
    },

    watch: NODE_ENV == "development",
    watchOptions:{
        aggregateTimeout:100//default = 300 …

我向输入添加了几个事件侦听器：

['input', 'keydown'].forEach(eventName => {
   document.getElementById('my-input').addEventListener(eventName, e => {
      console.log(`${eventName} event is handled');
   })
})

我还向文档添加了突变观察者：

const mutationObserver = new MutationObserver(mutationRecords => {
   console.log('Handled mutation records:', mutationRecords);
});

mutationObserver.observe(document, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true
});

如果我运行此代码，我会看到下一个输出：

keydown event is handled

input event is handled

Handled mutation records: ...

如您所见，突变观察者的回调在最后被调用。我认为这是预期的行为，我将解释我如何看待这一点：

当我在输入字段中输入符号时，该输入的所有注册事件侦听器都会添加到回调队列中。之后，突变观察者回调也被添加到回调队列中 - 结果我们看到突变观察者回调在事件侦听器回调之后执行

但是如果我将事件侦听器添加到文档中：

['input', 'keydown'].forEach(eventName => {
   document.addEventListener(eventName, e => {
      console.log(`${eventName} event is handled');
   })
})

我看到下一个输出：

keydown event is handled …

我在我的输入中添加了事件监听器:

['input', 'keypress', 'keyup', 'keydown'].forEach(eventName => {
    document.getElementById('my-input').addEventListener(eventName, (e) => {
      // handle eventName for input
   });
});

我想在执行所有已注册事件的回调后执行一些代码.有可能的？如果是,请解释如何做到这一点

编辑:

但我不知道会触发哪些事件.例如,用户聚焦输入,然后按下Esc,在这种情况下,只会触发keyup和keydown事件.

编辑2: 我的任务是处理页面上的用户交互.我应该处理用户之间的交互,并在一次特定的交互之后(专注于字段,输入字符,击键),并且在发生此交互的所有回调之后,我应该执行一些代码.

1. 用户关注inout =>焦点回调被执行

2. 应该执行一些代码

3. 用户按下Esc => keydown并执行keyup回调

4. 应该执行一些代码

5. 用户在field => input,keypress,keyup,keydown回调中输入符号

6. 应该执行一些代码