The framework for simple projects on jQuery
Hi Habr! I want to share my experience. At once I will say for which projects my library can be applied - for static pages, where there is work with data from the database through upload / download via AJAX. Suppose you have a simple website for some CMS and you need to make a calculator based on the products in the database, then calculate the cost and adjust. This is an ideal task for this library.
I’m not good at developing javascript, but I have to understand and write all sorts of desires for work. Interfaces become more complex, the code is duplicated, supplemented, and as a result we get a rather messy mess without documentation and structure. No, no, you do not think. It all starts harmlessly:
- It is necessary to make this table folded.
A week has passed.
- It is necessary that this data is highlighted columns or rows.
A week has passed.
- It is necessary to draw graphs from the columns, and from the rows the user could then adjust the data for export to the table.
A week has passed.
- We need what we have done, copy the rights and data to the page of assignments and change them to users and groups and slightly change the logic of work.
And so on. For more than 2 years, it has been accumulated, accumulated and accumulated. They don’t allow translating the project into some framework, for the simple reason - you’ll have to study it for the whole team. And neither I, nor they are sure that we will spend time studying it, and then it will not be useful anywhere.
')
I began to write a layer for the investment of working with objects from the database. Creating new items to insert, delete, filter.
The first argument is the name of the model, which will later become a global variable.
The second is an object with a set of model properties and a description of these properties.
Associations of objects with objects are links to the TObject._cache cache.
From the descriptions of the properties I can note while 3 - iskey , type , isfrooze .
iskey - used to create a unique key for an object in the cache. If it is alone, then the object can be accessed through the id method, knowing its key in advance.
type - value types. For now, there are several - bool, int, string, function. The latter is used to bind objects. It is planned to create your own.
isfrooze is a property that, when filled, no longer changes. This is done in case you are afraid of inadvertently changing the property.
There are several properties of models. all - unload all objects:
find ({property: value}) - unloading of all objects matching the rule:
id (ident) - unloading of one object by a given key:
For two-way communication between DOM and objects, a jQuery jsdata method is created, similar to data, but it binds the object to the DOM. You can get the connection through the getDOM model method:
» Link to project
I will be glad to constructive criticism.
Preamble
I’m not good at developing javascript, but I have to understand and write all sorts of desires for work. Interfaces become more complex, the code is duplicated, supplemented, and as a result we get a rather messy mess without documentation and structure. No, no, you do not think. It all starts harmlessly:
- It is necessary to make this table folded.
A week has passed.
- It is necessary that this data is highlighted columns or rows.
A week has passed.
- It is necessary to draw graphs from the columns, and from the rows the user could then adjust the data for export to the table.
A week has passed.
- We need what we have done, copy the rights and data to the page of assignments and change them to users and groups and slightly change the logic of work.
And so on. For more than 2 years, it has been accumulated, accumulated and accumulated. They don’t allow translating the project into some framework, for the simple reason - you’ll have to study it for the whole team. And neither I, nor they are sure that we will spend time studying it, and then it will not be useful anywhere.
')
Plot
I began to write a layer for the investment of working with objects from the database. Creating new items to insert, delete, filter.
Sample user model
new Model( 'User' ,{ 'name' : { type : 'string', def : 'noname', iskey : true }, 'lastname' : { type : 'string' } }) new User({name:'' , 'lastname' : ''}) The first argument is the name of the model, which will later become a global variable.
The second is an object with a set of model properties and a description of these properties.
Model Connection
new Model( 'User' ,{ 'name' : { type : 'string', def : 'noname', iskey : true }, 'lastname' : { type : 'string' } }) new Model( 'Group' ,{ 'name' : { type : 'string', def : 'noname', iskey : true } }) new Model( 'UserInGroup' ,{ 'user' : { type : function(_name){ return new User({name:_name}) }, 'group' : { type : function(_name){ return new Group({name:_name}) }, } } }) new User({name:'' , 'lastname' : ''}) new Group({name:'usergroup'}) var a = new UserInGroup({ user : '' , group : 'usergroup' }) console.log( a ) /* user : Object name lastname group : Object name */ Associations of objects with objects are links to the TObject._cache cache.
From the descriptions of the properties I can note while 3 - iskey , type , isfrooze .
iskey - used to create a unique key for an object in the cache. If it is alone, then the object can be accessed through the id method, knowing its key in advance.
Example
new Model( 'User' ,{ 'name' : { type : 'string', def : 'noname', iskey : true }, 'lastname' : { type : 'string' } }) new User({name:'' , 'lastname' : ''}) User.id('') type - value types. For now, there are several - bool, int, string, function. The latter is used to bind objects. It is planned to create your own.
isfrooze is a property that, when filled, no longer changes. This is done in case you are afraid of inadvertently changing the property.
There are several properties of models. all - unload all objects:
User.all() // return [ Object , Object] find ({property: value}) - unloading of all objects matching the rule:
User.find({name:'Vasya'}) // return [ Object ] id (ident) - unloading of one object by a given key:
User.id(10) // return Object For two-way communication between DOM and objects, a jQuery jsdata method is created, similar to data, but it binds the object to the DOM. You can get the connection through the getDOM model method:
$('<div/>').addClass('test').jsdata('model' , User.id(10)) User.id(10).getDOM('model') // return DOM $('<div/>').jsata('model') // return Object » Link to project
I will be glad to constructive criticism.
Source: https://habr.com/ru/post/311404/
All Articles