WeX5界面模块化的使用—JS引用
WeX5的JS是基于AMD规范， 通过requirejs技术实现AMD规范。本文章主要介绍在WeX5中，如何引用JS，具体分为：
如何引用符合AMD规范的JS？
如何引用不符合AMD规范的JS？
如何引用外部的JS？
针对JS引用，平台自带了一个专门的演示案例importJs，目录结构如下：
引用JS
如何引用符合AMD规范的JS文件?
方式一：通过require(‘xx’)引用
AMD1.js是UI2下符合AMD规范的一个文件，代码如下：
AMD1.js文件内容：
define(function(require){
return {
fnOfAMD1: function(){
alert("hello AMD1");
}
};
});
importJs.js中引用AMD1.js的代码如下：
define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
//加载UI2下, 符合AMD规范的文件
var amd1 = require("./AMD1");
...
)};
说明：在importJs中，通过var amd1 = require(“./AMD1″)引用了当前目录下的AMD1.js文件，之后，可以通过amd1调用AMD1.js文件返回的方法或变量，例如：amd1.fnOfAMD1() //调用AMD1.js定义的方法;
方式二：通过require([‘x1′, ‘x2′], function(p1, p2){})引用
AMD2.js是UI2下一个符合AMD规范的js文件，内容如下：
define(function(require){
return {
fnOfAMD2: function(){
alert("hello AMD2");
}
};
});
importJs.js中引用AMD2.js的代码如下：
Model.prototype.importInnerBtnClick = function(event){
//加载UI2下, 符合AMD规范的文件
var path = "./AMD2";
require([path], function(m){
m.fnOfAMD2();
});
};
说明：在importJS.js中，通过require([xxx], function(x){})方式，引用了AMD2.js文件，在回调函数中，参数m是AMD2.js文件返回的对象，在回调函数中，可以通过m调用AMD2.js中返回的对象上的方法和变量，例如：m.fnOfAMD2();
如何引用不符合AMD规范的JS文件？
对于不符合AMD规范的JS文件，引用方式与符合AMD规范的JS文件类似，唯一的区别是不符合模块化的JS没有返回值，具体引用方式如下：
方式一：通过require(‘xx’)引用
noneAMD1.js是UI2下一个不符合AMD规范的JS文件，内容如下：
function fnOfNoneAMD1(){
alert("hello noneAMD1");
}
importJs.js中引用noneAMD1.js的代码如下：
define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
//加载UI2下, 符合AMD规范的文件
var amd1 = require("./AMD1");
//加载外网, 符合AMD规范的文件
var outterAMD1 = require("http://localhost:8080/x5/UI2/demo/misc/importJs/outterAMD1.js");
//加载UI2下, 不符合AMD规范的文件
require("./noneAMD1");
...
});
说明：如上12行代码所示，通过require(“./noneAMD1″)引用了不符合AMD规范的noneAMD1.js文件，在importJs.js的后续代码中，可以直接访问noneAMD1.js中定义的全局函数或变量，例如：fnOfNoneAMD1();
方式二：通过require([‘x1′, ‘x2′], function(){})引用
noneAMD2.js是UI2下一个不符合AMD规范的JS文件，内容如下：
function fnOfNoneAMD2(){
alert("hello noneAMD2");
}
importJs.js中引用noneAMD2.js的代码如下：
Model.prototype.importInnerNoneAMDBtnClick = function(event){
//加载UI2下, 不符合AMD规范的文件
var path = "./noneAMD2";
require([path], function(){
fnOfNoneAMD2();
});
};
说明：在require([xx], function(){})的回调函数中，可以直接使用被引用的noneAMD2.js中定义的全局函数和变量，例如：fnOfNoneAMD2();
如何引用外部的JS文件？
对于外部的JS文件，引用方式和UI2下的JS文件类似（无论是符合AMD规范还是不符合AMD规范），唯一的区别是给定的JS文件路径必须是”http://”开头的绝对路径，且必须是完整的路径（如果有扩展名，必须带扩展名，如”.js”）。
例如：
define(function(require){
...
//加载外网, 符合AMD规范的文件
var outterAMD1 = require("http://wex5.com/cn/wp-content/uploads/2015/04/outterAMD1.js");
...
//加载外网, 不符合AMD规范的文件
require("http://wex5.com/cn/wp-content/uploads/2015/04/outterNoneAMD1.js");
...
Model.prototype.importOutterBtnClick = function(event){
//加载外网, 符合AMD规范的文件
var path = "http://wex5.com/cn/wp-content/uploads/2015/04/outterAMD2.js";
require([path], function(m){
m.fnOfOutterAMD2();
})
};
...
Model.prototype.importOutterNoneAMDBtnClick = function(event){
//加载外网, 不符合AMD规范的文件
var path = "http://wex5.com/cn/wp-content/uploads/2015/04/outterNoneAMD2.js";
require([path], function(){
fnOfOutterNoneAMD2();
})
};
...
});
总结
在WeX5中，引用JS（无论是符合AMD规范，还是不符合AMD规范）主要有两种方式：require(‘path’)和require([xx, xx], function(p1,p2){})，这两种方式对比如下：
引用JS方式 被引用JS的加载顺序 限制
require(‘xx’) 预先加载被引用的JS，再加载当前JS; require参数必须是字符串常量；
require([xx, xx],function(p1,p2){}) 先加载当前JS，执行到require语句时，才加载被引用的JS； require参数支持变量或表达式；
对于这两种require方式，path必须符合以下规则：
如果引用UI2下的文件，支持两种路径：以”./”或”../”开头的相对路径（相对于当前js所在的文件）；以”$UI/”开头的路径（$UI表示UI2）；路径不需要带文件扩展名”.js”；
如果引用外部文件，路径必须是以”http://”开头的完整路径（如果有扩展名”.js”，必须带上扩展名）；
WeX5是单页模式，通过require引用的JS文件，每个不同的JS文件只加载一次，如果使用不符合AMD规范的JS文件，需要注意全局JS变量只有一份（多个页共享相同的全局变量）。
注意事项
通过require加载js文件时，如果被加载的js文件中有document.write时，会报错，例如，执行以下代码时：
require(["http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.4"]，function(){});
会出现以下错误：
Failed to execute ‘write’ on ‘Document': xxx It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
原因是”http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.4″返回的代码类似：
(function(){
window.BMap_loadScriptTime = (new Date).getTime();
document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?type=quick&file=api&ak=您的密钥&t=20140109092002">');
document.write('</script><script type="text/javascript" src="http://api.map.baidu.com/getscript?type=quick&file=feature&ak=您的密钥&t=20140109092002"></script>');
})();
解决方法可参考异步加载百度地图，例如：
Model.prototype.baiduBtnClick = function(event){
if (!window._baiduInitialize){
window._baiduInitialize = function(){
var mp = new BMap.Map("map");
mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
};
require(["http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=_baiduInitialize"], function(){});
}
};
#### 案例资源
下载：[importJs案例](http://wex5.com/cn/wp-content/uploads/2015/04/importJs.rar)
运行方式：将下载后的文件解压后，将UI2下的内容复制到WeX5的UI2目录；启动WeX5服务；在浏览器中输入http://localhost:8080/x5/UI2/demo/misc/importJs/importJs.w即可。
- 快速入门
- 第一个应用
- WeX5产品能力和技术
- wex5技术理念
- WeX5可以怎么玩？
- WeX5和BeX5比较
- UI2开发
- UI2前端框架基础01：应用和页面
- UI2框架基础02:框架结构图和目录
- 组建基础
- 编程基础
- js引用
- css、text引用
- 设置资源依赖
- 代码调试
- 数据组件
- Data组件基础01：列、初始化加载状态、行对象和游标
- Data组件基础02：规则、数据遍历查找
- Data组件基础03：CRUD
- Data组件基础04：Tree、主从数据、更新模式
- Data组件基础05：再谈Data组件新增，查询，保存
- Data组件的JSON数据格式
- WeX5 & BeX5 页面框架核心之数据绑定
- 数据绑定属性系列
- 初识绑定
- visible绑定
- text绑定
- html绑定
- css绑定
- 页面布局
- 页面样式
- 样式基础
- 添加自定义图标(iconfont)
- 常用组件
- bar组件
- contents组件
- 前端路由和页面跳转
- 路由模块
- 页面跳转
- 部署和发布
- 三种部署方式
- Web app部署
- UIServer的缓存机制
- 自定义组件开发
- 组件运行时开发案例
- 组件设计时开发案例
- 组件设计时开发参考
- 属性编辑器配置和开发
- 自定义向导开发(waiting)
- 第三方库集成
- 集成Echarts
- 集成百度和高德地图
- App开发
- 打包
- App打包基础和常见问题
- App打包原理和目录结构
- App打包过程详解
- App打包服务器环境搭建
- 苹果证书申请 使用
- Android和IOS的本地应用图标规范
- Android和IOS的本地App如何安装（apk&ipa）
- 苹果App部署HTTPS进行在线下载安装
- 调试
- Android和IOS真机调试
- 插件
- 如何使用和扩展cordova插件
- cordova插件开发
- 常用cordovar插件
- SQLite插件
- 极光推送(JPush)插件
- 微信支付入门教程
- 微信、支付宝支付开发
- 服务端开发
- App与服务端交互原理
- 轻量级Baas(视频)(文字) (.net版)
- Data组件的JSON数据格式11
- 微信服务号集成(视频)
- 扩展学习资料
- bootstrap
- Knockoutjs
- JQuery
- requirejs
- phonegap/cordova