分类 JS 下的文章

零js基礎 | 程序設計 | 9 - 客户端检测

直接把函数作为属性访问会导致JavaScript 错误。使用typeof 操作符会更靠谱一点,但IE
对typeof xhr.open 会返回"unknown",在浏览器环境下测试任何对象的某个特性是否
存在,要使用下面这个函数。

function isHostMethod(object, property) {
    var t = typeof object[property];
    return t == 'function' ||
        (!!(t == 'object' && object[property])) ||
        t == 'unknown';
}

result = isHostMethod(xhr, "open"); //true
result = isHostMethod(xhr, "foo"); //false

能力检测,不是浏览器检测
检测某个或某几个特性并不能够确定浏览器。下面给出的这段代码(或与之差不多的代码)可以在
许多网站中看到,这种“浏览器检测”代码就是错误地依赖能力检测的典型示例。

//错误!还不够具体
var isFirefox = !!(navigator.vendor && navigator.vendorSub);
//错误!假设过头了
var isIE = !!(document.all && document.uniqueID);

一次性检测

//确定浏览器是否支持Netscape 风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
//确定浏览器是否具有DOM1 级规定的能力
var hasDOM1 = !!(document.getElementById && document.

在实际开发中,应该将能力检测作为确定下一步解决方案的依据,而不是用它来 判断用户使用的是什么浏览器。

完整用户代理字条串检测脚本代码

       var client = function() {
            //呈现引擎
            var engine = {
                ie: 0,
                gecko: 0,
                webkit: 0,
                khtml: 0,
                opera: 0,
                //完整的版本号
                ver: null
            };
            //浏览器
            var browser = {
                //主要浏览器
                ie: 0,
                firefox: 0,
                safari: 0,
                konq: 0,
                opera: 0,
                chrome: 0,
                //具体的版本号
                ver: null
            };
            //平台、设备和操作系统
            var system = {
                win: false,
                mac: false,
                x11: false,
                //移动设备
                iphone: false,
                ipod: false,
                ipad: false,
                ios: false,
                android: false,
                nokiaN: false,
                winMobile: false,
                //游戏系统
                wii: false,
                ps: false
            };
            //检测呈现引擎和浏览器
            var ua = navigator.userAgent;
            if (window.opera) {
                engine.ver = browser.ver = window.opera.version();
                engine.opera = browser.opera = parseFloat(engine.ver);
            } else if (/AppleWebKit\/(\S+)/.test(ua)) {
                engine.ver = RegExp["$1"];
                engine.webkit = parseFloat(engine.ver);
                //确定是Chrome 还是Safari
                if (/Chrome\/(\S+)/.test(ua)) {
                    browser.ver = RegExp["$1"];
                    browser.chrome = parseFloat(browser.ver);
                } else if (/Version\/(\S+)/.test(ua)) {
                    browser.ver = RegExp["$1"];
                    browser.safari = parseFloat(browser.ver);
                } else {
                    //近似地确定版本号
                    var safariVersion = 1;
                    if (engine.webkit < 100) {
                        safariVersion = 1;
                    } else if (engine.webkit < 312) {
                        safariVersion = 1.2;
                    } else if (engine.webkit < 412) {
                        safariVersion = 1.3;
                    } else {
                        safariVersion = 2;
                    }
                    browser.safari = browser.ver = safariVersion;
                }
            } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
                engine.ver = browser.ver = RegExp["$1"];
                engine.khtml = browser.konq = parseFloat(engine.ver);
            } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
                engine.ver = RegExp["$1"];
                engine.gecko = parseFloat(engine.ver);
                //确定是不是Firefox
                if (/Firefox\/(\S+)/.test(ua)) {
                    browser.ver = RegExp["$1"];
                    browser.firefox = parseFloat(browser.ver);
                }
            } else if (/MSIE ([^;]+)/.test(ua)) {
                engine.ver = browser.ver = RegExp["$1"];
                engine.ie = browser.ie = parseFloat(engine.ver);
            }
            //检测浏览器
            browser.ie = engine.ie;
            browser.opera = engine.opera;
            //检测平台
            var p = navigator.platform;
            system.win = p.indexOf("Win") == 0;
            system.mac = p.indexOf("Mac") == 0;
            system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
            //检测Windows 操作系统
            if (system.win) {
                if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
                    if (RegExp["$1"] == "NT") {
                        switch (RegExp["$2"]) {
                            case "5.0":
                                system.win = "2000";
                                break;
                            case "5.1":
                                system.win = "XP";
                                break;
                            case "6.0":
                                system.win = "Vista";
                                break;
                            case "6.1":
                                system.win = "7";
                                break;
                            default:
                                system.win = "NT";
                                break;
                        }
                    } else if (RegExp["$1"] == "9x") {
                        system.win = "ME";
                    } else {
                        system.win = RegExp["$1"];
                    }
                }
            }
            system.iphone = ua.indexOf("iPhone") > -1;
            system.ipod = ua.indexOf("iPod") > -1;
            system.ipad = ua.indexOf("iPad") > -1;
            system.nokiaN = ua.indexOf("NokiaN") > -1;
            //windows mobile
            if (system.win == "CE") {
                system.winMobile = system.win;
            } else if (system.win == "Ph") {
                if (/Windows Phone OS (\d+.\d+)/.test(ua)) {;
                    system.win = "Phone";
                    system.winMobile = parseFloat(RegExp["$1"]);
                }
            }
            //检测iOS 版本
            if (system.mac && ua.indexOf("Mobile") > -1) {
                if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
                    system.ios = parseFloat(RegExp.$1.replace("_", "."));
                } else {
                    system.ios = 2; //不能真正检测出来,所以只能猜测
                }
            }
            //检测Android 版本
            if (/Android (\d+\.\d+)/.test(ua)) {
                system.android = parseFloat(RegExp.$1);
            }
            //游戏系统
            system.wii = ua.indexOf("Wii") > -1;
            system.ps = /playstation/i.test(ua);
            //返回这些对象
            return {
                engine: engine,
                browser: browser,
                system: system
            };
        }()
        console.log(client.engine)
        console.log(client.browser)
        console.log(client.system)

零js基礎 | 程序設計 | 8 - BOM

BOM核心
控制窗口、框架和弹出窗口
利用location 对象中的页面信息
使用navigator对象了解浏览器;

全局变量不能通过delete 操作符删除,而直接在window 对象上的定义的属性可以

var age = 29;
window.color = "red";
//在IE < 9 时抛出错误,在其他所有浏览器中都返回false
delete window.age;
//在IE < 9 时抛出错误,在其他所有浏览器中都返回true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
//这里会抛出错误,因为oldValue 未定义
var newValue = oldValue;
//这里不会抛出错误,因为这是一次属性查询
//newValue 的值是undefined
var newValue = window.oldValue;

window.frames[0]或者window.frames["topFrame"]来引用上方的框架。不过,恐怕你最好使用
top 而非window 来引用这些框架(例如,通过top.frames[0])


与top 相对的另一个window 对象是parent。顾名思义,parent(父)对象始终指向当前框架的
直接上层框架。在某些情况下,parent 有可能等于top;但在没有框架的情况下,parent 一定等于
top(此时它们都等于window)。

ff支持 screenX 和screenY

    var leftPos = (typeof window.screenLeft == 'number') ?
        window.screenLeft : window.screenX;
    var topPos = (typeof window.screenTop == 'number') ?
        window.screenTop : window.screenY;
//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50 像素
window.moveBy(-50,0);

所有浏览器都有:innerWidth/innerHeight/outerWidth/outerHeight

IE9+/Safari/Firefox: outerWidth/outerHeight返回浏览器本身尺寸

Opera:outerWidth/outerHeight:表示单个标签页对应的浏览器窗口大小;而innerWidth/innerHeight表示该容器中页面视图的大小 - 边框宽度;

chrome:outerWidth/outerHeight与 innerWidth/innerHeight返回相同的值,即viewport大小而非浏览器窗口大小

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
    if (document.compatMode == "CSS1Compat") {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

compatMode 检查是否处于标准模式;
使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个
参数,其中resizeTo()接收浏览器窗口的新宽度和新高度,而resizeBy()接收新窗口与原窗口的宽
度和高度之差。来看下面的例子。
//调整到100×100
window.resizeTo(100, 100);
//调整到200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);

window.open(要加载的URL,窗口目标,一个特性字条串,是否当前页面打开)
,所以


< a href="http://www.wrox.com" target="topFrame"></a> 
====
window.open("http://www.wrox.com/", "topFrame");

window.close()只适应于window.open()打开的窗口;弹出窗口打调用top.close();

创建的window 对象有一个opener 属性,其中保存着打开它的原始窗口对象


        var wroxWin = window.open('http://www.w.com','w','height=400,width=400,top:10,left=10,resizable = yes')
        console.log(wroxWin.opener = window) //true

chrome中设置opener属性为null,表示在单独进程中独立运行;

var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.opener = null;

检测是否被屏蔽弹出

        var blocked = false;
        try {
            var wroxWin = window.open("http://www.wrox.com", "_blank");
            if (wroxWin == null) {
                blocked = true;
            }
        } catch (ex) {
            blocked = true;
        }
        if (blocked) {
            alert("The popup was blocked!");
        }
        }

返回布尔值;

if (confirm("Are you sure?")) {
    alert("I'm so glad you're sure! ");
} else {
    alert("I'm sorry to hear you're not sure. ");
}

返回false或字符串

var result = prompt("What is your name? ", "");
if (result !== null) {
    alert("Welcome, " + result);
}

localtion对象

既是window对象,也是document对象;

window.location == document.location 引用同一个对象 ;

查询字符串参数

        function getQueryStringArgs() {
            //取得查询字符串并去掉开头的问号
            var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
                //保存数据的对象
                args = {},
                //取得每一项
                items = qs.length ? qs.split("&") : [],
                item = null,
                name = null,
                value = null,
                //在for 循环中使用
                i = 0,
                len = items.length;
            //逐个将每一项添加到args 对象中
            for (i = 0; i < len; i++) {
                item = items[i].split("=");
                name = decodeURIComponent(item[0]);
                value = decodeURIComponent(item[1]);
                if (name.length) {
                    args[name] = value;
                }
            }
            return args;
        }

//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"

跳转新窗口:

          location.assign('http://www.baidu.com')
          window.location = 'http://www.baidu.com'
          location.href = 'http://www.baidu.com'
        //假设初始URL 为http://www.wrox.com/WileyCDA/
        //将URL 修改为"http://www.wrox.com/WileyCDA/#section1"
        location.hash = "#section1";
        //将URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
        location.search = "?q=javascript";
        //将URL 修改为"http://www.yahoo.com/WileyCDA/"
        location.hostname = "www.yahoo.com";
        //将URL 修改为"http://www.yahoo.com/mydir/"
        location.pathname = "mydir";
        //将URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
        location.port = 8080;

禁止返回后退页面

window.location.replace('http://baidu.com')

重新加载 reload()

location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载)

navigator

页面在IE7提示升级

if(window.ActiveXObject)
    {
        var browser=navigator.appName 
        var b_version=navigator.appVersion 
        var version=b_version.split(";"); 
        var trim_Version=version[1].replace(/[ ]/g,""); 
      if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0"  || trim_Version=="MSIE7.0" ) 
        { 
        $(".ie7andie6").show();
        $(".contentnone").hide();
        } 
   }

跳到手机网站

 var a=navigator.userAgent;
if(a.indexOf("Android")!=-1 || a.indexOf("iPhone")!=-1 || a.indexOf("iPad")!=-1 ){

             //跳转到手机网站

    }

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE 浏览器,可以使用
plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。
 name:插件的名字。
 description:插件的描述。
 filename:插件的文件名。
 length:插件所处理的MIME 类型数量。

    function hasPlugin(name) {
        name = name.toLowerCase();
        for (var i = 0; i < navigator.plugins.length; i++) {
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }
    //检测Flash
    alert(hasPlugin("Flash"));
    //检测QuickTime
    alert(hasPlugin("QuickTime"));
}

这个hasPlugin()函数接受一个参数:要检测的插件名

IE插件专家

//检测IE 中的插件
function hasIEPlugin(name) {
    try {
        new ActiveXObject(name);
        return true;
    } catch (ex) {
        return false;
    }
}
//检测Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
//检测QuickTime
alert(hasIEPlugin("QuickTime.QuickTime"));

推荐是下面的方法:

        //检测所有浏览器中的Flash
        function hasFlash() {
            var result = hasPlugin("Flash");
            if (!result) {
                result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
            }

            return result;
        }
        //检测所有浏览器中的QuickTime
        function hasQuickTime() {
            var result = hasPlugin("QuickTime");
            if (!result) {
                result = hasIEPlugin("QuickTime.QuickTime");
            }
            return result;
        }
        //检测Flash
        alert(hasFlash());
        //检测QuickTime
        alert(hasQuickTime());

screen 对象

JavaScript 中有几个对象在编程中用处不大,而screen 对象就是其中之一。screen 对象基本上只
用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器
中的screen 对象都包含着各不相同的属性,下表列出了所有属性及支持相应属性的浏览器。

history 对象

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

//跳转到最近的wrox.com 页面
history.go("wrox.com");
//跳转到最近的nczonline.net 页面

history.back();
//前进一页
history.forward();

history 对象还有一个length 属性

if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}

虽然history 并不常用,但在创建自定义的“后退”和“前进”按钮,以及检测当前页面是不是
用户历史记录中的第一个页面时,还是必须使用它。

零js基礎 | 程序設計 | 7 - 函数表达式

name属性获取函数名:IE不支持

    function fn1(name, age) {}
    console.log(fn1.name) //fn1

创建了一个名为f()的命名函数表达式,然后将它赋值给变量factorial

        'use strict'  //兼容严格模式,arguments.callee()不支持严格模式;
        var fa = (function f(num) {
            if (num < 1) {
                return 1
            } else {
                return num * f(num - 1)
            }
        })
        var fac = fa
        fa = null
        fac(8)

闭包是指有权访问另一个函数作用域中的变量的函数

函数调用时,执行环境:1、,作用域链1--全局变量;2、作用域链2--compare()的活动对象argument,v1,v2

function comapre(v1,v2){
    if(v1<v2){return -1}
    else if(v1>v2){return 1}
    else{return 0;}
}
    var result = comapre(5,10) //调用时,创建一个包含 argument,v1,v2的活动对象;
compare()调用---》创建执行环境--》复制函数的[[Scope]]属性--》用来构建起执行环境的作用域链
--》此后,活动对象(arguments与参数)--》推入执行环境作用链前端
在compare()的执行环境--》作用域链包含两个变量对象:本地活动对象(arguments与参数和全局变量对象compare与result

作用域链本质是一个指向变量对象的指针列表,只引用不实际包含;

函数访问一个变量时,会从作用域链接链中搜索具有相应名字的变量,执行完后销毁(即局部变量无法在全局中访问的原因)

闭包

    function createComparisonFunction(propertyName) {
        return function(object1, object2) {
            var value1 = object1[propertyName];
            var value2 = object2[propertyName];
            if (value1 < value2) {
                return -1;
            } else if (value1 > value2) {
                return 1;
            } else {
                return 0;
            }
        };
    }

内部的函数将包含外部函数的活动对象添加到它的作用域链中 【function(o....),的propertyName(活动对象)添加到作用域链中】

var compare = createComparisonFunction("name");
var result = compare({ name: "Nicholas" }, { name: "Greg" });

执行以上代码,return函数返回后,作用域链 == 包含 createComparisonFunction()活动对象和全局变量对象;
createComparisonFunction()函数执行完后,活动对象不会被销毁,执行环境作用域链被销毁,因为return函数仍引用这个活动对象,直到return函数被销毁后,createComparisonFunction()活动对象才被销毁;

//创建函数
var compareNames = createComparisonFunction("name");

//调用函数
var result = compareNames({ name: "Nicholas" }, { name: "Greg" });

//解除对匿名函数的引用(以便释放内存)
compareNames = null;
首先,创建的比较函数被保

createComparisonFunction的执行环境【有两个】,1、createComparisonFunction的活动对象--》arguments,propertyName; 即'name'

2、(作用域链也是链到这两个)--》全局变量对象(createComparison,Function)result

匿名函数的执行环境[有三个]--》0:闭包的活动对象:arguments[{'name':'nic'},{'name':'grey'}]; object1{'name':'nic'};object2:{'name':'grey'}
1、createComparisonFunction执行环境的作用域0:createComparisonFunction的活动对象:arguments,propertyName; 即'name';
2、createComparisonFunction执行环境作用域1:全局变量对象(createComparison,Function)result

所以,即匿名函数的执行环境(作用域链)包含上级函数的作用域链;

JavaScript中的作用域链的机制引出了一个副作用,即闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象

    function createFunction() {
        var result = [];
        for (var i = 0; i < 10; i++) {
            result[i] = function() {
                return i;
            }
        }
        return result;
    }

    var arr = createFunction()

    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]()) //10,i变量只取最后一个值
    }

改写一:

    function createFunction() {
        var result = [];
        for (var i = 0; i < 10; i++) {
            result[i] = (function(num) {
                    return num
            })(i)
        }
        return result;
    }

    var arr = createFunction()

    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i])
    }

改写二:

    function createFunction() {
        var result = [];
        for (var i = 0; i < 10; i++) {
            result[i] = function(num) {
                return function(){
                    return num
                };
            }(i)
        }
        return result;
    }
    
    var arr = createFunction()
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]())
    }

在重写了前面的createFunctions()函数后,每个函数就会返回各自不同的索引值了。在这个版
本中,我们没有直接把闭包赋值给数组,而是定义了一个匿名函数,并将立即执行该匿名函数的结果赋
给数组。这里的匿名函数有一个参数num,也就是最终的函数要返回的值。在调用每个匿名函数时,我
们传入了变量i。由于函数参数是按值传递的,所以就会将变量i 的当前值复制给参数num。而在这个
匿名函数内部,又创建并返回了一个访问num 的闭包。这样一来,result 数组中的每个函数都有自己
num 变量的一个副本,因此就可以返回各自不同的数值了。

this对象

var name = 'the window'
var Object = {
    name:'my object',
    getNameFun:function(){
        return function(){
            return this.name //这里this-->windows
        }
    }
}
console.log(Object.getNameFun()()) //the window,为什么不是my object?
var name = 'the window'
var Object = {
    name:'my object',
    getNameFun:function(){
        var _this = this; 
        return function(){
            return _this.name
        }
    }
}
console.log(Object.getNameFun()()) //my object

返回第一个例子;

var name = 'the window'
var Object = {
    name:'my object',
    getNameFun:function(){ //活动对象都会自动获取两个特殊的变量:this和arguments
        return function(){   //活动对象都会自动获取两个特殊的变量:this和arguments Object.getNameFun()()调用时,立即返回
            return this.name //这里this-->windows
        }
    }
}
console.log(Object.getNameFun()()) //the window,为什么不是my object?

每个函数在调用时,其活动对象都会自动获取两个特殊的变量:this和arguments。内部函数在搜索这两个变量时,只会搜到其活动对象为止,因此永远不肯能访问到外部函数中的这两个变量。不过,把外部作用域中的this对象保存在一个闭包能够访问的变量里,就可以放闭包访问该对象了。[this相当于两层function(),每一层都有this与arguments,最里层this指向window,上一层指向本身的object]

内存泄漏

    function assHandler(){
        var elem = document.getElementById('someElement')
        elem.onclick = function(){   //匿名函数保存着对assHandler()的活动对象引用,
            console.log(elem.id)//因此就会导致无法减少elem的引用数,只要存在,elem引用数至少也是1,所占内存永远不会被回收,把这里提出去;
        }
    }

改进:

    function assHandler(){
        var elem = document.getElementById('someElement')
        var id = elem.id //保存为副本
        elem.onclick = function(){
            console.log(id)
        }
        elem = null;//即使闭包不直接引用element,包含函数的活动对象中也
仍然会保存一个引用,必要把element 变量设置为null。
    }

块级作用域

    function outputNum(count){
        for(var i=0;i<count;i++){
            console.log(i)
        }
        var i;
        console.log(i) //也是10
    }
    outputNum(10)
     (function() {
                //someCode.
     }();
   var someFn = function(){
        //someCode.
    }
    someFn()

是否可以直接

     function() {

     }() //出错

是因为JavaScript 将function 关键字当作一个函数声明的开始,而函
数声明后面不能跟圆括号。然而,函数表达式的后面可以跟圆括号。要将函数声明转换成函数表达式
只要像下面这样给它加上一对圆括号即可。

无论在什么地方,只要临时需要一些变量,就可以使用私有作用域,例如:

    function outNum(count){
        (function(){
            for(var i=i;i<count;i++){
                console.log(i)
            }
        })()
        console.log(i) //抛出错误
    }
    outNum(5)

所以,可以使用下面方式;

    (function(){
        var now = new Date()
        if(now.getMonth() == 0 && now.getDate() == 1){
            console.log('happy new year')
        }
    })()

把上面这段代码放在全局作用域中,可以用来确定哪一天是1 月1 日;如果到了这一天,就会向用
户显示一条祝贺新年的消息。其中的变量now 现在是匿名函数中的局部变量,而我们不必在全局作用域
中创建它

私有变量

    function MyObject(){
        //私有变量我私有函数
        var privateValue = 10;
        function privateFunction(){
            return false;
        }
        //特权方法
        this.publicMethod = function(){
            privateValue++;
            return privateFunction();
        }
    }

这个模式在构造函数内部定义了所有私有变量和函数。然后,又继续创建了能够访问这些私有成员
的特权方法。能够在构造函数中定义特权方法,是因为特权方法作为闭包有权访问在构造函数中定义的
所有变量和函数

    function Person(name){
        this.getName = function(){  //使用this,避免外部对getName的调用,只能通过Person.getName()
            return name;
        }
        this.setName = function(value){
            name = value;
        }
    }
    var per1 = new Person('nic')
    console.log(per1.getName())
    per1.setName('grey')
    console.log(per1.getName())

以上代码的构造函数中定义了两个特权方法:getName()和setName(),这两个方法都可以在构
造函数外部使用,因为每次调用构造函数都会重新创建这两个方法,构造函数模式的缺点是针对每个实例都会创建同样一组新方法,而使用静态私有变量来实现特权方
法就可以避免这个问题。

//构造函数模式实现私有变量(通过闭包实现)
        function Person(nameStr){
            var name = nameStr;//私有变量
            this.age = 15;//公有变量
            this.getName = function(){
                return name;
            };
            this.setName = function(value){
                name = value;
            };
            this.getInfo = function(){
                console.debug(name + "  " +this.age);
            };
        }
        var p1 = new Person('Lebron');
        var p2 = new Person('Paul');
        p1.getInfo();
        p2.getInfo();
        p1.setName('kobe Bryant');
        p1.getInfo();
        p2.getInfo();

但是这种构造器模式每次调用时都会创建函数对象,耗费资源,函数不可以共享。


静态私有变量

私有作用域中定义私有变量或函数
(function(){
    //私有变量、函数
    var privateValue = 10;
    function privateFun(){
        return false;
    }
    //构造
    MyObject = function(){  //使用函数表达工来构造函数
//因为函数声明只能创建局部函数;并不是我们想要的,出于一样原因,也没有在MyObject前加var
        
    }
    //公有、特权方法
    MyObject.prototype.publicMethod = function(){
        privateValue ++ ;
        return privateFun()
    }
})() 

,就在于私有变量和函数是由实例共享的。由于
特权方法是在原型上定义的,因此所有实例都使用同一个函数。而这个特权方法,作为一个闭包,总是
保存着对包含作用域的引用

(function(){
    var name = '' //静态私有,被所有实例所共享
    Person = function(value){ //默认为全局变量了 ,可以被外部访问  
    name = value;
    }
    Person.prototype.getName = function(){
    return name;
    }
    Person.prototype.setName = function(value){
    name  =value;
    }
})()

    var per1 = new Person('nic')
    console.log(per1.getName())  //nic
    per1.setName('grey')
    console.log(per1.getName())  //grey
    
    var per2 = new Person('mich')
    console.log(per1.getName())  //mich
    console.log(per2.getName())  //mich //被影响了

道格拉斯所说的模块模式(module
pattern)则是为单例创建私有变量和特权方法,所谓单例(singleton),指的就是只有一个实例的对象。
按照惯例,JavaScript 是以对象字面量的方式来创建单例对象的。

先来看看不需要实现对象内属性私有化的对象该如何定义??

        var singleton = {
            name: 'value',
            method: function() {
                //.....
            }
        }

需要对象内属性私有化的定义;

    (function() {
        var singleton = function() {

            //私有变量和私有函数
            var privateValue = 10;

            function privateFun() {
                return false;
            }
            
            //公有、特权方法和属性;
            return { //返回对象的匿名函数
                publicProperty: true,
                publicMethod: function() {
                    privateValue++;
                    return privateFun();
                }
            }
        }

    })()

首先声明了一个私有的components
数组,并向数组中添加了一个BaseComponent 的新实例(在这里不需要关心BaseComponent 的代码,我
们只是用它来展示初始化操作)。而返回对象的getComponentCount()和registerComponent()方法,都
是有权访问数组components 的特权方法。前者只是返回已注册的组件数目,后者用于注册新组件。

function BaseComponent(){
        
    }
    console.debug("=====================");
    var application = function(){//定义的匿名函数立即执行 返回一个匿名的对象字面量
        //私有变量和函数
        var components = new Array();
        //初始化操作
        components.push(new BaseComponent());
        //公共
        return {//返回对象字面量方式定义的对象  以这种方式开放访问接口
           getComponentCount : function(){
               return components.length; 
           },
           registerComponent : function(component){
               if( typeof component == 'object'){
                   components.push(component);
               }
           }
        };
        
    }();
    console.debug(application.getComponentCount());  

改进增强型模块模式;进一步增强的模块模式是指在返回对象志强对其增强功能,这种增强的模块模式适合那些单例必须是某种类型的实例。就像下面这样

    function BaseComponent(){
            }
            function OtherComponent(){
            }
            var application = function(){
                //private variables and functions
                var components = new Array();
                //initialization
                components.push(new BaseComponent());
                //create a local copy of application
                var app = new BaseComponent();
                //public interface
                app.getComponentCount = function(){
                    return components.length;
                };
                app.registerComponent = function(component){
                    if (typeof component == "object"){
                        components.push(component);
                    }
                };
                //return it
                return app;
            }();
            alert(application instanceof BaseComponent);
            application.registerComponent(new OtherComponent());
            alert(application.getComponentCount());  //2

零js基礎 | 程序設計 | 1 - 6 - 基础

5.5.4 函數內部屬性 特殊對象:arguments和 this
arguments下的callee屬性,arguments.calle();指針,指向arguments對象的函數

    function factorial(num) {
        if (num < 1) {
            return 1
        } else {
            return num * factorial(num - 1)
        }
    }

    function factorial2(num) {
        if (num < 1) {
            return 1
        } else {
            return num * arguments.callee(num - 1)
        }
    }

this對象

    window.color = 'red'
    var o = {
        color: 'blue'
    }

    function sayColor() {
        console.log(this.color);
    }
    sayColor() //red
    o.sayColor = sayColor;
    o.sayColor() //blue

函數對象屬性outer(),保存著調用當前函數的函數引用;

    function outer(){
        var i;
        inner()
    }
    function inner(){
        var i=0,b=1,c=3;
        console.log(inner.caller)
    }
    outer()

5.5.5函數屬性和方法

函數的length表示參數的個數

    function sayName(a,b){
        //
    }
    console.log(sayName.length) //2

每個函數都有非繼承方法:apply(),call();,設置函數體內this對象的值;
apply(運行函數的作用域同this,參數組【可以是Array實例,也可以是arguments對象】)
call(運行函數的作用域同this,傳遞的參數一個個列出來)

        function sum(n1, n2) {
            return n1 + n2;
        }

        function callsum1(n1, n2) {
            return sum.apply(this, arguments)
        }

        function callsum2(n1, n2) {
            return sum.apply(this, [n1, n2])
        }
        console.log(callsum1(10, 10))
/////////////////////////////////////////////////////

        function sum(n1, n2) {
            return n1 + n2;
        }

        function callsum(n1, n2) {
            return sum.call(this, n1, n2)
        }
        console.log(callsum(10, 10))

真正的用處:

        window.color = 'red'
        var o = {
            color: 'blue'
        }

        function sayColor() {
            console.log(this.color);
        }
        sayColor(this) // red
        sayColor.call(window) //red
        sayColor.call(o) //blue

bind()方法會創建函數實例,this值會被綁定到傳給bind()函數的值;

        window.color = 'red'
        var o = {
            color: 'blue'
        }

        function sayColor() {
            console.log(this.color)
        }
        var objsaycolor = sayColor.bind(o) //即創建了objsaycolor()函數,其中他的this = o 對象
        objsaycolor(); //blue

5.6基本包裝類型 Boolean/Number/String

        var s1 = 'some txt'
        var s2 = s1.substring(2);

為什麼基本類型調用對象方法

        //創建String實例
        var s1 = new String('some txt')  
        //為實例調用方法
        var s2 = s1.substring(2)
        //銷毀實例
        s1 = null;

方法

var num  = 10;
        console.log(num.toString(2)) //1010;
        console.log(num.toFixed(2)) //10.00
        console.log(num.toExponential(1)) //1.0e+1
        console.log(n.toPrecision(1));
    var n = 99;
    console.log(n.toPrecision(2));  // 1e+2
    console.log(n.toPrecision(3)); //99.0
    console.log(n.toPrecision(4)); //99.00
    表示以多少位显示,范围为 1- 21

不修改字符串本身,返回基本字符串值,
concat()/slice()/substr()/substring()
slice()负与长度相加
substr()、substring()负置为0

var vS = 'fuckword'
console.log(vS.length); //8
console.log(vS.charAt(1)) //u
console.log(vS.charCodeAt(1)) //117
console.log(vS[1]) //u
var rvS = vS.concat('aaaa','bbb')
console.log(rvS) //fuckwordaaaabbb

位置方法:indexOf()/lastIndexOf();

    var strindex = 'jaspfjqijdfjsfnfcjspfqmjfpwpfjmadsljkfmpqiergbrufjnapskdjfmpa';
    var position  = []
    var pos = strindex.indexOf('f');
    while (pos > -1){
        position.push(pos)
        pos = strindex.indexOf('f',pos+1)
    };
    console.log(position);

trim()去空格;
strindex.toLocaleLowerCase()
strindex.toLocaleUpperCase()

match()/search()

    var txt = 'cat bat eat fat'
    var pattern = /.at/

    //与 pattern.exec(txt);
    var matches = txt.match(pattern)  
    console.log(matches.index) //0
    console.log(matches[0])  //at 返回匹配
    console.log(pattern.lastIndex) //0
    var txt = 'cat bat eat fat'
    var pattern = /at/

    var matchs = txt.search(pattern)
    console.log(matchs) //1 at在字符串第一次出现位置1

$n表达匹配第n个子字符串 n : 1-9 nn: 10 -99

var txt = 'cat bat eat fat'
var pattern = /at/
var retxt = txt.replace(/(.at)/g,'word$1')
console.log(retxt)
//wordcat wordbat wordeat wordfat

只有一个匹配:replace(//,function(模式匹配,模式匹配项在字符串中的位置,原始字符串 ){ })
多个匹配:replace(//,function(模式匹配,第一捕获组匹配项,第二捕获组匹配项....,模式匹配项在字符串中的位置,原始字符串 ){ })

function reppacehtml(str) {
    return str.replace(/[<>]/g, function(match, pos, priginalText) {
        switch (match) {
            case "<":
                return '';
            case ">":
                return ''
        }
    })
}
console.log(reppacehtml('<p>heooooooo</p>'))

split(字符串或正则,数组大小)

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]

localeCompare()方法;

function determineOrder(value) {
    var result = stringValue.localeCompare(value);
    if (result < 0) {
        alert("The string 'yellow' comes before the string '" + value + "'.");
    } else if (result > 0) {
        alert("The string 'yellow' comes after the string '" + value + "'.");
    } else {

        alert("The string 'yellow' is equal to the string '" + value + "'.");
    }
}
determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");

fromCharCode()方法;String构造函数本身的静态方法,接收一个或多个字符编码,转成字符串;
String.fromCharCode(104,101)

5.7.1 Global对象
encodeURI()整个URI,只有空格会换成20%,其它都原封不动;
encodeURIComponent()主要用于对URI中的某一段;发现任何非标准都转换;

encodeURI('http://baidu.com/google com/')
//"http://baidu.com/google%20com/"
encodeURIComponent('http://baidu.com/google com/')
//"http%3A%2F%2Fbaidu.com%2Fgoogle%20com%2F"

decodeURI()
decodeURIComponent()

eval()方法,解析器;传入的参数当语句来解析;

eval('alert("hi")') = alert("hi")

eval("function sayHi() { alert('hi'); }"); //注意这里有双引号,是一个字符串
sayHi(); //hi

取得global对象方法:

    var global = function(){
        return this;
    }()
    console.log(global)

Math.ceil()/Math.floor()/Math.round()/Math.random()


//介乎于lv与uv之间的数(包括lv/uv)
    function selectFrom(minV,maxV){
        var cV = maxV - minV + 1;
        return Math.floor(Math.random() * cV + minV);
    }
    var num = selectFrom(2,10);
    console.log(num)

EAMAScript 5 定义了描述这些属性特征的各类特性,包括数据属性和访问器属性。

  1. [[Configurable]]:表示是否能通过delete删除
  2. [[Enumerable]]:表示能否用for-in循环返回。
  3. [[writable]]:表示能否修改属性的值。
  4. [[Value]]:包含这个属性的数据值。默认值为undefined。
var person = {};
Object.defineProperty(person, "name", {
writable: false,
value: "Nicholas"
});
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas"

已经设置为不能configurable为false,即不能删除,再次设置将抛出错误

var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "Nicholas"
});
//抛出错误
Object.defineProperty(person, "name", {
configurable: true,
value: "Nicholas"
});

访问器属性;

访问person.name,实际调用getter()函数,写放时调用setter()函数;
Object.defineProperty( )方法,该方法包含三个参数:属性所在的对象,属性的名字,描述符对象;

    var person = {
        _name: 'elmok', //默认
        _age: 31, //默认
        _tel: 123456 //默认
    }
    Object.defineProperty(person, 'name', {
        get: function() {
            return this._name;
        }
    })
    Object.defineProperty(person, 'age', {
        set: function(newage) {
            this._age = newage;
        }
    })

    console.log(person.name) //elmok
    person.name = 'EE' //尝试修改 
    console.log(person.name) //elmok 不可修改
    console.log(person.age) //不可读属性undefined
    person.age = '26'
    console.log(person._age) //26,可修改,直接读取_age才可看到已改
    console.log(person.tel) //修改
    person.tel = 888888;
    console.log(person.tel) //888888
    
    等价另一种写法
    
    Object.defineProperty(person,{
        name:{
            get:function(){
                return this._name;
            }
        }
    })

//
工厂模式

    function cperson(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.syaName = function(){
            console.log(this.name);
        }
        return o;
    }

构造函数模式

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            console.log(this.name)
        }
        //this.sayName = new Function('console.log(this.name)')
    }

    console.log(per1.constructor == Person) //true
    console.log(per1 instanceof Object) //true
    console.log(per1 instanceof Person) //true

调用

    //构造调用 
    var per1 = new Person('nicholas',29,'software Engineer')

    //普通函数
    Person('Geay',27,'Doctor')
    window.sayName();

    //另一个对象作用域中调用
    var o = new Object()
    Person.call(o,'Geay',25,'Doctor')
    o.sayName()

问题:

console.log( per1.sayName == per2.sayName ) //false 创建多次了

如果定义在外面

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.sayName = sayName;
    }
    
    function sayName(){
        console.log(this.name)
    }
    
    var per1 = new Person('nicholas',29,'software Engineer')
    var per2 = new Person('grey',28,'Doctor')
    
    console.log( per1.sayName == per2.sayName )  //true;

所以是原型 prototype(原型)属性,指针,指向一个对象
对象的用途:包含可以由特定类型的所有实例共享的属性和方法;
通过创建的那种对象的 ‘ 原型对象 ’

创建新函数--》创建prototype属性 --》 prototype属性指向函数的原型对象

原型对象自动获得constuctor,指向--》prototype所有的函数

Person.prototype 《-- Person.prototype.constructor

Per1.[[prototype]] --> Person.prototype 实例属性仅仅指向Person.prototype
Per2.[[prototype]] --> Person.prototype

确定与实例的[[prototype]]是否有这种关系;isPrototypeOf()

alert(Person.prototype.isPrototypeOf(per1)); //true

ECMAScript 5 Object.getPrototypeOf[per1] == Person.prototype //左边返回对象的原型
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

解析器会问:per1有sayName吗?答:无,则再搜索prototype,答:有;

如果外属性有值,则会覆盖prototype的值;

    function Person() {}
    Person.prototype.name = 'nic'
    Person.prototype.age = 29;
    Person.prototype.sayName = function() {
        console.log(this.name);
    }
    var per1 = new Person()
    var per2 = new Person();

    per1.name = 'grey'
//  delete per1.name  可以删除实例属性,用回原型
    console.log(per1.name)

    alert(person1.hasOwnProperty("name")); //false    

hasOwnProperty()方法,可检测一个属性是存在实例中,还是原型中,来自原型返回false,来自自身属性返回true; 如以上;所以可以确定什么时候访问的是实例属性,什么时候访问的是原型属性

所以 in的方法返回true,而 hasOwnProperty返回 false,则表明在原型

    function hasPrototypeProperty(obj,name){
        return !obj.hasOwnProperty(name) && (name in object)
    }

Object.keys()返回所有可枚举实例属性;--数组;

    function Person() {}
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        alert(this.name);
    };
    var keys = Object.keys(Person.prototype);
    alert(keys); //"name,age,job,sayName"
    var p1 = new Person();
    p1.name = "Rob";
    p1.age = 31;
    var p1keys = Object.keys(p1);
    alert(p1keys); //"name,age"
    function Person(){}
    Person.prototype = {  //自动创建的 constructor被重写
        name:'nic',
        age:29,
        job:'softw',
        sayName:function(){
            console.log(this.name)
        }
    }
    var per1 = new Person()
    console.log(per1.constructor == Person) //false  constructor属性prototype下的属性,所以访问是实例.的形式,就像访问 .name一样
func.....
Person.prototype = {
    constructor:Person, //重设
}
重设之后会导致constructor的[[Enumerable]]设置为true; 所以

Object.defineProperty(Person.prototype,'constructor',{
    enumerable:false,
    value:Person
})

可以先创建实例,再创建原型,但如果重点整个原型,以{}的形式写,则情况不一样,会切断构造函数与最初原型的联系,记住:实例的指针仅指向原型,而不是指向构造函数;

情况一:

function Person(){}  //1、定义构造
var f = new Person() //2、定义实例
    Person.prototype.sayHi = function(){ //3、定义原型
        console.log('hi')
    }
f.sayHi()  //原型在实例之后定义也可访问到;即任何位置;

情况二:

function Person(){}  //1、定义构造
var f = new Person() //2、定义实例
Person.prototype = { //3、重写原型
    constructor:Person,
    name:'nic',
    age:29,
    job:'soft',
    sayName:function(){
        console.log(this.name)
    }
}
f.sayName()    //error,f因为引用的是最初的原型

//而Person()引用的是重写的原型

常用的方法都是定义在其构造函数的原型上

console.log(typeof Array.prototype.sort) //function

原型的问题:

function Person(){}    
Person.prototype = {
  constructor:Person,
  friends:['shelby','court'],
  sayName:function(){
      console.log(this.name)
  }
}
    var per1 = new Person()
    var per2 = new Person()
    per1.friends.push('van')
    console.log(per2.friends) //["shelby", "court", "van"] 只修改1,2也被影响了;

使用组合,可变写在构造里,不可改即共享部分写在原型里

function Person(name,age){
    this.name = name;
    this.age = age;
    this.list = ['111','2222']
}
Person.prototype = {
    constructor:Person,
    sayName : function (){
        console.log(this.name)
    }
}    
var per1= new Person('elmo1',29)
var per2= new Person('elmo2',30)

per1.name = 'elmo8'
per1.list.push('333')

console.log(per1.name) //elmo8
console.log(per2.name) //elmo2
console.log(per1.list) //["111", "2222", "333"]
console.log(per2.list) //["111", "2222"]

动态原型 (只有sayName()不存在时,才加到原型)

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        if(typeof this.syaName != 'function'){
            Person.prototype.sayName = function(){
                console.log(this.name)
            }
        }
    }
    var f = new Person('nic',29,'sf')
    f.sayName()

寄生式,即未原型时

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.syaName = function (){
        console.log(this.name)
    }
    return o;
}
    var f = new Person('nic',29,'sf')
    f.sayName(); //nic

寄生式
返回的对象或构造函数之间没有任何关系,因此不能依赖 instanceof来确定

    function SpecitalArray(){
        var values = new Array();
        values.push.apply(values,arguments);
        values.toPipedString = function(){
            return this.join('|')
        }
        return values;
    }
    var colors = new SpecitalArray('red','blue','green')
    console.log(colors.toPipedString());
    console.log(colors instanceof SpecitalArray)

稳妥构造函数模式

无公共属性,不引用this new

    function Person(name,age,job){
        va o = new Object()
        o.sayName = function(){
            console.log(name)
        }
        return o
    }
    var f = Person('nic',29,'sf')
    f.sayName()
    function SuperType(){
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function (){
        return this.property;
    }
    function SubType(){
        this.subproperty = false;
    }
    SubType.prototype = new SuperType()
    SubType.prototype.getSubvalue = function(){
        return this.subproperty;
    }
    var instance = new SubType(); //重写,所以instance.constructor-->SuperType
    instance.getSuperValue();
    
    //搜索实例--》搜索SubType.prototype--》搜索SuperType.prototype-->最后一步才找到方法;
    
    console.log(instance instanceof Object)
    console.log(instance instanceof SuperType)
    console.log(instance instanceof SubType)

继承

function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
//添加新方法
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
//重写超类型中的方法
SubType.prototype.getSuperValue = function (){
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false

原型链的问题;

    function SuperType() {
        this.color = ['red', 'blue', 'green']
    }

    function SubType() {

    }
    SubType.prototype = new SuperType()
    var in1 = new SubType()
    in1.color.push('black')
    console.log(in1.color) //["red", "blue", "green", "black"]

    var in2 = new SubType()
    console.log(in2.color) //["red", "blue", "green", "black"] 被影响到

借用构造函数

function SuperType(name){
    this.name = name
}
function SubType(){
    SuperType.call(this,'nic') //可以传递参数
    this.age = 29;
}    
    var in1 = new SubType()
    console.log(in1.name) //nic
    console.log(in1.age);//29

组合继承--伪经典继承;

    function SuperType(name) {
        this.name = name;
        this.colors = ['red', 'blue', 'green']
    }
    SuperType.prototype.sayName = function() {
        console.log(this.name)
    }

    function SubType(name, age) {
        SuperType.call(this, name)
        this.age = age;
    }

    SubType.prototype = new SuperType()
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function() {
        console.log(this.age)
    }
    var in1 = new SubType('nic', 29)
    in1.colors.push('black')
    console.log(in1.colors) //["red", "blue", "green", "black"]
    in1.sayName() //nic
    in1.sayAge() //29

    var in2 = new SubType('grey', 27)
    console.log(in2.colors); //["red", "blue", "green"]
    in2.sayName() //grey
    in2.sayAge() //27

原型式继承

    function object(o) {
        function F() {}
        F.prototype = o;
        return new F(); //内部复制一次再返回,相当于浅复制 ;
    }
    var person = {
        name: 'nic',
        friends: ['shll', 'count', 'van']
    }
    var per1 = object(person)
    per1.name = 'grey'
    per1.friends.push('rob')
    var per2 = object(person)
    per2.name = 'linda'
    per2.friends.push('barbie')
    console.log(person.friends) //["shll", "count", "van", "rob", "barbie"]
Object.create(新对象原型的对象,新对像定义额外属性的对象)
    var person = {
        name: 'nic',
        friends: ['shll', 'count', 'van']
    }
    
    var per1 = Object.create(person,{
        name:{
            value:'grey'
        }
    })
    console.log(per1.name)

寄生式继承

    function createAnother(original){
        var clone = Object(original); //创建一个新对象
        clone.sayHi = function(){ //某种方式增强这个对象
            console.log('hi')
        }
        return clone; //最后再返回增强后的对象
    }

最有效有方式:寄生组合式继承

组合继承的问题

    function SuperType(name){
        this.name = name;
        this.colors = ['red','blue','green']
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name)
    }

    function SubType(name,age){

        SuperType.call(this,name); 
        //第二次调用 SuperType,这一次又在新对象上创建实例属性 name,colors,于是这两个属性就屏蔽了第一次调用时原型中的同名属性;

        this.age = age;
    }

    SubType.prototype  = new SuperType(); 
    //第一次调用 SuperType Sub.prototype会得到两个属性 name colors; 

    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
        console.log(this.age)
    }

所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法

inheritPrototype(子类型构造函数,超类型构造函数),用于原型复制;
    function inheritPrototype(subType,superType){
        var prototype = object(superType.prototype) //创建对象
        prototype.constructor = subType;        //增强对象
        subType.prototype = prototype;          //指定对象
    }
1、创建superType.prototype函数副本
2、为创建的副本添加constructor属性
3、将副本赋值给subType的原型 
    function inheritPrototype(subType,superType){
        var prototype = Object(subType.prototype) //创建对象
        prototype.constructor = subType;        //增强对象
        subType.prototype = prototype;          //指定对象
    }
    
    function SuperType(name){
        this.name = name;
        this.colors = ['red','blue','green']
    }
    SuperType.prototype.sayName  = function(){
        console.log(this.sayName)
    }
    function SubType(name,age){
        SuperType.call(this,name)
        this.age = age;
    }
    inheritPrototype(SubType,SuperType);  //改写
    SubType.prototype.sayAge = function(){
        console.log(this.age)
    };
    
    var per1 = new SubType('nnn',30)
    console.log(per1.colors) //['red','blue','green']
    console.log(per1.sayAge()) //30

这个例子的高效率体现在它只调用了一次SuperType 构造函数,并且因此避免了在SubType.
prototype 上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用
instanceof 和isPrototypeOf()

ECMAScript 支持面向对象(OO)编程,但不使用类或者接口。对象可以在代码执行过程中创建和
增强,因此具有动态性而非严格定义的实体。在没有类的情况下,可以采用下列模式创建对象。
 工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。这个模式后来
被构造函数模式所取代。
 构造函数模式,可以创建自定义引用类型,可以像创建内置对象实例一样使用new 操作符。不
过,构造函数模式也有缺点,即它的每个成员都无法得到复用,包括函数。由于函数可以不局
限于任何对象(即与对象具有松散耦合的特点),因此没有理由不在多个对象间共享函数。
 原型模式,使用构造函数的prototype 属性来指定那些应该共享的属性和方法。组合使用构造
函数模式和原型模式时,使用构造函数定义实例属性,而使用原型定义共享的属性和方法。
JavaScript 主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函
数的原型实现的。这样,子类型就能够访问超类型的所有属性和方法,这一点与基于类的继承很相似。
原型链的问题是对象实例共享所有继承的属性和方法,因此不适宜单独使用。解决这个问题的技术是借
用构造函数,即在子类型构造函数的内部调用超类型构造函数。这样就可以做到每个实例都具有自己的
属性,同时还能保证只使用构造函数模式来定义类型。使用最多的继承模式是组合继承,这种模式使用
原型链继承共享的属性和方法,而通过借用构造函数继承实例属性。
此外,还存在下列可供选择的继承模式。
 原型式继承,可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅
复制。而复制得到的副本还可以得到进一步改造。
 寄生式继承,与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强
对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问
题,可以将这个模式与组合继承一起使用。
 寄生组合式继承,集寄生式继承和组合继承的优点与一身,是实现基于类型继承的最有效方式。

零CSS基礎 | 公開課

宋休: w * h
xp下 12px[11 * 11] win7 12px[11 * 12]
雅黑:
win7 12px[12 * 11]
标签样式尽量加给块元素,如<h2><a>,设置a字体尽量设置在h2上
行高设置比字体大
行高与高度:ie6都设,不考虑ie6可不设置高度
ie6/7 不支持给li加hover不支持
清浮动:
...
<div class='clear'></div>
<br clear='all' />

.clear{zoom:1}
.clear:after{content:'',display:block;clear:both}

触发bfc css3中 flow root

display:inline-block; table-cell/table-caption 注意:inline-block下面会有空隙,居中也麻烦

float不为None

overflow不为visible

position不为static relative


字体情况下每个数字宽度占字体一半大小

overflow (ie67  zoom:1)

font复合样式包括line-height,如果line-height单独写需放在font后面

小图标统一都是背景

字体14 上8下8,则line-height:14 + 8 + 8 = 30

active 选项卡下边框盖住,active{ padding-bottom:1px  }  ie6 { padding-bottom:1px;margin-bottom:-1px;overflow:hidden;position:relative; }

margin 负值 {margin-top:20px;}并且把父级高级撑开20px; {margin-top:-20px}少占父级20px,父级少撑开1px,自身大小占用大小不改变;position:relative解决ie6下出去的部分不会被父级截掉

letter-space ie6下会出问题

两border相交时,为梯形,不相交时,为直形

元素浮动之后宽度如果是内容撑开的,就给里边所有块元素,都加浮动 ,否则给元素设置宽度

type=hidden 模擬select radio 把選擇的值覆給hidden,所以可以提交

background-position控制圖片在元素中的位置

input與外層高度一致 + float:left;
<style>
    .box{ height: 40px;border:1px solid #000000; font-size: 12px; font-family: '宋体';}
    input{ margin: 0; padding: 0;vertical-align: middle}
    span{ display: inline-block; height: 40px;vertical-align: middle; line-height: 40px;}
    input[type=radio]{ width: 13px; height: 13px;}
    select{ width: 300px; background: #0ff; height: 40px;} /* ie6不支持高度设置 */
    option{ background: #000; color: #ffffff;}
</style>
<div class="box">
<input type="radio" name="" id=""/><span>邮件</span> <input type="text"/>
</div>

零JS筆記 | ex基础部分

百度评分


onmouseout时清除,利用cur变量循环,利用onclick来设置cur,如果cur小于0,则不设置,一旦onclick设置了cur值,即发生点击,则out时保持onclick状态
百度评分原理


文字上飘


防止重复点击:

if(obj.b) { return; }
obj.b = !0;
...

中间开始依次两边走原理

5 4 6 3 7 2 8 1 9 0 10

//方案一:
以首个5个基点:
即 num2 = -1 +2 -3 +4 -5 +6....  //中间协助得到下面数的变量;
再利用5,依次相加
num = 5 4 6 3 7 ...//实际要用到的数;

文字上飘



图片点击左右飘走


利用transition
图片点击左右飘走


图片同步与交叉走


图片同步与交叉走


商品价格计算


主要分清作用域名,上面部分在一个循环里,下面则需要整个div查找元素来确定,写在sum()里,确保每次事件都可调用到;
商品价格计算


奇偶选择

Math.floor( i / 8 ) ,则 1-8列里,得到的都为0
Math.floor( i / 8 ) ,则 9-15列里,得到的都为1

i%2 == 0 则为偶数
i%2 == 1 则为奇数

奇偶选择



图片无缝切换原理


<quoteblock>

【】表示当前显示,两张图片需要2个变量 ;<br />
1、页面上总显示2张图片; 【1】 - 1<br />
2、点击--> 瞬间第2张图片地址切换-->整个div向左运动-400   1 - 【2】<br />
3、再次点击--> 时,改变图片地址 2 - 3,瞬间重置div为left:0,这是直接拉回,视觉看不出,最后再次做运动 2 - 【3】<br />
4、所以div总在 -400与0之间<br />
5、连续点击闪动,运动未解决禁止重复点击<br />

</quoteblock>
图片无缝切换原理





图片抖动掉落

    function getArr(index) { //index即为左边的个数
        var arr = []
        arr[0] = index;
        var len = Math.max(index, img.length - 1 - index);//左右两边最大的
        var a = b = index;
        for (var i = 0; i < len; i++) {
            if (a > 0) {
                a--;
                arr.push(a)
            }
            if (b < img.length - 1) {
                b++
                arr.push(b)
            }
        }
        return arr;
    }

//如console.dir(getArr(5))  === >  5 4 6 3 7 2 8 1 9 0

图片掉落

for套for矩形排列

// 5 x 5
    var str = ''
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 5; j++) {
            str += '<...top:' + i % 5 * 90 ;left:' + j * 90 .../>'
        }
    }

先抖动再掉落时,按顺序依次落下须使用回调函数外一个变量,内一个变量,否则出问题
图片抖动掉落




多组菜单自动播放


原理:两个变量,控制父级变量inow,控制子级变量num,关系为:1:0,1:1,1:2.....

2:0,2:1,2:2.....等,分别控制,切换为,当num到达最大值是切换到第二级的条件是num = ..length, if里切换inow的值为0,1,2,3.....

多组菜单自动播放

零JS筆記 | apply call 轉

call: 调用一个对象的一个方法,以另一个对象替换当前对象。

call([thisObj[, arg1[, arg2[, [,.argN]]]]])

參數:thisObj,


arg1, arg2, , argN :可选项。将被传递方法参数序列。


說明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。
    function Obj(){this.value="对象!";}
    var value="global 变量";
    function Fun1(){alert(this.value);}

    window.Fun1();   //global 变量
    Fun1.call(window);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象!

window.Fun1()默認對象;Fun1.call(window)執行Fun1的對象為window; 以此類推


call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。

    var func=new function(){this.a="func"}
    var myfunc=function(x){
        var a="myfunc";
        alert(this.a);  //func
        alert(x);  //var
    }
    myfunc.call(func,"var");
对于第一个参数意义都一样,但对第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
func.call(func1,var1,var2,var3)  ==  func.apply(func1,[var1,var2,var3])
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入 区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments




apply :應用某一對象的一個方法,用另一對象替換當前對象;

apply([thisObj[,argArray]]) 

1、如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
2、如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

實例a

function add(a,b){alert(a+b)}function sub(a,b){alert(a-b)}add.call(sub,3,1);

這個例子其實沒什麼用,一定要找理由:不涉及到this,所以call什麼的相當於白寫;alert(4)

實例b

    function Animal(){
        this.name = "Animal";
        this.showName = function(){
            alert(this.name);
        }
    }

    function Cat(){
        this.name = "Cat";
    }

    var animal = new Animal();
    var cat = new Cat();

    //通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。
    //输入结果为"Cat"
    animal.showName.call(cat,",");
    //animal.showName.apply(cat,[]);
animal.showName.call(cat,","); 將原本的this對象指向cat,cat獲得屬性,this.name==cat.name,所以输出是Cat

實例c

 function Animal(name){    
     this.name = name;    
     this.showName = function(){    
         alert(this.name);    
     }    
 }    
   
 function Cat(name){  
     Animal.call(this, name);  
 }    
   
 var cat = new Cat("Black Cat");   
 cat.showName();
Animal.call(this, name); this為cat對象,再執行 Animal(); 裏面的this變為cat對象,所以獲得屬性與方法;最後彈出 'Black Cat'

零JS筆記 | 照片牆

1、佈局轉換;


2、設置每一張都比上一次層級高;


3、move時找最近的,把當前拖動元素傳進來 ,最終得到變量nL


4、每一個圖片都沒碰到的情況;


5、需要找最近元素


6、拖動元素傳進函數


7、碰到的3元素找最近的;


8、條件是碰到的並且不包括自身


9、如何找斜邊的最小值;勾股定理


10、使用勾股定理則又是一個方法


11、被拖動元素與找到的最近元素之間運動切換,並且索引切換


12、隨時排使用隨時函數生產;並且也要重置每個圖的索引

window.onload = function () {
//佈局轉換;
var _ul = document.getElementById('ul1')
var _li = _ul.getElementsByTagName('li')
var _inp = document.getElementById('input1')
var izindex = 2;
var arr = []
for (var i = 0; i < _li.length; i++) {
    arr.push([_li[i].offsetLeft, _li[i].offsetTop])
}
for (var i = 0; i < _li.length; i++) {
    _li[i].style.position = 'absolute'
    _li[i].style.left = arr[i][0] + 'px'
    _li[i].style.top = arr[i][1] + 'px'
    _li[i].style.margin = 0;
}
for (var i = 0; i < _li.length; i++) {
    _li[i].index = i;
    drag(_li[i])
}
_inp.onclick = function () { //每一個都要動;
    var randomArr = [0, 1, 2, 3, 4, 5, 6, 7, 8]
    randomArr.sort(function (a, b) {  //隨機排
        return Math.random() - 0.5;
    })
    for (var i = 0; i < _li.length; i++) {
        sMove2(_li[i], {left: arr[randomArr[i]][0], top: arr[randomArr[i]][1]})
        //修正拖動時索引;
        _li[i].index = randomArr[i];
    }
}
function drag(obj) {
    var disX = 0;
    var disY = 0;
    obj.onmousedown = function (ev) {
        obj.style.zIndex = izindex++; //每一張都比上一次層級高;
        var ev = ev || event;
        disX = ev.clientX - obj.offsetLeft;
        disY = ev.clientY - obj.offsetTop;
        document.onmousemove = function (ev) {
            var ev = ev || event;
            obj.style.left = ev.clientX - disX + 'px'
            obj.style.top = ev.clientY - disY + 'px'

            for (var i = 0; i < _li.length; i++) {
                _li[i].style.border = ''
            }
            var nL = nearLi(obj) //1、move時找最近的,把當前拖動元素傳進來 ,最終得到變量nL
            if (nL) {     //2、每一個圖片都沒碰到的情況;
                nL.style.border = '2px red solid'
            }

        }
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
            //最近元素
            var nL = nearLi(obj) //拖動元素

            if (nL) {
                sMove2(nL, {left: arr[obj.index][0], top: arr[obj.index][1]})
                sMove2(obj, {left: arr[nL.index][0], top: arr[nL.index][1]})
                //索引對調
                nL.index = [nL.index, obj.index];
                obj.index = nL.index[0];
                nL.index = nL.index[1];

                nL.style.border = '';
            }
            else { //沒碰到時回到原始位置;
                sMove2(obj, {left: arr[obj.index][0], top: arr[obj.index][1]})
            }
        }
        return false;
    }
}

function pz(o1, o2) {
    var L1 = o1.offsetLeft;
    var R1 = o1.offsetLeft + o1.offsetWidth;
    var T1 = o1.offsetTop;
    var B1 = o1.offsetTop + o1.offsetHeight;

    var L2 = o2.offsetLeft;
    var R2 = o2.offsetLeft + o2.offsetWidth;
    var T2 = o2.offsetTop;
    var B2 = o2.offsetTop + o2.offsetHeight;

    if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) { //碰不到的四種情況
        return false;
    }
    else {
        return true;
    }
}

function nearLi(o) { //3、拖動元素傳進來;
    var v = 9999;
    var index = -1;
    for (var i = 0; i < _li.length; i++) {    //4、碰到的3元素找最近的;
        if (pz(o, _li[i]) && o != _li[i]) {    // 5碰到的並且不包括自身

            //6、_li[i]即為碰到的3個元素,這裏的jl調用3次,需要利用勾股定理;
            var c = jl(o, _li[i])     //8、3條斜邊得到了 ;
            if (c < v) {    //9、如何找斜邊的最小值;
                v = c;      //10、v = 最小值;
                index = i;  //11、位置,最近的li在整體的位置
            }
        }
    }
    if (index != -1) {
        return _li[index];   //12、return回找到的元素,給上面代碼加紅邊框;
    }
    else {
        return false;
    }
}

function jl(o1, o2) {  //7、兩元素求元素的斜邊 a邊與b邊;    o1為第一張圖,o2可能是其他3張圖 ,因為上面調用了3次;
    var a = o1.offsetLeft - o2.offsetLeft;
    var b = o1.offsetTop - o2.offsetTop;
    return Math.sqrt(a * a + b * b);
}


function sMove2(obj, json, fn) {
    clearInterval(obj._t)
    var iCur = 0;
    var _speed = 0;
    obj._t = setInterval(function () {
        var on = true;
        for (var attr in json) {
            var _target = json[attr]
            if (attr == 'opacity') {
                iCur = Math.round(css(obj, attr) * 100)
            }
            else {
                iCur = parseInt(css(obj, attr));
            }
            _speed = (_target - iCur) / 8;
            _speed = _speed > 0 ? Math.ceil(_speed) : Math.floor(_speed)
            if (iCur !== _target) {
                on = false
                if (attr == 'opacity') {
                    obj.style.opacity = (iCur + _speed) / 100
                    obj.style.filter = 'alpha(opacity=' + iCur + _speed + ')'
                }
                else {
                    obj.style[attr] = iCur + _speed + 'px'
                }
            }
        }
        if (on) {
            clearInterval(obj._t)
            fn && fn.call(obj)
        }
    }, 30)
}

function css(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj) [attr]
}
}

See the Pen YympxY by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

零JS筆記 | 圖片放大镜

问题:

<div id="div1">
    <div id="div2"></div>
</div>
<script>
    var _div1 = document.getElementById('div1')
    var _div2 = document.getElementById('div2')
    _div1.onmouseover = function () {
        document.title += 1
    }
    _div1.onmouseout = function () {
        document.title += 2
    }
</script>
<style>
    #div1 { width: 200px; height: 200px; background: red; }
    #div2 { width: 100px; height: 100px; background: yellow; }
</style>

從紅---> 黃 2121212121
1、觸發本身元素的out事件,所以+2,當到黃上,冒泡,又觸發本身的over事件+1
2、所以会发生闪动;

解决:
1、js: onmouseenter onmouseleave (子級不會影響父級 )
2、全兼容作法;
3、css: 加層隔開父子級;

window.onload = function () {
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');

    oDiv1.onmouseover = function (ev) {
        var ev = ev || window.event;

        var a = this, b = ev.relatedTarget; //相對目標,之前的目標,移入目標之前的元素
        if (!elContains(a, b) && a != b) {
            document.title += '1';
        }
    };
    oDiv1.onmouseout = function (ev) {
        var ev = ev || window.event;

        var a = this, b = ev.relatedTarget;
        if (!elContains(a, b) && a != b) {
            document.title += '2';
        }
    };
};

function elContains(a, b) {  //判断两个元素是否是嵌套关系 a是否包含b
    return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}

简单放大镜:

window.onload = function () {
    var _div = document.getElementById('div1')
    var _span = document.getElementsByTagName('span')[0]
    var _div2 = document.getElementById('div2')
    var _img2 = _div2.getElementsByTagName('img')[0]
    _div.onmouseover = function () {
        _span.style.display = 'block'
    }
    _div.onmouseout = function () {
        _span.style.display = 'none'
    }
    _div.onmousemove = function (e) {
        var e = e || event;
        var L = e.clientX - _div.offsetLeft - _span.offsetWidth / 2
        var T = e.clientY - _div.offsetTop - _span.offsetHeight / 2
        if (L < 0) {
            L = 0
        }
        else if (L > _div.offsetWidth - _span.offsetWidth) {
            L = _div.offsetWidth - _span.offsetWidth
        }
        if (T < 0) { //注意這裏不能寫else if
            T = 0
        }
        else if (T > _div.offsetHeight - _span.offsetHeight) {
            T = _div.offsetHeight - _span.offsetHeight
        }
        _span.style.left = L + 'px'
        _span.style.top = T + 'px'
        var scaleX = L / (_div.offsetWidth - _span.offsetWidth) //比例; 0-1
        var scaleY = T / (_div.offsetHeight - _span.offsetHeight) //比例:0-1
//大圖能走的距離為本身距離 - 大圖外層可視區的距離 ;
//此距離  * 比例

        _img2.style.left = -scaleX * (_img2.offsetWidth - _div2.offsetWidth) + 'px'
        _img2.style.top = -scaleY * (_img2.offsetHeight - _div2.offsetHeight) + 'px'


    }
}

See the Pen jbgrXw by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

零JS筆記 | 面向對象 | 自定義事件

什麼是組件?

對面向對象的深入應用(UI組件、功能組件)
將配置參數、方法、事件,三者分離
創建自定義事件:
有利於多人協作開發;
如何去掛載自定義事件與事件函數

自定義事件:主要與函數有關,讓函數具備事件某些特性
(比如,多个函数也可如事件都执行,而不是像同名函数后覆盖前)

原理:

window.onload = function () {
    var _div = document.getElementById('div1')
    var _span = document.getElementById('span1')

    bind(_div, 'click', function () {
        console.log(1);
    })
    bind(_div, 'click', function () {
        console.log(2);
    })

    bind(_span, 'show', function () {
        console.log(3);
    })
    bind(_span, 'show', function () {
        console.log(4);
    })
    bind(_span, 'hide', function () {
        console.log(5);
    })

//觸發自定義事件: 

    autoEvent(_span, 'show') // 3,4
    autoEvent(_span, 'hide') // 3,4


    function bind(obj, events, fn) {   //建立关系 ;
        //obj:楼层;
        //events:书架
        //fn:一本书

        obj.listeners = obj.listeners || {} //樓層
        obj.listeners[events] = obj.listeners[events] || []; //樓層下創建書架
        obj.listeners[events].push(fn); //push方法把對應的書存到書架下


        if (obj.addEventListener) {
            obj.addEventListener(events, fn, false)
        }
        else {
            obj.attachEvent('on' + events, fn)
        }
    }

    function autoEvent(obj, events) {   //主动触发自定义事件;
        for (var i = 0; i < obj.listeners[events].length; i++) {
            obj.listeners[events][i]();   //循環數組執行即可
        }

    }

}

改寫實例:

window.onload = function () {
    var d1 = new Drag()
    var d2 = new Drag()
    var d3 = new Drag()
    var d4 = new Drag()
    d1.init({
        id: 'div1'
    })
    d2.init({
        id: 'div2'
    })
    bind(d2, '_down', function () {
        document.title = 'down'
    })
    d3.init({
        id: 'div3'
    })
    bind(d3, '_up', function () {
        document.title = 'up'
    })
    d4.init({
        id: 'div4'
    })
    bind(d4, '_up', function () {
        document.title = 'bybybybyb'
    })

//所以,最大的好處:如果想讓最後一個變大,只需要再綁定一次即可;而不是寫在原有代碼裏;

    bind(d4, '_up', function () {
        document.getElementById('div4').style.width = '200px'
    })
}
function Drag() {
    this.obj = null;
    this.disX = 0;
    this.dixY = 0;
    this.settings = {}
}
Drag.prototype.init = function (opt) {
    this.obj = document.getElementById(opt.id)
    var _this = this;
    extend(this.settings, opt)
    this.obj.onmousedown = function (ev) {
        var ev = ev || event;
        _this.fnDown(ev)
//執行
        autoEvent(_this, '_down')

        document.onmousemove = function (ev) {
            var ev = ev || event;
            _this.fnMove(ev)
        }
        document.onmouseup = function () {
            _this.fnUp();
//執行
            autoEvent(_this, '_up')

        }
        return false //最後加阻止默認事件;
    }
}
Drag.prototype.fnDown = function (ev) {
    this.disX = ev.clientX - this.obj.offsetLeft;
    this.disY = ev.clientY - this.obj.offsetTop;
}
Drag.prototype.fnMove = function (ev) {
    this.obj.style.left = ev.clientX - this.disX + 'px'
    this.obj.style.top = ev.clientY - this.disY + 'px'
}
Drag.prototype.fnUp = function () {
    document.onmousemove = document.onmouseup = null;
}
function extend(o1, o2) {
    for (var attr in o2) {
        o1[attr] = o2[attr]
    }
}
function bind(obj, events, fn) {
    obj.listeners = obj.listeners || {};
    obj.listeners[events] = obj.listeners[events] || [];
    obj.listeners[events].push(fn);

    if (obj.nodeType) { //判斷是否為dom元素
        if (obj.addEventListener) {
            obj.addEventListener(events, fn, false)
        }
        else {
            obj.attachEvent('on' + events, fn)
        }
    }
}

function autoEvent(obj, events) {
    if (obj.listeners && obj.listeners[events]) { //判斷是否存在
        for (var i = 0; i < obj.listeners[events].length; i++) {
            obj.listeners[events][i]()
        }
    }

}