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引入到页面中就可以调用其中的方法了。