@xlou/clear v1.3.1
介绍
Clear是一个可以让开发更方便，代码更清晰的前端框架
下载
npm i @xlou/clear
使用
可以使用 script 标签引入
<script src="clear.min.js"></script>如果页面已经引入了其他的js文件，这里建议使用 import 引入
<!-- index.html --> <script type="module" src="./index.js"></script>/* index.js */ import "./clear.min.js"
全局变量提示
以下变量名在设置全局变量时避免使用
C 为获取Clear实例对象的主方法
clearPath 该变量包含了当前页面地址的路径和参数对象
跳转链接时携带参数的参数名避免使用下面的属性名
跳转页面携带传参时，clearparams 为装载params参数的属性
Clear实例对象方法
方法C
C(que,range)
将匹配css选择器的dom转换成Clear实例对象
que 为css选择器，range为查询范围
C("#app",C.one(".mydiv"))返回的Clear对象类似于数组，如要转换为DOM对象根据索引获取即可
C("#app")[0]
获取元素
得到的结果仍是Clear实例对象
以获取父元素为例：
C("#app").parent
parent获取目标的父元素
该属性如果目标Clear对象是多个DOM元素，以第一个元素为准
child
获取目标的全部子元素
该属性如果目标Clear对象是多个DOM元素，以第一个元素为准
next
获取目标的下一个元素
目标Clear对象可以为多个DOM元素
prev
获取上一个元素
目标Clear对象可以为多个DOM元素
first
获取子元素里的第一个元素
目标Clear对象可以为多个DOM元素
last
获取子元素里的最后一个元素
目标Clear对象可以为多个DOM元素
工具
toArray
将Clear对象转换为数组
C("#app").toArray
修改样式和赋值
以修改样式为例：
C("#app").style="display:none;"style
设置元素的样式
参数可以为css字符串，如 "display:none;" 也可以为对象 {display:none,fontSize:"20px"}
value
设置表单元素的值
checked
设置单选框或复选框的选中状态
text
获取和修改元素的innerText
Clear对象的基本方法
nth(index)
根据索引获取对应的Clear对象的元素
返回仍然是Clear对象
C("#app").nth(0)
map(callback)
遍历Clear对象
item为元素，i为键
C("#app").map((item,i)=>{ console.log(item,i) })
push(dom)
向Clear对象中添加DOM元素
C("#app").push(C.one(".myapp"))
concat(clear1,clear2,...)
拼接Clear对象或NodeList对象等
C("#app").concat(C(".mydiv"),C.all(".hello"))
添加和删除DOM
目标支持多个DOM元素的Clear对象
html 为HTML字符串
以render为例
C("#app").render(` <div>hello world</div> `)
render(html)
向容器里渲染HTML
append(html)
向容器的最后面追加HTML
prepend(html)
向容器的最前面添加HTML
before(html)
向元素前面添加HTML
after(html)
向元素后面添加HTML
remove()
移除目标元素
C("#app").remove()
属性和class
除了 getAttr 和 hasClass 目标为单元素以外，其他方法均支持多个元素的Clear对象
show(type)
显示目标元素
type 可选，为display的类型，默认为""
C("#app").show() C("#app").show("block")
hide()
隐藏元素，设置样式 display:none;
getAttr(attr)
该方法如果目标Clear对象是多个DOM元素，以第一个元素为准
获取元素的属性值，attr 为属性名
C("#app").getAttr("id")
setAttr(attr,value)
设置元素的属性值
attr 为属性名, value 为属性值
C("#app").setAttr("data",1)
addClass(name)
给元素添加class
name 为需要添加的class名
removeClass(name)
移除指定的class
hasClass(name)
该方法如果目标Clear对象是多个DOM元素，以第一个元素为准
判断元素是否有指定的class，返回布尔类型
C("#app").hasClass("myhello") // true||false
绑定事件监听
bind(type,callback,option)
type 事件类型
callback 绑定的事件方法
option 可选 绑定事件的参数
C("#app").bind("click",function(){ console.log("click") },false)
unbind(type,callback,option)
type 事件类型
callback 要移除事件方法，必须是一个变量，不能是匿名函数
option 可选 绑定事件的参数
C("#app").unbind("click",sayHello)
C 对象下的工具方法
DOM相关
create(node)
将dom转换为Clear对象
node 可以为单个DOM元素，也可以时NodeList对象或者DOM对象的数组
C.create(C.createDOM(`<div>hello world</div>`))
createDOM(str)
将HTML字符串转换为包含DOM对象的数组
C.createDOM(`<div>hello world</div>`) // 返回数组
htmlCir(obj,callback)
循环数组或对象生成HTML字符串
obj 为要循环的数组或对象，item 为键值，i 为键
var arr=[ {name:"tom",content:"hello"}, {name:"lili",content:"are you ok"} ] C("#app").render(C.htmlCir(arr,(item,i)=>{ return ` <div> <div class="name">${item.name}</div> <div class="content">${item.content}</div> </div> ` })) // 返回html字符串
str(arg)
在模板字符串中绑定属性和传递参数时处理变量
只有参数为对象和字符串时需要使用 str() 处理，其他类型可以直接传递
var arr=[ {name:"tom",age:18}, {name:"lili",age:25} ] C.htmlCir(arr,(item,i)=>{ return ` <div onclick="sayHello(${C.str(item)})"> <div class="name" onclick="sayHello(${C.str(item.name)})">${item.name}</div> <div class="age" onclick="sayHello(${item.age})">${item.age}</div> </div> ` }) // 返回html字符串当参数为对象时，对象中类型为 Function Symbol RegExp 的键值不能传递
此时可以使用键来传参
var arr=[ { name:"tom", say:function(){ console.log("hello") },
[Symbol("hobby")]:"swim"} ] C.htmlCir(arr,(item,i)=>{ return `
<div onclick="sayHello(arr[${C.str(i)}])">${item.name}</div>` })
##### `one(target,range)`
> 按css选择器选取一个dom，返回dom对象
>
> target css选择器，range 查询范围
>
> 同 querySelector()
```javascript
C.one(".mydiv")all(target,range)
按css选择器选取多个dom，返回数组
target css选择器，range 查询范围
和 querySelectorAll() 不同的是，该方法返回的是数组
C.one(".mydiv,.hello")
页面框架
初始化当前页面
page(obj)
C.page({
data:{},
computed:{},
mount(){},
methods:{},
...
})包含的属性
属性里的变量已提升至全局，可直接访问
data
设置全局变量
data:{ name:"tom" }
computed
设置全局计算属性
computed:{ myname(){ return name } }
proxy
代理，监听内部属性值的变化，执行对应的方法
proxy:{ myage:{ value:20, watch(nv,ov){ console.log(nv,ov) }, immediate:true // 可选，该属性为true时，首次创建时就触发 } }
methods
设置全局方法
methods:{ sayHello(){ console.log("hello") } }
生命周期函数
执行顺序由上到下
create()
初始化，页面还没渲染
create(){}
mount()
页面DOM渲染完成，但是一些网络资源，如图片等还没有加载完成
mount(){ console.log(C(".mydiv")) }
load()
页面资源都已加载完成
load(){}
show()
页面回显，首次加载不会触发
beforeunload()
页面销毁前
hide()
页面隐藏
unload()
页面销毁
创建模块
component(obj)
C.component({
name:"left",
data:{
name:"tom"
},
computed:{},
proxy:{},
methods:{}
})创建模块的方法，name 必选，为模块的名称
属性同page()，没有钩子函数
外部访问变量时要指定模块的名字，如 left.name
内部可以使用 this.name 访问变量
setData(obj,str)
添加全局变量
obj 包含需要被添加的变量的对象
str 可选，指定obj需要被添加的属性，以逗号分开的字符串。
var info={id:1,name:"tom",age:18,hobby:"swim"} C.setData(info) // 全部属性都会变为全局变量 C.setData(info,"name,age") // 只有name和age属性被提升至全局
setProxy(obj,target)
添加全局或模块的proxy
obj 包含需要被监听的变量的对象
target 可选，需要被添加的模块名，默认为全局。
C.setProxy({ price:{ value:100, watch(nv,ov){ C(".price").value=nv }, immediate:true } })
独立钩子函数
作用同page()的钩子函数
mount(callback)
页面DOM加载完成
C.mount(function(){})
pageshow(callback)
页面回显，首次加载不触发
pagehide(callback)
页面隐藏
绑定事件扩展
以 self 为例：
<div class="hello" onclick="C.self(sayHello,'123',this)">prevent(callback,...arg)
阻止默认事件
callback 为需要绑定的方法
arg 为需要向callback传的参数
stop(callback,...arg)
阻止事件冒泡
self(callback,...arg)
只有目标是自身才触发
缓存
getStore(key)
读取缓存，key 为要获取的键
C.getStore("token")
setStore(key,data)
存入缓存或修改缓存
key 为要存入的键，data 为要存入内容
不能存入 Function Symbol RegExp 类型的键值
C.setStore("user",{name:"tom",age:18})
delStore(key)
删除指定的缓存
clearStore()
清空所用缓存
路由
clearPath
全局变量，包含当前路由的信息
path 当前路径
query 参数
params 参数，内部值可以是对象或数组
console.log(clearPath) { path:"home", query:{id:1}, params:{ name:"tom", age:18 } }
push(arg)
保留历史记录并跳转页面
参数可以为对象或 url 字符串
如果传递的参数里含有对象或数组，可以使用 params 来传参
传递的参数的大小不能超过 get 传参的最大限制
C.push("./page/home.html?id=1") C.push({ url:"./page/home.html", query:{ id:1 }, params:{ name:"tom", age:18 } })
replace(arg)
替换当前页面，不保留之前的历史记录
参数同 push 的参数
reload()
重新加载当前页面
back()
返回上一个历史页面
forward()
前进到下一个历史页面
go(index)
跳转历史记录页面
index 表示跳转的页面数，负数表示之前的页面，正数表示之后的页面
C.go(-1) //向前跳一个页面，即返回上个页面 C.go(2) //向后跳2个页面
通信
ajax(arg)
发送ajax请求
返回数据的类型为json
C.ajax({ method:"post", // 可选，默认GET，不分大小写 headers:{}, // 可选，'Content-Type'默认为'application/x-www-form-urlencoded;charset=UTF-8' url:"", // 请求地址 data:{}, // 可选，参数 uploadProgress:function(e){ // 可选，监听上传文件的进度 console.log(e.loaded/e.total*100) }, downloadProgress:function(e){ // 可选，监听下载文件的进度 console.log(e.loaded) }, responseType:"", // 可选，指定返回数据的类型，默认为json timeout:"" // 可选，默认60s }) .then(res=>{}) // 成功 .catch(e=>{}) // 发生错误
getDOC(url,callback)
读取文件，返回字符串
url为文件地址，callback是成功的回调
C.getDOC("./hello.txt",res=>{ console.log(res) })
getJSON(url,callback)
读取json文件，返回对象
C.getJSON("./hello.json",res=>{ console.log(res) })
formSubmit(obj)
模拟form表单提交
除了 data 表示请求参数，其他属性同form表单属性
C.formSubmit({ method:"post", // 请求类型 action:"./hello", // 请求地址 ... data:{name:"tom"} // 请求参数 })
工具
deepCopy(obj)
对象和数组的深拷贝
var objA=C.deepCopy(objB) // objB为需要拷贝的对象，objA为拷贝后的新对象
toFixed(num,s)
保留几位小数，返回字符串类型的数字
解决原生 toFixed() 函数结果可能与实际不符的情况，如 1.335.toFixed(2) 输出0.33
num 为要转换的数字，s 为要保留的小数位数
C.toFixed(0.123,2) // "0.12"
limitInput(msg)
正则限制input输入
支持对多个dom元素的限制
C.limitInput({ el:"", //css选择器 reg:"", //需要满足的正则 nopass:e=>{}, //不通过的回调 pass:(nv,ov)=>{} //满足正则的回调，nv 为新值，ov为旧值 }) //如果需要验证的不只一个正则： C.limitInput({ el:"", rule:[{ reg:"", nopass:e=>{} }], pass:(nv,ov)=>{} })
getQueryString(data)
将参数对象转换为参数字符串
var url=C.getQueryString({id:1,name:"tom"}) // url "id=1&name=tom"