Code Monkey home page Code Monkey logo

preview

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.

jlego's Projects

antd-admin icon antd-admin

A admin dashboard application demo built upon Ant Design and Dva.js

bpmn icon bpmn

BPMN 2.0 execution engine

canvas-designer icon canvas-designer

Collaborative, extendable, JavaScript Canvas2D drawing tool, supports dozens of builtin tools, as well as generates JavaScript code for 2D animations.

chartbrew icon chartbrew

Open-source web platform used to create live reporting dashboards from APIs, MongoDB, Firestore, MySQL, PostgreSQL, and more 📈📊

chor-js icon chor-js

An editor for BPMN 2.0 choreography diagrams based on bpmn-js

dcgan-tensorflow icon dcgan-tensorflow

A tensorflow implementation of "Deep Convolutional Generative Adversarial Networks"

diagram-js icon diagram-js

A toolbox for displaying and modifying diagrams on the web.

ej2-javascript-ui-controls icon ej2-javascript-ui-controls

Syncfusion JavaScript UI controls library offer more than 50+ cross-browser, responsive, and lightweight HTML5 UI controls for building modern web applications.

es4x icon es4x

🚀 fast JavaScript 4 Eclipse Vert.x

espui icon espui

A simple web user interface library for ESP32 and ESP8266

evm icon evm

超轻量级物联网虚拟机

evue_doc icon evue_doc

EVUE 全称 Embedded Vue,是一套面向物联网的小程序开发框架,类似VUE的开发方式,全面兼容鸿蒙HML语法,极速提升开发效率。

expresscart icon expresscart

A fully functioning Node.js shopping cart with Stripe, PayPal, Authorize.net, PayWay, Blockonomics, Adyen, Zip and Instore payments.

fashop icon fashop

php开源商城系统,基于swoole、easyswoole框架开发

fashop-admin icon fashop-admin

微信小程序商城后台,微信小程序微店后台,接口基于FaShop

grapesjs icon grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding

h5-dooring icon h5-dooring

H5 Page Maker, H5 Editor. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 致力于提供一套简单方便、专业可靠、无限可能的H5/PC落地页解决方案.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.