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

preact-photon icon preact-photon

:rocket: Beautiful desktop apps with Preact + Photon :heart:

shoes-ecommerce icon shoes-ecommerce

Shop made in Next.JS and Strapi containing products from https://nike.com

statik icon statik

Embed files into a Go executable

steedos-platform icon steedos-platform

Salesforce Platform 企业低代码平台开源替代方案,全新支持 amis 微页面 / Open source alterative to Salesforce DX Enterprise Low Code Platform.

steedos.com icon steedos.com

华炎魔方官网、应用商城:使用serverless-nextjs开发前端页面,通过graphql接口连接华炎魔方数据。无服务、自动化部署。

tfjs icon tfjs

A WebGL accelerated JavaScript library for training and deploying ML models.

thingsboard-gateway icon thingsboard-gateway

Open-source IoT Gateway - integrates devices connected to legacy and third-party systems with ThingsBoard IoT Platform using Modbus, CAN bus, BACnet, BLE, OPC-UA, MQTT, ODBC and REST protocols

topology icon topology

A diagram (topology, UML) framework uses canvas and typescript. 一个轻量(100k左右)、功能丰富的绘图工具(微服务架构图、拓扑图、流程图、类图等UML图、脑图,动画、视频支持)。 【在线使用】:

watchx-ii icon watchx-ii

A brand-new designed open source smart watch

win10-ui icon win10-ui

Win10风格的UI框架。Windows10 style UI framework.

wood icon wood

基于express的后台接口开发框架

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.