Question

我有以下应用程序实现与HTML5 window.sessionStorage对象交互的会话服务。它运作良好。我正在尝试使用会话工厂执行与服务相同的操作，但它不起作用。

我的应用程序包含以下文件：

的index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Services and Factories</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="sessionController as vm">
    <div class="container">
        <h1>Services and Factories</h1>
        <div class="form-group row">
            <div class="col-sm-4">
                <label>Name</label>
            </div>
            <div class="col-sm-8">
                <input type="text" class="form-control" ng-model="vm.model.name">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-4">
                <label>Nickname</label>
            </div>
            <div class="col-sm-8">
                <input type="text" class="form-control" ng-model="vm.model.nickname">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-8 col-sm-offset-4">
                <input ng-click="vm.setServiceSession()" type="button" class="btn btn-primary" value="Save with Service" />
                <input ng-click="vm.getServiceSession()" type="button" class="btn btn-default" value="Retrieve from Service" />
                <input ng-click="vm.clearServiceSession()" type="button" class="btn btn-default" value="Clear from Service" />
            </div>
        </div>
        <pre>{{vm.model | json}}</pre>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/sessionController.js"></script>
    <script src="app/sessionService.js"></script>
</body>
</html>

应用/ app.js

angular.module('app', []);

应用/ sessionController.js

angular.module('app').controller('sessionController', ['sessionService', sessionController]);

function sessionController(sessionService) {
    var vm = this;

    vm.getServiceSession = function() {
        vm.model = {
            name: sessionService.get('name'),
            nickname: sessionService.get('nickname'),
            status: 'Retrieved by service on ' + new Date()
        };
    };

    vm.setServiceSession = function() {
        sessionService.save('name', vm.model.name);
        sessionService.save('nickname', vm.model.nickname);
        vm.getServiceSession();
    };

    vm.clearServiceSession = function() {
        sessionService.clear();
        vm.getServiceSession();
    };
}

应用/ sessionService.js

angular.module('app').service('sessionService', ['$window', sessionService]);

function sessionService($window) {
    this.save = save;
    this.get = get;
    this.clear = clear;

    function save(key, value) {
        $window.sessionStorage.setItem(key, value);
    }

    function get(key, value) {
        return $window.sessionStorage.getItem(key);
    }

    function clear() {
        $window.sessionStorage.clear();
    }
}

会话服务运作良好。然后我尝试添加会话工厂来执行与会话服务相同的操作，但一切都停止工作。我添加以下文件：

应用/ sessionFactory.js

angular.module('app').factory('sessionFactory', ['$window', sessionFactory]);

function sessionFactory($window) {
    return {
        save: save,
        get: get,
        clear: clear
    };

    function save(key, value) {
        $window.sessionStorage.setItem(key, value);
    }

    function get(key, value) {
        return $window.sessionStorage.getItem(key);
    }

    function clear() {
        $window.sessionStorage.clear();
    }
}

我修改了：

index.html （为Factory和sessionFactory脚本添加3个新按钮）

<div class="form-group row">
            <div class="col-sm-8 col-sm-offset-4">
                <input type="button" class="btn btn-primary" value="Save with Factory" ng-click="vm.setFactorySession()" />
                <input type="button" class="btn btn-default" value="Retrieve from Factory" ng-click="vm.getFactorySession()" />
                <input type="button" class="btn btn-default" value="Clear from Factory" ng-click="vm.clearFactorySession()" />
            </div>
        </div>
...
<script src="app/sessionFactory.js"></script>

sessionController.js （添加sessionFactory）

angular.module('app').controller('sessionController', ['sessionService', 'sessionFactory', sessionController]);

function sessionController(sessionService, sessionFactory) {
...
var mySessionFactory = new sessionFactory();

    vm.getFactorySession = getFactorySession;
    vm.setFactorySession = setFactorySession;
    vm.clearFactorySession = clearFactorySession;

    function getFactorySession() {
        vm.model = {
            name: mySessionFactory.get('name'),
            nickname: mySessionFactory.get('nickname'),
            status: 'Retrieved by Factory on ' + new Date()
        };
    }

    function setFactorySession() {
        mySessionFactory.save('name', vm.model.name);
        mySessionFactory.save('nickname', vm.model.nickname);
        getFactorySession();
    }

    function clearFactorySession() {
        mySessionFactory.clear();
        getFactorySession();
    }
}

Answer 1

使用new sessionFactory()时，您不需要使用factory。

相反，请使用sessionFactory.get('name')，它会起作用。

这是service和factory之间的主要区别。

检查this blog post以获取更多见解。

Answer 2

由于工厂和服务是单一的，您不需要使用new。只需删除它并执行相同的操作。

删除：

var mySessionFactory = new sessionFactory();

一切顺利。

实现会话工厂

2 个答案: