윅스 (Wix) 코딩 - 자바스크립트 (JavaScript) (Wix Code: JavaScript Support)

윅스 (Wix) 코딩 - 자바스크립트 (JavaScript) (Wix Code: JavaScript Support)

 

 

 

설명)

 

윅스 코드(Wix Code)는 자바스크립트(JavaScript) 및 다음과 같은 몇 가지 특수 기능 작업을 지원합니다.

- 새로운 ES2015 기능 지원

- 새 모듈 지원

- 자바스크립트(JavaScript) Fetch API 지원

- 웹 모듈을 사용하여 백엔드와 프론트엔드간에 자연스럽게 자바스크립트(JavaScript) 코드 공유

 

 

ES2015 기능 지원 (ES2015 Feature Support)

ES2015는 자바스크립트(JavaScript) 용 ECMAScript 표준의 최신 버전입니다. 2009년 이래로 언어 및 주요 업데이트에 대한 중요한 업데이트입니다.

윅스 코드(Wix Code)는 백엔드와 프론트엔드에서 다음을 포함하여 새로운 ES2015 구문을 지원합니다.

- 약속/프로미스(Promises)

- 화살표 기능

- 할당 소멸

- let 및 const 선언

브라우저는 점진적으로 ES2015 표준을 채택하고 있습니다. ES2015 표준이 완전히 구현될 때까지 ES2015 코드를 ES5로 옮겨서 현재 브라우저에서 실행할 수 있습니다.

윅스 코드(Wix Code)는 원본 맵을 지원하므로 브라우저가 변환된 ES5 코드를 실행하더라도 브라우저의 개발자 도구에서 ES2015 소스 코드를 디버깅 할 수 있습니다.

 

 

 

향후 ES 버전 지원 (Future ES Versions Support)

윅스 코드(Wix Code)는 약속/프로미스(Promise) 작업을 위해 async/await를 지원합니다.

 

 

모듈 지원 (Module Support)

노트 :

사이트 구조 사이드 바의 공용 또는 백엔드 섹션에 있는 파일에서만 함수를 내보낼 수 있습니다. 페이지 또는 팝업 파일에서 함수를 내보낼 수 없습니다.

 

 

 

윅스 코드(Wix Code)는 자바스크립트(JavaScript)의 ES2015 버전에 포함된 기본 모듈 기능을 지원합니다.

 

ES2015 모듈 기능을 사용하려면 ES2015 모듈 구문을 따라야합니다. 모듈에서 특별히 내보낸 항목만 다른 파일에 노출됩니다. 모듈의 다른 모든 항목은 모듈 내부에만 있습니다.

 

예제 :

// Filename - public/amodule.js
export function aFunction() {
// Only this function is exposed to other files.
    return doSomething() + " or other";
}
function doSomething() {
// This function is internal to the amodule.js module.
    return "Do something";
}

 

 

 

모듈의 항목을 참조하려면 먼저 항목을 가져와야합니다.

 

import {aFunction} from 'public/amodule.js';

 

 

그런 다음 참조할 수 있습니다.

 

console.log(aFunction());
// Logs: "Do something or other"

 

 

항목을 모듈에서 기본값으로 내보낼 수 있습니다.

 

// Filename - public/amodule.js
export default function aFunction() {
    return "Do Something";
}

 

 

기본 항목을 가져오려면 중괄호 {}가 없는 import를 사용하십시오. 기본 함수는 가져올 때 어떤 이름으로도 지정할 수 있습니다. 이 경우 aFunction이 amodule.js의 기본 내보낸 항목이기 때문에 doSome이 aFunction에 지정됩니다.

 

import doSome from 'public/amodule.js';

 

 

모듈에서 항목을 가져오면 전체 모듈 파일이 실행됩니다. 즉, 모듈에 함수 또는 변수 선언의 일부가 아닌 코드가 있는 경우 모듈에서 함수를 처음 가져올 때 코드가 실행됩니다. 예를 들어, 모듈에 다음 코드가 있는 경우 :

 

// Filename - public/lib.js
export function aFunction() {
};
export function bFunction() {
};
console.log("Hi");

 

 

lib.js에서 aFunction을 가져오면 코드에서도 콘솔에 "Hi"를 기록합니다. .js 파일에서 함수를 가져오는 횟수와 상관없이 이 작업은 한 번만 실행됩니다. 따라서 bFunction을 가져오면 "Hi"가 다시 콘솔에 기록되지 않습니다.

 

 

객체 내보내기 (Exporting Objects)

모듈에서 객체를 내보낼 수 있습니다. 

 

예제 :

 

// Filename - public/amodule.js
export let myObject = {
           prop1: "Here",
           prop2: "There"
       }

 

 

그런 다음 가져와서 해당 속성을 참조할 수 있습니다.

 

import myObject from 'public/amodule.js';
console.log(myObject.prop1)
// Logs: "Here"

 

 

 

모듈 범위 (Module Scope)

다음은 모듈과 함수를 백엔드와 공용 범위 사이에서 공유하는 방법을 정의하는 지침 목록입니다.

- 백엔드의 자바스크립트(JavaScript) 파일 또는 스크립트는 백엔드 또는 공개의 파일에서 모듈을 가져올 수 있습니다.

- 공개된 파일은 공개된 파일에서 모듈을 가져올 수 있습니다.

- 백엔드에서 함수를 가져와서 웹 모듈을 사용하여 공용으로 사용할 수 있습니다.

- 상대 경로를 사용하여 "."기호가 있는 파일을 참조할 수 있습니다. 접두사.

- 백엔드 / 접두어로 백엔드에서 모듈을 가져올 수 있습니다.

- 공용 / 접두사를 사용하여 공용 모듈을 가져올 수 있습니다.

- 모듈은 다른 모듈을 가져올 수 있습니다.

 

 

Wix Fetch 

Wix Fetch는 표준 자바스크립트(JavaScript) Fetch API의 구현이며, 표준 Fetch 구문을 사용하여 동일한 방식으로 작업합니다. 여기서 Fetch를 사용하는 예나 표준 가져오기 사양을 확인할 수 있습니다.

http/s 요청이 필요할 때마다 Fetch를 사용해야 합니다. 백엔드 및 프론트엔드 코드 모두에서 가져오기를 사용할 수 있습니다. 자바스크립트(JavaScript) 코드에서 가져오기를 사용하려면 'wix-fetch'에서 가져오기 {fetch}를 자바스크립트(JavaScript) 파일의 시작 부분에 추가합니다.

이점 중 하나인 Fetch는 비동기 요청을 처리하기 위해 약속을 사용하므로 결과와 오류를 보다 쉽게 ​​처리 할 수 ​​있습니다.

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 코딩된 사이트, 페이지 및 요소들 복사 및 삭제하기 (Wix Code: Copying and Deleting Coded Sites, Pages, and Elements)

윅스 (Wix) 코딩 - 코딩 테스트 및 디버깅 (Wix Code: Testing and Debugging Your Code)

윅스 (Wix) 코딩 - 코드 패널 (Wix Code: Working in the Code Panel)

윅스 (Wix) 코딩 - 이벤트를 이용하여 사이트 사용자에 반응하기 (Wix Code: Reacting to User Actions Using Events)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-javascript-support