4 Star 12 Fork 3

Rezero / declarehtml

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

declarehtml

简介

在做很多同步页面的时候,使用mvvm框架+重构建工具体验很不好。使用如jquery这种库操作dom的方式又会觉得很累。我们就是想要一个在html中就能看清元素和元素之间的关系(如勾选同意checkbox启用同意按钮),又想要有一个很好的模块化封装(仅仅js的封装,同步的页面对html不能封装)。 但通过数据驱动的方式做是不现实的(因为最终形成的html必须在js执行完成之后才行),所以还是使用操作dom的方式,我们提供全局的选择器穿插在html的属性之间,通过函数来传递状态,抽象逻辑,封装业务。由于我的电脑上只有 chrome 和 safari 所以并没有测试 ie 和firefox 等浏览器。最后 如果你有兴趣 欢迎加入 女神前端俱乐部共同探讨 群号 : 632826899

使用

<script src="your/path/src/index.js"></script>

会在全局挂载一个变量 declare

hello

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello</title>
</head>
<body d-mod="main">
  <button d-click="alert('The tag\'s name is ' + $e.target.tagName)">hello</button>
  <script src="../src/index.js"></script>
  <script>
    declare.create(document.body,{})
  </script>
</body>
</html>

d-mod属性代表使用 main模块,main是自带的一个模块 里面包括 d-click 和一些常用的dom操作函数,这里只是简单的调用window下的alert函数 弹窗一条信息

特色

  1. 声明式的操作dom
  2. 完善的模块机制,推崇模块的方式开发 一切皆模块
  3. html中可直接写选择器 到你的handler中自动转换为element对象
  4. 遵循函数式风格 (尽量少的状态,函数的可组合性,尽量纯的函数)

仓库评论 ( 4 )

你可以在登录后,发表评论

简介

就是要直接的操作dom元素 展开 收起
JavaScript
取消

发行版

暂无发行版

declarehtml

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/diqye/declarehtml.git
git@gitee.com:diqye/declarehtml.git
diqye
declarehtml
declarehtml
master

搜索帮助