javascript2

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>

哎，没有智能提示的日子真不好过。