在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
QCObjectsWelcome to QCObjects. An Open-source framework that empowers full-stack developers to make micro-services and micro-frontends into an N-Tier architecture. With QCObjects devlopers are also able to code front-end and back-end together using a common syntax in pure JavaScript. It is cross-browser, cross-platform and cross-frame. Install it, make a textfield or a navigate home functionality, all in just one step. This document is the Main Reference Documentation! This repository and readme is hosted at https://qcobjects.dev Check out the official page of QCObjects at https://qcobjects.com This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected]. Contributors are welcome! You can contribute to QCObjects following the set of guidelines expressed in the file CONTRIBUTING.md The meaning of the name QCObjects (Do not forget the Q)Often, some people is confusing QCObjects name with CObjects (perhaps some day it changes, who knows...) but the Q has an important meaning: It means Quick! What the complete name QCObjects does mean is Quick Components and Objects, and that is why the Q, C, O letters are capitalized. QCObjects Explainer VideoFor those who have no time to read all of this today, here is a small video that explains what QCObjects is and what can be done with it. Table of Contents
PrincipalsHere are the principals with QCObjects was made with:
Main features
Progressive Web Apps (PWA) Adopted FeaturesPrevent Render-blocking resourcesTo prevent Render-blocking resources, QCObjects has implemented the Package factory function. On-Demand Resources LoadWith a dynamic components driven architecture, QCObjects is rendering every visual resource that is inside of a component only when the component is building itself, and every component is connected to a tree called global.componentsStack that is actually pointing to every component instance and its subcomponents. Every time a component is rebuilt, visual resources are dynamically reloaded on-demand in the most efficient way, so you can forget all the nasty code that you were needing to controll the resource loading process with other frameworks. Lazy-loading of images in components (use lazy-src instead of src attribute in img tag)Since the version 2.1.251, QCObjects provide an easy way to lazy load the images, using the latest standard for browsers. <img src="img/preloader.svg" lazy-src="img/myrealimage.png"/> In the above code, a preloader (light-weight) image is used to be loaded in the first instance, and a lazy-src attribute is used to set the real image to show after lazy loading process. QCObjects will load all the declared tags inside a component in lazy mode if they have a lazy-src attribute, after the component is rebuilt or loaded. Also, QCObjects will use the Intersection Observer API (when available) to determine whether the lazy-src or src image is visually useful to be showed. The effect of lazy loading is only high visible on the first time the PWA is loaded. The next time, the speed of loading will be significantly increased making more difficult to the human eye to see the result. However this feature makes a lot of difference in terms of user experience when the internet connection has low speed issues or the images are extremely large. This feature is a part of the recommended features for PWAs writen by Mozzila Developers Network in an article about Progressive loading. You can read that article here If you don't want to use lazy loading for images, you can always keep the normal way of loading by not adding the lazy-src attribute to the tag and using the traditional src. Cross Browser Javascript Framework for MVC PatternsQCObjects is a javascript framework designed to make easier everything about the MVC patterns implementation into the pure javascript scope. You don't need to use typescript nor any transpiler to run QCObjects. It runs directly on the browser and it uses pure javascript with no extra dependencies of code. You can make your own components expressed in real native javascript objects or extend a native DOM object to use in your own way. You can also use QCObjects in conjunction with CSS3 frameworks like [Foundation] (https://foundation.zurb.com), [Bootstrap] (https://getbootstrap.com) and mobile javascript frameworks like [PhoneGap] (https://phonegap.com) and OnsenUI (https://onsen.io) Install it, make a textfield or a navigate home functionality, all in just one step.QCObjects in installable in your computer, it comes with a CLI Tool and commands to create your application template in one step. Navigate home without leaving the webpage and make a shadowed textfield in one step. Dynamic Components ArchitectureECMA-262 SpecificationSeeECMAScript® 2020 Language Specification for reference CopyrightCopyright (c) Jean Machuca and QuickCorp [email protected] DemoPWA Live DemoCheck out a live demo of pure QCObjects based frontend Progressive Web App here:PWA QCObjects Demo Integrating with FoundationCheck out a demo using Foundation components here:Demo Using Foundation Demo Integrating with MaterializecssCheck out a demo using MaterializeCSS here:Demo Using Materializecss Demo Using Raw CSSCheck out a demo using raw CSS:Demo Using Raw CSS Example of QCObjects using and manipulating canvas objectsThe following code shows how QCObjects can manipulate canvas objects directly and inside components <!DOCTYPE html><html> <head> <title>Demo</title> <script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script> <script type="text/javascript"> var canvas1,canvas2,canvas3,container; CONFIG.set('relativeImportPath','src/'); /** * Main import sentence. */ Import('cl.quickcorp',function (){ /** * Super Container MyOwnBody */ Class('MyOwnBody',HTMLBodyElement,{ customAttr:'custom', body:document.body // breakes default body element and replace with them }); /** * Another custom class definition */ Class('MyContainer',HTMLElement,{ width:400, height:400, customAttr:'custom attr container' }); /** * Another custom class definition */ Class('canvas',HTMLCanvasElement,{ customAttr:'custom' }); /** * Another custom class definition */ Class('MyCanvas2',HTMLCanvasElement,{}); body = New(MyOwnBody); // binds to body body.css({backgroundColor:'#ccc'}); container = Tag('container')[0].Cast(MyContainer); // cast any javascript dom object to QC_Object class container.css({backgroundColor:'red'}); // access binding in two directions to dom objects /** * Instance a new custom canvas */ canvas1 = New(canvas,{ width:100, height:100, }); canvas2 = New(canvas,{ width:200, height:100, }); canvas3 = New(canvas,{ width:300, height:50, }); canvas1.css({backgroundColor:'#000000'}); // like jquery and another style access canvas1.body.style.backgroundColor='#000000'; // standard javascript style access canvas2.body.style.backgroundColor='#0044AA'; // standard javascript style access canvas3.body.style.backgroundColor='green'; // standard javascript style access canvas1.append(); //append canvas1 to body canvas2.attachIn('container'); // attach or append to specific tag containers container.append(canvas3); // append canvas3 to custom tag binding// canvas1.body.remove(); // remove canvas1 from dom body.append(canvas3); // append canvas3 to body // using components var c1 = New(Component,{'templateURI':'templatesample.html',cached:false}); document.body.append(c1); // appends the c1 to the body }); </script> </head> <body> <container id="contentLoader" ></container> </body></html> DevBlogThe Official DevBlog of QCObjects is hosted on Hashnode. The DevBlog is personally written by Jean Machuca, the author of QCObjects and and he is explaining in detail how are the best practices and giving the best tips and tricks to use the most advanced features of QCObjects. ForkPlease fork this project or make a link to this project into your README.md file. Read the LICENSE.txt file before you use this code. Become a SponsorIf you want to become a sponsor for this wonderful project you can do it here Check out the QCObjects SDKYou can check out the QCObjects SDK and follow the examples to make your own featured components DonateIf you like this code please DONATE! InstallingUsing QCObjects with Atom:> apm install qcobjects-syntax https://atom.io/packages/qcobjects-syntax Using QCObjects in Visual Studio Code:https://marketplace.visualstudio.com/items?itemName=Quickcorp.QCObjects-vscode Installing with NPM:> npm install qcobjects-cli -g && npm install qcobjects --save Installing the docker playground:docker pull -a quickcorp/qcobjects-playground && docker run -it --name qcobjects-playground --rm -it quickcorp/qcobjects-playground One-Step Installation Script for Ubuntu 18.xWARNING: Do this only in a fresh|blank|brandnew installation of Ubuntu 18.x, don't do it into an existing production environment. You will be asked for sudo grant permission. curl -L https://cdn.qcobjects.dev/install_qcobjects_ubuntu18x.sh |sh WARNING: I'm not responsible for damaging your infrastructure by using an automated installation script into an unsafe network. Make sure all your repos and scripts are under HTTPS with a valid certificate. For better safe results I recommended you to download the script, edit it for your special needs and then execute it in your machine as local. One-Step Installation Script for RHEL8curl -L https://cdn.qcobjects.dev/install_qcobjects_rhel8.sh |sh One-Step Installation Script for Raspberry PI Raspbian 9su -c "curl -L https://cdn.qcobjects.dev/install_qcobjects_raspbian9.sh |sh" root One-Step Installation Script for macOSTested on macOS Catalina 10.15.3 curl -L https://cdn.qcobjects.dev/install_qcobjects_macOS.sh | zsh Install and test QCObjects on Microsoft Windows OS1.- Install the latest version of NodeJS for Windows from here2.- From cmd install qcobjects-cli using npm npm i qcobjects-cli -g 3.- Create a directory for your project md mynewproject && cd mynewproject 4.- Create a new QCObjects Progressive Web Application qcobjects create mynewproject --pwa QCObjects Multi-Cloud InstallationQCObjects is natively supported by the most famous cloud providers. In most of them, you can install it and set everything up and running in just one step. DigitalOcean One-Click DropletIf you want to forget apt-get and the config guide. Go straight to deploying your project using a preconfigured 1-Click App including QCObjects CLI, QCObjects-SDK and QCObjects HTTP2 Built-In Server, then spin it up on a Droplet VM or a Kubernetes cluster in 60 seconds or less. Create Your Own QCObjects DigitalOcean Droplet here AWS Amazon Machine Images (AMI)An Amazon Machine Image (AMI) provides the information required to launch an instance. You must specify an AMI when you launch an instance. You can launch multiple instances from a single AMI when you need multiple instances with the same configuration. You can use different AMIs to launch instances when you need instances with different configurations. An AMI includes the following:
Start building your QCObjects AMI here Amazon Web Services AWS PIB (Private Amazon Machine Image)A Private Image lets you build a new AMI by installing AWS Marketplace software on an image you choose from the AMIs available to your AWS account, this allows you to better meet internal specifications for security, management and compliance. As with standard AWS Marketplace AMIs, each Private Image will comprise a subscription for the installed product and have software usage billed via AWS Marketplace. Start building your QCObjects Amazon Private Image here Using the development version code in the straight way into HTML5:<script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script> Using the CDN minified version code from jsDelivr CDN<script src="https://cdn.jsdelivr.net/npm/qcobjects/QCObjects.min.js"></script> Using the latest non-minified version from jsDelivr CDN<script src="https://cdn.jsdelivr.net/npm/qcobjects/QCObjects.js"></script> Using UNPKG CDN<script src="https://unpkg.com/qcobjects@latest/QCObjects.js"></script> Using CDNJS<script src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/[VERSION]/QCObjects.js"></script> Where [VERSION] is the corresponding latest version using numeric notation, example: to use version 2.1.420: <script src="https://cdnjs.cloudflare.com/ajax/libs/qcobjects/2.1.420/QCObjects.js">& |
请发表评论