龙空技术网

无名前端库

天真塌不下来 103

前言:

此时姐妹们对“没有ajax客户端库”都比较着重,我们都需要学习一些“没有ajax客户端库”的相关内容。那么小编也在网摘上网罗了一些有关“没有ajax客户端库””的相关文章,希望咱们能喜欢,小伙伴们快快来学习一下吧!

# 无名前端库

历经多年,无心插柳,却编写了一个直接操作dom的前端库,简单易用,类似于react,可以实现react所有功能。rxjs是它唯一的依赖库。希望能有伯乐赏识这个库。我为开源做了一点贡献,我的github是

## 前言

近些年来,前端框架层出不穷,比较著名的有:knockout, angular, react, vue。我还接触学习过一个比较好的框架叫circle.js。knockout是框架的雏形,比较简单,容易上手,但是不能无限调用,只能做做简单的页面。angular我用了,可能没有找到窍门,半途而废。但是,却因此知道另一个库rxjs,后者的强大是我花了两年时间才发觉出来的。rxjs这个库必将千古留名。最后,react库比较独特,不使用html模板,直接操作dom,为了函数式编程,又增加了一个虚拟dom用来计算dom那些变化了,那些可以保留。circle.js库是不断根据当前状态,计算出新状态,然后重新生成界面,计算量太大。不过确实给人启发,交互式编程在前端的应用。对于我来说,目前最好的前端库是react,这个库也是类似于react操作dom。

## 简介

这个库直接操作dom生成网页,不使用html模板。这一点类似于react。这是一个静态网页的示例:

```js

h1('Hello, world!')

```

这很好理解,翻译成html

```html

<h1>Hello, world!</h1>

```

所有元素设计成如下格式:

```js

tag({...props},...children)

```

这个库与react不同的是,它真正的直接操作dom,没有使用虚拟dom。以上代码就相当于:

```js

let el = document.createElement('h1')

let txt = document.createTextNode('Hello, world!')

el.appendChild(txt)

```

这个库直接使用函数进行无限扩展。react使用类或函数作为组件,比如

```js

function myWork(){

return div({className:'border'},

welcome(),

byebye(),

)

}

function welcome(){

return div({className:'happy'},'welcome')

}

function byebye(){

return div({className:'enjoy'},'byebye')

}

```

以上示例都是静态网页,静态网页没有太大用处,要想更有用,必须使其动起来。

## 绑定属性

如上所述,属性可以赋值常量,也可以和一个Observable关联,界面随着Observable的内容,自动更新。

```js

export const checkboxTest = () => {

let checked = new BehaviorSubject(false)

return div(

checkbox({ checked }),

textNode(checked)

)

}

```

上述代码,文本节点,随着Observable的变化,自动更新界面。注意,BehaviorSubject是可以主动施加变化的Observable。checkbox是窗体控件,绑定了事件。

## 绑定事件

几乎所有常用事件都已经封装,如上,只需要将一个可以施加变化的BehaviorSubject对象放置到checked位置,这个事件就绑定了。

这个库只使用dom规范的子集,许多比较投机取巧的方法和属性没有使用。

视图操作模型必须使用事件,这个事件通过rxjs的`fromEvent`进行操作,不推荐使用dom原生的onclick或addenventhandler。

对于常用的窗体控件进行了包装,可以直接使用:

```js

import { BehaviorSubject } from 'rxjs'

import { button, div, textarea, textNode } from '..'

export const textareaTest = () => {

let value = new BehaviorSubject('ddd')

value.subscribe(console.log)

return div(

textarea({ value }),

button('修改').subscribeEvent('click', e => {

value.next('xxxx')

}),

textNode(value)

)

}

```

## 运行

需要一个入口的html文件,这是唯一使用到html的地方。这一点类似于react。

```js

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title></title>

</head>

<body>

<div id="root"></div>

</body>

</html>

```

然后在index.js文件中有如下入口:

```js

import { fromEvent } from 'rxjs'

fromEvent(document, 'DOMContentLoaded').subscribe(() => {

const root = document.getElementById('root')

root.appendChild(elem)

})

```

## 深入

这个库遵守视图,模型,业务绑定,三者分离的框架。

模型中的主变量用`BehaviorSubject`,从变量用`Observable`。

模型操作视图用订阅。

## Ajax

客户端与服务器的通讯是个刚需,这里使用rxjs库的`fromFetch`直接包装成`Observable`,与上述部分无缝连接。示例稍后补充。

## 序列化与反序列化

模型数据,有两个函数restore和pickout。如果需要保存核心数据到永久介质,用pickout。如果希望应用介质中的数据用restore。比如:

```js

//加载数据到界面

button({ type: 'button' }, '加载').pipeEvent(

'click',

click$ =>

click$

|> withLatestFrom(textarea$)

|> map(([_, code]) => code)

|> map(code => JSON.parse(code))

|> tap(obj => {

restore(model, obj) // *

})

|> (o => o.subscribe())

//保存数据

button('保存').subscribeEvent('click', _ => {

let data = pickout(model) // * model是模型

console.log(data)

})

```

## 总结

现在只是描述这个库如何使用,没有说明这个库如何实现。

这多年我一直在家,靠着前几年的积蓄,一直研究,实现这个库,总结了好多框架,比如react,深入学习了rxjs,阅读了好多MDN上的好多规范比如html规范,dom规范,

历时5年左右,现在将其总结,准备与世人见面。如果大家想让这个库早日发布,希望给我提问题,我更新文章,希望给我点赞,让有缘人相见。

标签: #没有ajax客户端库