순수 JavaScript를 사용하여 프런트엔드 개발에서 싱글톤 패턴 만들기

Question

번역: Node.js 라우팅을 사용하여 백엔드에서 HTML 파일을 제공하는 프로젝트(순수한 프런트엔드 웹 애플리케이션)가 있습니다.

router.get("/", (req, res) => {
    res.sendFile(views_dir + "index.html");
});

router.get("/login", (req, res) => {
    res.sendFile(views_dir + "login.html");
});

그리고 JS 파일을 정적 파일 app.use(express.static(path.join(__dirname, '/frontend')))로 제공합니다. 여기서 /frontend 폴더에는 HTML 파일을 포함한 모든 프런트엔드 파일이 포함됩니다.

지금은 프론트엔드 폴더에 model.js라는 파일이 있고 모든 페이지에서 공유하는 데이터를 보유하는 싱글톤 패턴을 구현하려고 합니다(예: 사용자가 현재 로그인되어 있는지 여부):

const Model = (함수 () {
    예를 들어보자;

    함수 초기화() {

        isLogged = false로 설정합니다.

        반품 {
            getIsLogged: 함수 () {
                isLogged를 반환합니다.
            },
            setIsLogged: 함수(l) {
                isLogged = l;
            }
        }
    }
    반품 {
        getInstance: 함수() {
            if(!인스턴스) {
                인스턴스 = 초기화();
            }
            반환 인스턴스;
        }
    }
})();

그러나 사용자가 리디렉션되면 model.js를 백엔드에서 다시 가져와서 이전 페이지의 모델 변경 사항을 모두 덮어쓰는 것 같습니다. (예를 들어 사용자가 로그인하면 모델의 isLogged 변수를 true로 변경하고 '/'로 리디렉션하면 모델이 새로 고쳐지고 덮어쓰여집니다.)

그냥 사용하는 방법 JavaScript가 이러한 요구 사항을 구현합니까?

res.sendFile(views_dir + "index.html");에 문제가 있는 것 같습니다. 애플리케이션을 새로운 상태로 새로 고치고 이전 버전의 js를 저장하지 않습니다. 파일 상태, 이를 피할 수 있는 방법이 있나요? js 파일을 한 번만 요청하시겠습니까?

Answer 1

@Jared의 도움으로 이 문제를 해결했습니다.

모델의 현재 상태를 저장하고 다른 페이지로 리디렉션할 때 다시 로드하기 위해 localStorage를 사용했습니다.

으아아아

궁극적으로 저는 localStorage 객체에서 데이터를 읽고 저장하는 save...와 load...라는 두 가지 주요 기능을 가지고 있습니다. Jared가 댓글에서 말했듯이 JSON은 함수를 문자열화할 수 없으므로 모델의 모든 데이터(예: isLogged 변수)를 저장하는 data라는 개체를 만들었습니다.

이제 모델의 데이터에 액세스하려고 할 때마다 먼저 모델의 인스턴스를 얻습니다. let model = Model.getInstance() 그런 다음 반환된 init 함수에서 메서드에 액세스할 수 있습니다. Model 인스턴스를 요청하면 먼저 현재 인스턴스가 초기화되었는지 확인합니다. 초기화되지 않은 경우 load_localStorage 함수를 호출하여 localStorage에서 데이터를 읽어 data 변수에 저장합니다.

다른 페이지로 리디렉션하기 전에, 리디렉션된 페이지가 이전에 저장된 상태를 읽을 수 있도록 Model 인스턴스의 saveData 함수를 호출하여 데이터 객체를 localStorage에 저장합니다.

HTML 파일에 다음과 같은 js 파일을 포함했습니다: <script src="./../model/model.js"></script>.

더 읽기 쉬운 코드를 포함하는 더 나은 솔루션이 있을 것이라고 확신하지만 이 방법은 제게는 충분히 효과적입니다. :)