行星和飞船——项目拾金（一）

最新推荐文章于 2024-09-17 13:42:29 发布

joy_zxj

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量342

点赞数

分类专栏：项目笔记文章标签： javascript

本文链接：https://blog.csdn.net/zhoujie_zhoujie/article/details/53677349

版权

项目笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码地址：https://github.com/zjjxj/Star-And-Airship

拾金篇

1.代码组织方式

为了实现代码的可重用性和可分发性，有下面这三种方法：

1.命名空间：避免全局量。使用对象字面量写法将不希望放入全局上下文的代码封装起来。

var FOO={};
FOO.x=10;
FOO.add=function(x,y){
    return x+y;
};

但命名空间有三个问题：

如果把所有功能和数据都放在命名空间下，随着功能和数据的增加，命名空间很快就会变得难以处理。
团队开发中，如果多个库选择同一个命名空间，可能会产生冲突。
团队开发中，很多程序员都可以访问命名空间，这增加了误删或误写其他命名空间的可能。

2.模块模式：就是将生成命名空间的功能封装在函数中。

function getModule(){
    var FOO={};
    FOO.x=10;
    FOO.add=function(x,y){
    return x+y;
  };
    return FOO;
}
var myNamespace=getModule();

好处：

可以随意使用被封装的结构，包括对其进行命名。
可以利用闭包来设置命名空间的私有数据。不用担心内部属性会遍共有属性。

弊端：我们使用了一个全局变量作为全局函数getModule()的命名空间，还是增加了全局量。

3.立即调用的函数表达式（最优方案）：拥有一个立即执行的函数，在函数中构建需要的模块，可以返回或导出对象以供他用，无需占用资源生成公共函数。

    var myModule=(function(){
        var events=[];

        return {
        x:10,
        add:function(x,y){
            return x+y;
        },
        addEvent:function(eventName,target,fn){
    events.push({eventName:eventName,target:target,fn:fn});
        },
        listEvents:function(eventName){
            return events.filter(function(eventObj){
                return eventObj.eventName===eventName;  
            })
        }
    }
})();

好处：

直接返回对象，而不是先创建对象再将其返回，这样可以简化代码，不必再为压根永不上的对象保留空间。
有很多新的可能性，可以通过尾部的括号传参，实现模块之间彼此互通。
不用单独创建函数再调用，减少了全局中的对象。

Bug篇

1.暴露基础的bug

这个小项目很久之前就开始写了，但就在实现第一个主要功能的时候遇到了一个我百思不得解的bug，当时调试了很久，以为自己遇到了一个很高级的问题，还顺道复习了很多相关的知识，但是最后还是没改出来，然后就放下了这个项目。前两天就想起这个问题，决定重新从头再把这个小程序写一遍，悲剧的是同样卡在了这个问题，于是果断去论坛上求助。问题地址：http://bbs.csdn.net/topics/392061139

知道真相后的我真是把自己狠狠的鄙视了一把，因为那一段时间在看性能优化方面的书，写这段代码的时候就光想着减少DOM 操作，还一直想是不是定时器的问题，改bug的时候压根就没想过是这儿的问题，由此暴露了我三个问题：

基础知识不扎实，innerHTML的理解太表面了。
调试代码的方法，错误定位方面有问题。
bug实在改不出来就赶紧请教别人，心疼浪费了那么多时间。

2.圆周运动不够圆

自从解决了第一个bug，代码就写的一路顺畅，直到基本功能都有了，就差一个美丽的圆。在网上搜了一个做圆周运动的方法，就准备往代码里套，但总是会出现问题，飞船不沿着轨道运动，运动过程卡顿。。。。于是我就一直调一直调，最后甚至一点点的试位置（当时崩溃的就直接骗自己忘了浏览器的兼容性，先让我看到效果再说），中间省略很多次把对的地方改错了，过了很久在我快放弃的时候才想到，我为什么不先写一个小demo实现一下圆周运动，然后我就写了这个demo:https://github.com/zjjxj/Star-And-Airship/blob/master/demo/test.html，于是我就顺利的找到了问题在那，并解决了这个问题。再次为我浪费的时间默哀。。。。由此，我又看到了很多自己的问题：