初识ext懂得js的潮流-JavaSript-爱易网页

初识ext懂得js的潮流

日期：2014-05-16　浏览次数：20364 次

初识ext了解js的潮流
开篇，原本想大量引用网上对Ext-base.js文件的分析。但是经过大量的阅读国外的书籍发现，原来那人根本不懂什么是js面向对象程序设计。
参考书：
Apress出版的Pro.JavaScript.Design.Patterns
Professional.JavaScript.for.Web.Developers.2nd.Edition.2009
本文想通过一步一步的对javascript语法的进化来最后达到最ext-base.js的解析过程。
1. Javascript中的类
利用对javascript的常识，我认为js的设计应该如下：

/* Anim class. */
var Anim = function() {
...
};
Anim.prototype.start = function() {
...
};
Anim.prototype.stop = function() {
...
};
/* Usage. */
var myAnim = new Anim();
myAnim.start();
...
myAnim.stop();

定义了一个新的类Anim，委派了两个方法给prototype属性。所谓的prototype，我的理解是指针。实际上它和c++，c中指针的运行方法有微小的差别，但大致一样。详情请参考上面的两本书。
如果你喜欢把所有的属性和方法都装在类中。如下：

/* Anim class, with a slightly different syntax for declaring methods. */
var Anim = function() {
...
};
Anim.prototype = {
start: function() {
...
},
stop: function() {
...
}
};

通过以上的操作，产生一个新的概念：Encapsulation。我的理解：装箱。就是把所有的属性和方法放到类中。
值得谈到的是Javascript中的函数。在javascript中函数就是类。
函数的大部分概念和C++没有什么区别。值得注意的是匿名函数.

<html>
    <head>
        <title>String Example</title>
        <script type="text/javascript">
        	//在javascript中，函数都最好的对象
			//函数的大部分概念和C++没有什么区别。值得注意的是匿名函数
			//示例如下：
            /* An anonymous function, executed immediately. */
            (function(){
                var foo = 10;
                var bar = 2;
                alert(foo * bar);
            })();
			//这个函数的定义和执行并没有分配给任何变量。最后的（）执行了这个函数。
			//他们是空的，但是并不是这种情况
            /* An anonymous function with arguments. */
            (function(foo, bar){
                alert(foo * bar);
            })(10, 2);
			//下例同第一个例子等价。不过将值给了一个内在的变量
            /* An anonymous function that returns a value. */
            var baz = (function(foo, bar){
                return foo * bar;
            })(10, 2);
            alert(baz);
			//匿名函数最有趣的应用时建立闭包。
			//闭包是一个受保护的变量空间，这就是说闭包函数可以在他们所定义的任意地方执行。不受函数体影响
            /* An anonymous function used as a closure. */
            var baz;
            (function(){
                var foo = 10;
                var bar = 2;
                baz = function(){
                    return foo * bar;
                };
            })();
			baz(); // baz can access foo and bar, even though it is executed outside of the class
        </script>
    </head>
    <body>
        <!-- Nothing in the body -->
		//在javascript中，函数都最好的对象
			//函数的大部分概念和C++没有什么区别。值得注意的是匿名函数
			//示例如下：
            /* An anonymous function, executed immediately. */
            (function(){
                var foo = 10;
                var bar = 2;
                alert(foo * bar);
            })();
			//这个函数的定义和执行并没有分配给任何变量。最后的（）执行了这个函数。
			//他们是空的，但是并不是这种情况
            /* An anonymous function with arguments. */
            (function(foo, bar){
                alert(foo * bar);
            })(10, 2);
			//下例同第一个例子等价。不过将值给了一个内在的变量
            /* An anonymous function that returns a value. */
            var baz = (function(foo, bar){
                return foo * bar;
            })(10, 2);
            alert(baz);
			//匿名函数最有趣的应用时建立闭包。
			//闭包是一个受保护的变量空间，这就是说闭包函数可以在他们所定义的任意地方执行。不受函数体影响
            /* An anonymous function used as a closure. */
            var baz;
            (function(){
                var foo = 10;
                var bar = 2;
                baz = function(){
                    return foo * bar;
                };
            })();
			baz(); // baz can access foo and bar, even though it is executed outside of the class
    </body>
</html>

如果你使用装箱的写法，可以试试下面一种：

/* Add a method to the Function object that can be used to declare methods. */
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
};
/* Anim class, with methods created using a convenience method. */
var Anim = function() {
...
};
Anim.method('start', function() {
...
})

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

初识ext懂得js的潮流

相关资料更多>

推荐阅读更多>