Jquery真的不难~第七回 JS也要面向对象-阿里云开发者社区

开发者社区> mcy247> 正文

Jquery真的不难~第七回 JS也要面向对象

简介:
+关注继续查看

 前几篇文章以JQ为主,本系列的八篇文章中,第一讲为JS基础,从第二讲开始到第六讲主要是JQ基础知识,而第七讲与第八讲是JS中的一些高级应用,写到这里,也快要和《Jquery真的不难》说再见了,有点舍不得,恩,连续的两天失眠,呵呵,不知道为什么,可能是兴奋过度了吧,呵呵,总之这几天的状态超级好,我喜欢这种感觉,非常感谢!

JS也要面向对象这个题目很大,我是搞C#开发的,而C#是个面向人性化的语言,呵呵,我更希望把面向对象改成面向人性化,呵呵,因为只有你把它拟人化之后,你才能更好的去学习吧,编程,上学时大多人说它是个枯燥的东西,编程课卓见变成了睡觉课,呵呵,但似乎从那里起,我就已经被代码吸引了,不知道为什么,但到今天我终于找到原因了,因为我把代码拟人化了,或者说我被代码拟人化了,呵呵!

一 函数实现的面向对象

       window.onload = function () {

            //定义一下游戏功能的函数对象
            var Game = function (canvas, options) {
                var _options = options || { width: 300, height: 300, background: "#ff0000", border: "solid 1px black" };
                var _pos = { x: _options.width / 2, y: _options.height / 2 };
                var _this = this; //这样在canvas对象的事件内部可以向到root级的元素了
                canvas.onmousemove = function (ev) {
                    _pos = {
                        x: ev.clientX - canvas.offsetLeft,
                        y: ev.clientY - canvas.offsetTop
                    };
                    _options = { width: 100, height: 100, background: "#ffff00" };
                    init();
                }

                var init = function () {
                    canvas.style.position = "absolute";
                    canvas.style.border = _options.border;
                    canvas.style.background = _options.background;
                    canvas.style.width = _options.width + "px";
                    canvas.style.height = _options.height + "Px";
                    canvas.style.left = _pos.x + "px";
                    canvas.style.top = _pos.y + "px";
                }
                init();
                this.Content("真的不错,扩展方法"); //不在本方法内实现,只是调用一下

            }
            Game.prototype.Content = function (msg) {//在这样实现它的功能
                console.log(msg);
            }
            var canvas = document.getElementById("canvas");
            new Game(canvas); //如果想用Game里的扩展方法Content,需要new一下,因为Content属于实例方法
}

二 通过JS对象实现的面向对象

        //一个人
            var People = {
                Name: "lose.zhang",
                Age: 30,
                Enjon: ["C#", "JS", "SQL", "NoSQL", "SOA", "AOP", "IOC", "DynamicProxy", "OOD&DDP"],
                Print: function (msg) {
                    console.log(msg);
                },
                Work: {
                    Name: "Software Architect",
                    Salary: "保密",
                    Print: function () {
                        console.log("这个人:" + People.Name
                        + ",他的年龄:" + People.Age
                        + ",他的特长是:" + People.Enjon
                        + ",它的职位是:" + this.Name
                        + ",它的薪水是:" + this.Salary);
                    }
                }
            };
            People.Work.Print();

恩,在这些代码实现过程中,有几个基础东西要撑握一下了:

声明变量:var x=1;

声明数组:var xArr=[];

声明对象:var xObject={};

声明函数:var xFunction=function(){};

函数实例:var xFunInstance=new xFunction();

函数扩展方法:XFunction().prototype.ExtensionForPrint(){};  //只有函数的实例对象,才能访问扩展方法

恩差不多了,就到这里吧!

感谢阅读!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:Jquery真的不难~第七回 JS也要面向对象,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于Chrome支持http header最大长度限制的讨论
关于Chrome支持http header最大长度限制的讨论
3 0
SAP产品和3D渲染技术的结合-使用JavaScript的开源3D渲染库实现
SAP产品和3D渲染技术的结合-使用JavaScript的开源3D渲染库实现
4 0
Jerry Wang的SAP工作日志 - 2016年1月
Jerry Wang的SAP工作日志 - 2016年1月
5 0
使用自己的微信账号登录掘金社区
使用自己的微信账号登录掘金社区
4 0
凌晨起来肝的一篇 Java 学习路线,保证学弟学妹们大三大四的时候顺利找到实习 Offer(3)
凌晨起来肝的一篇 Java 学习路线,保证学弟学妹们大三大四的时候顺利找到实习 Offer
8 0
Duang!Duang!Duang!直击痛点的一款 HTTP 客户端框架(Java),墙裂推荐!(1)
Duang!Duang!Duang!直击痛点的一款 HTTP 客户端框架(Java),墙裂推荐!
5 0
更改软件typera的编辑页面背景色
更改软件typera的编辑页面背景色
7 0
凌晨起来肝的一篇 Java 学习路线,保证学弟学妹们大三大四的时候顺利找到实习 Offer(2)
凌晨起来肝的一篇 Java 学习路线,保证学弟学妹们大三大四的时候顺利找到实习 Offer
6 0
今日头条上传图片时设置封面图报像素低的原因是什么
今日头条上传图片时设置封面图报像素低的原因是什么
7 0
ORM 框架的 setter 方法|学习笔记
快速学习 ORM 框架的 setter 方法
5 0
+关注
mcy247
做自己的太阳 无需凭借谁的光
1070
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载