ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML5] 벤더 프리픽스 제거 메서드 removePrefix() Method
      프로그래밍/HTML5 Web 2016. 7. 10. 16:05
      반응형


      현재 HTML5의 표준은 계속 제정중인데요. 확정된 기능이 아닐경우에는 벤더 프리픽스를 사용하여 범용성을 높여줍니다. 하지만 벤더 프리픽스가 바뀌었을 경우에를 대비해서 보완하는 코드를 작성합니다. removePrefix() 함수는 벤더 프리픽스를 제거합니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>removePrefix()</title>
          <script>
              //Set Variable
              var prefixes = ['webkit', 'ms', 'moz', 'o'];
       
              //Upper Function
              var capitalize = function (name) {
                  return name.substr(0, 1).toUpperCase() + nmae.substr(1);
              };
       
              //Remove Prefix function
              var removePrefix = function (object, name) {
                  //Remove prefix
                  prefixes.forEach(function (prefix) {
                      object[name] = object[name] || object[prefix + capitalize(name)];
                  });
              };
          </script>
      </head>
      <body>
       
      </body>
      </html>
      		cs


      위의 코드로도 충분히 활용가능하지만 다른 사용자가 변수 prefixes 또는 함수 capitalize()를 재정의하면 오류가 발생합니다. 이를 보완하기 위해 클로저를 사용하여 함수 내부에서 변수를 선언하여 외부에서 같은 변수를 선언해도 문제없게 만듭니다.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      <!DOCTYPE html>
       
      <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="utf-8" />
          <title>removePrefix()</title>
          <script>
              var removePrefix = (function () {
                  // Set Variable
                  var prefixes = ['webkit', 'ms', 'moz', 'o'];
                  // Uppercase 
                  var capitalize = function (name) {
                      return name.substr(0, 1).toUpperCase() + name.substr(1);
                  };
                  // Remove Prefix Funciton
                  return function (object, name) {
                      // remove prefix
                      prefixes.forEach(function (prefix) {
                          object[name] = object[name] || object[prefix + capitalize(name)];
                      });
                  };
              })();
          </script>
      </head>
      <body>
       
      </body>
      </html>
      		cs


      최종적으로 생성한 removePrefix() 함수를 활용하기 위해서는 따로 JS파일을 생성해 만드는것이 좋습니다. HTML파일에서 src로 연결된 파일로 만들어 사용합니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      // JavaScript source code
              var removePrefix = (function () {
                  // Set Variable
                  var prefixes = ['webkit', 'ms', 'moz', 'o'];
                  // 첫 글자를 대문자로 만드는 함수
                  var capitalize = function (name) {
                      return name.substr(0, 1).toUpperCase() + name.substr(1);
                  };
                  // 프리픽스 제거 함수
                  return function (object, name) {
                      // 프리픽스를 제거합니다.
                      prefixes.forEach(function (prefix) {
                          object[name] = object[name] || object[prefix + capitalize(name)];
                      });
                  };
              })();
      		cs


      위는 JS파일로 생성한것입니다.




      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <!DOCTYPE html>
      <html>
      <head>
          <title>Remove Prefix</title>
          <script src="prefix.js"></script>
          <script>
              // 프리픽스를 제거합니다.
              removePrefix(window, 'URL');
              removePrefix(navigator, 'getUserMedia');
          </script>
      </head>
      <body>
       
      </body>
      </html>
      		cs


      위의 코드는 HTML코드로 prefix.js를 사용하기 위한 메인구성입니다.

      반응형
      저작자표시 비영리 변경금지

      '프로그래밍 > HTML5 Web' 카테고리의 다른 글

      [HTML5] Sammy.js 라이브러리에서 요청 매개변수 처리  (0) 2016.07.10
      [HTML5] Sammy.js 라이브러리로 히스토리 기능 사용 및 페이지 라우트  (0) 2016.07.10
      [HTML5] 기본 기능과 벤더 프리픽스 제거  (0) 2016.07.09
      MongoDB 데이터 검색, 정렬, 수정, 삭제기능으로 CRUD 앱 구현  (0) 2016.07.07
      MongoDB 기본 명령어와 조작법  (0) 2016.07.06

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바