npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

np-mug

v1.0.2

Published

数据绑定。with artTemplate

Downloads

8

Readme

#效果预览期望目标等等

轻量级javascript数据绑定库。将一个Object转为可观测Object,可设置getter、setter和namespace、change回调、冒泡、解析DOM中的模版等等。 这里应该是个用法的demo #特性 ##DOM驱动

无需额外模版直接在DOM中写模版。 ##统一接口、方法

少而全的API。 ##Accessor

支持设置getter和setter。 ##全局scope

通过namespace访问属性。

##事件

支持绑定change事件、设置自定义事件。 事件可从namespace冒泡。 #实现原理 ##core部分

维护Accessors、Listeners两个数据结构。通过namespace注册的object将会迭代里面的属性注册到Accessors中,事件绑定的function添加到对应namespace的Listeners中。 ##model -> view 部分

通过scan方法从一个DOM节点开始,遍历DOM Tree找到所有带有表达式的文本节点(text node)和属性节点(attribute node),解析表达式里面依赖的属性并找到Accessor,注册对应的事件;当属性改变时修改该节点的值。 ##view -> model部分

通过body进行事件代理,根据prefix-model属性代理html控件的input、change事件,触发事件时改变绑定的属性的值。 #模版引擎 ##外部依赖

引用模版引擎作为依赖解析表达式的值,表达式到模版引擎之间加入一个模块作为转接以减少对模版引擎特性的依赖。目前使用artTemplate作为默认的模版引擎。 ##filter

内置一套按照liquid基础语法实现的filter。由于artTemplate支持自定义helper所以将filter默认添加到helper里面,也可以在业务使用中继续扩展helper。 #事件机制

事件通过对象中配置$change属性和调用observe方法注册。默认提供属性set、change事件监听并经由namespace进行事件冒泡。observer时可指定事件进行自定义事件的响应。自定义事件的触发目前好像没有这个接口呵呵呵呵呵呵。 #配置

配置可通过config方法和载入前的_config属性进行参数的配置。 目前可配置的项(默认值)包括:外部使用的全局变量(暂定)、debug模式(false)、使用模式(0:defineProperty, 1:get/set)、指令前缀(暂定vm-)、表达式边界({{和}})、DOM扫描中断判断(null)、自动DOM解析和数据绑定(false)等。 #调试

配置中开启debug模式输出解析中的所有错误。 表达式中使用debug filter可对当前表达式的值进行断点调试。 #目标&TODO ##性能优化

重新设计数组list功能的算法,优化列表渲染的性能。 事件响应部分性能优化。 DOM扩展部分。 ##功能扩展

###if else语法 ###dom replace ###事件句柄