DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove observe.js

This commit is contained in:
kmdjs 2017-01-17 15:49:17 +08:00
parent fb2bdbf078
commit 4901e06319
13 changed files with 135 additions and 676 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -1,4 +1,4 @@
![preview](http://alloyteam.github.io/Nuclear/img/nuclear.png)
# Nuclear
Some HTML + Scoped CSS + JS === Reusable Component
@ -23,7 +23,6 @@ npm install alloynuclear
```
# Many thanks to
* [observe.js](https://github.com/kmdjs/observejs)
* [set-dom.js](https://github.com/DylanPiercey/set-dom)
* [mustache.js](https://github.com/janl/mustache.js)
* [scoper.js](https://github.com/thomaspark/scoper)

307
dist/nuclear.js vendored
View File

@ -247,15 +247,11 @@ Nuclear.create = function (obj, setting) {
Nuclear._mixObj = function (obj) {
obj.ctor = function (option, selector, increment) {
this.pureOption = Nuclear.clone(option);
this._nuclearTwoWay = true;
this._nuclearDiffDom = true;
this._nuclearIncrement = increment;
this._nuclearServerRender = this._nuclearSetting.server;
//close two way binding by default in node evn
if (this._nuclearSetting.twoWay === false||this._nuclearServerRender) {
this._nuclearTwoWay = false;
}
if (this._nuclearSetting.diff === false) {
this._nuclearDiffDom = false;
}
@ -281,31 +277,9 @@ Nuclear._mixObj = function (obj) {
this._nuclearParentEmpty = !selector;
this.HTML = "";
if(this._nuclearTwoWay&&!(Nuclear.ie<9)) {
Object.defineProperty(this, 'option', {
get: function () {
return this._nuclearOption;
},
set: function (value) {
var old = this._nuclearOption;
if (old !== value) {
this._nuclearOption = value;
this.option=this._nuclearOption;
if (this._nuclearRenderInfo) {
this.onOptionChange && this.onOptionChange('_nuclearOption', value, old, '');
this._nuclearObserver();
this._nuclearRenderInfo.data = this.option;
this.refresh();
}
}
}
});
}else{
this.option=this._nuclearOption;
}
this.option['@item']=function(){
return JSON.stringify(this);
}
if(!this._nuclearReRender) {
@ -336,7 +310,7 @@ Nuclear._mixObj = function (obj) {
this._nuclearTimer = null;
this._preNuclearTime = new Date();
this._nuclearObserver();
this._nuclearRenderInfo = {
data: this.option,
@ -390,26 +364,7 @@ Nuclear._mixObj = function (obj) {
}
obj._nuclearObserver = function () {
if (this.option && this._nuclearTwoWay&&!(Nuclear.ie<9)) {
Nuclear.observe(this.option, function (prop, value, oldValue, path) {
if (!this.onOptionChange || (this.onOptionChange && this.onOptionChange(prop, value, oldValue, path) !== false)) {
this._nuclearRender();
//clearTimeout(this._nuclearTimer);
//if (new Date() - this._preNuclearTime > 40) {
// this._nuclearRender();
// this._preNuclearTime = new Date();
//} else {
// this._nuclearTimer = setTimeout(function () {
// this._nuclearRender();
// }.bind(this), 40);
//}
}
}.bind(this));
}
}
obj.refresh = function () {
obj.update = function () {
this._nuclearRender();
};
@ -433,45 +388,19 @@ Nuclear._mixObj = function (obj) {
obj.render = function () {
if (this._nuclearParentEmpty) {
return this._nuclearFixNesting(this.HTML);
//var len=this._nuclearRef.length;
////嵌套的render逻辑
////子节点下再无子节点
//if (len === 0) {
// return this.HTML;
//} else {//子节点下又有子节点
// var i=0;
// for (; i < len; i++) {
// var ref = this._nuclearRef[i];
// return ref.render();
// }
//}
} else {
return this._nuclearTplGenerator();
}
};
//obj._nuclearSetStyleData=function() {
// var styles = this.node.querySelectorAll('style');
// var i = 0, len = styles.length;
// for (; i < len; i++) {
// var style = styles[i];
// style.setAttribute('data-nuclearId', this._ncInstanceId);
// var cssText = Nuclear.scoper(style.innerHTML, "#nuclear-scoper-" + this._ncInstanceId);
// style.innerHTML = '';
// if (style.styleSheet) {
// style.styleSheet.cssText = cssText;
// } else {
// style.appendChild(document.createTextNode(cssText));
// }
// }
//}
obj._nuclearFixNesting = function(tpl){
var len = this._ncChildrenMapping.length;
if(len>0){
var i = 0;
for(;i<len;i++){
tpl=tpl.replace(this._ncChildrenMapping[i]["tpl"],this._ncChildrenMapping[i]["child"].render());
this._ncChildrenMapping[i]["child"]._nuclearRender();
tpl=tpl.replace(this._ncChildrenMapping[i]["tpl"],this._ncChildrenMapping[i]["child"].HTML);
}
}
return tpl;
@ -650,6 +579,17 @@ Nuclear._mixObj = function (obj) {
}
obj.destroy = function () {
this.node.parentNode.removeChild(this.node);
var ele = document.getElementById('nuclear_style_' + this._ncInstanceId);
var head = document.getElementsByTagName('head')[0];
if (ele && ele.parentNode === head) {
head.removeChild(ele);
}
this.node = null;
}
};
Nuclear._fixEvent = function (tpl,instanceId) {
@ -737,56 +677,6 @@ Nuclear.destroy=function(instance){
}
Nuclear.clone = function (item) {
if (!item) { return item; } // null, undefined values check
if (item.hasOwnProperty("$observeProps") ||item.hasOwnProperty("$observer") ) return item;
var types = [Number, String, Boolean],
result;
// normalizing primitives if someone did new String('aaa'), or new Number('444');
types.forEach(function (type) {
if (item instanceof type) {
result = type(item);
}
});
if (typeof result == "undefined") {
if (Object.prototype.toString.call(item) === "[object Array]") {
result = [];
item.forEach(function (child, index, array) {
result[index] = Nuclear.clone(child);
});
} else if (typeof item == "object") {
// testing that this is DOM
if (item.nodeType && typeof item.cloneNode == "function") {
var result = item.cloneNode(true);
} else if (!item.prototype) { // check that this is a literal
if (item instanceof Date) {
result = new Date(item);
} else {
// it is an object literal
result = {};
for (var i in item) {
result[i] = Nuclear.clone(item[i]);
}
}
} else {
// depending what you would like here,
// just keep the reference, or create new object
if (false && item.constructor) {
// would not advice to do that, reason? Read below
result = new item.constructor();
} else {
result = item;
}
}
} else {
result = item;
}
}
return result;
}
/*!
* mustache.js - Logic-less {{mustache}} templates with JavaScript
* http://github.com/janl/mustache.js
@ -1387,167 +1277,6 @@ Nuclear.clone = function (item) {
mustache.Writer = Writer;
}));
/* observejs --- By dnt http://kmdjs.github.io/
* Github: https://github.com/kmdjs/observejs
* MIT Licensed.
*/
;(function () {
var observe = function (target, arr,callback) {
var _observe = function (target, arr, callback) {
if(!target.$observer)target.$observer=this;
var $observer=target.$observer;
var eventPropArr=[];
if (observe.isArray(target)) {
if (target.length === 0) {
target.$observeProps = {};
target.$observeProps.$observerPath = "#";
}
$observer.mock(target);
}
for (var prop in target) {
if (target.hasOwnProperty(prop)) {
if (callback) {
if (observe.isArray(arr) && observe.isInArray(arr, prop)) {
eventPropArr.push(prop);
$observer.watch(target, prop);
} else if (observe.isString(arr) && prop == arr) {
eventPropArr.push(prop);
$observer.watch(target, prop);
}
} else{
eventPropArr.push(prop);
$observer.watch(target, prop);
}
}
}
$observer.target = target;
if(!$observer.propertyChangedHandler)$observer.propertyChangedHandler=[];
var propChanged=callback ? callback : arr;
$observer.propertyChangedHandler.push({ all: !callback, propChanged: propChanged, eventPropArr: eventPropArr });
}
_observe.prototype = {
"onPropertyChanged": function (prop, value,oldValue,target,path) {
if(value!== oldValue && this.propertyChangedHandler){
var rootName=observe._getRootName(prop,path);
for(var i=0,len=this.propertyChangedHandler.length;i<len;i++){
var handler=this.propertyChangedHandler[i];
if(handler.all||observe.isInArray(handler.eventPropArr,rootName)||rootName.indexOf("Array-")===0){
handler.propChanged.call(this.target, prop, value, oldValue, path);
}
}
}
if (prop.indexOf("Array-") !== 0 && typeof value === "object") {
this.watch(target,prop, target.$observeProps.$observerPath);
}
},
"mock": function (target) {
var self = this;
target.forEach(function (item, index) {
item._nuclearIndex = index;
});
observe.methods.forEach(function (item) {
target[item] = function () {
var old = Array.prototype.slice.call(this,0);
var result = Array.prototype[item].apply(this, Array.prototype.slice.call(arguments));
if (new RegExp("\\b" + item + "\\b").test(observe.triggerStr)) {
this.forEach(function (item, index) {
item._nuclearIndex = index;
});
for (var cprop in this) {
if (this.hasOwnProperty(cprop) && !observe.isFunction(this[cprop])) {
self.watch(this, cprop, this.$observeProps.$observerPath);
}
}
//todo
self.onPropertyChanged("Array-"+item, this, old,this, this.$observeProps.$observerPath);
}
return result;
};
target['real'+item.substring(0,1).toUpperCase()+item.substring(1)] = function () {
return Array.prototype[item].apply(this, Array.prototype.slice.call(arguments));
};
});
},
"watch": function (target, prop, path) {
if (prop === "$observeProps"||prop === "$observer") return;
if (observe.isFunction(target[prop])) return;
if (!target.$observeProps) target.$observeProps = {};
if(path !== undefined){
target.$observeProps.$observerPath = path;
}else{
target.$observeProps.$observerPath = "#";
}
var self = this;
var currentValue = target.$observeProps[prop] = target[prop];
Object.defineProperty(target, prop, {
get: function () {
return this.$observeProps[prop];
},
set: function (value) {
var old = this.$observeProps[prop];
this.$observeProps[prop] = value;
self.onPropertyChanged(prop, value, old, this, target.$observeProps.$observerPath);
}
});
if (typeof currentValue == "object") {
if (observe.isArray(currentValue)) {
this.mock(currentValue);
if (currentValue.length === 0) {
if (!currentValue.$observeProps) currentValue.$observeProps = {};
if (path !== undefined) {
currentValue.$observeProps.$observerPath = path;
} else {
currentValue.$observeProps.$observerPath = "#";
}
}
}
for (var cprop in currentValue) {
if (currentValue.hasOwnProperty(cprop)) {
this.watch(currentValue, cprop, target.$observeProps.$observerPath+"-"+prop);
}
}
}
}
}
return new _observe(target, arr, callback)
}
observe.methods = ["concat", "copyWithin", "entries", "every", "fill", "filter", "find", "findIndex", "forEach", "includes", "indexOf", "join", "keys", "lastIndexOf", "map", "pop", "push", "reduce", "reduceRight", "reverse", "shift", "slice", "some", "sort", "splice", "toLocaleString", "toString", "unshift", "values", "size"]
observe.triggerStr = ["concat", "copyWithin", "fill", "pop", "push", "reverse", "shift", "sort", "splice", "unshift", "size"].join(",")
observe.isArray = function (obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
observe.isString = function (obj) {
return typeof obj === "string";
}
observe.isInArray = function (arr, item) {
for (var i = arr.length; --i > -1;) {
if (item === arr[i]) return true;
}
return false;
}
observe.isFunction = function (obj) {
return Object.prototype.toString.call(obj) == '[object Function]';
}
observe._getRootName=function(prop,path){
if(path==="#"){
return prop;
}
return path.split("-")[1];
}
observe.add = function(obj , prop , value) {
obj[prop] = value;
var $observer=obj.$observer;
$observer.watch(obj,prop);
}
Array.prototype.size = function (length) {
this.length = length;
}
Nuclear.observe = observe;
})();
if (typeof Object.create != 'function') {
Object.create = (function(undefined) {
var Temp = function() {};

2
dist/nuclear.min.js vendored
View File

File diff suppressed because one or more lines are too long

186
example/bak/pagination.html
View File

@ -34,107 +34,107 @@
</head>
<body>
<div id="paginationContainer"></div>
<script src="../dist/nuclear.js"></script>
<script src="../../dist/nuclear.js"></script>
<script src="http://alloyteam.github.io/Nuclear/js/util.js"></script>
<script type="text/javascript">
var Pagination = Nuclear.create({
install: function () {
this.option = util.merge({
total: 0,
pageSize: 10,
numDisplay: 10,
currentPage: 3,
numEdge: 0,
linkTo: "#",
prevText: "Prev",
nextText: "Next",
ellipseText: "...",
prevShow: true,
nextShow: true,
callback: function () { return false; }
}, this.option);
this.pageNum = Math.ceil(this.option.total / this.option.pageSize);
},
goto: function (index,evt) {
evt.preventDefault();
this.option.currentPage=index;
},
onOptionChange: function (prop, value, oldValue, path) {
if (prop === "currentPage") {
this.option.callback(value);
}
},
render: function () {
var tpl = '<div class="pagination">';
var opt = this.option, interval = this.getInterval();
//上一页
if (opt.prevShow) {
tpl += this.getPrev();
}
//起始点
if (interval[0] > 0 && opt.numEdge > 0) {
var end = Math.min(opt.numEdge, interval[0]);
for (var i = 0; i < end; i++) {
var Pagination = Nuclear.create({
install: function () {
this.option = util.merge({
total: 0,
pageSize: 10,
numDisplay: 10,
currentPage: 3,
numEdge: 0,
linkTo: "#",
prevText: "Prev",
nextText: "Next",
ellipseText: "...",
prevShow: true,
nextShow: true,
callback: function () { return false; }
}, this.option);
this.pageNum = Math.ceil(this.option.total / this.option.pageSize);
},
goto: function (index,evt) {
evt.preventDefault();
this.option.currentPage=index;
},
onOptionChange: function (prop, value, oldValue, path) {
if (prop === "currentPage") {
this.option.callback(value);
}
},
render: function () {
var tpl = '<div class="pagination">';
var opt = this.option, interval = this.getInterval();
//上一页
if (opt.prevShow) {
tpl += this.getPrev();
}
//起始点
if (interval[0] > 0 && opt.numEdge > 0) {
var end = Math.min(opt.numEdge, interval[0]);
for (var i = 0; i < end; i++) {
tpl += this.getItem(i, i + 1);
}
if (opt.numEdge < interval[0] && opt.ellipseText) {
tpl += "<span>" + opt.ellipseText + "</span>";
}
}
//内部的链接
for (var i = interval[0]; i < interval[1]; i++) {
tpl += this.getItem(i, i + 1);
}
if (opt.numEdge < interval[0] && opt.ellipseText) {
tpl += "<span>" + opt.ellipseText + "</span>";
// 结束点
if (interval[1] < this.pageNum && opt.numEdge > 0) {
if (this.pageNum - opt.numEdge > interval[1] && opt.ellipseText) {
tpl += "<span>" + opt.ellipseText + "</span>";
}
var begin = Math.max(this.pageNum - opt.numEdge, interval[1]);
for (var i = begin; i < this.pageNum ; i++) {
tpl += this.getItem(i, i + 1);
}
}
}
//内部的链接
for (var i = interval[0]; i < interval[1]; i++) {
tpl += this.getItem(i, i + 1);
}
// 结束点
if (interval[1] < this.pageNum && opt.numEdge > 0) {
if (this.pageNum - opt.numEdge > interval[1] && opt.ellipseText) {
tpl += "<span>" + opt.ellipseText + "</span>";
//下一页
if (opt.nextShow) {
tpl += this.getNext();
}
var begin = Math.max(this.pageNum - opt.numEdge, interval[1]);
for (var i = begin; i < this.pageNum ; i++) {
tpl += this.getItem(i, i + 1);
tpl += '</div>';
return tpl;
},
getInterval: function () {
var ne_half = Math.ceil(this.option.numDisplay / 2);
var upper_limit = this.pageNum - this.option.numDisplay;
var start = this.option.currentPage > ne_half ? Math.max(Math.min(this.option.currentPage - ne_half, upper_limit), 0) : 0;
var end = this.option.currentPage > ne_half ? Math.min(this.option.currentPage + ne_half, this.pageNum) : Math.min(this.option.numDisplay, this.pageNum);
return [start, end];
},
getPrev: function () {
if (this.option.currentPage === 0) {
return '<span nc-id="prev" class="current prev">{{prevText}}</span>';
}
return '<a nc-id="prev" onclick="goto('+(this.option.currentPage-1)+',event)" href="{{linkTo}}" class="prev">{{prevText}}</a>';
},
getNext: function () {
if (this.option.currentPage === this.pageNum - 1) {
return '<span nc-id="next" class="current next">{{nextText}}</span>';
}
return '<a nc-id="next" onclick="goto('+(this.option.currentPage+1)+',event)" href="{{linkTo}}" class="next">{{nextText}}</a>';
},
getItem: function (pageIndex, text) {
if (this.option.currentPage === pageIndex) {
return '<span class="current">' + text + '</span>';
}
return '<a class="link" onclick="goto('+pageIndex+',event)" data-pageIndex="' + pageIndex + '" href="{{linkTo}}">' + text + '</a>';
}
//下一页
if (opt.nextShow) {
tpl += this.getNext();
}
tpl += '</div>';
return tpl;
},
getInterval: function () {
var ne_half = Math.ceil(this.option.numDisplay / 2);
var upper_limit = this.pageNum - this.option.numDisplay;
var start = this.option.currentPage > ne_half ? Math.max(Math.min(this.option.currentPage - ne_half, upper_limit), 0) : 0;
var end = this.option.currentPage > ne_half ? Math.min(this.option.currentPage + ne_half, this.pageNum) : Math.min(this.option.numDisplay, this.pageNum);
return [start, end];
},
getPrev: function () {
if (this.option.currentPage === 0) {
return '<span nc-id="prev" class="current prev">{{prevText}}</span>';
}
return '<a nc-id="prev" onclick="goto('+(this.option.currentPage-1)+',event)" href="{{linkTo}}" class="prev">{{prevText}}</a>';
},
getNext: function () {
if (this.option.currentPage === this.pageNum - 1) {
return '<span nc-id="next" class="current next">{{nextText}}</span>';
}
return '<a nc-id="next" onclick="goto('+(this.option.currentPage+1)+',event)" href="{{linkTo}}" class="next">{{nextText}}</a>';
},
getItem: function (pageIndex, text) {
if (this.option.currentPage === pageIndex) {
return '<span class="current">' + text + '</span>';
}
return '<a class="link" onclick="goto('+pageIndex+',event)" data-pageIndex="' + pageIndex + '" href="{{linkTo}}">' + text + '</a>';
}
})
new Pagination({
total: 100,//总个数80
pageSize: 10, //每页显示10项
numEdge: 1, //边缘页数
numDisplay: 4, //主体页数
callback: function (currentIndex) { }
}, "#paginationContainer");
})
new Pagination({
total: 100,//总个数80
pageSize: 10, //每页显示10项
numEdge: 1, //边缘页数
numDisplay: 4, //主体页数
callback: function (currentIndex) { }
}, "#paginationContainer");
</script>
<a href="https://github.com/AlloyTeam/Nuclear" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="asset/github.png" alt="" />

4
example/communication.html
View File

@ -23,9 +23,11 @@
var ItemList = Nuclear.create({
deleteEvent: function (index) {
this.option.users.splice(index, 1);
this.update();
},
add: function () {
this.option.users.push({ "name": "333" });
this.update();
},
render: function () {
return '\
@ -47,9 +49,11 @@
},
add: function () {
this.itemList.option.users.push({ name: 'aaa' });
this.update();
},
clear: function () {
this.itemList.option.users = [];
this.update();
},
render: function () {
return '\

1
example/condition.html
View File

@ -27,6 +27,7 @@
setTimeout(function () {
cd.option.seen = false;
cd.update();
}, 2000);
</script>

4
example/list.html
View File

@ -17,9 +17,11 @@
var ItemList = Nuclear.create({
deleteEvent: function (index) {
this.option.users.splice(index, 1);
this.update();
},
add: function () {
this.option.users.push({ "name": "333" });
this.update();
},
render: function () {
return '\
@ -38,9 +40,11 @@
},
add: function () {
this.itemList.option.users.push({ name: 'aaa' });
this.update();
},
clear: function () {
this.itemList.option.users = [];
this.update();
},
render: function () {
return '\

3
example/loop.html
View File

@ -25,16 +25,19 @@
setTimeout(function () {
//增加
ld.option.list.push({ name: "lisi", age: 38 });
ld.update();
}, 1000);
setTimeout(function () {
//修改
ld.option.list[0].age = 19;
ld.update();
}, 2000);
setTimeout(function () {
//移除
ld.option.list.splice(0, 1);
ld.update();
}, 3000);
</script>

3
example/nesting.html
View File

@ -37,8 +37,9 @@
//this.nulcearChildren[1].option.items.push(this.textBox.value);
//or
this.list.option.items.push(this.textBox.value);
//this.list.update();
this.option.length = this.list.option.items.length;
this.update();
},
render: function () {
//or any_namespace.xx.xxx.TodoList 对应的 nc-constructor="any_namespace.xx.xxx.TodoList"

1
example/using_template.html
View File

@ -39,6 +39,7 @@
evt.preventDefault();
this.inputValue = "";
this.option.items.push(this.textBox.value);
this.update();
},
render: function () {
return this.todoTpl;

1
gulpfile.js
View File

@ -20,7 +20,6 @@ gulp.task('build', function () {
'src/set-dom.js',
'src/nuclear.js',
'src/tpl.js',
'src/observe.js',
'src/class.js',
'src/scoper.js',

136
src/nuclear.js
View File

@ -9,15 +9,11 @@
Nuclear._mixObj = function (obj) {
obj.ctor = function (option, selector, increment) {
this.pureOption = Nuclear.clone(option);
this._nuclearTwoWay = true;
this._nuclearDiffDom = true;
this._nuclearIncrement = increment;
this._nuclearServerRender = this._nuclearSetting.server;
//close two way binding by default in node evn
if (this._nuclearSetting.twoWay === false||this._nuclearServerRender) {
this._nuclearTwoWay = false;
}
if (this._nuclearSetting.diff === false) {
this._nuclearDiffDom = false;
}
@ -43,31 +39,9 @@ Nuclear._mixObj = function (obj) {
this._nuclearParentEmpty = !selector;
this.HTML = "";
if(this._nuclearTwoWay&&!(Nuclear.ie<9)) {
Object.defineProperty(this, 'option', {
get: function () {
return this._nuclearOption;
},
set: function (value) {
var old = this._nuclearOption;
if (old !== value) {
this._nuclearOption = value;
this.option=this._nuclearOption;
if (this._nuclearRenderInfo) {
this.onOptionChange && this.onOptionChange('_nuclearOption', value, old, '');
this._nuclearObserver();
this._nuclearRenderInfo.data = this.option;
this.refresh();
}
}
}
});
}else{
this.option=this._nuclearOption;
}
this.option['@item']=function(){
return JSON.stringify(this);
}
if(!this._nuclearReRender) {
@ -98,7 +72,7 @@ Nuclear._mixObj = function (obj) {
this._nuclearTimer = null;
this._preNuclearTime = new Date();
this._nuclearObserver();
this._nuclearRenderInfo = {
data: this.option,
@ -152,26 +126,7 @@ Nuclear._mixObj = function (obj) {
}
obj._nuclearObserver = function () {
if (this.option && this._nuclearTwoWay&&!(Nuclear.ie<9)) {
Nuclear.observe(this.option, function (prop, value, oldValue, path) {
if (!this.onOptionChange || (this.onOptionChange && this.onOptionChange(prop, value, oldValue, path) !== false)) {
this._nuclearRender();
//clearTimeout(this._nuclearTimer);
//if (new Date() - this._preNuclearTime > 40) {
// this._nuclearRender();
// this._preNuclearTime = new Date();
//} else {
// this._nuclearTimer = setTimeout(function () {
// this._nuclearRender();
// }.bind(this), 40);
//}
}
}.bind(this));
}
}
obj.refresh = function () {
obj.update = function () {
this._nuclearRender();
};
@ -195,45 +150,19 @@ Nuclear._mixObj = function (obj) {
obj.render = function () {
if (this._nuclearParentEmpty) {
return this._nuclearFixNesting(this.HTML);
//var len=this._nuclearRef.length;
////嵌套的render逻辑
////子节点下再无子节点
//if (len === 0) {
// return this.HTML;
//} else {//子节点下又有子节点
// var i=0;
// for (; i < len; i++) {
// var ref = this._nuclearRef[i];
// return ref.render();
// }
//}
} else {
return this._nuclearTplGenerator();
}
};
//obj._nuclearSetStyleData=function() {
// var styles = this.node.querySelectorAll('style');
// var i = 0, len = styles.length;
// for (; i < len; i++) {
// var style = styles[i];
// style.setAttribute('data-nuclearId', this._ncInstanceId);
// var cssText = Nuclear.scoper(style.innerHTML, "#nuclear-scoper-" + this._ncInstanceId);
// style.innerHTML = '';
// if (style.styleSheet) {
// style.styleSheet.cssText = cssText;
// } else {
// style.appendChild(document.createTextNode(cssText));
// }
// }
//}
obj._nuclearFixNesting = function(tpl){
var len = this._ncChildrenMapping.length;
if(len>0){
var i = 0;
for(;i<len;i++){
tpl=tpl.replace(this._ncChildrenMapping[i]["tpl"],this._ncChildrenMapping[i]["child"].render());
this._ncChildrenMapping[i]["child"]._nuclearRender();
tpl=tpl.replace(this._ncChildrenMapping[i]["tpl"],this._ncChildrenMapping[i]["child"].HTML);
}
}
return tpl;
@ -509,54 +438,3 @@ Nuclear.destroy=function(instance){
Nuclear.instances[instance._ncInstanceId] =null;
}
Nuclear.clone = function (item) {
if (!item) { return item; } // null, undefined values check
if (item.hasOwnProperty("$observeProps") ||item.hasOwnProperty("$observer") ) return item;
var types = [Number, String, Boolean],
result;
// normalizing primitives if someone did new String('aaa'), or new Number('444');
types.forEach(function (type) {
if (item instanceof type) {
result = type(item);
}
});
if (typeof result == "undefined") {
if (Object.prototype.toString.call(item) === "[object Array]") {
result = [];
item.forEach(function (child, index, array) {
result[index] = Nuclear.clone(child);
});
} else if (typeof item == "object") {
// testing that this is DOM
if (item.nodeType && typeof item.cloneNode == "function") {
var result = item.cloneNode(true);
} else if (!item.prototype) { // check that this is a literal
if (item instanceof Date) {
result = new Date(item);
} else {
// it is an object literal
result = {};
for (var i in item) {
result[i] = Nuclear.clone(item[i]);
}
}
} else {
// depending what you would like here,
// just keep the reference, or create new object
if (false && item.constructor) {
// would not advice to do that, reason? Read below
result = new item.constructor();
} else {
result = item;
}
}
} else {
result = item;
}
}
return result;
}

160
src/observe.js
View File

@ -1,160 +0,0 @@
/* observejs --- By dnt http://kmdjs.github.io/
* Github: https://github.com/kmdjs/observejs
* MIT Licensed.
*/
;(function () {
var observe = function (target, arr,callback) {
var _observe = function (target, arr, callback) {
if(!target.$observer)target.$observer=this;
var $observer=target.$observer;
var eventPropArr=[];
if (observe.isArray(target)) {
if (target.length === 0) {
target.$observeProps = {};
target.$observeProps.$observerPath = "#";
}
$observer.mock(target);
}
for (var prop in target) {
if (target.hasOwnProperty(prop)) {
if (callback) {
if (observe.isArray(arr) && observe.isInArray(arr, prop)) {
eventPropArr.push(prop);
$observer.watch(target, prop);
} else if (observe.isString(arr) && prop == arr) {
eventPropArr.push(prop);
$observer.watch(target, prop);
}
} else{
eventPropArr.push(prop);
$observer.watch(target, prop);
}
}
}
$observer.target = target;
if(!$observer.propertyChangedHandler)$observer.propertyChangedHandler=[];
var propChanged=callback ? callback : arr;
$observer.propertyChangedHandler.push({ all: !callback, propChanged: propChanged, eventPropArr: eventPropArr });
}
_observe.prototype = {
"onPropertyChanged": function (prop, value,oldValue,target,path) {
if(value!== oldValue && this.propertyChangedHandler){
var rootName=observe._getRootName(prop,path);
for(var i=0,len=this.propertyChangedHandler.length;i<len;i++){
var handler=this.propertyChangedHandler[i];
if(handler.all||observe.isInArray(handler.eventPropArr,rootName)||rootName.indexOf("Array-")===0){
handler.propChanged.call(this.target, prop, value, oldValue, path);
}
}
}
if (prop.indexOf("Array-") !== 0 && typeof value === "object") {
this.watch(target,prop, target.$observeProps.$observerPath);
}
},
"mock": function (target) {
var self = this;
target.forEach(function (item, index) {
item._nuclearIndex = index;
});
observe.methods.forEach(function (item) {
target[item] = function () {
var old = Array.prototype.slice.call(this,0);
var result = Array.prototype[item].apply(this, Array.prototype.slice.call(arguments));
if (new RegExp("\\b" + item + "\\b").test(observe.triggerStr)) {
this.forEach(function (item, index) {
item._nuclearIndex = index;
});
for (var cprop in this) {
if (this.hasOwnProperty(cprop) && !observe.isFunction(this[cprop])) {
self.watch(this, cprop, this.$observeProps.$observerPath);
}
}
//todo
self.onPropertyChanged("Array-"+item, this, old,this, this.$observeProps.$observerPath);
}
return result;
};
target['real'+item.substring(0,1).toUpperCase()+item.substring(1)] = function () {
return Array.prototype[item].apply(this, Array.prototype.slice.call(arguments));
};
});
},
"watch": function (target, prop, path) {
if (prop === "$observeProps"||prop === "$observer") return;
if (observe.isFunction(target[prop])) return;
if (!target.$observeProps) target.$observeProps = {};
if(path !== undefined){
target.$observeProps.$observerPath = path;
}else{
target.$observeProps.$observerPath = "#";
}
var self = this;
var currentValue = target.$observeProps[prop] = target[prop];
Object.defineProperty(target, prop, {
get: function () {
return this.$observeProps[prop];
},
set: function (value) {
var old = this.$observeProps[prop];
this.$observeProps[prop] = value;
self.onPropertyChanged(prop, value, old, this, target.$observeProps.$observerPath);
}
});
if (typeof currentValue == "object") {
if (observe.isArray(currentValue)) {
this.mock(currentValue);
if (currentValue.length === 0) {
if (!currentValue.$observeProps) currentValue.$observeProps = {};
if (path !== undefined) {
currentValue.$observeProps.$observerPath = path;
} else {
currentValue.$observeProps.$observerPath = "#";
}
}
}
for (var cprop in currentValue) {
if (currentValue.hasOwnProperty(cprop)) {
this.watch(currentValue, cprop, target.$observeProps.$observerPath+"-"+prop);
}
}
}
}
}
return new _observe(target, arr, callback)
}
observe.methods = ["concat", "copyWithin", "entries", "every", "fill", "filter", "find", "findIndex", "forEach", "includes", "indexOf", "join", "keys", "lastIndexOf", "map", "pop", "push", "reduce", "reduceRight", "reverse", "shift", "slice", "some", "sort", "splice", "toLocaleString", "toString", "unshift", "values", "size"]
observe.triggerStr = ["concat", "copyWithin", "fill", "pop", "push", "reverse", "shift", "sort", "splice", "unshift", "size"].join(",")
observe.isArray = function (obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
observe.isString = function (obj) {
return typeof obj === "string";
}
observe.isInArray = function (arr, item) {
for (var i = arr.length; --i > -1;) {
if (item === arr[i]) return true;
}
return false;
}
observe.isFunction = function (obj) {
return Object.prototype.toString.call(obj) == '[object Function]';
}
observe._getRootName=function(prop,path){
if(path==="#"){
return prop;
}
return path.split("-")[1];
}
observe.add = function(obj , prop , value) {
obj[prop] = value;
var $observer=obj.$observer;
$observer.watch(obj,prop);
}
Array.prototype.size = function (length) {
this.length = length;
}
Nuclear.observe = observe;
})();