{"id":15308195,"url":"https://github.com/yidas/jqapp","last_synced_at":"2025-09-12T02:10:23.002Z","repository":{"id":57281945,"uuid":"164189622","full_name":"yidas/jqapp","owner":"yidas","description":"JavaScript MVC (MVP) Framework suitable for jQuery development","archived":false,"fork":false,"pushed_at":"2019-12-09T10:32:22.000Z","size":249,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-15T21:02:14.131Z","etag":null,"topics":["framework","frontend","javascript","jqapp","jquery","mvc","mvp"],"latest_commit_sha":null,"homepage":"https://yidas.github.io/jqapp/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yidas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-05T06:43:26.000Z","updated_at":"2020-12-24T11:18:13.000Z","dependencies_parsed_at":"2022-09-11T02:10:43.336Z","dependency_job_id":null,"html_url":"https://github.com/yidas/jqapp","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjqapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjqapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjqapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yidas%2Fjqapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yidas","download_url":"https://codeload.github.com/yidas/jqapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228470327,"owners_count":17925206,"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":["framework","frontend","javascript","jqapp","jquery","mvc","mvp"],"created_at":"2024-10-01T08:14:29.199Z","updated_at":"2024-12-06T13:42:05.536Z","avatar_url":"https://github.com/yidas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://jquery.com\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/220px-JQuery_logo.svg.png\" height=\"50px\"\u003e\n    \u003c/a\u003e\n        \u003ch1 align=\"center\"\u003eJqapp.js\u003c/h1\u003e\n    \u003cbr\u003e\n\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/jqapp.svg)](https://www.npmjs.com/package/jqapp)\n[![License](https://img.shields.io/github/license/yidas/jqapp.svg)](https://github.com/yidas/jqapp/blob/master/LICENSE)\n\nJavaScript MVC (MVP) Framework suitable for jQuery development\n\nFEATURES\n--------\n\n- ***Lightweight MVC (MVP)** Javascript framework with [Vue.js](https://vuejs.org/) pattern like*\n\n- ***[jQuery](https://jquery.com/)** supported, or **alternatively [pure JS (ECMAScript 5) alone](#-jquery)** without any library*\n\n- ***[Element Scope](#instance-element-scope), [Template Engine](#template), [Components](#components)** features*\n\n---\n\nOUTLINE\n-------\n\n- [Introduction](#introduction)\n- [Demonstration](#demonstration)\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Guide](#guide)\n    - [Jqapp Instance](#jqapp-instance)\n        - [Creating a Jqapp Instance](#creating-a-jqapp-instance)\n        - [Data and Methods](#data-and-methods)\n        - [Instance Element Scope](#instance-element-scope)\n        - [Instance Lifecycle Hooks](#instance-lifecycle-hooks)\n        - [Lifecycle Diagram](#lifecycle-diagram)\n    - [Template](#template)\n        - [Text variable](#text-variable)\n        - [String Template](#string-template)\n        - [DOM Template](#dom-template)\n    - [Components](#components)\n        - [Base Example](#base-example)\n        - [Render Component](#render-component)\n- [API](#api)\n    - [Global Config](#global-config)\n    - [Options / Data](#options--data)\n    - [Options / DOM](#options--dom)\n    - [Options / Lifecycle Hooks](#options--lifecycle-hooks)\n    - [Instance Properties](#instance-properties)\n    - [Instance Methods / Data](#instance-methods--data)\n\n---\n\nINTRODUCTION\n------------\n\nJqapp is a simple JavaScript / jQuery framework that makes you develop Frond-End application smoothly and efficiently with skeleton.\n\nIn general, we use [jQuery](https://jquery.com/) to solve simple Front-End requirements but no framework specification. Jqapp aims to provide the solution for jQuery development with MVC (MVP) design pattern, which may be suitable for your jQuery project, optimizing the architecture and improving maintainability. On the other hand, if you need to develop large requirements which is suitable for MVVM framework with two-way binding, you could choose [Vue.js](https://vuejs.org/) or other else.\n\n---\n\nDEMONSTRATION\n-------------\n\nJqapp.js Demo Site: [https://yidas.github.io/jqapp/](https://yidas.github.io/jqapp/)\n\nAt the core of Jqapp.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:\n\n```html\n\u003cdiv id=\"app\"\u003e\n\u003c/div\u003e\n```\n\n```javascript\nnew Jqapp({\n  el: \"#app\",\n  data: {message: 'Hello Jqapp!'},\n  template: '\u003cdiv\u003e{{ message }}\u003c/div\u003e',\n})\n```\n\n```\nHello Jqapp!\n```\n[JSFiddle Example](https://jsfiddle.net/718mxp6r/)\n\n---\n\nREQUIREMENTS\n------------\nThis library requires the following:\n\n- jQuery 1.11.0+ | 2.0+ | 3.0+ (Optional)\n\n---\n\nINSTALLATION\n------------\n\n### Bower Installation\n\n```\nbower install jqapp\n```\n\n\u003e You could also download by [NPM](https://www.npmjs.com/package/jqapp) or directly copy [`dist`](https://github.com/yidas/jqapp/tree/master/dist) assets. ([Last Release for download](https://github.com/yidas/jqapp/releases))\n\n### Assets include\n\nAdd Jqapp JavaScript file either to the `\u003chead\u003e`, or to the bottom of `\u003cbody\u003e`\n\n```html\n\u003cscript type=\"text/javascript\" src=\"dist/jqapp.min.js\"\u003e\u003c/script\u003e\n```\n\n---\n\nGUIDE\n-----\n\n\n### Jqapp Instance\n\n#### Creating a Jqapp Instance\n\nEvery Jqapp application starts by creating a new Jqapp instance with the `Jqapp` function:\n\n```javascript\nvar app = new Jqapp({\n  // options\n})\n```\n\nAs a convention, we often use the variable `app` to refer to our Jqapp instance.\n\n#### Data and Methods\n\nWhen a Jqapp instance is created, it adds all the properties found in its `data` and `methods` objects. Please note that this framework is not MVVM pattern, the `data` will not react with view.\n\n```javascript\n// Create a app with data and methods\nvar app = new Jqapp({\n  data: { a: 1 },\n  methods: {\n    alert: function () {alert()}\n  },\n});\n\n// Get data from Jqapp instance\napp.a // =\u003e 1\n\n// Call method from Jqapp instance\napp.alert();\n```\n\nIn addition to data properties, Jqapp instances expose a number of useful instance properties and methods. These are prefixed with `$` to differentiate them from user-defined properties. For example:\n\n```javascript\nvar data = { a: 1 }\nvar app = new Jqapp({\n  el: '#app',\n  data: data\n});\n\napp.$data === data // =\u003e true\napp.$el === document.getElementById('app') // =\u003e true\napp.$$el.get(0) === $('#app').get(0) // =\u003e true\n\n// $remove is an instance method\napp.$remove();\n```\n\n\u003e Prefix `$` indicates Jqapp instance properties or methods.  \n\u003e Prefix `$$` indicates jQuery object returning of Jqapp instance properties or methods.\n\n\n#### Instance Element Scope\n\nAfter Jqapp instance is [mounted](#-mounted), the [`this.$el`](#-thisel)(Element) / [`this.$$el`](#-thisel-1)(jQuery Element) will be created which refer to the instance element. You can manipulate or query any element under the instance root element's scope by using them:\n\n```javascript\nnew Jqapp({\n  el: \"#app\",\n  mounted: function () {\n    // Set content for the instance root element by ECMAScript5\n    this.$el.innerHTML = '\u003cp\u003eText by JS\u003c/p\u003e';\n    // Append element to the instance root element by jQuery\n    this.$$el.append('\u003cp\u003eText by jQuery\u003c/p\u003e');\n  }\n})\n```\n\n\u003e [JSFiddle Example](https://jsfiddle.net/o0hj65kw/)\n\n#### Instance Lifecycle Hooks\n\nEach Jqapp instance goes through a series of initialization steps when it’s created - for example, it needs to compile the template, and mount the DOM element to the instance. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.\n\nFor example, the `mounted` hook can be used to run code after an instance is mounted with element cache:\n\n```javascript\nnew Jqapp({\n  el: \"#app\",\n  mounted: function () {\n    // `this` points to the app instance\n    console.log(this.$el)  // Element\n    console.log(this.$$el) // jQuery element\n  }\n})\n```\n\nThere are also other hooks which will be called at different stages of the instance’s lifecycle, such as `beforeCreate`, `created` and `mounted`. All lifecycle hooks are called with their this context pointing to the Jqapp instance invoking it.\n\n#### Lifecycle Diagram\n\nBelow is a diagram for the instance lifecycle. You don’t need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/yidas/jqapp/master/img/jqapp.png\" width=\"60%\"\u003e\n\u003c/p\u003e\n\n### Template\n\nJqapp uses an HTML-based template syntax that allows you to render DOM with variables from the instance's data. All Jqapp templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.\n\n#### Text variable\n\nThe most basic form of data rendering is text interpolation using the “Mustache” syntax (double curly braces):\n\n```html\n\u003cspan\u003eMessage: {{ msg }}\u003c/span\u003e\n```\n\nThe mustache tag will be replaced with the value of the `msg` property on the corresponding data object.\n\n\u003e [Example of Template](https://yidas.github.io/jqapp/template.html)\n\n#### String Template\n\nYou can directly define HTML string into `template` option with text variable:\n\n```javascript\nnew Jqapp({\n  el: \"#app\",\n  components: {\n    'item': {\n      data: {msg: ''},\n      template: \"\u003cdiv\u003e\u003cspan\u003eMessage: {{ msg }}\u003c/span\u003e\u003c/div\u003e\",\n    },\n  },\n  mounted: function () {\n    this.$append(\"div.items\", 'item', {data: {msg: 'Data from Parent'}});\n  },\n})\n```\n\nIn above case, the `{{ msg }}` variable will be replaced to `Data from Parent` from parent instance.\n\n#### DOM Template\n\nYou can also define a template in HTML DOM with a `text/template` type script tag:\n\n```html\n\u003cscript type=\"text/template\" id=\"item-template\"\u003e\n  \u003cdiv\u003e\n    \u003cspan\u003eMessage: {{ msg }}\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/script\u003e\n```\n\nThen declare the the template's ID querySelector into `template` option (Sample code from [String Template](#string-template)):\n\n```javascript\n{\n  data: {msg: ''},\n  template: \"#item-template\",\n},\n```\n\n### Components\n\n#### Base Example\n\nHere’s an example of a Jqapp component:\n\n```javascript\n// Define a new component called counter for Jqapp instance\nvar counterComponent = {\n  data: {count: 0},\n  template: '\u003cdiv\u003e\u003cbutton\u003eYou clicked me \u003cspan class=\"count\"\u003e{{ count }}\u003c/span\u003e times.\u003c/button\u003e\u003c/div\u003e',\n  mounted: function () {\n    var component = this;\n    this.$$el.find('button').click(function () {\n      component.count ++;\n      $(this).find(\".count\").text(component.count);\n    });\n  }\n};\n```\n\nComponents are reusable Jqapp instances defined in a Jqapp instance, we can render a component as a custom element by calling `renderComponent()` with component name: in this case, `counter`. The Other Hand, by calling `append()` to render a component and append into the element.\n\n```javascript\nvar app = new Jqapp({\n  el: \"#app\",\n  components: {\n    'counter': counterComponent,\n  },\n  methods: {\n    createCounter: function () {\n      this.$append(\".list\", 'counter');\n    }\n  },\n  mounted: function () {\n    this.createCounter();\n    this.createCounter();\n    var app = this;\n    this.$$find(\".btn-add\").click(function() {\n      app.createCounter();\n    });\n  },\n```\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cbutton type=\"button\" class=\"btn-add\"\u003eAdd a Counter\u003c/button\u003e\n  \u003cdiv class=\"list\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003e [Example of Components](https://yidas.github.io/jqapp/components.html)\n\n#### Render Component\n\nTo render a component element:\n\n```javascript\nnew Jqapp({\n  el: \"#app\",\n  components: {\n    'item': {\n      template: \"\u003cdiv\u003e\u003cp\u003eItem\u003c/p\u003e\u003c/div\u003e\",\n    },\n  },\n  mounted: function () {\n    // renderComponent() returns element\n    var compoentElement = this.$renderComponent('item');\n    this.$$el.find(\"div.items\").append(compoentElement);\n    // Equal to `this.$append('item', \"div.items\")`;\n  },\n})\n```\n\nAbove sample code uses `renderComponent()` to render a component element then append into `app` root element. You could use `append` to render and append a component into a element by giving component name and element/selector.\n\n\n---\n\nAPI\n---\n\n### Global Config\n\n#### # silent\n\n- Type: `boolean`\n- Default: `false`\n- Usage:\n\n    ```javascript\n    Jqapp.config.silent = true\n    ```\n    Suppress all Vue logs and warnings.\n    \n#### # jQuery\n\n- Type: `boolean`\n- Default: `true`\n- Usage:\n\n    ```javascript\n    Jqapp.config.jQuery = false\n    ```\n    Whether to require jQuery. You can use pure JS alone by turning to `false`.\n    \n#### # compileElement\n\n- Type: `boolean`\n- Default: `true`\n- Usage:\n\n    ```javascript\n    Jqapp.config.compileElement = false\n    ```\n    Whether to compile `options.el` elements when there are no `options.template`.\n\n### Options / Data\n\n#### # data\n\n- Type: `Object | Function`\n- Details:\n\n    The data object for the Jqapp instance. Data will be mixed into the Jqapp instance. You can access these data directly on the Jqapp instance, or use them in directive expressions. Data is also be used by [Template](#template) on renderning.\n\n#### # methods\n\n- Type: `{ [key: string]: Function }`\n- Details:\n\n    Methods to be mixed into the Jqapp instance. You can access these methods directly on the Jqapp instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the current instance.\n\n### Options / DOM\n\n#### # el\n\n- Type: `string | HTMLElement`\n- Details:\n\n    Provide the Jqapp instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.\n\n#### # template\n\n- Type: `string`\n- Details:\n\n    A string template to be used as the markup for the Jqapp instance. The template will replace the mounted element. Any existing markup inside the mounted element will be ignored.\n\n    If the string starts with `#` it will be used as a querySelector and use the selected element’s innerHTML as the template string. This allows the use of the common `\u003cscript type=\"text/template\"\u003e` trick to include templates.\n    \n    \u003e From a security perspective, you should only use Jqapp templates that you can trust. Never use user-generated content as your template.\n\n### Options / Lifecycle Hooks\n\n#### # beforeCreate\n\n- Type: `Function`\n- Details:\n\n    Called synchronously immediately after the instance has been initialized, before data / methods mixing.\n    \n- See also: [Lifecycle Diagram](#lifecycle-diagram)\n\n#### # created\n\n- Type: `Function`\n- Details:\n\n    Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means data / methods have been set up. However, the mounting phase has not been started, and the `el` / `$el` property will not be available yet.\n    \n- See also: [Lifecycle Diagram](#lifecycle-diagram)\n\n#### # beforeMount\n\n- Type: `Function`\n- Details:\n\n    Called right before the mounting begins: the [template](#template) is about to be rendered for the first time.\n    \n- See also: [Lifecycle Diagram](#lifecycle-diagram)\n\n#### # mounted\n\n- Type: `Function`\n- Details:\n\n    Called after the instance has been mounted, where `el` is replaced by the newly created `this.$el` / `this.$$el`. If the root instance is mounted to an in-document element, `this.$el` will also be in-document when mounted is called.\n    \n- See also: [Lifecycle Diagram](#lifecycle-diagram)\n\n#### # beforeDestroy\n\n- Type: `Function`\n- Details:\n\n    Called right before a Jqapp instance is destroyed. At this stage the instance is still fully functional.\n    \n- See also: [Lifecycle Diagram](#lifecycle-diagram)\n\n#### # destoryed\n\n- Type: `Function`\n- Details:\n\n    Called after a Jqapp instance has been destroyed. When this hook is called, the root element of the Jqapp instance have been removed.\n    \n- See also: [Lifecycle Diagram](#lifecycle-diagram)\n\n### Instance Properties\n\n#### # this.$el\n\n- Type: `HTMLElement`\n- Read only\n- Details:\n\n    The current instance's element\n\n#### # this.$$el\n\n- Type: `jQuery HTMLElement`\n- Read only\n- Details:\n\n    The current instance's jQuery element, `null` when jQuery not loaded\n\n#### # this.$parent\n\n- Type: `Object` Jqapp instance\n- Details:\n\n    The current instance's parent instance which could be App or Component\n    \n#### # this.$root\n\n- Type: `Object` Jqapp instance\n- Details:\n    \n    The root Jqapp instance of the current component tree. If the current instance has no parents this value will be itself.\n\n#### # this.$data\n\n- Type: `Object`\n- Read only\n- Details:\n\n    The data object that the Jqapp instance is used, which same as [Data instance properties](#data-and-methods).\n    \n- See also: [Options / Data - data](#-data)\n    \n#### # this.$options\n\n- Type: `Object`\n- Read only\n- Details:\n\n    The instantiation options used for the current Jqapp instance. This is useful when you want to include custom properties in the options.\n\n### Instance Methods / Data\n\n\n#### # this.$mount()\n\nMount element into instance\n\n- Arguments:\n    - `{Element|string|jQuery} elementOrSelector`\n- Returns: `{Object}` Instance \n\n#### # this.$remove()\n\nRemove all elements from instance\n\n- Arguments:\n    - `{Element|string|jQuery} elementOrSelector`\n- Returns: `{Object}` Instance \n\n#### # this.$renderComponent()\n\nRender a element from Component\n\n- Arguments:\n    - `{string} componentKey`\n    - `{Object} options` Component options\n- Returns: `{Element}` Component instance element\n\n#### # this.$$renderComponent()\n\nRender a jQuery element from Component\n\n- Arguments:\n    - `{string} componentKey`\n    - `{Object} options` Component options\n- Returns: `{jQuery}` jQuery component instance element\n\n#### # this.$find()\n\nFind element from instance element\n\n- Arguments:\n    - `{string} selector`\n- Returns: `{Element} Instance element`\n\n#### # this.$$find()\n\nFind jQuery element from instance element\n\n- Arguments:\n    - `{string | Element | jQuery} selectorOrElement`\n- Returns: `{jQuery} jQuery element`\n\n#### # this.$append()\n\nShortcut of appending `this.$renderComponent()` into `this.$find()` element\n\n- Arguments:\n    - `{string} selector`\n    - `{string} componentKey`\n    - `{Object} options` Component options\n    - `{Function} complete` A function to call once the shortcut is complete\n- Returns: `{Element}` Instance element\n\n#### # this.$$append()\n\nShortcut of appending `this.$renderComponent()` into `this.$$find()` element\n\n- Arguments:\n    - `{string | jQuery | Element} selectorOrElement`\n    - `{string} componentKey`\n    - `{Object} options` Component options\n    - `{Function} complete` A function to call once the shortcut is complete\n- Returns: `{jQuery}` jQuery Instance element\n\n#### # this.$replace()\n\nShortcut of replacing `this.$find()` element with `this.$renderComponent()`\n\n- Arguments:\n    - `{string} selector`\n    - `{string} componentKey`\n    - `{Object} options` Component options\n    - `{Function} complete` A function to call once the shortcut is complete\n- Returns: `{Element}` Instance element\n\n#### # this.$$replace()\n\nShortcut of replacing `this.$$find()` element with `this.$renderComponent()`\n\n- Arguments:\n    - `{string | jQuery | Element} selectorOrElement`\n    - `{string} componentKey`\n    - `{Object} options` Component options\n    - `{Function} complete` A function to call once the shortcut is complete\n- Returns: `{jQuery}` jQuery Instance element\n\n#### # this.$html()\n\nShortcut of setting `this.$renderComponent()` into `this.$find()` element\n\n- Arguments:\n    - `{string} selector`\n    - `{string} componentKey`\n    - `{Object} options` Component options\n    - `{Function} complete` A function to call once the shortcut is complete\n- Returns: `{Element}` Instance element\n\n#### # this.$$html()\n\nShortcut of setting `this.$renderComponent()` into `this.$$find()` element\n\n- Arguments:\n    - `{string | jQuery | Element} selectorOrElement`\n    - `{string} componentKey`\n    - `{Object} options` Component options\n    - `{Function} complete` A function to call once the shortcut is complete\n- Returns: `{jQuery}` jQuery Instance element\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyidas%2Fjqapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyidas%2Fjqapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyidas%2Fjqapp/lists"}