JavaScript || 寫組件的模式

sohu.com 7年前發布 | 18K 次閱讀 JavaScript開發 JavaScript

簡單彈窗組件

一編寫組件的流程

組件是利用JavaScript生成HTML結構，配合既有CSS生成頁面中的內容。 用處是：便于修改、維護，可重用

完成靜態HTML與CSS
- 將組件結構與樣式使用HTML與CSS整體展現出來，不需要JavaScript。
去掉組件的HTML結構，使用JavaScript面向對象的模式創建原有HTML結構， 并且添加交互功能
- 創建組件對象，將構造函數接口暴露
使用創建的構造函數，創建組件對象，執行相應邏輯。

二組件設計的原則

先設計組件的結構
再處理組件的API
完成組件的控制流

三彈窗組件

1 基本的HTML與CSS

組件樣式的編寫：

先完成容器整體外部輪廓的布局、寬高。只在容器上設置一個類

設置容器內各個元素在容器中的樣式

<div class="layer">
    <h2>提示</h2>
    <p>重要說明 百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。</p>
    <button>知道了</button>
</div>
<style>

{
  margin: 0;
  padding: 0：
}
.layer {
  width: 300px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 3px 5px #bbb;
  / 在容器中水平垂直居中顯示 /
  position: absolute;    / 彈窗是浮出層，位置是絕對定位的，不會影響原文檔流 /
  left: 50%;
  top: 50%;      / 相對于容器的寬度 /
  transform: translate(-50%, -50%);  / 相對于元素自身寬度 /
}
.layer h2 {
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.layer p {
  text-indent: 2em;
  font-size: 14px;
  line-height: 1.5;
}
.layer button {
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #333;
  margin: 10px auto 0;
  text-align: center;
  cursor: pointer;
}
</style></code></pre> </li> 
  </ul> </li> 
</ul> 
2 選擇面向對象的模式創建組件對象

使用工廠模式過程： 
 
  定義保存HTML結構的模板字符串（ 第一步靜態結構中的彈窗結構，將定制部分作為變量 ）
  
  創建對象的構造函數，定義彈窗可配置內容的接口 text ，然后初始化彈窗組件 this.init()
  
  設計組件的API： 
   
    show()
  
    hide()
  
  
  
  設計組件控制流： 
   
    結構初始化 this.initDom()
  
    事件邏輯初始化 this.initEvent()
  
  
  
  對外暴露構造函數，在外部使用。 
   
    var layer = new Layer('hahahaha')
  
  
  
 
(function () {
  // 一個閉包

  // 彈窗組件的HTML結構：模板字符串，定制需求
  var html = `<div class="layer">\
                  <h2>提示</h2>\
                  <p>{text}</p>\
                  <button>知道了</button>\
              </div>`;

  // 彈窗組件構造函數
  function Layer(text) {      // text是對外的接口，可以定制彈窗中的內容
      // 用戶的定制需求：彈窗組件的參數配置
      this.text = text;
      // 調用初始化彈窗韓式
      this.init();
  } 

  // 原型對象上的方法

  // 定義初始化彈窗的方法
  Layer.prototype.init = function () {
      // 初始化彈窗的DOM結構
      this.initDom();
      // 初始化彈窗的事件
      this.initEvent();
  }

  // 定義初始化彈窗DOM結構的方法
  Layer.prototype.initDom = function () {
  }

  // 初始化彈窗中的事件方法
  Layer.prototype.initEvent = function () {
  }

  // 顯示組件的方法：將生成的內容添加到HTML頁面中
  Layer.prototype.show = function () {
  }

  // 關閉彈窗的方法：將節點刪除
  Layer.prototype.hide = function () {}

  //----------------------------------------------------------------//
  // 組件調用渠道：
  // 
  // 將構造函數返回出整個閉包，可以在外面調用構造函數生成彈窗組件
  window.Layer = Layer;   // 掛載到全局對象，也可以使用閉包，return Layer;
})();

  //----------------------------------------------------------------//
  // 組件使用：生成一個組件對象
  var layer = new window.Layer('重要說明 百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐'); 
3 完整代碼 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      * {
          margin: 0;
          padding: 0：
      }
      .layer {
          width: 300px;
          padding: 20px;
          background: #fff;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-shadow: 0 3px 5px #bbb;
          /* 在容器中水平垂直居中顯示 */
          position: absolute;    /* 彈窗是浮出層，位置是絕對定位的，不會影響原文檔流 */
          left: 50%;
          top: 50%;      /* 相對于容器的寬度 */
          transform: translate(-50%, -50%);  /* 相對于元素自身寬度 */
      }
      .layer h2 {
          font-size: 16px;
          border-bottom: 1px solid #ddd;
          padding-bottom: 5px;
          margin-bottom: 20px;
      }
      .layer p {
          text-indent: 2em;
          font-size: 14px;
          line-height: 1.5;
      }
      .layer button {
          display: block;
          width: 100px;
          height: 30px;
          line-height: 30px;
          border: 0;
          border-radius: 5px;
          color: #fff;
          background: #333;
          margin: 10px auto 0;
          text-align: center;
          cursor: pointer;
      }
  </style>
</head>
<body>
<div class="layer">
  <h2>提示</h2>
  <p>重要說明 百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。</p>
  <button>知道了</button>
</div>
  <script>
      //----------------------------------------------------------------//
      // 組件創建
      //
      (function () {
          // 一個閉包

          // 彈窗組件的HTML結構：模板字符串，定制需求
          var html = `<div class="layer">\
                          <h2>提示</h2>\
                          <p>{text}</p>\
                          <button>知道了</button>\
                      </div>`;

          // 彈窗組件構造函數
          function Layer(text) {      // text是對外的接口，可以定制彈窗中的內容
              // 用戶的定制需求：彈窗組件的參數配置
              this.text = text;
              // 調用初始化彈窗韓式
              this.init();
          } 

          // 原型對象上的方法

          // 定義初始化彈窗的方法
          Layer.prototype.init = function () {
              // 初始化彈窗的DOM結構
              this.initDom();
              // 初始化彈窗的事件
              this.initEvent();
          }

          // 定義初始化彈窗DOM結構的方法
          Layer.prototype.initDom = function () {
              var node = document.createElement('div');

              // 根據配置生成彈窗內容
              node.innerHTML = html.replace('{text}', this.text);
              // 完成彈窗DOM結構初始化：childNodes[0]表示原來的html字符串中創建為DOM節點
              this.dom = node.childNodes[0];   // div節點以及其中的內容保存下來，顯示函數用于添加到頁面中
          }

          // 初始化彈窗中的事件方法
          Layer.prototype.initEvent = function () {
              this.dom.addEventListener('click', function (evt) {   // 在整個彈窗上注冊事件，通過evt.target來獲取觸發事件的對象
                  // 如果點擊了按鈕
                  if(evt.target.tagName == 'BUTTON') {
                      this.hide();   //隱藏整個面板
                  }
              }.bind(this), false);     // bind()強制綁定彈窗組件來調用回調函數
          }

          // 顯示組件的方法：將生成的內容添加到HTML頁面中
          Layer.prototype.show = function () {
              document.body.appendChild(this.dom);   // 將創建的節點添加到頁面的hook中
          }

          // 關閉彈窗的方法：將節點刪除
          Layer.prototype.hide = function () {
              document.body.removeChild(this.dom);
          }

          //----------------------------------------------------------------//
          // 組件調用渠道：
          // 
          // 將構造函數返回出整個閉包，可以在外面調用構造函數生成彈窗組件
          window.Layer = Layer;   // 掛載到全局對象，也可以使用閉包，return Layer;
      })();

          //----------------------------------------------------------------//
          // 組件使用：生成一個組件對象
          var layer = new window.Layer('重要說明 百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐');

          layer.show();   // 調用show()方法將創建的節點添加到頁面上，顯示彈窗
  </script>
</body>
</html> 
  
來自：https://segmentfault.com/a/1190000008775462


                    
                         本文由用戶 sohu.com 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1490167413190.html
                         JavaScript開發 JavaScript

JavaScript || 寫組件的模式

簡單彈窗組件

一編寫組件的流程

二組件設計的原則

三彈窗組件

1 基本的HTML與CSS

2 選擇面向對象的模式創建組件對象

3 完整代碼

相關經驗

相關資訊

相關文檔

目錄

JavaScript || 寫組件的模式

簡單彈窗組件

一 編寫組件的流程

二 組件設計的原則

三 彈窗組件

1 基本的HTML與CSS

2 選擇面向對象的模式創建組件對象

3 完整代碼

相關經驗

相關資訊

相關文檔

目錄

一編寫組件的流程

二組件設計的原則

三彈窗組件