# lotus

**Repository Path**: zhang_xiangm/lotus

## Basic Information

- **Project Name**: lotus
- **Description**: lotus是一个承前启后的javascript框架，对HTMLElement、HTMLCollection、NodeList、Array四个核心接口进行了方法扩展，使其具备类似于jquery的操作体念。提供了一个超轻量级的MVVM引擎，符合新一代前端工程师的编码习惯。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-11-04
- **Last Updated**: 2022-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# lotus

### lotus介绍
lotus是一个承前启后的javascript框架，对HTMLElement、HTMLCollection、NodeList、Array四个核心接口进行了方法扩展，使其具备类似于jquery的操作体念。提供了一个超轻量级的MVVM引擎，符合新一代前端工程师的编码习惯。

### lotus的理念
在当前前端技术混乱不堪的背景下，lotus的初衷是出淤泥而不染。lotus拒绝webpack，拒绝对html的破坏，拒绝自定义标签，拒绝莫名其妙的指令属性，lotus提供的模板引擎完完全全符合html的规范。lotus的理念是还HTML一个干干净净的面貌。

### API文档

1. #### 设置class
```
document.querySelector("#id")
    ._addClass("newClass")                   //为当前dom元素添加一个类
    ._removeClass("oldClass")                //为当前dom元素移除一个类
    ._replaceClass("oldClass","newClass")    //在当前dom元素上，用newClass替换oldClass，如果oldClass不存在则添加newClass
    ._toggleClass("className")               //如果当前dom元素上存在className则将className移除，否则添加className
    ._aloneClass("className");               //为单击dom元素添加一个类，并且使其兄弟节点丧失该类
let hasClass = document.querySelector("#id")._hasClass("className");    //判断当前dom元素是否有className类
```

2. #### 设置css
```
//术语“设置或获取”表示该方法的参数可有可无。当有参数时，方法的功能为设置样式；当无参数时，方法的功能为获取样式。
document.querySelector("#id")
    ._css("border","1px solid blue")  //万能设置
    ._numbercss("width",500)          //数值类型的样式，如果实参类型为number，则默认单位为px
    ._hide()                          //显示
    ._show()                          //隐藏
    ._width(500)                      //设置或获取宽度
    ._height(100)                     //设置或获取高度
    ._boxsizing("border-box")         //设置或获取盒子类型
    ._margin(5)                       //设置或获取外边距
    ._padding(6)                      //设置或获取内边距
    ._border("1px solid #000")        //设置或获取边框的样式
    ._radius(3)                       //设置或获取边框的圆角值
    ._color("red")                    //设置或获取文字颜色
    ._bgcolor("green")                //设置或获取背景颜色
    ._size(14)                        //设置或获取文字大小
    ._weight("bold")                  //设置或获取文字的weight
    ._position("absolute")            //设置或获取在文档流中的定位方式
    ._display("block")                //设置或获取显示方式                      
    ._borderbox()                     //将盒子模型设置为border-box
    ._contentbox()                    //将盒子模型设置为content-box
    ._absolute()                      //将定位方式设置为绝对定位
    ._relative()                      //将定位方式设置为相对定位
    ._block()                         //将显示方式设置为块状
    ._inline()                        //将显示方式设置为行内
    ._inlineblock()                   //将显示方式设置为行内，但可以对其设置高度和宽度
    ._shadown("10px 10px gray")       //设置边框阴影
    ._linear("to right","red","green","yellow")    //从左到右线性渐变
    ._radial("red","green","yellow");              //经向渐变
                                            
```
3. #### 设置动画

```
document.querySelector("#id")
    ._animation( 
        10,                                //动画完成时间
        "background-color:red;",           //第一帧         
        "background-color:green;",
        "background-color:yellow;",
        "background-color:#fff;"           //第n帧
     );
```

4. #### 设置属性
```
document.querySelector("#id")
    ._attr("key","value")             //获取或设置属性
    ._removeAttr("key")               //移除属性
    ._aloneAttr("key")                //在其兄弟节点中独占属性
    ._title("title")                  //设置title属性
    ._src("src")                      //设置src属性
    ._href("href")                    //设置href属性
    ._value("value1")                 //获取或设置input,textarea元素的value
    ._checked(true)                   //使checkbox选中
    ._html("html")                    //获取或设置innerHTML
    ._text("text");                   //获取或设置innerText

//使一个容器下的checkbox选中
document.querySelector("#container")._checked(["1","2","3"]);
```

5. #### 事件监听
```
//以下方法的回调函数有三个参数，sender表示捕获事件的节点，event为window.event对象，target为事件冒泡机制中最初引发事件的节点
document.querySelector("#id")
    ._on("click",function(sender,event,target){})                //万能监听
    ._click(function(sender,event,target){})                     //监听鼠标单击事件
    ._dblclick(function(sender,event,target){})                  //监听鼠标双击事件
    ._mousedown(function(sender,event,target){})                 //监听鼠标按下事件
    ._mouseup(function(sender,event,target){})                   //监听鼠标松开事件
    ._mousemove(function(sender,event,target){})                 //监听鼠标移动事件
    ._mouseover(function(sender,event,target){})                 //监听鼠标移过事件
    ._keydown(function(sender,event,target){})                   //监听键盘按下事件
    ._keyup(function(sender,event,target){})                     //监听键盘松开事件
    ._keypress(function(sender,event,target){})                  //监听键盘按下并松开事件
    ._focus(function(sender,event,target){})                     //监听聚焦事件
    ._blur(function(sender,event,target){})                      //监听失焦事件
    ._input(function(sender,event,target){})                     //监听输入事件
    ._change(function(sender,event,target){})                    //监听value改变事件
    ._listen("keydown","input",function(sender,event,target){}); //监听子节点的冒泡事件
```

6. #### 上下文处理
```
let ele = document.querySelector("id");    //获取dom元素
let index = ele._index();                  //获取当前dom元素在其父节点中的下标
ele._appendTo("#target");                  //将当前dom元素移动到id为target的容器内部的底部
ele._prependTo("#target");                 //将当前dom元素移动到id为target的容器内部的顶部
ele._beforeBegin("<div>内容</div>");       //在当前dom元素的开始标签之前插入一段html
ele._afterBegin("<div>内容</div>");        //在当前dom元素的开始标签之后插入一段html
ele._beforeEnd("<div>内容</div>");         //在当前dom元素的结束标签之前插入一段html
ele._afterEnd("<div>内容</div>");          //在当前dom元素的结束标签之后插入一段html
ele._remove();                             //移除当前dom元素
ele._wrap("<div></div>");                  //在当前dom元素的外部包裹html
ele._unwrap();                             //移除当前dom元素的父节点
```

7. #### 表单四则运算
```
<input type="text" id="number1" value="6" />            
<input type="text" id="number2" value="8" />
<input type="text" id="result" />
<script>
    let number1 = document.querySelector("#number1");
    let number2 = document.querySelector("#number2");
    let result = document.querySelector("#result");
    result._value(number1+number2); //注意number1和number2都是dom元素,可以直接进行运算            
</script>
```

8. #### 表单聚合
```
数1：   <input type="text" id="number1" />
数2：   <input type="text" id="number2" />
数3：   <input type="text" id="number3" />
数4：   <input type="text" id="number4" />
最大值：<input type="text" id="max" />
最小值：<input type="text" id="min" />
求和：  <input type="text" id="sum" />
串接：  <input type="text" id="join" />
<script>
    document.querySelector("#max")._maxof("#number1,#number2,#number3,#number4","change");
    document.querySelector("#min")._minof("#number1,#number2,#number3,#number4","change");
    document.querySelector("#sum")._sumof("#number1,#number2,#number3,#number4","change");
    document.querySelector("#join")._joinof("#number1,#number2,#number3,#number4","change");
</script>
```

9. #### 集合扩展
<div>
lotus对HTMLElement扩展的方法绝大部分可以应用于Array、HTMLCollection、NodeList，当这些扩展方法作用于集合时，会对集合中每一个元素设置样式或属性或监听事件。示例如下：

```
document.querySelector("#id").children        //注意children是一个HTMLCollection
    ._addClass("className")
    ._click(function(sender,event,target){
        console.log(sender);
        console.log(event);
        console.log(target);
    });

document.querySelectorAll(".class")           //注意querySelectorAll返回的是一个NodeList
    ._addClass("className")
    ._click(function(sender,event,target){
        console.log(sender);
        console.log(event);
        console.log(target);
    });

[document.querySelector("#id1"),document.querySelector("#id2")]    //数组
    ._addClass("className")
    ._click(function(sender,event,target){
        console.log(sender);
        console.log(event);
        console.log(target);
    });
```
</div>

10. #### MVVM
lotus提供一个超轻量级的MVVM功能，只需在表单元素上增加一个_bind属性指向数据对象的属性名称，并可实现表单元素与与数据的双向绑定。
```
<div id="form1">
    <div>编号：<label>{{id}}</label></div>
    <div>编号：<input _bind="value:id" /></div>
    <div>姓名：<input _bind="value:name" /></div>
    <div>会员：<input _bind="checked:member" type="checkbox"></div>
    <div>性别：
        <select _bind="value:sex">
            <option value="0">女</option>
            <option value="1">男</option>
        </select>
    </div>
    <div _bind="radio:yuangong">员工：
        <label><input type="radio" value="true" name="yuangong" />是</label>
        <label><input type="radio" value="false" name="yuangong" />否</label>
    </div>
    <div _bind="checkbox:hobby">
        爱好：
        <label><input type="checkbox" value="乒乓球" />乒乓球</label>
        <label><input type="checkbox" value="羽毛球" />羽毛球</label>
        <label><input type="checkbox" value="台球" />台球</label>
    </div>
    <div>
        <input type="button" value="重置" _on="click:reset" />
        <input type="button" value="提交" _on="click:submit"  />
    </div>
</div>

<div>
    <button id="outview">在view外面实现id+1</button>
</div>
<script>
    let app = document.querySelector("#form1")._mvvm({
        model:{
            id:1,
            name:"zxm",
            member:true,
            sex:1,
            yuangong:true,
            hobby:["乒乓球"]
        },
        controller:{
            reset:function(){
                this.id=1;
                this.name="zxm";
                this.sex=1;
                this.hobby=["乒乓球"];
            },
            submit:function(ele,event,target){
                console.log(JSON.stringify(this));
            }
        }
    });
    document.querySelector("#outview")._click(function(){
        app.id++;   //注意不推荐直接操作dom节点，而是通过修改数据来达到目的
    });
</script>
```