javascript2

最新推荐文章于 2024-09-30 15:23:15 发布

fdshxp2010

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量311

点赞数

文章标签： javascript function xmlhttprequest prototype 浏览器 asynchronous

Javascript学习笔记9——prototype封装继承

在上文中，我利用prototype的原理做了一个封装的New，然后我就想到，我是否可以用prototype的原理进一步封装面向对象的一些基本特征呢？比如继承。

好，那就让我们一步步打造，首先让我们来看下继承原本的写法：

    <script>
        var Person = function(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.SayHello = function () {
            alert(this.name + "," + this.age);
        };
        var Programmer = function (name, age, salary) {
            Person.call(this, name, age);
            this.salary = salary;
        };
        Programmer.prototype = new Person();
        var pro = new Programmer("kym", 21, 500);
        pro.SayHello();
    </script>

我们看到，在实际上，继承的根本就在于这一步Programmer.prototype=new Person()。也就是说把Person加到原型链上。这一点在Javascript学习笔记7——原型链的原理已经有过比较详尽的解释。

那也就是说，我们实现的关键就在于原型链的打造。

在上文中，我们用JSON来打造了一个原型，其原型链是p.__proto__=Person。那么我们希望在这个上封装继承，那么原型链应该是p.__proto__.__proto__=SuperClass，也就是说Person.__proto__=SuperClass。但是按照我们上面代码的继承方法，原型链关系是Person.__proto__=SuperClass.prototype。

这个和我们在上文中一样，我们的办法就是借助一个辅助函数，将原来的函数内的属性赋给X，然后令X.prototype=SuperClass即可，也就是说我们将子原型进行一个封装。

好，就按照这个思路，我们来实现利用原型链的继承关系的封装。

    <script>
        var Factory = {
            Create: function (className, params) {
                var temp = function () {
                    className.Create.apply(this, params);
                };
                temp.prototype = className;
                var result = new temp();
                return result;
            },

            CreateBaseClass: function (baseClass, subClass) {
                var temp = function () {
                    for (var member in subClass) {
                        this[member] = subClass[member];
                    }
                };
                temp.prototype = baseClass;
                return new temp();
            }
        };
        var People = {
            Create: function (name, age) {
                this.name = name;
                this.age = age;
            },
            SayHello: function () {
                alert("Hello,My name is " + this.name + ".I am " + this.age);
            }
        };
        var Temp = {
            Create: function (name, age, salary) {
                People.Create.call(this, name, age);
                this.salary = salary;
            },
            Introduce: function () {
                alert(this.name + "$" + this.age + "$" + this.salary);
            }
        };
        var Programmer = Factory.CreateBaseClass(People, Temp);
        var pro = Factory.Create(Programmer, ["kym", 21, 500]);
        pro.SayHello();
    </script>

这样就完成了我们对继承关系的封装。当然，我们也可以不单独写一个变量：

var Programmer = Factory.CreateBaseClass(People, 
{
    Create: function (name, age, salary) {
        People.Create.call(this, name, age);
        this.salary = salary;
    },
    Introduce: function () {
        alert(this.name + "$" + this.age + "$" + this.salary);
    }
});

当然，这全凭个人爱好了，个人认为第一种办法相对更清晰一些，但是第二种办法则更优雅。

Javascript学习笔记10——网页运行原理

当我们打开一个网页的时候，浏览器会首先创建一个窗口，这个窗口就是我所知道的window对象，也就是整个Javascript运行所依附的全局变量。

为了加载网页文档，当前窗口又需要创建一个Document对象，然后把打开的网页加载到Document下。网页就是在这个加载的过程中，一边加载一边呈现，所以我们当网速非常慢的时候可以看到，网页从上到下一点点地打开。

当我们用<script src=’’>引入其他的JS时，浏览器可能会派遣其他线程去下载，但是浏览器也会等待需要的JS文件下载完成，然后再有主线程按顺序加载JS其他的代码。在Web标准下，限制对同一个域名最多只允许使用两个线程可以同时加载内容，当然可以通过修改注册表来强迫Windows模块突破这一限制。

同时，许多网站会把js放到不同的子域名下，这样就可以使浏览器开启更多的线程并行加载这些资源，从而更加充分地利用网络带宽。

当整个页面都加载结束后，浏览器开始触发window对象或者body对象的onload事件，其实window对象和body对象的load事件是想通的，这也就意味着两个事件只能有一个起作用。当然，在常规意义上，也没有同时设置两者的需求。

到此结束，然后JS引擎就暂停工作，等待着下一次的触发。因此我们可以说：“JS总是被动触发的”。

Javascript学习笔记11——包装DOM对象

我们在日常的应用中，使用Javascript大多数时间都是在用DOM ，以致于很多人都有一种看法就是DOM==JS，虽然这种看法是错误的，但是也可以说明DOM的重要性。

这就导致了我们在写JS的时候，首先会考虑的是这个方法在页面上会产生什么样的变化之类的问题，用架构的思想来说：我们可以说这样把用户界面和业务逻辑掺杂到了一起。我们也知道，这样对于一个稍大的项目来说，满脑袋都是DIV，都是CSS是做不好东西的。

那么怎么办？我们还是用对象的角度，从逻辑上来考虑这个问题，让我们忘记那些DOM对象。

我们来举一个例子吧：

对于某个回复，可能是回复本贴，也可能是举报。那么暂时让我们忘记那些DOM对象，让我们想清楚逻辑：

点击“回复本贴”时，隐藏举报窗口，打开回复窗口。

点击“举报本贴”时，隐藏回复窗口，打开举报窗口。

OK，也就是说整个逻辑包含两个对象，一个是举报窗口对象，一个是回复窗口对象，每个对象有两个方法，一个是打开，一个是隐藏。由于某个页面可能会有很多这样的对象，每个对象都应该是被创建的一个原型，于是就应该有这样的代码：
<script type="text/javascript">
    var Comment = function (x, y) {
        var x = x;
        var y = y;
    };
    Comment.prototype.Create = function () {

    };
    Comment.prototype.Hide = function () {

    };

    var Report = function (x, y) {
        var x = x;
        var y = y;
    };
    Report.prototype.Create = function () {

    };
    Report.prototype.Hide = function () {

    };
</script>
至于逻辑就是：
buttonCommert.onclick = function () {
    GetReport(“id”).Hide();
    HideOthers();  //  关闭本页面其它的回复窗口
    var c = new Comment("1","1");
    c.Create();
}

举报按钮也近似如此。

好了大致逻辑如此，我们需要的只是实现原型中的创建和隐藏方法。

var Comment = function (x, y) {
    var x = x;
    var y = y;
    var ConfirmComment = function () {
        //Ajax提á交?评à论?
    };
};
Comment.prototype.Create = function () {
    var com = document.createElement("div");
    document.getElementById("XXXX").appendChild(com);
    com.x = x;
    com.y = y;
    com.style.left = "XXpx";
    com.style.top = "YYpx";
    var txt = document.createElement("input");
    txt.nodeType = "text";
    com.appendChild(txt);
    var btn = document.createElement("input");
    btn.nodeType = "button";
    btn.onclick = ConfirmComment();
    com.appendChild(btn);
};

以上皆为伪代码，只是提供一种封装DOM的思路。

在工程中，将DOM对象包装成符合我们自己业务逻辑的Javascript对象是一种非常好的做法，这也是企业JS库形成的一个过程。

Javascript学习笔记12——Ajax入门

Ajax:Asynchronous Javascript And XML。写个简单的例子：

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="LabelTime" runat="server"></asp:Label>
    </div>
    </form>
    <script type="text/javascript">
        if (!window.XMLHttpRequest) {
            window.XMLHttpRequest = function () {
                return new ActiveXObject("Microsoft.XMLHTTP");
            };
        }
        function UpdateClock() {
            var request = new XMLHttpRequest();
            request.open("post", "TimeTest.aspx", false);
            request.send("");
            document.getElementById("LabelTime").innerText = request.responseText;
        }
        setInterval(UpdateClock, 1000);
        
    </script>
</body>

而在另一个页面写下当前时间，这样就形成了一个钟表。

代码很简单，就是操纵一个XMLHttpRequest对象来获取服务器时间，然后更新时间。上面的代码在与服务器交互时，并没有页面整体刷新，而是局部刷新。

但是上面的代码在request.open时，最后一个参数为false，表示发出的XMLHttpRequest是同步的，由于Javascript是单线程的，所以在等待请求的过程中，线程会被阻塞，如果请求时间过长，浏览器会停止响应。

虽然Javascript是单线程的，但是XMLHttpRequest具备异步处理请求的能力。代码如下：

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="LabelTime" runat="server"></asp:Label>
    </div>
    </form>
    <script type="text/javascript">
        if (!window.XMLHttpRequest) {
            window.XMLHttpRequest = function () {
                return new ActiveXObject("Microsoft.XMLHTTP");
            };
        }

        function AsynRequest() {
            var request = new XMLHttpRequest();
            request.open("post", "TimeTest.aspx", true);
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    UpdateClock(request.responseText);
                }
            };
            request.send("");
        }
        function UpdateClock(time) {
            document.getElementById("LabelTime").innerText = time;
        }
        setInterval(AsynRequest, 1000);
        
    </script>
</body>