Make Things Move -- Javascript html5版（一）文件目录结构和工具方法准备

　　从这一篇开始，就来开始我们的make things move之旅吧

　　在此之前，要知道ActionScript(AS)的语法和JS是不一样的，AS是相对于JS而言更好的支持了面向对象的特性，所以我们可以自己实现一些简单的工具类，让我们更快速的构建我们的工程。不过我们不用全部实现AS中的东西，我们只用实现最基本的类的构造，类的继承和其他一些实用的工具函数就好了。

　　其实我还想说的是，我们还是要实现AS的Sprite类和stage，因为这两个东西是实现AS动画最基本的元素，html5 canvas提供的js api还是比较低级的，我们可以简单的封装一下实现AS的sprite 和stage，不过这两个东西还是等后续讲有关动画的原理再来细说吧。另外，其实现在已经有很多开源的HTML5游戏框架，可以直接使用，而且已经很成熟社区也好，比如现在很火的cocos2d-html5,我不是很赞成自己造轮子写一个，不过如果是出于学习目的还是可以一试的，因为这样也比较容易理解框架底层的东西，和提高你的JS水平。话题跑远了……

　　文件目录结构

　　推荐模仿linux的文件结构吧，随便在哪放你的工程

   创建一个/mtm的文件夹，此文件夹的根目录下：

    |-- index.html

    |-- /css

    |-- /js

         |-- /bin      此目录旋转最终的用于执行的js文件

         |-- /lib      放置库工具

         |-- /etc      放置配置文件

         |-- /mtm      make things move 工程的主要例子的实现类

工具方法

　　一在js/lib/目录下创建一个sys.js的文件

　　然后实现我们的第一个构造类的工具方法：__class__。我写多了python，深受python类构造模式的影响(同样的我也不分号党，只有在写java或其他静态语言的时候)，双下划线是表示系统内置属性或方法的意思，这只是我自己的习惯，读者可以根据自己的习惯来写，不过建议有一个好的规范，我的在JS里就不算是什么好的。读者也可自己实现一个可构造类并能实现继承的方法，我的实现如下：

// 参数不定，最后一个参数必须是实现的方法的json，前面的都是要继承的类
// opts中的__init__方法则为新类的构造函数
// example: var NewClass = __class__(Class1, Class2, {__init__: function () {}, })

this.__class__ = function (/*Class1, Class2,..., opts*/) {

    var args = Array.prototype.slice.call(arguments),

        opts

    if (typeof args[args.length - 1] === 'function')

        opts = {}

    else

        opts = args.pop()

    var clss = opts.__init__ || function () {},

        name = opts.__name__ || __filename__(__file__())    //获取当前js文件的名称作为这个类的类名，也可在opts中定义__name__

    for (var i = 0, parent; parent = args[i]; i++)

        __copy__(parent.prototype, clss.prototype)

    __copy__(opts, clss.prototype)

    clss.__name__ = clss.prototype.__name__ = name

    return clss

}

　　上面的方法中用到了几个新的工具方法：

1. __file__ 　　　　获取当前文件路径

　　2. __filename__　　获取指定文件路径的文件名（已去掉后缀）

　　3. __copy__ 简单的拷贝属性的方法

　　这些方法都在sys.js实现：

this.__copy__ = function (source, target) {

    for (var k in source)

        target[k] = source[k]

    return target

}

this.__file__ = function () {

    var e = document.getElementsByTagName('script')

    return e.length ? e[e.length - 1].src : ''

}


// 获取当前文件所在的目录

this.__dirname__ = function (s) {

    var p = s.lastIndexOf('/')

    if (p === 0)

        return '/'

    if (p === -1)

        return ''

    return s.slice(0, p)

}


// 获取指定文件路径的文件名字（带后缀）

this.__basename__ = function (s) {

    var res =  s.match(/\/([^\/]+\.\w+)$/i)

    return res ? res[1] : ''

}

this.__filename__ = function (s) {

    var str = __basename__(s)

    return str.length ? str.slice(0, str.lastIndexOf('.')) : str

}

　　最后还有一个__load__方法，属于一个文件加载器，没办法js"还“没有import我们自己来实现一个

/**
 * @param files ｛Array}    要加载的js文件的路径数组
 * @param ok     {Function} 加载完成后的回调
 * @example:  __load__(['js/sys.js'], function () {console.log('load done!')})
 */
this.__load__ = function () {

    var _loaded_path = {}

    var _loader = function (src, fnc) {

        if (_loaded_path[src])

            return fnc()

        var s = document.createElement("script")

        s.onload = function () {

            _loaded_path[src] = 1

            fnc()

        }

        s.onerror = function () {

             throw "Error loading: " + src

        }

        s.src = src

        document.body.appendChild(s)

    }

    return function (files, ok) {

        files = files.slice()

        if (files.length == 0)

            return ok && ok()

        _loader(files.shift(), function () {

            __load__(files, ok)

        })

    }

}()

　　把上面的代码都放到js/lib/sys.js文件中，就基本完成我们的的工具准备了，我们来试试使用上面的方法，顺便熟悉我们的文件结构，在 js/mtm/ 文件夹下创建一个Test.js文件，在这里我们用我们的工具函数创建我们的第一个类：

var Test = __class__({

    __init__: function () {

        this.sayMyName()

    },

    sayMyName: function () {

        alert("I am a Class, my name is " + this.__name__)

    }

})

再写一个继承类,和Test.js同目录下创建OtherTest.js（注意，我们的__class__方法是可以多重继续的，只是新类里没有可间接从自己类里调用父类的方法）:

var OtherTest = __class__(Test, {

    __init__: function () {

        // 手动调用父类的构造方法

        Test.call(this)

    },

    sayMyName: function () {

        // 手动调用父类的sayMyName方法

        Test.prototype.sayMyName.call(this)

        // 再弹出一个信息

        alert("All done!")

    }

})

类是写完了，但我们并没有引用，我们来部署一下我们测试环境：在js/etc/ 目录下创建一个mtm_module.js的文件，里面把我们js/mtm/文件里的js路径都写入一个mtm_module数组中：

var mtm_module = [

    'js/mtm/Test.js',
    'js/mtm/OtherTest.js',

]

以后都把mtm文件的路径往这个数组里加。在js/lib/目录下创建一个main.js的最终执行文件,然后主要就是在这个文件中加载其他js 执行测试代码：

// 把js/mtm/里的测试类都加载进来

__load__(mtm_module, function () {

    // 实例化一个Test类

    var test = new Test()

})

最后就是写index.html页面，把主要的sys.js，mtm_module.js, main.js用标签引入就OK了：

<!doctype html>

<html>

<head>

  <title> Make things move </title>

</head>

<body>

<script src='js/lib/sys.js'></script>

<script src='js/etc/mtm_module.js'></script>

<script src='js/bin/main.js'></script>

</body>

</html>

　　到此，如果过程都没有任何问题，你可以打开index.html 然后就会弹出我们上面写的信息！如果你用的是mac 或 linux系统建议直接用命令行工具在该工程根目录输入`python -m SimpleHTTPServer 8000` 然后浏览器上打开localhost:8000就能看到效果了。写了这么多，可能篇幅有些长，下次写看来要控制一下 :p

巴特西

Make Things Move -- Javascript html5版（一）文件目录结构和工具方法准备

最新文章

热门文章