Package Exports
- vir.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vir.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
此处为vir.js的新版本(1.0.*)
这次我将将核心的功能抽离出来了, 核心的内容还比旧版的少了许多, 也更灵活了.
旧版的可以看看这里: https://github.com/Eoyo/express/tree/master/public/Vir
vir.js 的核心: js Dom 树的解析
一. 用法
1. 安装:
npm install vir.js
使用typescript编写的, 自带类型声明的
2. 导入 (typescript/ ES6)
import { Vir } from 'vir.js'
注意啦: 要使用{} , 我是export { Vir } 导出的
3. 其他使用: 例如
- 浏览器导入(不推荐的了, 未来的目标要在node.js上跑的...),
- node.js 的 require, 也可以(可我还是喜欢ES6的模块语法)
const Vir = require('vir.js').Vir
二. 简单的使用例子:
1. 显示四个盒子(className = "box"), 每个盒子一个big apple:
写法1:
Vir({
'4* .box': {
'.apple': 'Big Apple'
}
})写法2: 使用vir.js'原生的'数组自适应, 让你可以控制单个的内容
Vir({
'.box' : [
{ '.apple': 'Big Apple' },
{ '.apple': 'Big Apple' },
{ '.apple': 'Big Apple' },
{ '.apple': 'Big Apple' }
]
})写法3: 搭配ramda 等类似的库, 让你有望使用函数式开发.
import R = require('ramda')
Vir({
'.box' : R.map(
(e)=>({ '.apple': e }),
R.repeat(4, 'Big Apple')
)
})2. 模块开发, 一个模块说我是'model one', 另一个说我是: 'model two'
核心是利用 函数节点
// use typescript
// modelOne
import { Vir } from 'vir.js';
import * as $ from 'jquery';
function One (ele : HTMLElement) {
const sayWords = 'I\'am model one'
Vir(ele, {
'.say': sayWords
, on: { // 绑定个事件也可以
click() {
alert(sayWords)
}
}
})
}
//model two
function Two (ele : HTMLElement) {
const sayWords = 'I\'am model two'
Vir(ele, {
'.say': sayWords
})
// 想用jquery就用, 自由如此
$(ele).on('click',()=> {
alert(sayWords)
})
}
// usage 1:
Vir({
'.model': One
, '2; .model': Two
})
// usage 1 等价于如下: usage 2
Vir({
'.model': [
One, Two
]
})
// 说白了就是有个函数节点, 看看如下, 详细见语法篇
Vir({
'.model'(ele) {
ele.innerHTML = 'abc'
}
})三. vir.js 的优势
- 定位清晰: 就是用js创建dom的.
- 无其他依赖: 目前发布的vir.js 才800来行, 源码都可以一口气看完..
- 有潜力: 这是一个极简先驱版本, 我还开发了许多vir.js的工具, vir.js不久将会上升到framework的高度
- 完全用js 开发的: 实现在前后端同时跑也是可以的;
四. 属性名解析语法
1.基本的 id 与class 解析 : "#id .class .classtwo"
#后紧跟id名, .后跟class名,class是按顺序的,可以多个;id 与和class 不分顺序,class之间有顺序的;
标签名默认为div;
2.属性解析:[key = 'value']
和html 中写属性值一样;
3.子元素解析:".parent > .son"
创建的是:
<div class = "parent">
<div class = "son"></div>
</div>在js中:
".parent > .son":{
$:"son"
///绑定在最后生成的元素上;即为.son上;
}4.多个元素 : "3* div"
数字和*黏在一起;不可以!!!!:"3 *div"。
但是可以:"3*div"。最好是放在开头，其他地方也可以，但容易出错；
5.定义变量 : "div ::oneDiv"
创建的div存在oneDiv里。可以多次出现::oneDiv在不同的标签属性里，结果是oneDiv变成了数组，按创建次序记录各个element；还可以与point 4中的乘法搭用，生成数组（不是“反常坑”的HTMLcollection）。
6.混搭 :"div ::parentDiv > 3*div ::threeChild"
js代码:
var test = Vir({
"div ::parentDiv > 3*div ::threeChild":{
$:"son"
///绑定在最后生成的元素上;即为.son上;
}
})生成如下:
<div>
<div>son</div>
<div>son</div>
<div>son</div>
</div>使用变量threeChild;
test.threeChild.forEach((v)=>{
v.innerHTML = "use";
})改动效果如下html:
<div>
<div>use</div>
<div>use</div>
<div>use</div>
</div>6.1 分述,(解构数组)
如果js代码为:
".parent > 3* .son":{
$:["son1","son2","son3"]
args:{
title:"son"
}
///绑定在最后生成的元素上;即为.son上;
}分述在节点值为数组时触发;否则为复述
生成html为:
<div>
<div title = "son">son1</div>
<div title = "son">son2</div>
<div title = "son">son3</div>
</div>6.2 以数组为节点的 分述,(数组内值的大类型得一致)
1. 为值类型
".parent >.son":[
"son1","son2","son3"
]
//绑定在最后生成的元素上;即为.son上;
//等价于 如下:
".parent > 3* .son":{
$:["son1","son2","son3"]
///绑定在最后生成的元素上;即为.son上;
}
//前者相当于是一种特殊情况的简写