小程序js模块化

作者: 前端来入坑 | 来源:发表于2018-11-10 18:21 被阅读3次

在.js后缀文件中写下json格式的数据或者写下方法,然后通过module.exports={}导出,在需要的地方var tools = requice('../../tools.js'),通过tools.导出的name就可以使用了.当然还可以用import {...} from '../../tools.js'的形式按需导入。

举个栗子.jpg

外部导入数据形式

//tools.js
var studentList = [
    {
        name: "LLL",
        age: "18",
        hobby: "sleep"
    },
    {
        name: "XXX",
        age: "22",
        hobby: {
            one: "eat",
            two: "sleep"
        }
 
    }
]
 
//模块化导出
module.exports = {
    studentList: studentList
}

在需要用到以上数据的js文件中引入

//index.js
var tools = require("../../tools.js")
//获取应用实例
var app = getApp()
Page({
  data: {
  },
  onLoad: function () {
    this.setData({
        studentList:tools.studentList
        });
  }
})

外部导入方法的形式,其实也是一样的,也举个栗子

 // tools.js
 function sayHello(name) {
   console.log(`Hello ${name} !`)
 }
 function sayGoodbye(name) {
   console.log(`Goodbye ${name} !`)
 }
//有多种导出写法,这里只写这一种
module.exports = {
    sayHello:sayHello,
    sayGoodbye:sayGoodbye
}

在需要用到以上数据的js文件中引入

var tools = require("../../tools.js")
 Page({
  sayhello: function() {
     tools.sayHello('LLL')
  },
  saygoodbye: function() {
     tools.sayGoodbye('XXX')
  }
})

导入封装的方法并实例化之后使用

export class bigFun{
  myfun(a,b) {
    let c = a +' ' +b;
    return c;
  }
}
import { myFun } from "../../tools.js";//按需调用,当然目前里面也只有一个myfun方法

const tools = new bigFun();//new实例化

Page({
  data: {
  },
  onLoad: function () {
     let name = tools.myfun('LLL','XXX');//传入参数调用函数
     console.log(name);
  }
})

相关文章

  • 小程序js模块化

    在.js后缀文件中写下json格式的数据或者写下方法,然后通过module.exports={}导出,在需要的地方...

  • 模块化和组件化概念

    几个概念 模块:一个功能的JS程序,即一个js文件 模块化:应用的js文件都是以模块来编写的 为什么要模块化?降低...

  • 一 框架

    邻盟的开发都是模块化开发,低耦合,以利于以后的扩展;目前小程序的一级目录固定如下: app.js app.js 是...

  • 微信小程序的逻辑层

    关于开发微信小程序的逻辑层主要分为三部分: 1.程序注册 2.页面注册 3.模块化 一、程序注册 在app.js提...

  • python-flask笔记(六)

    此章和教程出入不大,可直接看原教程 之前写的代码耦合太重,python也可以像js模块化一样模块化程序结构 模块化...

  • wepy踩坑记

    wepy是一个微信小程序框架,支持模块化开发,开发风格类似Vue.js。可搭配redux使用,能同时打包出web和...

  • 好程序员web前端教程分享js中的模块化一

    好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS、AMD、CMD、ES6,...

  • 模块化开发

    js模块化开发vue模块化开发

  • 微信小程序之注册配置

    微信小程序之注册配置 小程序页面结构 pagespages/app.js(小程序注册入口)pages/app.js...

  • import和export的作用

    在es6标准发布之前,js是没有模块化的概念的,也就是说原生js是无法将一个大型程序拆分成若干相互依赖的小模块的。...

网友评论

    本文标题:小程序js模块化

    本文链接:https://www.haomeiwen.com/subject/dgkwxqtx.html