WebComponents(Custom Elements/ShadowDOM/ESModules)를 사용하여 Excel 프로그래밍 가능 라이브러리 만들기

개시하다
최근 몇 년 동안 원래의 자바스크립트(Vanilla JS)의 진화가 현저하여 많은 편리한 기능을 발표하였다.하지만 아직 온라인상 활용 사례가 충실하지 않아 대부분 이용 프레임(Vue·Anglar·React 등)을 포기하고 잠금하고 있다.
이에 따라 이 글에는 웹컴퍼니를 실제로 활용한 엑셀 라이크 표 제작 라이브러리를 활용해 웹컴퍼니의 기능을 소개할 예정이다.(실제로 작성된 라이브러리는 GIT에 공개됨)
WebComponents의 장점은 한마디로 캡슐화입니다.웹Components의 주요 기능은 다음과 같은 3개(사실 4개가 있지만 4개는 추천하지 않기 때문에 생략)가 있는데 웹Components의 가치는 이런 기능들이 특정한 구조에 의존하지 않고 실현될 수 있다는 데 있다.

WebComponents의 3가지 기능

CustoomElements: 탭에 연결된 이 탭의 행위의 봉인

ShadowDOM:DOM의 숨김화와 CSS의 분리 등 봉인

ESModule: js Object의 봉인

실제 소스 코드에 대응해 보세요!
먼저 완성된 화면입니다.Excel처럼 행을 여러 개, 정렬, 추가/삭제할 수 있습니다.

그럼 HTML부터 봅시다.아주 쉬울 거예요.
excel.html

<!DOCTYPE html> 
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" href="./images/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="./images/favicon.ico" type="image/vnd.microsoft.icon">
<title>excelライクなテーブル</title>
</head>
<body>
  <h3>右クリックで行追加/削除できます</h3>
  <local-sheet></local-sheet>

<script type="module" src="./js/local-sheet.js"></script>

</body>
</html>

<local-sheet></local-sheet>는 Custom Elements로 불리는 부분이다.지금까지div를 꾸준히 사용했지만 자신의 라벨 이름만으로도 반복적으로 사용할 수 있는 부품을 만들 수 있었다.

상기 내용(local-sheet.js에 기술된 내용)은 ShadowDOM으로 일반적인 DOM 트리의 요소 아래 숨겨진 DOM 트리를 설치했다.섀도돔을 사용하는 장점은 아무래도 독립된 DOM으로 처리할 수 있기 때문에 css는 해당 트리 등에만 적용되고 다른 DOM의 영향을 받지 않는 독립된 트리로 처리할 수 있다.

<script type="module" src="./js/local-sheet.js"></script> 부분은 ESModules 부분, local-sheet입니다.모듈로 js를 호출하고 있습니다.모듈화의 장점은 모듈화된 js에서 다른 js를 호출할 수 있지만 주의사항으로 로컬에서 CORS 정책에 걸리기 때문에 이동할 수 없다는 것이다.브라우저의 보안을 낮추거나 서버에서 조용히 조작하십시오.

그런 다음 HTML을 모듈로 호출하는 local-sheet을 사용합니다.제이스 내용 좀 볼게요.
local-sheet.js

 //===============================================================
 //  画面表示部分のJS
 //===============================================================
 //===============================================================
 //  ShadowDOM生成
 //===============================================================
class LocalSheet extends HTMLElement {
  constructor() {
    super();
    //HTMLから分離されたノード(ShadowDOM)を作成（親のドキュメントのCSSなどに影響されない）
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `

<!-- ShadowDOM用css読み込み -->
<link rel="stylesheet" href="./css/local-sheet.css">
<link rel="stylesheet" href="./css/filter.css">

<!-- table構造 -->
<table id="localSheet" style="table-layout:fixed;"">
  <thead id="localSheetThead">
  </thead>
  <tbody id="localSheetTbody">
  </tbody>
</table>

~~~ 中略 ~~~

<div id="tableFilter"></div>
`;
  }
}
 //===============================================================
 //  タグで呼び出せるように設定 + 基幹関数実行
 //===============================================================
(function main() {
  // local-sheetという名前でLocalSheetクラスを登録する
  customElements.define("local-sheet", LocalSheet);

  import ("./local-sheet-function.js")
      .then((obj) => {
          // 各モジュールには、引数objのプロパティからアクセスできる。
          obj.localSheetFunction();
      });
})();

customElements.define("local-sheet", LocalSheet);는 Custom Elements의 일부입니다.HTML로 기재<local-sheet></local-sheet>하면 불러낼 수 있다.

class LocalSheet extends HTMLElement {는 ShadowDOM의 일부입니다.

import ("./local-sheet-function.js")는 ESModules의 일부입니다.js에서 다른 js를 가져오는 중입니다.

마지막으로local-sheet.js에서 가져온local-sheet-function입니다.js 내용입니다.
local-sheet-function.js(발췌문)

 //===============================================================
 //  テーブル構築をする基幹となる関数
 //===============================================================
export function localSheetFunction() {
  if (dbUseFlg == 1){
    let uri = getUri();
    const encodeUri = encodeURI(uri);
    fetch(encodeUri)
      //KAGRA API実行
      .then(function(res){
        return(res.json());
      })
      .then(function(json){
        let arrayData = JSON.stringify(json["return"]);
        arrayData = JSON.parse(arrayData);
        //th入力
        arrayThData = arrayData[0];
        //thを削除
        let exe = [0];
        for(let i=0; i<exe.length; i++){
          arrayData.splice(exe[i]-i, 1);
        }
        //tdを入力
        arrayTdData = arrayData;
        setTableInfo();
        return(json.setDisable);
      })
      .catch(function(err){
        console.log(err);
      });
  } else{
    setTableInfo();
  }
}

볼만한 곳function이 맨 앞export이다.다른 js에서 호출하려면 export를 기입해야 합니다.

최후
어때?사용 습관이 되면 매우 편리해지고, 바닐라 JS이기 때문에 노화되지 않는 보편적인 기술이기 때문에 웹컴퍼니 이용자가 늘어나길 바란다.
또한 본 보도의 설명에 사용된 출처는 GIT에 공개되며, 관심 있으면 아래 참고 링크를 통해 방문하시기 바랍니다.
본 문서에 사용된 코드(GiitHub)
참조 링크(WebComponents용 MDN 링크)
WebComponents
CustomElements
ShadowDOM
ESModule

Reference

이 문제에 관하여(WebComponents(Custom Elements/ShadowDOM/ESModules)를 사용하여 Excel 프로그래밍 가능 라이브러리 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/NakayamaShota/items/51e875d3a503d0d89ec0

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

WebComponents(Custom Elements/ShadowDOM/ESModules)를 사용하여 Excel 프로그래밍 가능 라이브러리 만들기

Reference

좋은 웹페이지 즐겨찾기