lego-core v1.15.9
Component web front-end development framework
virtual-dom + ES6 + Router + Components + sass/less + babel
Install
You can install it via npm:
npm install -S lego-core
Instantiation
Create the application entry file /src/main.js
import jQuery from 'jquery';
import Lego from 'lego-core';
window.$ = window.jQuery = jQuery;
Lego.setting({
alias: 'Lego', //Lego instance alias
version: '20161202', //The version number of the release
pageEl: '#container', //Page rendering container
defaultApp: 'home', //The application launches module by default
rootUri: '/example/dist/', //Root directory
})
Lego.startApp('index'); //Launch the main page application
Get the global parameters, E.g Lego.config.pageEl
View/Component
Create a file /src/home/view/home.js
import './asset/home.css';
class Home extends Lego.View {
constructor(opts = {}) {
const options = {
events: {
'click #button': 'theClick'
}
};
super(options);
}
render() {
return hx`
<button id="button">${this.options.data.buttonText}</button>
<item id="theId"></item> //the component replace this tag and be rendered to here;
`;
}
theClick(event){
console.log('You clicked this button');
}
}
export default Home;
dataSource
Create a file /src/home/data/home.js
class HomeData extends Lego.Data {
constructor(opts = {}) {
const options = {
'apiName_a': {
url: './content.json',
method: 'GET',
body: {param: paramValue}
// reset: true //Whether to re-pull the remote data, yes is 'true'
},
'apiName_b': {
url: './content.json'
}
...
};
Object.assign(options, opts);
super(options);
}
//return format data
parse(datas, apiName) {
return datas[0].data;
}
}
export default HomeData;
Router
Create a file /src/home/app.js
, this is home module entrance
import homeView from './view/home';
import itemView from './view/item';
import homeData from './data/home';
Lego.components('item', itemView); //Register component;
Lego.router({
'/home' () {
const viewObj = Lego.create(homeView, {
el: '#container', //There is no such attribute,the default is Lego.config.pageEl
data: { //Modifying the data property will trigger the view update
buttonText: 'click me'
},
... //You can customize the parameters too, use "viewObj.options[attributeName]" get the attribute
components: [{
el: '#theId',
dataSource: { //dynamic data
api: ['apiName_a', 'apiName_b'], //Data dependencies, cacheable
server: homeData
},
components: []
}]
});
}
});
#Build the project Terminal command
npm run build
Other resources
Many thanks to
License
This content is released under the MIT License.
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago