New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

anima-widget

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

anima-widget - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

.spmignore
change.md
src/attribute.js
src/base.js
src/class.js
src/events.js

32

HISTORY.md

@@ -1,35 +0,33 @@

# 历史记录
# History
---
## 1.1.1
## 1.0.0
`tag:fixed` #55 修复 destroy 时会把之前绑定的事件清除的问题
`new` It is the first version of widget.
`tag:improved` #54 标准化 DAParser 的写法
`tag:improved` 升级依赖 arale/base 到 1.1.1
## 1.1.0
## 1.1.0 [milestone](https://github.com/aralejs/widget/issues/37)
### events
`tag:fixed` [#25](https://github.com/aralejs/widget/issues/25) destroy 的 bug
* 去除 once 功能
`tag:changed` [#47](https://github.com/aralejs/widget/issues/47) 不再使用 `this.template` 和 `this.model`
`tag:changed` [#36](https://github.com/aralejs/widget/issues/36) 当属性值为空字符串时的处理
### class
`tag:new` [#39](https://github.com/aralejs/widget/issues/39) 彻底隔离样式冲突的 widget 方案
* 使用$.mix 和 $.isFunction
`tag:new` [#33](https://github.com/aralejs/widget/issues/33) handlebars runtime
### base
`tag:new` [#26](https://github.com/aralejs/widget/issues/26) 支持 data-widget-role
* 去除 aspect
`tag:improved` [#14](https://github.com/aralejs/widget/issues/14) delegateEvents 增强
`tag:improved` [#38](https://github.com/aralejs/widget/issues/38) 销毁 widget 创建的 element
### attribute
`tag:improved` [#40](https://github.com/aralejs/widget/issues/40) 简化 initAttrs 参数
* 工具方法isFunciton,isArray,isPlainObject 替换
* 去掉 setter,getter 方法
## 1.0.3
### widget
`tag:improved` [28](https://github.com/aralejs/widget/issues/28) Templatable 增加 cache，编译过后的模板不再编译，提高创建实例对象的性能。
* 去掉 events,delegate 功能

3

index.js

@@ -0,2 +1,3 @@

var Widget = require('./src/widget');
module.exports = require('./src/widget');
module.exports = Widget;

35

package.json
{
"name": "anima-widget",
"version": "1.0.0",
"description": "Widget 是 UI 组件的基础类，约定了组件的基本生命周期，实现了一些通用功能。基于 Widget 可以构建出任何你想要的 Web 界面组件。",
"keywords": [
"infrastructure",
"ui"
],
"homepage": "http://animajs.org/widget/",
"author": "贯高 <sakura9515@gmail.com>",
"version": "1.1.0",
"description": "",
"keywords": [],
"homepage": "http://gitlab.alibaba-inc.com/animajs/widget",
"author": "",
"maintainers": [
"玉伯 <lifesinger@gmail.com>",
"贯高 <sakura9515@gmail.com>",
"云谦 <sorrycc@gmail.com>",
"完颜 <SMbey0nd@163.com>"
"dxq613"
],
"repository": {
"type": "git",
"url": "https://github.com/animajs/widget.git"
"url": "git@gitlab.alibaba-inc.com:animajs/widget.git"
},
"bugs": {
"url": "https://github.com/animajs/widget/issues"
"url": "http://gitlab.alibaba-inc.com/animajs/widget/issues"
},
"spm": {},
"licenses": "MIT",
"spm": {
"engines": {
"seajs": "2.2.1"
},
"tests": "tests/*.js"
},
"main": "index.js",
"dependencies": {
"anima-yocto": "1.0.1",
"anima-base": "1.0.0"
"anima-yocto": "1.0.1"
},
"devDependencies": {
"spm-expect": "0.3.1",
"spm-expect.js": "0.3.1",
"spm-sinon": "1.6.0",

@@ -33,0 +32,0 @@ "spm-webpack": "~1.0.0"

55

README.md

@@ -47,3 +47,2 @@ # Widget

.initProps() // 提供给用户处理属性
.delegateEvents() // 事件代理，将事件代理到 `this.element` 上
.setup() // 实例化最后一步，用户自定义操作，提供给子类继承。

@@ -101,57 +100,17 @@ ```

### 事件代理
### 事件
事件代理是 Widget 非常好用的特性，将所有的事件都代理到 `this.element` 上。这样可以使得对应的
DOM 内容有修改时，无需重新绑定，在 destroy 的时候也会销毁这些事件。
控件的自定义事件可以直接通过on方法绑定到控件上， 也可以直接将所有的事件都代理到 `this.element` 上
`widget.delegateEvents()` 会在实例初始化时自动调用，这时会从 `this.events` 中取得声明的代理事件，比如
```js
var MyWidget = Widget.extend({
events: {
"dblclick": "open",
"click .icon.doc": "select",
"mouseover .date": "showTooltip"
},
open: function() {
...
},
select: function() {
...
},
...
});
```
var widget = new AWidget();
`events` 中每一项的格式是：`"event selector": "callback"`，当省略 `selector`
时，默认会将事件绑定到 `this.element` 上。`callback` 可以是字符串，表示当前实例上的方法名；
也可以直接传入函数。
widget.on('show',function(){
`events` 还可以是方法，返回一个 events hash 对象即可。比如
});
```js
var MyWidget = Widget.extend({
events: function() {
var hash = {
"click": "open",
"click .close": "close"
};
widget.element.on('click',function(){
return hash;
},
...
});
```
});
`events` 中，还支持 `{{name}}` 表达式，比如上面的代码，可以简化为：
```js
var MyWidget = Widget.extend({
events: {
"click": "open",
"click .close": "close",
"mouseover {{attrs.panels}}": "hover"
},
...
});
```

@@ -158,0 +117,0 @@

193

src/widget.js

@@ -7,3 +7,3 @@ // Widget

var Base = require('anima-base');
var Base = require('./base');
var $ = require('anima-yocto');

@@ -21,3 +21,3 @@

// config 中的这些键值会直接添加到实例上，转换成 properties
propsInAttrs: ['initElement', 'element', 'events'],
propsInAttrs: ['initElement', 'element'],

@@ -27,10 +27,2 @@ // 与 widget 关联的 DOM 元素

// 事件代理，格式为：
// {
// 'mousedown .title': 'edit',
// 'click {{attrs.saveButton}}': 'save'
// 'click .open': function(ev) { ... }
// }
events: null,
// 属性列表

@@ -46,5 +38,2 @@ attrs: {

// 默认数据模型
model: null,
// 组件的默认父节点

@@ -66,5 +55,2 @@ parentNode: document.body

// 初始化 events
this.delegateEvents();
// 子类自定义的初始化

@@ -102,109 +88,2 @@ this.setup();

// 注册事件代理
delegateEvents: function(element, events, handler) {
var argus = trimRightUndefine(Array.prototype.slice.call(arguments));
// widget.delegateEvents()
if (argus.length === 0) {
events = getEvents(this);
element = this.element;
}
// widget.delegateEvents({
// 'click p': 'fn1',
// 'click li': 'fn2'
// })
else if (argus.length === 1) {
events = element;
element = this.element;
}
// widget.delegateEvents('click p', function(ev) { ... })
else if (argus.length === 2) {
handler = events;
events = element;
element = this.element;
}
// widget.delegateEvents(element, 'click p', function(ev) { ... })
else {
element || (element = this.element);
this._delegateElements || (this._delegateElements = []);
this._delegateElements.push($(element));
}
// 'click p' => {'click p': handler}
if (isString(events) && $.isFunction(handler)) {
var o = {};
o[events] = handler;
events = o;
}
// key 为 'event selector'
for (var key in events) {
if (!events.hasOwnProperty(key)) continue;
var args = parseEventKey(key, this);
var eventType = args.type;
var selector = args.selector;
(function(handler, widget) {
var callback = function(ev) {
if ($.isFunction(handler)) {
handler.call(widget, ev);
} else {
widget[handler](ev);
}
}
// delegate
$(element).on(eventType, selector, callback);
})(events[key], this);
}
return this;
},
// 卸载事件代理
undelegateEvents: function(element, eventKey) {
var argus = trimRightUndefine(Array.prototype.slice.call(arguments));
if (!eventKey) {
eventKey = element;
element = null;
}
// 卸载所有
// .undelegateEvents()
if (argus.length === 0) {
var type = DELEGATE_EVENT_NS + this.cid;
this.element && this.element.off(type);
// 卸载所有外部传入的 element
if (this._delegateElements) {
for (var de in this._delegateElements) {
if (!this._delegateElements.hasOwnProperty(de)) continue;
this._delegateElements[de].off(type);
}
}
} else {
var args = parseEventKey(eventKey, this);
// 卸载 this.element
// .undelegateEvents(events)
if (!element) {
this.element && this.element.off(args.type, args.selector);
}
// 卸载外部 element
// .undelegateEvents(element, events)
else {
$(element).off(args.type, args.selector);
}
}
return this;
},
// 提供给子类覆盖的初始化方法

@@ -295,3 +174,3 @@ setup: function() {

destroy: function() {
this.undelegateEvents()
//this.undelegateEvents()
delete cachedInstances[this.cid];

@@ -341,57 +220,2 @@

var EVENT_KEY_SPLITTER = /^(\S+)\s*(.*)$/;
var EXPRESSION_FLAG = /{{([^}]+)}}/g;
var INVALID_SELECTOR = 'INVALID_SELECTOR';
function getEvents(widget) {
if ($.isFunction(widget.events)) {
widget.events = widget.events();
}
return widget.events;
}
function parseEventKey(eventKey, widget) {
var match = eventKey.match(EVENT_KEY_SPLITTER)
var eventType = match[1] + DELEGATE_EVENT_NS + widget.cid
// 当没有 selector 时，需要设置为 undefined，以使得 zepto 能正确转换为 bind
var selector = match[2] || undefined
if (selector && selector.indexOf('{{') > -1) {
selector = parseExpressionInEventKey(selector, widget)
}
return {
type: eventType,
selector: selector
}
}
// 解析 eventKey 中的 {{xx}}, {{yy}}
function parseExpressionInEventKey(selector, widget) {
return selector.replace(EXPRESSION_FLAG, function(m, name) {
var parts = name.split('.')
var point = widget, part
while (part = parts.shift()) {
if (point === widget.attrs) {
point = widget.get(part)
} else {
point = point[part]
}
}
// 已经是 className，比如来自 dataset 的
if (isString(point)) {
return point
}
// 不能识别的，返回无效标识
return INVALID_SELECTOR
})
}
// 对于 attrs 的 value 来说，以下值都认为是空值： null, undefined

@@ -401,12 +225,1 @@ function isEmptyAttrValue(o) {

}
function trimRightUndefine(argus) {
for (var i = argus.length - 1; i >= 0; i--) {
if (argus[i] === undefined) {
argus.pop();
} else {
break;
}
}
return argus;
}
.travis.yml
docs/api.md
docs/data-api.md
examples/auto-render.md
examples/index.md
examples/simple-tabview.md
Makefile
tests/test-widget.js
tests/widget-spec.js
.npmignore

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc