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文件引入