README

JavaScript框架/库 - 一站式JS、HTML、STYLE。

安装

npm i --save jfjs

欢迎使用JF.js

JF 是一个集成的框架/库。JF 使用json类型的结构化JavaScript对象，并将其转换为HTML5。您可以使用JF创建丰富的模板，经过JF处理后，生成带有JS甚至带有样式的HTML。使用JF框架，您只需要添加JF文件，无需其他依赖项。

优点

1. 一站式模板 - JS、HTML、STYLE
2. 简单易用
3. 简单标记 - JSON类型
4. 原生代码
5. 史上最快的HTML构建器
6. 模板接受函数
7. 不需要选择器框架（例如：jQuery），因为所有模板都链接在JF.templates数组中的JavaScript中

基本模板对象

sample = {
    element: "div",
    id: "sampleId",
    class: "sampleClass",
    text: "Sample text"
}

将创建

<div class="sampleClass" id="sampleId">Sample text</div>

可用属性

(must have String) element 		Specifies the html node type
(optional String) id			specifies id
(optional String) class			specifies class
(optional Object|String) data 		can hold objects, arrays strings for the specific html element
(optional Object) style			object can contain style
(optional String) inlineStyle		inline style for specific html element
(optional Function) *custom*		function executed after html has loaded, to be able to us need to include "custom" name in object key
(optional Function) on*			any on* native html function (examples: onclick,onload,onmouseover...)
(optional String) name 			reserved word used for fillTemplate function to populate template with json input
(optional String) text			text representation for html element

基本用法

Creator(document.body,sample)

它做什么？

1. 将模板生成的HTML追加到document.body元素中
2. 创建上述模板，并将模板存储在JF.templates数组中，以下ID作为键。
3. 创建包含以下内容的JF.templates.sampleId对象：cssRules: Array[] 如果模板有任何链接规则，则存储在JFstyle对象元素中，elements: Object 在模板HTML中创建所有元素，funcArr: Array[] 所有自定义函数，html: HTMLElement 链接的HTML本身，name: "sampleId" 定义ID或未指定时生成的ID，remove: function 删除函数 - 应用于完全删除模板及其所有依赖项，template: Object 创建模板的对象本身

用法描述

有3个全局JavaScript函数： "Creator"、"JFstyle" 和 "Controller"，它们处理模板对象的操作

Creator(HTMLElement $target, Object $template1, Object $template2, ...., Object $templateN) 负责获取一个模板并创建HTML

$target                   target HTML element on which appendChild method will be called after creating template
$template1...$templateN   Templates from which the html will be created

返回创建的模板数组

Controller(String $name, String $action, Function $function, Boolean $bool) 负责创建模板之间的简单交互

$name         name of route
$action       action to be called or queued 
$function     function which will be executed
$bool         true/false parameter for the function to be deleted after execution

返回 true / false

JFstyle 存储所有模板的CSS样式

具有1个函数 .addStyle(String $style)

返回 true / false

高级示例

sampleObject = {
  element: "div",
  id: "about",
  title: {
  	element: "h3",
    text: "Hello I'm Gatis Priede",
    style: {
      	display: "inline-block"
    },
    custommargin: function(element){
    	var pos = element.getBoundingClientRect().width / element.parentNode.getBoundingClientRect().width * 100 / 2;
      element.style.marginLeft = 50 - pos + "%";
    }
  },
  description: {
  	element: "h2",
    text: "Web crossplatform developer",
    style: {
		display: "inline-block"
    },
    custommargin: function(element){
    	var pos = element.getBoundingClientRect().width / element.parentNode.getBoundingClientRect().width * 100 / 2;
        element.style.marginLeft = 50 - pos + "%";
    }
  },
  info:{
  	element: "p",
        text: "sampleText"
  }
}

执行后，HTML将产生以下结果

<div id="about">
<h3 style="margin-left: 24.6463677775114%;">Hello I'm Gatis Priede</h3>
<h2 style="margin-left: 7.23704490187348%;">Web crossplatform developer</h2>
<p>sampleText</p>
</div>

简单的导航示例

sampleNavigation = {
  element:'div',
  id:'navigation',
  style:{
    width:'100%',
    'min-height':'50px'
  },
  buttons:{
    customfunc: function(element){
      for(var id in element.children){
        var button = element.children[id];				
        if(button instanceof HTMLElement){
            button.onmouseover = function(){
              this.classList.add('hover');
            }
            button.onmouseout = function(){
              this.classList.remove('hover');
            }
            button.onclick = function(){
              if(element.lastItem !== undefined){
              	element.lastItem.remove('active');
              }
              this.classList.add('active');
              element.lastItem = this.classList;
            }
          }
      }
      JFstyle.addStyle('.active { color: white; background: rgb(200, 200, 200);}');
          	JFstyle.addStyle('.hover { color: rgb(122, 122, 122); background: white;}');
    },
    element:"div",
    class: "div",
    style:{
      float:"left",
      width:"100%"
    },
    home:{
      element:"button",
      text:"about",
      style:{
        border:"none",
        width:"25%",
        padding:"2px",
        transition: "background ease 1s",
        "border-radius":"1px",
        "text-transform": "uppercase"
      },
    },
    pictures:{
      element:"button",
      text:"pictures"
    },
    programmings:{
      element:"button",
      text:"programming"
    },
    contacts:{
      element:"button",
      text:"contacts"
    }
  }
}

将产生以下结果

<div id="navigation">
    <div class="div">
        <button class="active">about</button>
        <button class="">pictures</button>
        <button class="">programming</button>
        <button>contacts</button>
    </div>
</div>`