在app中JS使用模块化加载

作者:ipwas 更新时间:2020-04-22 12:07

在app中JS使用模块化加载,为什么要这么做?

使用模块化加载更加简单方便,无需要手动引入多个JS文件只需要再入口填写对应模块名即可加载使用该内部方法。

该插件适应apicloud APP 也适用网页。


SDK下载链接:https://pan.baidu.com/s/1ypEAvbZLEwAHDfIwtTtkGg 提取码:xmbx 



js主入口文件我们封装了以下公开函数:

// 加载一个或多个内置模块,可以使用文本或数组方式加载
// @param module string/Array 模块名(此处加载的模块需要你自己定义,下面有模块定义方法)
// @param Callback function 回调,所有模块加载完成后执行此回调
ipwas.use(module,Callback);

//使用示范:
	// 加载单个模块
	ipwas.use("module1",function(){
		// 加载完成了可以使用该模块的方法了
		ipwas.module1.test();
	});
	// 使用数组加载多个模块
	ipwas.use(["module1",'module2'],function(){
		// 加载完成了可以使用该模块的方法了
		ipwas.module1.test();
	});

// 动态加载JS文件
// @param url string 欲加载的JS文件路径或网络连接
// @param Callback function JS文件加载完成后执行此回调。
ipwas.loadJS(url,Callback);

// 使用示范:
// 加载远程链接 jquery 插件
	ipwas.laodJS("http://libs.baidu.com/jquery/2.0.0/jquery.min.js",function(){
		// JS加载完成
		alert($('html').html());
	});


主入口文件ipwas.min.js 中插件定义:

// 加载模块需要定义文件位置
// 为此你需要在 ipwas.min.js 中 增加你需要对应的模块
/*
例如:
plugin:{
	user:'module/user',
	test:'module/test',
}

user 为 模块名 ,后面的值为路径 默认是放在 module 目录下的 user 为对应的JS 文件名

加载实列:
ipwas.use(["user"],function(){});	


*/


定义模块方法:

/**
 * user    = 模块名
 * require = 引入其他模块
 * exports = 内部方法传递
 * module  = 其他关联的一些属性和方法
 * **/
;!function(e){
	"use strict";
	define('user',function(require, exports, module){
		 // 在模块中调用模块B,未加载模块自动加载,加载为同步,但不会阻塞需要加载完成才能调用对应方法
		require("test");// 初始化test模块,这里test 只是示范具体根据你的需要加载你对应的模块
		
		exports.test = function(){
			alert('模块A调用成功');
			var test = require("test");/*必须在入口初始化,不初始调用可能会报报错,因为JS未加载完成。*/
			test.test();
		}
		
	});
}(window);

/**
注意:user 为 模块名也就是使用方法开头,这里按你自己的业务更改,这里必须与上面入口加载名一致
以 user 中的  test 为列:

它的正确使用方法是:ipwas.user.test();


**/


插件使用方法:

    ipwas.你的模块名.模块名中对应方法();

以user 模块示范:

    它的正确使用方法是:ipwas.user.xxxxxx;


具体请下载SDK吧,里面有详细示范