js 模块化编程
发布日期:2021-06-28 15:28:00
浏览次数:3
分类:技术文章
本文共 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.异步的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 = 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 }
考虑3:异步JS:
对此分为3类讲述:
1.
动态创建标签:需要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)
2.
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') } }}
3.
待完成
转载地址:https://blog.csdn.net/xiamaocheng/article/details/104519029 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
初次前来,多多关照!
[***.217.46.12]2024年04月28日 17时50分37秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
VUE 事件里写了retrun后,后面代码却还是在执行
2019-04-29
微信小程序之去除点击元素出现高亮背景的解决方案
2019-04-29
微信小程序 页面传参数跳转页面
2019-04-29
微信小程序自定义多选
2019-04-29
微信小程序scroll-view底部内容无法完全显示
2019-04-29
微信小程序-在button添加icon和去除button点击时的默认背景色
2019-04-29
微信小程序——自定义组件
2019-04-29
js数组原型方法
2019-04-29
JavaScrip实现点击切换验证码及校验
2019-04-29
Java图形化绘制
2019-04-29
输入/输出流和文件操作
2019-04-29
Java数据库简介
2019-04-29
Java线程简介
2019-04-29
Java网络通信简介
2019-04-29
URL编程简介
2019-04-29
Java集合简介
2019-04-29
HTML5之Validation Plugin表单插件使用(仅供参考)
2019-04-29
HTML5简单轮播的实现(使用JQuery)
2019-04-29
MongoDB数据库安装
2019-04-29