# layui_binder

**Repository Path**: lxwzsh123/layui_binder

## Basic Information

- **Project Name**: layui_binder
- **Description**: 不影响layui使用的前提下，使用响应式数据和模板解析。
1.以layui组件的方式引入
2.声明式渲染
3.条件渲染和循环渲染
4.事件绑定与双向绑定
5.组件化应用构建
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2024-08-13
- **Last Updated**: 2024-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# Layui-binder： 一个layui框架的视图管理模块

## 警告： 仅供测试与交流, 请勿在项目正式环境中使用

## 特征

#### 1、很轻量
> Layui-binder 整个框架只依赖 layui，再无其他任何第三方依赖。

#### 2、只增强
> Layui-binder 支持模版语法、数据绑定，但不丢失 layui 原有的任何功能。

#### 3、高复用
> Layui-binder 支持组件,可以将常用的部分(html,js)封装成组件,多个地方调用。

#### 4、更灵动
> Layui-binder 支持自定义指令语法,可以根据需要编写不同需求。

#### 5、不完善
> Layui-binder 没有过多的完善,在实际使用中会有这样或那样的问题(资源释放和事件管理是两大难题),希望能得到完善。


## 开始

- 示例 1：[layuiGenerator（根据数据库构建项目）](https://gitee.com/giteetcj/layuiGenerator.git)
- 示例 2：[智能bi项目](https://gitee.com/giteetcj/yupi_search.git)

## hello world（原生）

**第 1 步：编写 html 模版**

```html

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

```


**第 2 步：创建视图对象**

示例1:使用new关键字创建

```javascript

    var view = new layui.binder({
        el: "#app",
        data: {
            msg: "hello world",
        }
    });

```

示例2:无new关键字创建

```javascript

    var view = layui.binder({
        el: "#app",
        data: {
            msg: "hello world",
        }
    });

```

> 以上两种方式等效,效果都是div里面的文字被替换成 “hello world”

示例3:修改数据

```javascript

    view.$data.msg = 'hello layui';

```

> 在上面的基础上修改view对象里面数据的值,对应页面上面的值也会被修改。



## Layui-binder 属性

### el -> 渲染的目的地 (除了声明组件,都应该是必填项)

```html

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

```

> el 代表这个视图对象需要渲染在那个dom上面,一般传入string类型的选择器或者是一个dom对象


### template -> 渲染的模板字符串(组件必填,其它的选填)

```javascript

    var view = layui.binder({
        el: "#app",
        template: `
        <ul>
            <li>{{msg}}</li>
            <li>{{msg}}</li>
            <li>{{msg}}</li>
        </ul>
        `,
        data: {
            msg: "hello world",
        }
    });

```
> template 代表这个视图对象需要以此作为渲染的模板,需要注意的是最外层只能有一个标签

### data -> 视图数据(建议每个都必填)

```javascript

    var view = layui.binder({
        el: "#app",
        data: {
            msg: "hello world",
            tags: ['layui', 'component','javascript'],
            num: 19,
            detail: {
                name: "Layui-binder",
                version: "4.x",
            }
        }
    });

```

> data 是整个视图的重点,建议都加上这一项配置,空对象也行;另外也可以声明成返回一个对象的函数

### computeds -> 计算属性

```javascript

    var view = layui.binder({
        el: "#app",
        data: {
            a: 10,
            b: 15
        },
        computeds: {
            res(){
                return this.a + this.b;
            }
        }
    });

```

> computeds 计算属性会在初始化和计算信息发生改变时进行计算,视图取值是直接取到的结果;可以合理使用计算属性避免不必要的多次计算

### methods -> 内置私有方法

```javascript

    var view = layui.binder({
        el: "#app",
        data: {},
        methods: {
            speak(){
                return 'hello layui';
            }
        }
    });

```
> methods 创建方法之后可以在视图对象找到它,直接以this.XXX()调用;需要注意的是,方法同名可能被覆盖

- 内置公共方法

```javascript

    layui.binder.Method("speak", function(){
        return 'hello layui';
    });

```

> 使用Method可以创建公共方法,一次创建后面的所有视图对象都可以使用这个方法了;需要注意的是,私有方法优先于公共方法,可以声明私有方法来重写同名的公共方法

### diretives -> 自定义指令(略)
### watchs -> 监视属性

```javascript

    var view = layui.binder({
        el: "#app",
        data: {
            msg: "hello layui"
        },
        watchs: {
            msg(value){
                console.log(value);
            }
        }
    });

```

> watchs 监视属性 用于监视某个视图数据的变化,在变化时会将变化的值传入这个回调当中

- 非属性创建

```javascript

    view.$watch("msg", function(value){
        console.log(value);
    });

```

> 使用$watch方法可以去掉必须在属性中声明的限制,可以使用这个方式在任意地方添加监视属性

- 完整参数

```javascript

    view.$watch("msg", {
        immediate: false,
        deep: false,
        handler(value) {
          console.log(value);
        },
    });

```

> 这种方式才是完整版的
- immediate -> 是否创建时立即执行回调,默认false
- deep -> 是否深监听,默认false
- handler -> 定义回调函数

> 需要注意的是,对于同一属性,监听事件可以是多次绑定的


### components -> 定义声明组件

示例1：创建并使用组件

```html

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

```

```javascript

    var view = layui.binder({
        el: "#app",
        components:{
            mylayui: {
                name: 'mylayui',
                data: function(){  
                    return {};
                },
                template: `
                    <span>这是一个自定义组件模板</span>
                `
            }
        }
    });

```

> 这样上面的特殊标签<mylayui></mylayui>就会被替换成组件模板里面的内容了

示例2：定义并使用全局组件

```javascript

    layui.binder.extend({
        name: 'mylayui',
        data: function(){  
            return {};
        },
        template: `
            <span>这是一个自定义组件模板</span>
        `
    });

    var view = layui.binder({
        el: "#app",
        components:{
            mylayui: 'mylayui'
        }
    });

```

> 可以使用extend方法将组件声明成全局组件,这样各处调用时只需要用name名称替代,比较方便 

示例3：父子对象传值

```javascript

    layui.binder.extend({
        name: 'mylayui',
        data: function(dataSource){  
            return {
                msg: dataSource.msg
            };
        },
        template: `
            <span>这是一个自定义组件模板: {{msg}}</span>
        `
    });

    var view = layui.binder({
        el: "#app",
        components:{
            mylayui: ['mylayui',{dataSource: {msg: "hello layui"}}]
        }
    });

```

> 在组件使用的时候可以传递数组,第二个参数可以自定义组件的属性,达到父对子传值的效果

示例4：父子对象调用

```javascript

    layui.binder.extend({
        name: 'mylayui',
        data: function(dataSource){  
            return {
                msg: dataSource.msg
            };
        },
        methods: {
            invokeSuper(){
                return this.spuer.speak();
            }
        }
        template: `
            <span>这是一个自定义组件模板: {{msg}}</span>
        `
    });

    var view = layui.binder({
        el: "#app",
        methods: {
            speak(){
                return this.mylayui.$data.msg;
            }
        }
        components:{
            mylayui: ['mylayui',{dataSource: {msg: "hello layui"}}]
        }
    });

```

- 在父对象中,可以使用 .$children[index] 或者直接 .组件名称 来指向组件对象
- 在组件对象中,可以使用this.super来指向父对象

> 最后注意,为了保持组件之间的数据隔离,data声明必须使用函数式声明

## Layui-binder 生命周期

### beforeCreate 数据初始化创建之前的回调函数

```javascript

    var baseData = {
        '张三': '85',
        '李四': '96',
    }

    var view = layui.binder({
        el: "#app",
        data: baseData,
        beforeCreate(){
            let arr = [];
            for(key in baseData){
                arr.push(baseData[key])
            }
            baseData = arr;
        },
    });

```

> beforeCreate 在数据被初始化之前被调用


### created 数据初始化创建之后的回调函数(略)
### beforeDestroy 视图对象“销毁”之前的回调函数,一般用来释放一些资源
### destroyed 视图对象“销毁”之后的回调函数(略)
### beforeMount 视图对象渲染之前的回调函数,此时模板还未被词法解析(略)
### mounted 视图对象渲染之后的回调函数,此时视图对象已就绪

```javascript

    var view = layui.binder({
        el: "#app",
        data: {},
        mounted(){
            console.log('layui ready');
        },
    });

```
> 一般在mounted回调函数中执行接下来的业务

## Layui-binder 语法

> laytpl中大多数场合是以d来作为数据源的别称,在这里以变量b来作为视图对象的别称,在部分场合可能会用到


## Layui-binder 文本语法

> 这种一般出现在标签文本居多

### 1.以双花括号包围起来的赋值语法

> 双花括号包围起来的内容视为:在视图对象中取出同名的数据或计算属性,将它们的值赋值在那个地方。一般用在dom的文本里面居多

- 文本赋值

```html

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

```

> 上面代表会从视图对象中查找msg这个名字的变量,将它的值赋值给这个div的文本中

- 带拼接的赋值

```html

   <div id = "app">消息:{{msg}}</div>

```

> 视图对象仅改变赋值语法的部分,其它部分还是原样,不会被修改


## Layui-binder 属性语法

> 这种都是将标签属性进行加工得到的

### 1.以:打头的属性会被解释成动态属性

- 动态属性

```html

   <div id = "app" :lay-filter = "msg" ></div>

```

> 上面的:lay-filter最后会成为 lay-filter属性,其属性值是视图对象的msg这个变量的值

- 动态拼接属性
> 上面的写法是 :lay-filter = "{{msg}}"的简写,这个也是一个赋值语法,所以它也是可以拼接的

```html

   <div id = "app" :lay-filter = "layui-{{msg}}" ></div>

```

- 特殊属性的合并
> 上面的属性,加了:的属性和原属性会冲突,但是style和class这两个属性是可以合并成多个的

```html

   <div id = "app" class = "layui-form" :class = "layui-{{msg}}" ></div>

```
> 上面的第一个class值layui-form会被保留下来

- 复杂写法
```html

   <div id = "app" class = "layui-form" :class = "msg=='layui'?'layui-form-pane':''" ></div>

```
> 在属性上面也可以写一个三目表达式

### 2.以@打头的属性会被解释成需要绑定某个事件

```html

   <div id = "app" @click = "speak" ></div>

```
> 这里代表给这个div绑定一个click点击事件,在点击时调用视图对象里面的speak方法

### 3.以v-打头的属性会被解释成调用某个指令

#### v-if 条件渲染(实际使用不佳)

```html

   <div id = "app" >
        <div v-if="index == 2" >{{index}}</div>
        <button class="layui-btn" type="button" @click = "index++" >点击</button>
   </div>

```

> 当点击试index值增加时,index = 2时这个div才被展示出来

#### v-model 表单元素双向绑定(实际使用不佳)

> 后面扩展出vform,在这里面对这个方面进行继续扩展

#### v-each 循环渲染(实际使用不佳)


```html

   <div id = "app" v-if = "list" mark = "entry" >
        <li>{{entry}}<li>
   </div>

```

> 指定遍历一个数组,mark属性是遍历的信息在子元素里面别称。需要注意的是子元素最外层只能有一个标签

### 4.以*打头的属性会被解释成创建or更新一个数据

```html

   <div id = "app" *index = "1" >
        <div v-if="index == 2" >{{index}}</div>
        <button class="layui-btn" type="button" @click = "index++" >点击</button>
   </div>

```

> 代表程序执行到这里,需要在视图对象上面添加一个名字叫index值为1的变量