本文共 3748 字，大约阅读时间需要 12 分钟。

第一步：

引入js 文件：

这里放置字面对象模块化，比如：

//字面量对象模块化2var 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 = runMduleconsole.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 = 28var 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        }

考虑３：异步ＪＳ：

对此分为３类讲述：

１.

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

脚本内容分别为：

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)

２.

　ａｊａｘ　请求较为简单：基本上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')    	}    }}

３.

待完成

转载地址：https://blog.csdn.net/xiamaocheng/article/details/104519029 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！