# ViewxJS **Repository Path**: yanfant/ViewxJS ## Basic Information - **Project Name**: ViewxJS - **Description**: ViewxJS，一个简单的前端mvc框架 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-03-25 - **Last Updated**: 2021-03-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ViewxJS #### 介绍 ViewxJS，一个简单的前端mvc框架 #### 文件大小 |文件名|文件大小|文件说明| |--|--|--| |viewx.min.js.zip|2.5k|js代码压缩 + zip压缩，用于网络要求更高的生产运营环境| |viewx.min.js|5.8k|js代码压缩，用于生产运营时使用| |viewx.js|14.5k|js源代码，用于开发测试时使用| |jsc.min.js|2.8k|用于兼容低版本浏览器，如：IE5.5-IE8.0| #### 兼容版本 | 电脑端 | 浏览器 | 最小版本 | |-|-|-| | ![Internet Explorer](https://developer.mozilla.org/static/media/internet-explorer.cf17782c.svg "Internet Explorer")| Internet Explorer | 5.5 | | ![Chrome](https://developer.mozilla.org/static/media/chrome.4c570865.svg "Chrome")| Chrome | 1 | | ![Edge](https://developer.mozilla.org/static/media/edge.40018f6a.svg "Edge") | Edge | 12 | | ![Firefox](https://developer.mozilla.org/static/media/firefox.51d8a59c.svg "Firefox") | Firefox | 3 | | ![Opera](https://developer.mozilla.org/static/media/opera.a0ab0c50.svg "Opera") | Opera | 15 | | ![Safari](https://developer.mozilla.org/static/media/safari.3679eb31.svg "Safari") | Safari | 4 | | 手机端 | 浏览器 | 最小版本 | |-|-|-| | ![WebView Android](https://developer.mozilla.org/static/media/android.7d9bf320.svg "WebView Android") | WebView Android | 1 | | ![Chrome Android](https://developer.mozilla.org/static/media/chrome.4c570865.svg "Chrome Android") | Chrome Android | 18 | | ![Firefox Android](https://developer.mozilla.org/static/media/firefox.51d8a59c.svg "Firefox Android") | Firefox Android | 4 | | ![Opera Android](https://developer.mozilla.org/static/media/opera.a0ab0c50.svg "Opera Android") | Opera Android | 14 | | ![iOS Safari](https://developer.mozilla.org/static/media/safari.3679eb31.svg "iOS Safari") | iOS Safari | 3.2 | | ![Samsung Internet](https://developer.mozilla.org/static/media/samsung-internet.6fd7f423.svg "Samsung Internet") | Samsung Internet | 1.0 | > 兼容IE5.5-IE8浏览器，需要引用/lib/jsc.min.js。（如果不需要兼容低版本浏览器，则不需要引用jsc库） #### 编译原理 1. 通过document.getElementsByClass("vx")，寻找需要编译的标签 2. 通过带"vx-"前缀的属性名，寻找需要编译的属性 3. 通过document.getElementsByTagName("vx")，寻找需要编译的文本内容 > viewx的编译原理，使得动态编译很快，可以考虑不需要预编译。 #### 动态编译嵌套模板 > 可能一些特殊的开发场景，使用动态编译比预编译更方便。
> 如：把自定义模板存放在表中，通过ajax获取模板内容，通过嵌套模板(v-inner-html)，动态编译模板并展示。 ``` 动态编译嵌套模板：
``` ## 示例 #### say hello 演示最简单的例子say hello ``` {{name}} say hello ``` 示例文件：/demo/say-hello.html #### page onload 演示页面的加载事件，onload事件是页面生命周期的初始方法。 ``` ``` 示例文件：/demo/page-onload.html #### setData 演示通过setData控制数据模型更新视图。 ``` current time : {{time}} ``` 示例文件：/demo/set-data.html #### page observers 演示通过page的observers属性，监听页面数据变化 ``` ``` 示例文件：/demo/observers.html #### 循环 ```
name:{{item.name}}, index:{{index}} , 奇数行 , 偶数行
``` 示例文件：/demo/for.html #### 条件 ```
Hi, {{name}}!
``` 示例文件：/demo/if.html #### 绑定事件 > catch指阻止冒泡的绑定事件 ```
{{output}}
``` 示例文件：/demo/catch-event.html > bind指带冒泡的绑定事件 ```
{{output}}
``` 示例文件：/demo/bind-event.html