# JWML

**Repository Path**: imcici/JWML

## Basic Information

- **Project Name**: JWML
- **Description**: Javascript Wedget Markup Language，js部件化语言，简称JWML，采用js原生态语法，可嵌入js的标记语言，不需依赖第三方库或工具，具有轻量级、按需加载、前端控件、前端动态模板、前端绑定特性。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2018-03-29
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JWML
Javascript Wedget Markup Language，js部件化语言，简称JWML，采用js原生态语法，可嵌入js的标记语言，不需依赖第三方库或工具，具有轻量级、按需加载、前端控件、前端动态模板、前端绑定特性。

# Demo说明
### 显示hello world

HTML代码：
```
hello world
```

JWML代码：
```
JWML`hello world`.render();
```
demo源文件：/demo/Hello.html

### 点击按钮打印"Is me"
HTML代码：
```
<input type="button" id="btnHtml" value="点击我" />
<script>
	var btnHtml = document.getElementById("btnHtml");
	btnHtml.addEventListener("click", function(){
		alert("Is me!")
	});
</script>
```
JWML代码：
```
JWML
	.input({type:"button",id:"btnJWML",value:"点击我"})()
	(function(){
		var btnJwml = document.getElementById("btnJWML");
		btnJwml.addEventListener("click", function(){
			alert("Is me!");
		})
	})
.render();
```

不需要ID获取input:
```
JWML
	.input({type:"button",value:"点击我"})()
	(function(btnJwml){
                //这里会计算参数数量，自动填入生成的element
		btnJwml.addEventListener("click", function(){
			alert("Is me!");
		})
	})
.render();
```

demo源文件：/demo/Script.html

### 动态模板
```
var output = JWML.div`动态模板：`();

for(var i = 0; i < 10; i++){
	if(i % 2 == 0){
		output.div({style:"background:yellow"})`第${i+1}行`()
	} else {
		output.div({})`第${i+1}行`()
	}
}

output.render();
```

demo源文件：/demo/Dynamic.html

### 绑定

```
_.Value = "这是初始值";
//也可是这样设置初始值：_({ Value:"这是初始值" })

//定义计数器
var count = 0;

JWML
	.input({type:"text",value:_`Value`})()
	.div`hello ${_`Value`} world`()
	.div({style:"background:yellow"})(_`Value`)()
	.input({type:"button",onclick:"_.Value = '计数器：' + (count++)",value:"增加计数器"})()
.render();
```

demo源文件：/demo/Binding.html  

### 部件

```
//定义一个YellowPanel部件
JWMLWidget.YellowPanel = function(input, output){
	output
		.div({ style:"text-align:center; background:yellow;" })
			(input.children)
		();
};

JWML
        //使用YellowPanel部件
	.YellowPanel`hello world`()
.render();
```

demo源文件：/demo/Widget.html

### 加载外部部件

```
// in /lib/JWML/Widget/YellowPanel.js
JWMLWidget.YellowPanel = function(input, output){
	output
		.div({ style:"text-align:center; background:yellow;" })
			(input.children)
		();
};


// in /lib/demo/Widget-LoadFile.html
//Needing to run in web server
//Auto load javascript file "../lib/JWML/Widget/YellowPanel.js"
JWML
	.YellowPanel`hello world`()
.render();
```

demo源文件：/demo/Widget-LoadFile.html

### 部件继承扩展
未实现demo，有需要demo可评论处留言

# lib文件说明
- /lib/JWML.js  无协程源码文件
- /lib/JWML.min.js  无协程打包文件
- /lib/JWML.coro.js  协程源码文件
- /lib/JWML.coro.min.js  协程打包文件


# 作者心声

- JWML项目在作者开源初衷：
- - 希望更多有志向、有社会责任感、有情商的勇者，共同参与让JWML形成发光发亮的技术生态圈，大到让外国人也欣赏中国开源的力量。
- - 作者不在乎技术专利与获益问题，坚守把该项目未来所有价值成果，尽可能公平公正的分给那些为JWML努力付出的勇者。
- - 作者想尝试下开源的力量，能否为作者获得更多的焦点，能否认识更多的有志向、有社会责任感、有情商的朋友，能否用群众的力量做点事情呢？
- 融资与心血是矛盾关系，只要消除这个矛盾，融资会是一把利器。
- 经济已经繁荣的时代，大部分人处在焦虑与痛苦中，如何让人们过上美好生活是我们这一代人的使命与责任。
- 业务模式创新、人工智能、第四代住房，会是实现“美好”的几个重要组成部分。
- 在实现生活美好的进程中，思想美好才是真正的美好，也需要同时关注与建设。舆论自由不一定好，任何人都可以随便造谣，而造谣的东西特别容易让人信，而这些东西都直接的影响到人的心态。
- JWML需要得到更多人士关注与认可，需要进入码云GVP，把这些理念传达给更多人。



# 计划
1. 为JWML设计一个官方网站，做更详细的说明文档与demo，把HTML转JWML的转换器放到官网上。
2. 成立开源小组，设立初步的贡献度评估面板，要公平公正。
3. 基于JWML设计一些标准部件，包括表格、树、报表设计器、工作流设计器。。

 
 **有疑问可在评论处提问**