自己的JS框架--Amy框架。

    这是我根据司徒正美《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);
    };

    //选择器初始化querySelector
    Amy.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;
                else
                    result.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)   //若为中文则加1
                    byteLength++;
            }
            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;
            }
        }

    });
})();

时间: 2024-11-04 13:45:01

自己的JS框架--Amy框架。的相关文章

Node.js的Connect框架的代码重写与改进

Node.js的Connect框架的代码重写与改进 Connect框架简介 Connect框架是建立在Node.js的基本http.server功能之上,帮助实现结构化的web服务器逻辑的框架.Connect框架建立在两个重要的设计模式之上. 1) 责任链模式 在处理web请求时常需要作分派处理.例如,ASP.NET MVC支持按照请求参数将处理分派至某个Controller类的某个Action方法,以及根据Action方法的返回结果类型分派不同的结果操作(如ViewResult.JsonRes

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

补充:http://nokit.org/ https://thinkjs.org/zh-cn/doc/index.html Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, 非常适合 run across distributed devices 的 data-intensive 的实时应用· 本文介绍 10 个基于 Node.js 的 MVC 框

Express 4.x Node.js的Web框架

为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3821150.html 本文使用node.js v0.10.28 + express 4.2.0 1 Express概述 Express 是一个简洁而灵活的node.js的MVC Web应用框架,提供一系列强大特性创建各种Web应用. Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了We

node.js Web应用框架Express.js(一)

什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随取随用,创建强健.友好的API变得快速又简单,Express 不对 node.js 已有的特性进行二次抽象,只是在它之上扩展了Web应用所需的功能. 开篇,这里就只做简单的介绍,整理一些有关express.js的资源,与大家一起学习 Express.js中文社区:http://expressjs.j

Node.js:Express 框架

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.使用 Express 可以快速地搭建一个完整功能的网站. Express 框架核心特性: 可以设置中间件来响应 HTTP 请求. 定义了路由表用于执行不同的 HTTP 请求动作. 可以通过向模板传递参数来动态渲染 HTML 页面. 1.安装 Express 并将其保存到依赖列表中: $ cnpm install express --save 以上命令会

Vue.js前端MVVM框架实战篇

相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往老项目(Gulp+jQuery)的开发模式的魅力在哪里. 一.配置开发环境 1.先安装Node和Webpack 2.建立一个文件夹为:Vue-project,然后初始化生成package.json.运行以下指令: npm init 初始化完成后,添加项目开发所依赖的包 "dependencies&q

node.js 11 Web框架Express 介绍,安装,静态页面,路由

本文参考原文-http://bjbsair.com/2020-03-22/tech-info/2815/前面介绍了node.js的文件模块,http server以及静态网站的创建.有了这些知识作为基础,我们可以了解一下node.js的Web框架了. 从Java一路过来的朋友可能觉得Web框架还是比较重量级的,比如最初的Struts到后来的Spring,中间Apache组织也有过一些其他的模板框架,总体而言无论是从使用还是学习来讲,都是需要花费较多时间的.对于大型应用而言,这个投入是值得的.如果

jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了很多内容,然后继续输入一个"e"后,提示的范围明显就变小了. 注:在文末我会给出完整源代码的下载链接,以供大家参考 二 具体实现 1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar.也就是说,

框架----Web框架本质

一.Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 #!/usr/bin/env python 2 #coding:utf-8 3 4 import socket 5 6 def handle_request(client): 7 buf = client.recv(1024) 8 client.send("HTTP/1.1 200 OK\r\n\r\n") 9 client.send("