文档

概览

简介

Mud.js是一个用于快速构建Web UI的小型库！在语法和实现上参考了Vue、React(JSX)、Svelte和Wujie等优秀的前端库或框架，并且尽可能地降低初学者的学习成本！

只需要了解非常基本的HTML、CSS和JS知识，通过Mud.js即可快速构建轻型Web应用。

是的，Mud.js或许就像一个熟悉的陌生人！

快速开始

推荐使用脚手架工具直接构建工程化模板:

# 安装项目脚手架
npm i @trickle/mud-cli -g

# 使用脚手架快速构建项目, 其中<name>是你的项目名字
mud-cli create <name>

# 进入创建的项目
cd <name>

# 安装项目所需依赖
npm i

# 启动项目
npm run dev

也可以在项目单独安装Mud.js的核心库来满足不同的场景需求:

目前提供了UMD, CJS和ESM三种模块化类型的包！

npm install @trickle/mud.js

pnpm i @trickle/mud.js

yarn add @trickle/mud.js

基础能力

接下我们会尽可能精简代码，更契合主题地介绍Mud.js的基本用法。

注意！以下模块化相关代码均以ESM为例。其他模块化类型同理。

核心类

Mud.js为开发者暴露了一个Mud类，开发者据此便能够使用Mud.js的能力，从而简化开发。

而使用的方式也很简单，只需要像下面这样:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mud.js</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({el: '#app'});
</script>

上述代码将在window对象上创建一个mud实例，可以通过window.mud对其进行访问。

其中，el表示被选中的DOM节点，该节点下的所有子节点都将获得Mud.js提供的能力。

接下来我们会进一步精简不必要的代码，尽可能地突出重点！

插值语法

内容插值

插值语法允许在HTML结构中便捷地使用JS变量:

<div id="app">Say: {title}</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    data: {
      title: 'Hello Mud!'
    }
  });
</script>

上述代码中的{title}将被渲染为Hello Mud！。当变量title发生改变时，渲染的内容也随之改变。

属性插值

除了可以在DOM元素的内容中插值，还可以在属性中插值:

<div id="app">
  <div>{msg}</div>
  <input type="text" value="{msg}">
</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    data: {
      msg: 'Hello Mud!'
    }
  });
</script>

渲染控制

Mud.js为DOM提供了一些特殊的属性，这些属性的值将自动映射到Mud实例的data上而无需再使用插值语法。

条件渲染

像许多常见的编程语言一样使用if, else-if和else关键字对渲染进行控制:

<div id="app">
  <button onclick="isShow()">Show?</button>
  <div if="ifShow">
    Now You See Me!
  </div>
</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    data: {
      ifShow: false
    }
  });
</script>

<script>
  const isShow = ()=>{
    mud.data.ifShow = !mud.data.ifShow
  }
</script>

或许刚入门的开发者对上述代码中存在两个<script>感到困惑——这是因为第一个<script>为ESM模块, DOM元素中无法直接获取到其中的函数，所以需要再加上一个UMD模块来提供需要的函数。

循环渲染

类似地，Mud.js提供了for语句处理大量重复的结构:

<div id="app">
  <div for="i:arr"> {i} </div>
</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    data: {
      arr: ['Someday', 'I', 'Will', 'Be', 'Like', 'You'],
    }
  });
</script>

不久后的未来还会支持对下标索引的获取！

组件

基本使用

就像是把能复用的代码封装成函数一样——创建多个html文件，然后非常简单地复用并组合它们！

点击下方标签页可以显示不同的HTML文件内容

<div id="app">
  <component></component>
  <component></component>
</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    components: {
      component: 'component.html'
    }
  });
</script>

<div id="app">
  <div>{msg}</div>
  <input type="text" value="{msg}">
</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    data: {
      msg: 'Hello Mud!'
    }
  });
</script>

在components中将另一个挂载了Mud实例的html文件注册为组件，填写组件名及其路径即可进行使用。

该路径甚至可以是一个远程URL！

组件通信

Mud.js支持父子组间直接通信，方式也非常简单——通过props属性向子组件传递参数，子组件的Mud实例的data会接收到这些参数，并且子组件能够直接修改父组件传递的参数:

<div id="app">
  <div>{msg}</div>
  <component props="{msg}"></component>
  <component props="{msg}"></component>
</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    data: { msg: 'hi!' },
    components: {
      component: 'component.html'
    }
  });
</script>

<div id="app">
  <div>{msg}</div>
  <input type="text" value="{msg}">
</div>

<script type="module">
  import Mud from '@trickle/mud.js';
  new Mud({
    el: '#app',
    data: {
      msg: ''
    }
  });
</script>

当然，支持传递多个参数以及重命名字段避免冲突:

<component props="{msg, data:name}"></component>

生命周期

能够在特定的时刻触发指定的函数。

onMount

在组件挂载到DOM节点这一过程完成时触发:

new Mud({
  el: '#app',
  data: {
    msg: 'Hello Mud',
  },
  onMount: () => {
    console.log(mud.data.msg);
  }
});

# 文档

# 概览

# 简介

# 快速开始

# 基础能力

# 核心类

# 插值语法

# 内容插值

# 属性插值

# 渲染控制

# 条件渲染

# 循环渲染

# 组件

# 基本使用

# 组件通信

# 生命周期

# onMount

文档

概览

简介