第一步:
引入js 文件:
这里放置字面对象模块化,比如:
//字面量对象模块化2
var customModule2 = {}
customModule2.getTime = function() {
return "现在的时间是:"+new Date()
}
// 定义一个直接运行的函数
var runMdule = (function(){
var name = 'TigerChain1'
var age = 28
function getMyName() {
return name
}
function getMyAge() {
return age
}
return {
// 把 getMyName 和 getMyAte 方法暴露出去
getMyName:getMyName,
getMyAge:getMyAge
}
})() ;
2.创建索引文件]
var name = customModule.getName() ;
console.log(name)
var time = customModule2.getTime() ;
console.log(time)
var myrunMdule = runMdule
console.log(myrunMdule.getMyName())
console.log(window.module.getName +":"+window.module.age)
定义一个:测试文件:
在这里的模块共分为3类:
1.自定义模块化的JS,
2.常见的JS
3.异步的JS 等
考虑一:
定义JS文件:
var module = {
exports: {}
};
// 定义一个立即执行的方法,里面定义了一个方法,然后外面就可以调用了
(function(module, exports) {
exports.getName = function (name) {
return name
};
}(module, module.exports))
var myFun = module.exports.getName;
console.log(myFun('TigerChain'))
考虑2:常见的JS:
源码如下:
// 定义一个 commonjs 的 js
var name = 'TigerChain'
var age = 28
var address = 'china'
function getName() {
console.log(name)
}
function getAge() {
console.log(age)
}
// 把两个方法和一个属性暴露出去
module.exports = {
myName:getName,
myAge:getAge,
address
}
引入方法声明文件:
[function(require, module, exports) {
// 定义一个 commonjs 的 js
var name = 'TigerChain'
var age = 28
var address = 'china'
function getName() {
console.log(name)
}
function getAge() {
console.log(age)
}
// 把两个方法和一个属性暴露出去
module.exports = {
myName: getName,
myAge: getAge,
address
}
考虑3:异步JS:
对此分为3类讲述:
动态创建标签:需要Jquery文件的支持:
脚本内容分别为:
function addDiv() {
var bodyDiv = document.getElementById('mydiv')
var input = document.createElement("input");
bodyDiv.appendChild(input);
var mydiv = document.createElement('div')
bodyDiv.appendChild(mydiv)
console.log(1)
}
addDiv() ;
console.log(2)
/**
* @Description: 动态添加 js 异步执行
* @Author: TigerChain
*/
function dynamicAddScipt(url) {
var script = document.createElement("script");
script.type = "text/javascript";
// script.text="alert('test')" // 内联创建,不会同步
script.src = url;
// document.body.appendChild(script);
document.head.appendChild(script);
console.log(document)
}
dynamicAddScipt('../test.js')
console.log(4)
ajax 请求较为简单:基本上XHR 对象的使用方法:
unction customXHR(options) {
options = options || {}
options.methods = options.methods.toUpperCase() || 'GET'
options.url = options.url || ''
// 默认是异步请求
options.async = options.async || true
options.data = options.data || {}
options.success = options.success || function() {}
options.faile = options.faile || function () {}
console.log(options)
var xhr = null
// 新的浏览器支持
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
}else { // IE 5 IE6 支持
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
// 请求参数的封装
var params = []
for(var param in options.data){
params.push(param +'='+options.data[param])
}
// 每个请求参数后面添加一个 &
var requestData = params.join('&')
// 请求类型,默认是 GET
var requestType = options.methods.toUpperCase()
if(requestType == 'GET'){
xhr.open(requestType,options.url+'?'+
requestData,options.async)
xhr.send()
}else if(requestType =="POST"){
xhr.open(requestType,options.url,options.async)
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded;charset=utf-8");
xhr.send(requestData)
}
/** readyState 说明:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
**/
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status ==200){
options.success(xhr.responseText)
}else if (xhr.status !=200){
options.faile('request error')
}
}
}
待完成