8000 GitHub - zhuqingyv/rope: Rope可以让你在没有任何构建工具的情况下开发一个页面,并且支持语义化,异步渲染,状态管理,数据绑定
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
/ rope Public

Rope可以让你在没有任何构建工具的情况下开发一个页面,并且支持语义化,异步渲染,状态管理,数据绑定

License

Notifications You must be signed in to change notification settings

zhuqingyv/rope

Repository files navigation

Editor.md

icon

RopeJS is a purely functional programming web framework that abstracts all elements into a single function, and all data binding is also implemented through passing parameters. So even if you don't use JSX like syntax, you can write a semantical DOM structure using javascript!

install or inject

npm i roper

OR

<script src="https://xxxxxx.ropejs.js"></script>

Why use RopeJs?

Rope was born to perform simple page building without any web clis( npm vue-cli create-app... ), so once your HTML introduces RopeJs , your js can be as follows:

<html>
  <body>
    <style>
      span {
        display: block;
      }
    </style>
    <script src="./lib/rope.js"></script>
    <script type="text/javascript">
      const { Rope } = window
      const { text, div, hooks, input, list } = Rope;
      
      const rope = new Rope(1);
      const app = hooks((props, state, setState) => {
        return div(
          text(props, 'text'),
          text(state, 'text')
        );
      }, { text: 'Hello world!From state!' });

      document.body.appendChild(app({
        text: 'Hello world!From props!'
      }).element);

    </script>
  </body>
</html>

The operation result is shown in the figure!

result

Element

VElement

All components inherit from the VElementClass. Let's take the 'div component' as an example to demonstrate the basic functions of a component:

const { div } = Rope;

const child1 = div()
  .className('a-div-1')
  .style({
    width: '50px',
    height: '50px',
    backgroundColor: 'red'
  })
  .onClick(() => { alert('a-div-1') })

const child2 = div()
  .className('a-div-2')
  
// Direct nesting is allowed here
div(child1, child2)

Text

In Rope, a text component is defined as text, which is essentially a span. Let's take a look at the demonstration below:

const { text } = Rope;

test('I'm a span as text!)
  .className('a-text')
  .style({
    contSize: '12px',
    color: 'gray'
  })
  .onClick(
8000
() => { alert('a-text') })

Hook Component

Usually, we need to reuse a set of elements, that is, the concept of components. At this point, we need to use hooks

Use

const { hooks, div, text } = Rope;

const myComponent = hooks((props, state, setState) => {
  return div(
    text(props, 'text'),
    text(state, 'text')
  )
}, { text: "I'm state.text!" });

const props = {
    text: "I'm props.text!"
};
document.body.appendChild(myComponent(props))

Bind state && set state

Because RopeJS is filled with functions everywhere, the binding rules for data can be represented by the number of parameters to the function, using text as an example:

Static

The value of text here will never change!

const app = hooks((props) => {
  return text(props.text)
});

app({ text: "I'm props.text!" });
Dynamics

Here, the value of text always points to object.text!

const app = hooks((props) => {
  return text(props, 'text')
})

app({ text: "I'm props.text!" });
Dynamics with filter

The third parameter here can be a function, and the final value is based on the return value of the function!

const app = hooks((props) => {
  return text(props, 'text', (text) => {
    return `Text is: ${text}!`
  })
})

app({ text: "I'm props.text!" });

About

Rope可以让你在没有任何构建工具的情况下开发一个页面,并且支持语义化,异步渲染,状态管理,数据绑定

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
0