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

JavaScript08

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

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>

小程序js中引入组件如一下步骤:

1、准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内容(一般是固定的库)。

2、打开util.js,继续填写重要内容将要使用的方法用module.exports给暴露出来。

3、将外部js放在指定的文件夹utils里(utils规定存放js库和数字格式化文件)。

4、在想要用到这个方法的js里面require这个js,然后调用即可。

例子:当前时间组件

新建 cc-current-time 文件夹,文件夹下新建 index.js 文件

引入组件,在使用Vue.use的时候就是去执行 Vue.component ,component包含两个参数(name,Object),

封装组件的时候可以直接使用组件定义的名称,引入的组件就直接作为第二次参数实例。

1、在pagage.json配置打包路径

常用打包指令: npm run bilid

2、打包

npm run current-time

common :必须要使用require引入才能使用

umd :所有的模块化都支持

min :格式化后去掉空格及注释,压缩过后

使用 umd.min 版本就可以了

1、任意目录新建需要上传的文件夹

1、查看所在的是不是npm源

nrm ls

如果没有安装nrm npm install nrm -g ,切换到npm镜像上 nrm use npm

2、发射文件路径打开终端

npm login 登录

注意:名字可能重复,如果重复则修改package.json文件中的名称即可

npm i cc-current-time

mian.js文件引入