js怎麼封裝方法

㈠ js代碼如何封裝

1. 定義js類
js並不是一種面向對向的語言, 沒有提供對類的支持, 因此我們不能像在傳統的語言里那樣 用class來定義類, 但我們可以利用js的閉包封裝機制來實現js類, 我們來封裝一個簡的Shape類.

代碼如下:

functionShapeBase(){
this.show=function(){
alert("ShapeBaseshow");
};
this.init=function(){
alert("ShapeBaseinit");
};
}

這個類里定義了兩個方法:show和init, 需要注意的是這里用到了this來聲明, 而不是var, 因為用var是用來定義私有方法的.
另外, 我們還可以用prototype屬性來定義Shape的方法.

代碼如下:

ShapeBase.prototype.show=function()
{
alert("ShapeBaseshow");
}
ShapeBase.prototype.init=function()
{
alert("ShapeBaseinit");
}

上面這種寫法看起來不太直觀，我們可以將所有的方法寫在一起.

代碼如下:

ShapeBase.prototype={
show:function(){
alert("ShapeBaseshow");
},
init:function(){
alert("ShapeBaseinit");
}
};

現在, 類是寫好了， 讓我們寫個js來測試下, 看看結果是不是跟我們想像的一樣呢?

代碼如下:

functiontest(src){
vars=newShapeBase();
s.init();
s.show();
}

看到了吧, 其調用方式和C#一模一樣, 而結果也如我們所料.
到目前為止, 我們學會了如何創建js的類了, 但還只是實例方法，要是實現跟C#中的靜態方法要怎麼做呢？
其實, 實現js的靜態方法很簡單, 看下面如何實現:

代碼如下:

//靜態方法
ShapeBase.StaticDraw=function()
{
alert("methoddrawisstatic");
}

2. 實現JS類抽象和繼承
同樣, js中也不支持類繼承機制，但我們可以通過將父類prototype中的成員方法復制到子類的prototype中來實現.
和類的繼承一樣,JavaScript也沒有任何機制用於支持抽象類.但利用JavaScript語言本身的性質.可以實現自己的抽象類.
首先來看看js中的虛方法, 在傳統語言中虛方法是要先定義的, 而包含虛方法的類就是抽象類,不能被實例化,而在JavaScript中，虛方法就可以看作該類中沒有定義的方法，但已經通過this指針使用了.
和傳統面向對象不同的是，這里虛方法不需經過聲明，而直接使用了, 並且類也可以被實例化.
先定義object的extend方法, 一個為靜態方法，一個為實例方法, 這兩個方法用於實現繼承的prototype復制

代碼如下:

Object.extend=function(destination,source){
for(propertyinsource){
destination[property]=source[property];
}
returndestination;
}
Object.prototype.extend=function(object){
returnObject.extend.apply(this,[this,object]);
}

接下來我們實現一個繼承類Rect, 這里先用一種簡單的方法來實現。

代碼如下:

functionRect(){}
Rect.prototype=ShapeBase.prototype;//只這一句就行了
//擴充新的方法
Rect.prototype.add=function(){
alert("Rectadd");
}

這種方法不能用於重寫,如果改變了show方法, ShapeBase的show也會指向同一函數可能是由於prototype賦值只是簡單的改變指向地址.
如果上面也定義了:

Rect.prototype.show=function(){
alert("Rectshow");
}

那麼執行結果如下:

functiontest(){
vars=newShapeBase();
s.show();//結果:Rectshow
varr=newRect();
r.show();//結果:Rectshow
r.add();
}

我們再使用object.extend實現繼承, 並實現一個oninit虛方法, 修改ShapeBase如下:

代碼如下:

ShapeBase.prototype={
show:function()
{
alert("ShapeBaseshow");
},
initialize:function(){
this.oninit();
}
};

實現Rect類繼承.

代碼如下:

Rect.prototype=(newShapeBase).extend({
//添加新的方法
add:function(){
alert("Rectadd");
},
//使用這種方法可以重寫show方法
show:function(){
alert("Rectshow");
},
//實現虛方法
oninit:function(){
alert("Rectoninit");
}
})

㈡ 新手請教，如何將一段JS代碼封裝成一個方法

鑒於樓主欠缺編程經驗，我就先不說封裝成jQuery插件等高大上的做法了。單就論封裝成方法而言。

方法，也就是函數。是面向過程式語言一種代碼復用的初級手段，簡而言之，就是把重復的部分用函數封裝起來。

例如貓叫多遍，cat.meow(), 你總不可能寫對應次數的代碼，一般會寫成：

functionmeow(num){
for(vari=0;i<num;i++){
cat.meow()
}
}
meow(1000)

這就是一種最基礎的代碼復用。

當然，面向對象的語言也許有更簡單的 cat.meow(1000)

那麼，針對樓主的情況。逐步講一下各層次的方法。最簡單的用函數封裝一下就是：

functioneffect(srcDom,destDom,className){
$(srcDom).mouseenter(function(){
$(destDom).addClass(className)
}).mouseout(function(){
$(destDom).removeClass(className)
})
}

然後調用

effect('#plate-1','#plate-1hover','plate-1after')
effect('#plate-2','#plate-2hover','plate-2after')
effect('#plate-3','#plate-3hover','plate-3after')

鑒於樓主的DOM的ID和Class命名比較有規律，可以寫成這樣

functioneffect(name){
$('#'+name).mouseenter(function(){
$('#'+name+'hover').addClass(name+'after')
}).mouseout(function(){
$('#'+name+'hover').removeClass(name+'after')
})
}

然後調用

effect('plate-1')
effect('plate-2')
effect('plate-3')

但是這樣還是不夠通用，樓主應該看看事件方面有關事件委託的知識

㈢ 什麼是javascript封裝，封裝的方法有幾種

JS雖然是一個面向對象的語言，但是不是典型的面向對象語言。Java/C++的面向對象是object - class的關系，而JS是object - object的關系，中間通過原型prototype連接，父類和子類形成一條原型鏈。本文通過分析JS的對象的封裝，再探討正確實現繼承的方式，然後討論幾個問題，最後再對ES6新引入的類class關鍵字作一個簡單的說明。

JS的類其實是一個函數function，由於不是典型的OOP的類，因此也叫偽類。理解JS的類，需要對JS里的function有一個比較好的認識。首先，function本身就是一個object，可以當作函數的參數，也可以當作返回值，跟普通的object無異。然後function可以當作一個類來使用，例如要實現一個String類

從輸出的結果來看，新的class還是沒有實現屬性私有的功能，見第27行。並且從第26行看出，所謂的class其實就是編譯器幫我們實現了上面復雜的過程，其本質是一樣的，但是讓代碼變得更加簡化明了。一個不同點是，多了static關鍵字，直接用類名調用類的函數。ES6的支持度還不高，最新的chrome和safari已經支持class，firefox的支持性還不太好。

最後，雖然一般的網頁的JS很多都是小工程，看似不需要封裝、繼承這些技術，但是如果如果能夠用面向對象的思想編寫代碼，不管工程大小，只要應用得當，甚至結合一些設計模式的思想，會讓代碼的可維護性和擴展性更高。所以平時可以嘗試著這樣寫。

㈣ 封裝一個自己的js庫

接下來，我講封裝一個仿jQuery的庫，主要包含jQuery中綁定，css，等方法，我講它定義為 "HQuery"

jQuery中的 $ 符號意味著什麼？
先思考一下jQuery庫中alert(typeof $)的結果，它是一個對象，也是一個函數
所以美元符$字面上是jQuery，其實就是一個jq對象，裡面可以接受函數，字元串，還要一種是對象(比如this)
給自己的Hquery填加$符號：

Hquery是基於面向對象實現的，所以我們需要先寫構造函數，為了方便遍歷和其他方法的操作，所有內容返回到一個數組中，這個數組衣服於Hquery對象存在，之後將為這個Hquery對象屬性添加方法

我們使用Hquery操作DOM等實現一系列的功能，選擇器是必不可少的，所有我們首先封裝好選擇器，這樣就可以能省去document.getElementsByClass等等麻煩的操作

其他的方法，我就不一一介紹了，下面直接給大家上一個多種方法封裝好的，大家k'y

㈤ js中什麼是函數封裝以及怎麼用

封裝最基本的意思就是對外提供簡單功能單一的方法，
比如一個方法根據不同的參數獲取不同的頁面元素
如點開頭的是查找class的元素，#開頭的是查找id，不加這兩個的是根據標簽查找
function
getElements()
{
//這里要根據開頭判斷返回數據
}
這個方法功能雖然多，但是功能不單一不如提供3個對外的方法
function
getElementById(id)
{
return
getElements("#"+id);
}
function
getByClass(cls)
{
return
getElements("."+cls);
}
function
getByTag(tag)
{
return
getElements(tag);
}
這樣別人一看方法名就明白這個方法怎麼使用了，這就是封裝的最簡單應用

㈥ js 常用公共類封裝

/**

* @用戶信息緩存，公共js封裝

* @Author maguangbo

* @Date 2019-07-18

* @Email [email protected]

* **/

export default (function() {

var com = {};

com.setCurrentUserInfo = function(userInfo) {

return uni.setStorageSync('userInfo', userInfo);

}

com.getCurrentuserInfo = function() {

return uni.getStorageSync('userInfo');

}

com.getToken = function(){

return uni.getStorageSync('tokens');

}

com.setToken = function(content){

return uni.setStorageSync('tokens',content);

}

var tokenInfos ={

"token": "",

"expiredTime": ""

}

com.getTokens = function(){

if(uni.getStorageSync('tokens')){

var tInfos = uni.getStorageSync('tokens');

tInfos.token && (tokenInfos.token = tInfos.token);

tInfos.expiredTime && (tokenInfos.expiredTime = tInfos.expiredTime);

}

return tokenInfos;

}

var userInfo = {

"id": '',

"userName": '',

"nickName": '',

"email": '',

"phone": '',

"identity": '',

"roleId": '',

"apiUserId": '',

"apiKey": '',

"createDate": ''

}

com.getUserInfos =function(){

if(uni.getStorageSync('userInfo')){

var infos = uni.getStorageSync('userInfo');

infos.id && (userInfo.id = infos.id);

infos.userName && (userInfo.userName = infos.userName);

infos.nickName && (userInfo.nickName = infos.nickName);

infos.email && (userInfo.email = infos.email);

infos.phone && (userInfo.phone = infos.phone);

infos.apiUserId && (userInfo.apiUserId = infos.apiUserId);

infos.apiKey && (userInfo.apiKey = infos.apiKey);

infos.createDate && (userInfo.createDate = infos.createDate);

return userInfo;

}

return false;

}

com.toast = (title, ration=1500, mask=false, icon='none')=>{

if(Boolean(title) === false){

return;

}

uni.showToast({

title,

ration,

mask,

icon

});

}

return com;

}())

這是一個常用的公共用戶信息封裝實體類，個人感覺很方便，如果有更好的的歡迎大佬指教！

㈦ 小程序端app.js封裝請求方法

//app.js

App({

  onLaunch: function () {

    let App = this;

    // 設置api地址

    App.setApiRoot();

  },

  globalData: {

    userInfo: null

  },

  api_root: '', // api地址

  appid:'',

  /**

   * 顯示失敗提示框

   */

  showError(msg, callback) {

    wx.showModal({

      title: '友情提示',

      content: msg,

      showCancel: false,

      success(res) {

        callback && callback();

      }

    });

  },

   /**

   * 設置api地址

   */

  setApiRoot() {

    let App = this;

    // App.api_root = config.config.host;

    let extConfig = wx.getExtConfigSync? wx.getExtConfigSync(): {}

    console.log(extConfig)

    App.appid = extConfig.attr.appid

    App.api_root = extConfig.attr.host;

  },

  /**

   * get請求

   */

  _get(url, data, success, fail, complete, check_login) {

    let App = this;

    wx.showNavigationBarLoading();

    // 構造請求參數

    data = Object.assign({

      token: wx.getStorageSync('token'),

      appid:App.appid  

    }, data);

    // if (typeof check_login === 'undefined')

    //   check_login = true;

    console.log(App.api_root) 

    // 構造get請求

    let request = () => {

      data.token = wx.getStorageSync('token');

      wx.request({

        url: App.api_root + url,

        header: {

          'content-type': 'application/json'

        },

        data,

        success(res) { 

          if (res.statusCode !== 200 || typeof res.data !== 'object') {

            console.log(res);

            App.showError('網路請求出錯'); 

            return false;

          } 

          if (res.data.code === -1) {

            // 登錄態失效, 重新登錄

            wx.hideNavigationBarLoading();

            App.doLogin(() => {

              App._get(url, data, success, fail);

            });

          } else if (res.data.code === 0) {

            App.showError(res.data.msg);

            return false;

          } else {

            success && success(res.data);

          }

        },

        fail(res) {

          // console.log(res);

          App.showError(res.errMsg, () => {

            fail && fail(res);

          });

        },

        complete(res) {

          wx.hideNavigationBarLoading();

          complete && complete(res);

        },

      });

    };

    // 判斷是否需要驗證登錄

    check_login ? App.doLogin(request) : request();

  },

  /**

   * post提交

   */

  _post_form(url, data, success, fail, complete) {

    wx.showNavigationBarLoading();

    let App = this;

    // 構造請求參數 

    data = Object.assign({

      token: wx.getStorageSync('token'), 

      appid:App.appid  

    }, data);

    data.token = wx.getStorageSync('token');

    wx.request({

      url: App.api_root + url,

      header: {

        'content-type': 'application/x-www-form-urlencoded',

      },

      method: 'POST',

      data,

      success(res) {

        if (res.statusCode !== 200 || typeof res.data !== 'object') {

          App.showError('網路請求出錯');

          return false;

        }

        if (res.data.code === -1) {

          // 登錄態失效, 重新登錄

          App.doLogin(() => {

            App._post_form(url, data, success, fail);

          });

          return false;

        } else if (res.data.code === 0) {

          App.showError(res.data.msg, () => {

            fail && fail(res);

          });

          return false;

        }

        success && success(res.data);

      },

      fail(res) {

        // console.log(res);

        App.showError(res.errMsg, () => {

          fail && fail(res);

        });

      },

      complete(res) {

        wx.hideLoading();

        wx.hideNavigationBarLoading();

        complete && complete(res);

      }

    });

  },

   /**

   * 驗證登錄

   */

  checkIsLogin() {

    return wx.getStorageSync('token') != '';

  }, 

  /**

   * 授權登錄

   */

  doLogin(callback) { 

    let App = this;

    // if (e.detail.errMsg !== 'getUserInfo:ok') {

    //   return false;

    // }

    wx.showLoading({

      title: "載入數據中...",

      mask: true

    }); 

    // 執行微信登錄

    wx.login({ 

      success(res) {

        // 發送用戶信息 

        App._post_form('login', {

          code: res.code,

        }, result => {

          // 記錄token user_id

          wx.setStorageSync('token', result.data.token,);

          // 執行回調函數

          callback && callback();

        }, false, () => {  

          wx.hideLoading();

        });

      }

    }); 

  }

})

㈧ 新人求助：js封裝的方式

第一種是擴展原型鏈，可以實現js的繼承（面向對象），這個用於給原有（已存在的，或者自己定義過的已存在的類添加原型方法時用）

第二種是最簡單的方法，注意：
在js文件中定義最外圍的function a時，a為windows的對象，可以用window.a或window['a']訪問
如果寫作
function method() {
function a() { ... }
a(); // 可以調用
}
a(); // 訪問不到

第三種稱為js的閉包，在閉包中定義的變數在外部都無法訪問，目的是為了在閉包中的變數不與外部的沖突。例如一個common.js文件由兩個人來修改時：
A程序員寫了：
var a = "aaa";
alert(a);
B程序員正好命名也是a，他寫了：
var a = "bbb";
alert(a);
那麼他們的代碼就沖突了。
為了解決這個問題，可以採用
A寫：
(function() {
var a = "aaa";
alert(a);
})();
B寫：
(function() {
var a = "bbb";
alert(a);
})();
另外第三個當中也用到了JS的JSON格式，或者也有說關聯數組，這樣定義：
var obj = {
attr: function() {...}
}; // JSON style
或者
var obj = {}; // var obj = new Object();
obj['attr'] = function() {...};
這個是直接定義一個類（默認為Object類）的對象。

㈨ js前端組件是怎麼封裝的

1、定義一個類

2、類中增加一個方法

3、body中定義一個dom節點

4、腳本中把dom節點和類定義結合起來，實現特定的組件功能

示例：

<script>
functionTestWidegt(did){//定義一個組件類
var_self=document.getElementById(did);//根據id獲取dom節點
this.addP=function(){//增加組件方法，這里就是添加一個節點
_self.innerHTML='<p>111</p>';//在dom節點下添加節點p
}
returnthis;//返回當前組件
}
functionTest(){
vart=newTestWidegt('dv');//根據佔位的dom節點定義組件
t.addP();//在佔位節點中增加顯示內容
}
</script>
<body>
<inputtype='button'value='測試組件'/>
<divid='dv'>111</div>組件佔位使用的dom節點
</body>

㈩ JS方法寫好了 用JS寫的腳本 然後我想封裝JS如何封裝

把你的js復制到記事本中，然後將記事本的拓展名(.txt)改為js(javascript)的拓展名(.js)就行了，當你在某個頁面(如：html、jsp、asp等)中要用到該js的方法，只需將你剛才封裝的js引入到頁面中就可以調用其中的方法了。