JavaScript模块化开发框架ArchtJS(实现类、继承、包依赖管理)

  1 //声明包信息
  2 //声明中的目录都是以当前js文件为起点的相对路径(类似css文件中引用图片链接)
  3 Archt.package({
  4     //常用工具类
  5     ‘utils‘: [‘lib/utils.js‘],
  6     //jquery核心
  7     ‘lib.jquery.core‘: [‘lib/jquery/jquery-1.10.2.js‘],
  8     //jqueryUI
  9     ‘lib.jquery.ui‘: [‘lib/jquery/jquery-ui-1.11.4.js‘],
 10     //jquery滚动条插件
 11     ‘lib.jquery.plugins.mcustomscrollbar‘: {
 12         base: ‘lib/jquery/plugins/mcustomscrollbar/‘,
 13         paths: [‘jquery.mCustomScrollbar.css‘,
 14                 ‘jquery.mousewheel.min.js‘,
 15                 ‘jquery.mCustomScrollbar.js‘]
 16     },
 17     //jquery树插件
 18     ‘lib.jquery.plugins.ztree‘: {
 19         base: ‘lib/jquery/plugins/ztree/‘,
 20         paths: [‘css/vaStyle/vaStyle.css‘, ‘jquery.ztree.all-3.5.min.js‘]
 21     },
 22     //百度上传插件
 23     ‘lib.baidu.webuploader‘: {
 24         base: ‘lib/baidu.webuploader/‘,
 25         paths: [‘webuploader.css‘, ‘webuploader.js‘]
 26     },
 27     //百度富文本编辑器
 28     ‘lib.baidu.ueditor‘: {
 29         base: ‘lib/baidu.ueditor/‘,
 30         paths: [‘‘]
 31     },
 32     //字体库
 33     ‘lib.fontawesome‘: {
 34         base: ‘lib/font-awesome/‘,
 35         paths: [‘css/font-awesome.min.css‘]
 36     },
 37     //右键菜单
 38     ‘lib.contextmenu‘: {
 39         base: ‘lib/contextmenu/‘,
 40         paths: [‘context-menu.js‘, ‘context-menu.css‘]
 41     }
 42 });
 43 //---------------------------------------------------------------
 44 //类所在的包
 45 Archt.package(‘system.visual‘);
 46 //类依赖的包(相同包下的类不需要引入依赖)
 47 Archt.import([
 48     ‘lib.jquery.core‘,
 49     ‘lib.jquery.ui‘,
 50     ‘lib.jquery.plugins.mcustomscrollbar‘,
 51     ‘lib.fontawesome‘,
 52     ‘utils‘
 53 ]);
 54
 55 //如果未指定类所在的包则为上一个定义类所在的包，依赖同理。
 56 //定义类
 57 define(‘Base‘, {
 58     //共有属性
 59     name:‘base‘,
 60     //私有属性(_前缀)
 61     _name:‘‘,
 62     //静态
 63     __static:{
 64     },
 65     //初始化函数
 66     __init:function(params){
 67         //私有属性
 68         this.myprivate = ‘‘;
 69         //私有方法
 70         this.func = function(){};
 71     },
 72     //共有方法
 73     public:function(){
 74     },
 75     //私有方法(_前缀)
 76     _private:function(){
 77     },
 78     showTime:function(){
 79     }
 80 });
 81
 82 //继承
 83 define(‘Test‘, ‘Base‘, {
 84     __init:function(params){
 85         //使用静态类
 86         var main = this.__using(‘Main‘);
 87     },
 88     showTime:function(){
 89         //调用父类方法。因为有多继承，所以调用方法时需要指定父类
 90         this.__super.showTime[‘Base‘].call(this);
 91     },
 92     //根据包路径管理资源文件
 93     getImgPath:function(){
 94         //获取类所在包的路径
 95         return this.__packageUrl + ‘/image/logo.png‘;
 96     }
 97 });
 98
 99 //定义静态类
100 define(‘Main‘, function(exports, magic){
101     // 通过 exports 对外提供接口
102     exports.doSomething = ...
103     //magic包含此类的基本信息和系统方法，例如类名、所在包、依赖包等
104
105     //创建类
106     var params = {};
107     var test = magic.create(‘Test‘, params);
108     test.public();
109 });
110
111 //启动入口
112 //静态类作为启动
113 runMain(‘system.visual.Main‘);
114 //普通类作为启动
115 runMain(‘system.visual.Test‘, params, callback);
116
117
118 //小项目不使用包依赖，可以去掉上面的包相关代码，但是需要手写加载js文件，js顺序无影响

1. 每个类的定义都可在单独的文件，加载顺序无影响
2. 如果未定义包和依赖，所有的类都在默认包package下
3. 静态类的函数只会运行一次，之后获取到的只是静态类的exports
4. 类内部的__create、__using方法只能创建类依赖的类
5. Archt.create(类名/完整类名, 参数, 依赖包数组)、Archt.using(类名/完整类名, 依赖包数组)

框架已完成，未测试，未发布过，这里只做记录，看看是否有人感兴趣