{"id":21574471,"url":"https://github.com/magiccube/mxframework-core","last_synced_at":"2025-04-10T16:12:17.624Z","repository":{"id":58234910,"uuid":"9853086","full_name":"MagicCube/mxframework-core","owner":"MagicCube","description":"MagicCube MXFramework 3.0 - The latest version yet.","archived":false,"fork":false,"pushed_at":"2016-01-27T06:38:47.000Z","size":7379,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-08T01:54:26.983Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://magiccube.github.io/mxframework-core","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MagicCube.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-04T11:26:04.000Z","updated_at":"2021-10-26T10:00:08.000Z","dependencies_parsed_at":"2022-08-31T09:21:15.516Z","dependency_job_id":null,"html_url":"https://github.com/MagicCube/mxframework-core","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fmxframework-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fmxframework-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fmxframework-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fmxframework-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MagicCube","download_url":"https://codeload.github.com/MagicCube/mxframework-core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248251109,"owners_count":21072685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-24T12:09:57.044Z","updated_at":"2025-04-10T16:12:17.606Z","avatar_url":"https://github.com/MagicCube.png","language":"JavaScript","readme":"\u003e MXFramework v6 has been released in 100% pure ES6 code! [Check it out now!](https://github.com/MagicCube/mx6)\n\n# ![](https://raw.githubusercontent.com/MagicCube/mxframework-core/master/res/images/mx-logo-32.png) MXFramework\nMagicCube MXFramework is yet another simple, lightweight, modularized, Object-Oriented JavaScript framework.\n\n[Visit MXFramework Home Page to learn more.](http://magiccube.github.io/mxframework-core)\n\n## Install via Bower\n```console\nbower install mxframework\n```\n\n## Quick Examples\nLike many other JavaScript frameworks, MXFramework has its own way to define namespace, class and component.\nIn this quick example, we will demonstrate how to define classes using MXFramework.\n\nFirstly, let's create a new class named Animal.\n```javascript\nscripts/my/namespace/Animal.js\n\n/* \n * Define a namespace.\n */\n$ns(\"my.namespace\");\n\n/**\n * Define a class which extends MXComponent.\n * A MXComponent is a very popular super class.\n * Actually, in this case, we can also use MXObject instead.\n * MXObject is the super class of MXComponent.\n */\nmy.namespace.Animal = function()\n{\n\t/**\n\t * In MXFramework, it always use 'me' instead of 'this'.\n\t */\n\tvar me = $extend(MXComponent);\n\t/**\n\t * 'base' is almost the same as 'super' in Java.\n\t */\n\tvar base = {};\n\n\n\t/**\n\t * Define a public field.\n\t * Every public member should under 'me'.\n\t */\n\tme.name = null;\n\n\t/**\n\t * Define a private field.\n\t * The names of a private members always start with an underline.\n\t */\n\t var _something = null;\n\t var _someVariable = 0;\n\n\n\t/**\n\t * Override a public method.\n\t * 'init' method will be automatically called immediately after the instance is created.\n\t * Even though, you can also set the 'autoInit' field to false if you need lazy intialization.\n\t */\n\tbase.init = me.init;\n\tme.init = function(p_options)\n\t{\n\t\tbase.init(p_options);\n\t};\n\n\n\t/**\n\t * Define a public function.\n\t */\n\tme.sayHi = function()\n\t{\n\t\tif (_canSayHi())\n\t\t{\n\t\t\t/* \n\t\t\t  String.format provides ability to substitute string with JSON object or array.\n\t\t\t  In MXFramework you can use the following format methods.\n\t\t\t  - String.format    String.format(\"Hi, {name}!\", { name: \"Henry\" }); String.format(\"Hi, {0}\", [ \"Henry\" ])\n\t\t\t  - Date.format      Date.format(new Date(), \"yyyy-MM-dd HH:mm:ss\"); Date.format(new Date(), \"yy年M月d日\");\n\t\t\t  - Number.format    Number.format(12.53212, \"0.00\"); Number.format(123, \"00000000\");\n\t\t\t */\n\t\t\treturn String.format(\"Hi, I'm a {name}\", { name: me.name });\n\t\t}\n\t};\n\n\n\t/**\n\t * Define a private function.\n\t */\n\tfunction _canSayHi()\n\t{\n\t\t// MXFramework has a series of methods for type assertions.\n\t\treturn isString(me.name);\n\t}\n\n\n\t/**\n\t * This is the end of class.\n\t */\n\treturn me.endOfClass(arguments);\n};\n```\n\n\n\n\n\n\n\n\n\nLet's have a class inherits from Animal.\n\n```javascript\nscripts/your/namespace/Cat.js\n\n$ns(\"your.namespace\");\n\n// Import the super class.\n$import(\"my.namespace.Animal\");\n\n/**\n * Cat inherits from Animal.\n */\nyour.namespace.Cat = function()\n{\n\tvar me = $extend(my.namespace.Animal);\n\t/*\n\t * Change the initial value of name.\n\t */\n\tme.name = \"Cat\";\n\tvar base = {};\n\n\tme.nickName = \"kitty\";\n\n\tbase.init = me.init;\n\tme.init = function(p_options)\n\t{\n\t\tbase.init(p_options);\n\t\tif (isEmptyString(me.nickName) \u0026\u0026 isString(me.name))\n\t\t{\n\t\t\tme.nickName = me.name;\n\t\t}\n\t};\n\n\t/**\n\t * Override 'sayHi' method.\n\t */\n\tbase.sayHi = me.sayHi;\n\tme.sayHi = function()\n\t{\n\t\t// $format is a shortcut to String.format, Date.format and Number.format.\n\t\treturn base.sayHi() + $format(\" You can call me {0}\", [ me.nickName ]);\n\t};\n\n\treturn me.endOfClass(arguments);\n};\n```\n\n\n\n\n\n\n\nNow we need to instantialize the class.\n```JavaScript\n// Import Cat class. The Animal class will be automatically imported with Cat.\n$import(\"your.namespace.Cat\");\n\n// Create a new instance with default values.\nvar cat = new your.namespace.Cat();\nalert(cat.sayHi());\n\n// Create a new instance with initial values using JSON.\n// In MXFramework, class only accepts JSON object as constructure parameter.\nvar tomCat = new your.namespace.Cat({\n    nickName: \"Tom\"\n});\nalert(tomCat.sayHi());\n```\n\nFinally, build the code with mxbuild or mxtool to generate min.js and min.css\n```\njar mxbuild.jar your;my\n```\n\n\n## Source Code Repository\nThe source is available for download from GitHub\nhttps://github.com/MagicCube/mxframework-core\n\n## Documents\n[Visit MXFramework Home Page to learn more.](http://magiccube.github.io/mxframework-core)\n\n## Related Projects\n* [mxframework-node](https://github.com/MagicCube/mxframework-node) - MagicCube MXFramework for Node.js\n* [mxtool](https://github.com/MagicCube/mxtool) - Development tools for MagicCube MXFramework\n* [g3d](https://github.com/MagicCube/g3d) - A web GIS library for 3D visualization using WebGL technology\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagiccube%2Fmxframework-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagiccube%2Fmxframework-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagiccube%2Fmxframework-core/lists"}