js 模块化编程

第一步：

引入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.异步的JＳ　等

 

 

考虑一：

定义ＪＳ文件：

var module = {
  exports: {}
};

// 定义一个立即执行的方法，里面定义了一个方法，然后外面就可以调用了
(function(module, exports) {
  exports.getName = function (name) {
   return name 
  };
}(module, module.exports))

 
var myFun = module.exports.getName;

console.log(myFun('TigerChain'))

 

考虑２：常见的ＪＳ：

源码如下：

// 定义一个 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
        }

考虑３：异步ＪＳ：

 

对此分为３类讲述：

１.动态创建 Script 标签

动态创建标签：需要Ｊｑｕｅｒｙ文件的支持：

脚本内容分别为：

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')
    	}
    }
}

 

３.用 async/defer

待完成