js组件封装,调用的方法怎么写

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js组件封装,调用的方法怎么写相关的知识,希望对你有一定的参考价值。

有一个id/class叫cover的div<div class="cover" id="cover"></div>
不许用jquery,调用方法方法为$(elementID).inc();

<script>
//定义$符号
function $(id)
return document.getElementById(id);
;
//定义inc()-----inc怎么写,当我调用$('cover').inc();时能执行到
inc=function()
alert("z");

</script>

1、定义一个传入占位节点id的组件类

比如这里定义一个组件MyClass

function MyClass(id)//组件模板

2、在组件内获取节点id

function MyClass(id)//组件模板
   var _self = document.getElementById(id);//根据id获取组件

3、定义类的方法

function MyClass(id)//组件模板
   var _self = document.getElementById(id);//根据id获取组件
   this.addP=function()//定义类方法,这里是显示内容为1233
      _self.innerHTML ="1233";
   

4、直接在js中调用使用该组件方法

示例:

<body>
<div id='rrr'></div>  定义占位dom节点
</body>
<script>
var mc = new MyClass('rrr');//初始化组件
mc.addP();//组件调用方法
</script>

参考技术A function R(id)
if (!(this instanceof R))
return new R(id);

this[0] = document.getElementById(id);

R.prototype.inc = function () alert('z'); 本回答被提问者采纳

axios方法封装

axios方法封装

一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下:

技术分享
 
技术分享
 

五、封装后的方法的使用

1、在main.js文件里引用之前写好的文件,我的命名为http.js

技术分享
 

2、在需要的地方之间调用,如图所示:

 

技术分享
 

说明:

GET调用方法如下,其中url是接口地址

this.$get(url).then((res) {

//代码

});

POST调用方法如下,其中url是接口地址,data是请求的数据。

this.$post(url,data).then({

//代码

});

PATCH调用方法如下,其中url是接口地址,data是请求的数据

this.$patch(url,data).then({

//代码

});

PUT调用方法如下,其中url是接口地址,data是请求的数据

this.$put(url,data).then({

//代码

});



作者:陈楠酒肆
链接:http://www.jianshu.com/p/3b5e453f54f5
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。










以上是关于js组件封装,调用的方法怎么写的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序组件封装及调用-原生

Vue3返回顶部组件及返回顶部js封装

VueUI组件封装之this.$name调用方式

小程序开发 组件定义(封装)组件调用父子组件方法调用父子组件传值通讯

封装一个简单的UI组件

vue-----js组件的封装--------