순수 JavaScript를 사용하여 프런트엔드 개발에서 싱글톤 패턴 만들기
P粉986860950
P粉986860950 2023-08-03 12:09:44
0
1
555
<p>번역: Node.js 라우팅을 사용하여 백엔드에서 HTML 파일을 제공하는 프로젝트(순수한 프런트엔드 웹 애플리케이션)가 있습니다. </p> <pre class="brush:js;toolbar:false;">router.get("/", (req, res) => { res.sendFile(views_dir + "index.html"); }); router.get("/login", (req, res) => { res.sendFile(views_dir + "login.html"); }); </pre> <p>그리고 JS 파일을 정적 파일 app.use(express.static(path.join(__dirname, '/frontend')))로 제공합니다. 여기서 /frontend 폴더에는 HTML 파일을 포함한 모든 프런트엔드 파일이 포함됩니다. <br /><br />지금은 프론트엔드 폴더에 model.js라는 파일이 있고 모든 페이지에서 공유하는 데이터를 보유하는 싱글톤 패턴을 구현하려고 합니다(예: 사용자가 현재 로그인되어 있는지 여부):</p><p><code></code><strong></strong></p> <pre class="brush:js;toolbar:false;">const Model = (함수 () { 예를 들어보자; 함수 초기화() { isLogged = false로 설정합니다. 반품 { getIsLogged: 함수 () { isLogged를 반환합니다. }, setIsLogged: 함수(l) { isLogged = l; } } } 반품 { getInstance: 함수() { if(!인스턴스) { 인스턴스 = 초기화(); } 반환 인스턴스; } } })(); </pre> <p><strong>그러나 사용자가 리디렉션되면 model.js를 백엔드에서 다시 가져와서 이전 페이지의 모델 변경 사항을 모두 덮어쓰는 것 같습니다. (예를 들어 사용자가 로그인하면 모델의 isLogged 변수를 true로 변경하고 '/'로 리디렉션하면 모델이 새로 고쳐지고 덮어쓰여집니다.) <br /><br /> 그냥 사용하는 방법 JavaScript가 이러한 요구 사항을 구현합니까? <br /><br />res.sendFile(views_dir + "index.html");에 문제가 있는 것 같습니다. 애플리케이션을 새로운 상태로 새로 고치고 이전 버전의 js를 저장하지 않습니다. 파일 상태, 이를 피할 수 있는 방법이 있나요? js 파일을 한 번만 요청하시겠습니까? <br /></strong></p><p><code></code></p>
P粉986860950
P粉986860950

모든 응답(1)
P粉764785924

@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>.

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


최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿