这是我根据司徒正美《JavaScript框架设计》一书然后百度了很多东西之后自己写的一个JS框架,满足了司徒正美文中的种子模块部分,包含了命名空间、对象扩展、数组化、类型判断、选择器、多库并存,在异步加载中使用了CMD规范的seaJs,这个框架一年前就已经写了,之后一直在研究其他东西,没有进行扩展,今天把它发布出来也是为了时刻提醒自己,以后一定要继续扩展它。

下面是代码:

//立即执行的函数表达式
(function(){//定义全局变量_$存储window.$var window = this,_$ = window.$,_Amy = window._Amy,DOC = document,W3C = DOC.dispatchEvent,      //判断浏览器html = DOC.documentElement,  //HTML元素head = DOC.head,            //head元素rword = /[^,]+/g,          //匹配除 ","以外的东西class2type = {"[object HTMLDocument]":"Document","[object HTMLCollection]":"NodeList","[object StaticNodeList]":"NodeList","[object DOMWindow]":"Window","[object global]":"Window","null":"Null","NaN":"NaN","undefined":"Undefined"},toString = class2type.toString();"Boolean,Number,String,Function,Array,Da,RegExp,Window,Document,Arguments,NodeList".replace(rword,function(name){class2type["[object " + name+"]"] = name;});Amy = window.Amy = window.$ = function(selector){return new Amy.fn.init(selector);};//选择器初始化querySelectorAmy.fn = Amy.prototype = {init:function(selector){var dom = document.querySelector(selector);return dom;}};Amy.fn.init.prototype = Amy.fn;//对象扩展(原型方法)Amy.extend = Amy.fn.extend = function(obj,prop){if(!prop){prop = obj;obj = this;}for(var attr in prop){obj[attr] = prop[attr];}};Amy.extend({html : html,head :head,/*** 多库并存问题*/noConflict:function(deep){window.$ = _$;if(deep)window.Amy = _Amy;return Amy;},bindThis:function(obj){var me = this;var arg = [].slice.call(arguments,1);return function(){me.apply(obj,arg);}},/*** 运行所有参数,返回运行成功的函数返回值*/these:function(){var returnVal = null;for(var i = 0,len = arguments.length;i<len;i++){var lambda = arguments[i];try{returnVal = lambda();}catch(e){}}return returnVal;},/*** 根据浏览器获取ajax对象*/ajax:function(){return this.these(function() {return new ActiveXObject('Msxml2.XMLHTTP')},function() {return new ActiveXObject('Microsoft.XMLHTTP')},function() {return new XMLHttpRequest()}) || false;},/***数组化 */toArray:function(){return [].slice.call(arguments);},/*** 数组去重*/noRepeat:function(target){var result = {};target.forEach(function(item){result[item] = item;});return Object.keys(result).map(function(item){return item | 0;});},/*** 获取多个Id* @returns {*}*/list:function(){var result = [];for(var i = 0,len =arguments.length;i<len;i++){var element = arguments[i];if(typeof element == "string"){element = $(element);}if(len == 1)return element;elseresult.push(element);}return result;},repeat:(function(){var join = Array.prototype.join,obj = {};return function(target,n){obj.length = n + 1;return join.call(obj,target);};})(),/*** 事件绑定*/bind:W3C?function(el,type,fn,bool){el.addEventListener(type,fn || $.noop,!!bool);return fn;} : function(el,type,fn){el.attachEvent("on"+type,fn || $.noop);return fn;},/*** 解绑事件*/unbind:W3C?function(el,type,fn,bool){el.removeEventListener(type,fn,!!bool);} : function(el,type,fn){el.detachEvent("on"+type,fn);},/*** 用于取得数据的类型(一个参数的情况下)或判定数据的类型(两个参数的情况下)* @param {Any} obj 要检测的东西* @param {String} str ? 要比较的类型* @return {String|Boolean}* @api public*/type:function(obj,str){var result = class2type[(obj != obj || obj == null)?obj:Object.prototype.toString.call(obj)] || obj.nodeName || "#";if(result.charAt(0) === "#"){if(obj == obj.document && obj.document != obj){result = "Window";}else if(obj.nodeType === 9){result = 'Document';}else if(obj.callee){result = "Arguments";}else if(isFinite(obj.length) && obj.item){result = "NodeList";}else{result = Object.prototype.toString.call(obj).slice(8,-1);}}if(str){return str === result;}return result;},noop:function(){},//字符串操作/*** 字符串所占字节数*/btyeLen:function(target){var byteLength = target.length;for(var i = 0,len = target.length;i<len;i++){if(target.charCodeAt(i) > 255)   //若为中文则加1byteLength++;}return byteLength;},/***字符串截取,当超过限定时默认添加三个... */truncate : function(target,length,text){length = length || 30;text = text === void 0?"...":text;return target.length > length?target.slice(0,length - text.length) + text:String(target);},capitalize:function(target){return target.charAt(0).toUpperCase() + target.slice(1).toLowerCase();},/*** 去除字符串开头和结尾空格*/trim : function(str){return str.replace(/^\s+|\s+$/g,"");},//数组操作/*** 判断目标中是否包含一个数(数组或字符串)*/contains : function(target,index){return target.indexOf(index) > -1;},/*** 删除目标(数组)指定位置的一个数(返回bool)*/removeAt:function(target,index){return !!target.splice(index,1).length;},/***删除目标(数组)中第一次出现的数*/remove:function(target,item){var index = target.indexOf(item);if(index > -1){return !!target.splice(index,1);}return false;},/*** 从目标(数组)随机抽取一个数*/random:function(target){return target[(Math.random()*target.length)|0];},/*** 数组平坦化操作* 命名函数表达式,fla只在函数内有定义,这里用递归*/flatten:function fla(target){  var result = [];target.forEach(function(item){if(Array.isArray(item)){result = result.concat(fla(item));}else{result.push(item);}});return result;},/*** 删除数组中null和undefined* 利用filter过滤操作  //返回true值*/compact:function(target){var result = target.filter(function(item){return item != null;});return result;},max:function(target){return Math.max.apply(0, target);},min:function(target){return Math.min.apply(0,target);},//数值扩展/*** 确保数值在[n1,n2]之间*/limit:function(target,n1,n2){var arr = [n1,n2].sort();if(target < arr[0]){target = arr[0];}if(target > arr[1]){target = arr[1];}return target;},iterator:function iter(n,type){if(typeof type == "undefined" || type == "*"){return n==0 ? 1:n*iter(n-1);}else if(type == "+"){return n==0 ? 1:n+iter(n-1);}},/*** 求距离目标最近的数*/near : function(target,n1,n2){var diff1 = Math.abs(target - n1),diff2 = Math.abs(target - n2);return diff1 < diff2?n1:n2;},/*** 复制数组* 一般不希望别人访问原数组进行修改*/clone:function(target){if(this.type(target) == "Array"){var arr = new Array(target.length);for(var i = 0,len = target.length;i<len;i++){arr[i] = target[i];}return arr;}else{return 0;}}});
})();

View Code

转载于:https://www.cnblogs.com/xiaohaoxuezhang/p/4811203.html

自己的JS框架--Amy框架。相关推荐

  1. html 简单机器人对话页面,简单的js聊天机器人框架BotUI

    Botui是一款简单的js聊天机器人框架.Botui基于Vue.js,通过简单配置,就可以制作出一个功能简单的聊天机器人,非常神奇. 使用方法 在页面中引入botui.min.css和botui-th ...

  2. 关于node.js的web框架的应用及并发性能测试

    "Node.js 是服务器端的 JavaScript 运行环境,它具有无阻塞(non-blocking)和事件驱动(event-driven)等的特色,Node.js 采用 V8 引擎,同样 ...

  3. node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...

  4. 转 10 个最佳的 Node.js 的 MVC 框架

    10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到:  收藏 +322 Node.js 是一个基于Chrome JavaScript ...

  5. node.js中的框架

    node.js中的框架 载自: http://nodeframework.com/ MVC frameworks Sinatra-like These frameworks offer rich co ...

  6. 用原生 JS 实现 MVVM 框架2——单向绑定

    上一篇写了实现 MVVM 框架的一些基本概念 本篇用代码来实现一个完整的 MVVM 框架 思考 假设有如下代码,data里面的name会和试图中的{{name}}--一一映射,修改data的值,会直接 ...

  7. 10 个最佳的 Node.js 的 MVC 框架

    Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, ...

  8. Node.js 国产 MVC 框架 ThinkJS 开发 config 篇

    原创:荆秀网 网页即时推送 https://xxuyou.com | 转载请注明出处 链接:https://blog.xxuyou.com/nodejs-thinkjs-study-config/ 本 ...

  9. vue.js是什么框架?有什么优势?

    vue.js (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图 ...

最新文章

  1. 太赞了!《Python知识手册》更新到v2.2版
  2. 软件开发人员想找的工作,随便聊聊,娱乐大家,请补充补充
  3. Linux环境变量的设置和查看
  4. 双11享Go了吗?2017阿里双11在线峰会续写科技盛宴!
  5. github ssh 配置_怎么给Git配置多个SSH Key?
  6. 虚拟机安装ubuntu14.04.5系统
  7. php中访问控制_PHP之Trait详解
  8. 传感器 - 距离传感器
  9. Security+ 学习笔记54 安全政策
  10. java datagrid导出excel_Datagrid数据导出到Excel文件给客户端下载的几种方法
  11. 软件工程毕设(六)·论文
  12. java生成二维码工具
  13. 创新声卡KX驱动安装、调试、使用教程
  14. sz方法从服务器下载超过4g文件方法
  15. Android视频直播的实现
  16. jQuery实现二级下拉菜单
  17. 如何解决ping不通问题
  18. 大数据全样而非抽样原理_一文带你了解什么是大数据
  19. 移动端+京东移动端首页制作
  20. 这绝对是个高手,一个用 C 开发的图形界面开发库

热门文章

  1. 有高血压的少碰这五种毒!它们的伤害悄无声息~
  2. ipad还能横行霸道多久
  3. 在电脑上限制他人网速--需要同一个区域网
  4. 读书笔记:《代码大全2》
  5. 轩辕谷,黄帝的诞生地
  6. python产生随机整数数组_生成随机整数数组
  7. 搜索引擎-xunsearch(讯搜)
  8. P2P行业产品经理的分析
  9. java用数组显示周期性波形,常见的周期性变化波形有正弦波、三角波和矩形波。...
  10. 监控摄像机如何连接到手机 手机APP远程连接常用方法