【JavaScript框架封装】公共框架的封装
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81056006 /* * @Author: 我爱科技论坛 * @Time: 20180706 * @Desc: 实现一个类似于JQuery功能的框架 // 公共框架 // 种子模块：命名空间、对象扩展、数组化、类型的判定、domReady机制，无冲突处理 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ each: function (fn) { var i = 0, len = this.length; for (; i < len; i++) { // call第一个参数传递的实际上就是this的执行，后面的参数就是目标函数fn需要传递的参数（可省略） // this[i] 里面的取值方式类似于json取值，每一个参数存储了选择器获取的所有的nodeList元素集合中的一个元素 fn.call(this[i]); } return this; } }); // 不需要参与链式访问的 /*公共部分*/ xframe.extend(xframe, {}); /*字符串处理模块*/ xframe.extend(xframe, { /* * 下面的这几个都会用到正则表达式，会在后面补充 * camelCase函数的功能就是将形如background-color转化为驼峰表示法：backgroundColor * */ camelCase: function (str) { // all: -c, letter: c return str.replace(/\-(\w)/g, function (all, letter) { // 把所有的字母都转换为大写的状态 return letter.toUpperCase(); }); }, /** * 去掉左边的空格 str = ' ()' * @param str * @returns {*} */ ltrim: function (str) { /* ^ ：表示以XX开头 \s: 表示空格 *: 表示匹配零个或者多个 g: 表示匹配全部，如果没有的话默认只会匹配一个 (^\s*): 表示以空格开头的一个或者多个字符 str.replace(, ''): 替换…… ----------------------------------------------------[其他用法归纳]------------------------------------- ^, $: 匹配字符串开始，结束的位置 eg: g, i：匹配所有，不区分大小写的字符串； eg: /a/g, /a/i *， +， ？: 匹配任意次数, 匹配前面的字符一次或者多次， 0次或者1次 [] : 匹配一个字符集合； eg: [a-z]所有小写字母的集合， [0-9]所有数字的集合 eg: [a-zA-Z]所有大小写字母的集合 脱字符^: 匹配任何不在该集合中的字符，与上面的用法正好相反 {}: 指定重复前面的一个字符多少遍 eg:{N} 重复n遍 eg:{n, m}重复n-m遍 eg: {n, }至少重复n遍 eg：{,m}至多重复m遍 // 【熟记：同类记忆法】 \s: 表示空格：包括空格、换行、回车、tab，等价于[\n\r\t\f] \S: 匹配非空格字符，等价于[^ \n\r\t\f] \d: 表示十进制数字，等价于[0-9] \D: 匹配一个非数字字符， 等价于[^0-9] \w(小写): 表示字母或者数字，等价于[a-zA-Z0-9] \W: 非字母且非数字，与\w相反，等价于：[^a-zA-Z0-9]* * */ return str.replace(/(^\s*)/g, ''); }, /* 去掉右边的空格, str = '() ' * @param str */ rtrim: function (str) { return str.replace(/(\s*$)/g, ''); }, /** * 用于去掉两边的空格(去掉所有的空格) str =' () ' * @param str * @returns {*} */ trimOld: function (str) { return str.replace(/(\s*$)/g, ''); }, /** * 【使用模板来实现一个简单的数据绑定】 * 实现简单的数据绑定： @（name）, @(sex) * data: var user = {name : 'xiugang', role, '钻石会员'} * str: = '欢迎@(name)， 等级：@(role)光临本站！'; * @param str 原始的数据格式 * @param data 需要绑定的数据对象，是一个json格式的数据， json = {name : 'xiuxiu', age : 18} * @returns {*} */ formateString: function (str, data) { // 使用后面的值去替换掉前面的值 // 细节分析：((\w+))使用括号匹配的值在JavaScript中实际上就是一个$1, 把这个参数传给match // (\w+) 第二个括号实际上匹配到的就是一个$2, 把这个参数传给key // match: @(name), @(age), @(sex) // key: name, age, sex return str.replace(/@\((\w+)\)/g, function (match, key) { // 先判断有没有匹配到相应的字符串 // 找到@()开始的字符串， 使用数据域中的数据去替换 // 如果json数据data里面么有找到相应的data[key]数据，返回的实际上就是一个空的字符串 return typeof data[key] === 'undefined' ? '' : data[key]; }); }, /** * @param str * @returns {*} */ trimLeft: function (str) { return str.replace(/^\s*/g, ''); }, /** * @param str * @returns {*} */ trimRight: function (str) { return str.replace(/\s*$/g, ''); }, /** * 去掉所有的空格(两边的空格)， 可以针对任意格式的字符串 * 先去掉左边的空格，然后去掉右边的空格 * @param str * @returns {*} */ trim: function (str) { // var regx = '/^\s*\s*$/g'; // return str.replace(regx, ''); // | 表示或的意思, 也就是满足| 左边的也成立, 满足 | 右面的也成立 // (^\s*) 表示的就是以0个空格或者多个空格开头 // (\s*$) 的意思就是, 以0个空格或者多个空格结尾 // /…/g 是正则表达式的属性, 表示全文匹配, 而不是找到一个就停止 return str.replace(/(^\s*)|(\s*$)/g, ""); //return this.trimRight(this.trimLeft(str)); }, /** * 发送一个ajax请求 * @param url 请求的URL地址信息 * @param fn， 请求成功的回调函数 */ ajax: function (url, fn) { // 创建一个XMLHTTPRequest对象 var xhr = createXHR(); // 每当 readyState 改变时，就会触发 onreadystatechange 事件。 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { // 接受到响应之后，第一步检查status属性，为200则表明成功，此时responseText已经准备就绪； // 为304表明请求资源未被修改，可以直接使用浏览器中的缓存版本。 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { fn(xhr.responseText); } else { alert('错误的文件！'); } } }; // 定义请求参数, 对于指定的url发送一个get请求 xhr.open('get', url, true); // 发送请求 // 第三个参数：指示请求使用应该异步地执行。 // 如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。 // 如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。 xhr.send(); /** * 创建一个XHR */ function createXHR() { //本函数来自于《JavaScript高级程序设计 第3版》第21章 if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { // arguments.callee用于指向他的回调函数 if (typeof arguments.callee.activeXString != "string") { var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ], i, len; for (i = 0, len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex) { //skip } } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available."); } } }, /** * json转换为字符串 * @param json * @returns {string} */ json2String: function (json) { return JSON.stringify(json); }, /** * 字符串转换为json * @param str * @returns {any} */ string2Json: function (str) { return eval(str); } }); /*数组相关*/ xframe.extend(xframe, { /** * 将一个数组清空，并返回数组的引用 * 只需要把数组的元素置空为0即可 * @return {xframe} */ clear: function () { this.length = 0; return this; }, /** * 返回数组的第0个元素 * @return {*} */ first: function () { return this[0]; }, /** * 返回数组的最后一个元素 * @return {*} */ last: function () { return this[this.length - 1]; }, /** * 计算一个数组的大小尺寸 * @return {number|*} */ size: function () { return this.length; }, cacl: function (arr, callback) { var ret; for (var i = 0; i < arr.length; i++) { // 专门用于处理每一项的计算机过程 ret = callback(arr[i], ret); } return ret; }, /** * 对数组里面的所有元素求和 * @return {*} */ sum: function () { // 1. 正常写法 var ret; for (var i = 0; i < this.length; i++) { ret = ret + this[i]; } return ret; }, max: function () { }, min: function () { }, avg: function () { }, intersect: function () { }, union: function () { }, diff: function () { }, unique: function () { }, forEach: function () { }, map: function () { }, filter: function () { }, every: function () { }, some: function () { }, reduce: function () { }, reduceRight: function () { }, indexOf: function () { }, lastIndexOf: function () { }, enhanceUnique: function () { }, without: function () { }, flatten: function () { }, random: function () { }, removeAt: function () { }, contains: function () { } }); /*Math*/ xframe.extend(xframe, { random: function () { } }); /*数据类型检验*/ xframe.extend(xframe, { // 鸭子类型（duck typing）如果它走起路来像鸭子，叫起来也是鸭子，那么它就是鸭子。 // 只关注对象的行为，不关注对象本身面向接口编型 ，而不是面向实现编程，是设计模式中最重要的思想。 // 【理解】：一个对象有效的语义，不是由集成自特定的类或实现特定的接口， 而是由当前方法和属性的集合决定的!!! isNumber: function (val) { // 如果这个数字是有限的话， 而且是数字类型 return (typeof val === 'number' && isFinite(val)) && (Object.prototype.toString.call(val) === '[object Number]'); }, /*** * 判断一个变量是不是Boolean类型 * @param val * @returns {boolean} */ isBoolean: function (val) { return (typeof val === 'boolean') && (Object.prototype.toString.call(val) === '[object Boolean]'); }, /** * 判断一个变量是不是字符串类型 * @param val * @returns {boolean} */ isString: function (val) { return (typeof val === 'string') && (Object.prototype.toString.call(val) === '[object String]'); }, /** * 判断一个变量是不是undefined * @param val * @returns {boolean} */ isUndefined: function (val) { // oid 0 is a correct and standard way to produce undefined. return (val === void 0) || (typeof val === 'undefined') && (Object.prototype.toString.call(val) === '[object Undefined]'); }, /** * 判断一个变量是不是为空 * @param val * @returns {boolean} */ isNull: function (val) { return (val === null) && (Object.prototype.toString.call(val) === '[object Null]'); }, /** * 检测 * @param obj * @returns {*} */ isNaN: function (val) { // 只要这个数字通过判断是不是和他自身相同或者使用typef的方式去检测 return val !== val; }, /** * 判断一个变量是不是一个对象类型 * @param val * @returns {boolean} */ isObject: function (val) { if (val !== null && val !== undefined) { if ((typeof val === 'object') && (Object.prototype.toString.call(val))) { return true; } } return false; }, /** * 判断一个对象是不是数组对象 * @param val * @returns {boolean|void|string} */ isArray: function (val) { // 判断上不是一个数组的先判断这个数组对象是不是为空， 因为如果val为空的话，就是val.constructor这个属性实际上是没有的，error if (val !== null || typeof val !== "undefined") { // 注意在使用constructor判断数据类型的时候比较的实际上是他的原型对象的constructor属性， 这个属性指向的实际上是这个变量的原型对象 return (val.constructor === Array) && (Object.prototype.toString.call(val)); } return false; } }); /*数组化：arguments, document.forms, document.getElementsByName， document.getElementsByTagName()*/ xframe.extend(xframe, { /** * 把一个伪数组转换为一个新的数组 * 实现思路： 取出伪数组中的每一个元素， 然后把取出来的这些元素重新放入到一个新的数组里面去！！！ * @param start * @param end * @returns {Array} */ toArray: function (start, end) { var result = []; var start = start || 0, // 这里的this指向调用的对象，使用了call之后， 改变了this的指向， 指向传进来的对象(外边必须要修改this的指向) // 如果外边不修改this的指向，这里的this默认指向的是xframe这个框架对象 end = end || this.length; for (var i = start; i < end; i++) { result.push(this[i]); } return result; }, /** * 方法二： 直接把一个伪数组转换为JavaScript中的一个数组对象 * @param obj * @returns {T[]} */ slice: function (obj) { return Array.prototype.slice.apply(obj); } }); /*domReady的实现*/ xframe.extend(xframe, { //arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数 /** * 实现一个domReady方法：所有元素都加载完毕之后一个回调函数 * @param domElement * @param fn */ onDOMReady: function (fn) { if (document.addEventListener) { // W3C组织: 如果传过来的是一个DOM元素的话，就直接对这个DOM元素添加监听， 否则，就对整个document添加事件监听 document.addEventListener('DOMContentLoaded', fn, false); } else { // IE浏览器 IEContentLoaded(fn); } /** * 微软的IE浏览器的处理方法 * @param fn * @constructor */ function IEContentLoaded(fn) { // 定义需要的全局变量 var done = false, document = window.document; // 这个函数只会在所有的DOM节点树创建完毕的时候才会继续向下执行 var init = (function () { if (!done) { console.log('done……'); // 如果DOM树创建完毕的话 done = true; fn(); } })(); /* 使用这个立即函数来调用IE浏览器的内置函数实现domReady的功能 */ (function () { try { // DOM树在未创建完毕之后调用 doScroll的话，会抛出错误 document.documentElement.doScroll('left'); } catch (err) { // 延迟1秒之后再次执行这个函数， 形成一个函数递归调用的功能【回调函数】 // clllee是一个函数指针，指向的是拥有这个arguments对象的函数， 从而实现再次调用这个函数 setTimeout(arguments.callee, 1); return; } // 如果没有错误的话，表示DOM树已经完全创建完毕， 此时开始执行用户的回调函数 init(); })(); // 监听document的加载状态(DOM加载的过程中会不断回调这个函数) document.onreadystatechange = function () { console.log('onreadystatechange……'); if (document.readyState === 'complete') { console.log('complete……'); // 如果加载完成的话 document.onreadystatechange = null; init(); } } } } }); })(xframe);
