Skip to content

Commit cf88aa4

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 15dfc5f commit cf88aa4

File tree

1 file changed

+33
-49
lines changed

1 file changed

+33
-49
lines changed

‎code-dev/26-02-10/jquery-as-a-one-liner/jquery-as-a-one-liner.html‎

Lines changed: 33 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<div id=test></div>
77

88
<script>
9+
{
910

10-
var $=function(root,css,_,node,alias,set,get,v,r){return (
11+
let $=function(root,css,_,node,alias,set,get,v,r){return (
1112
node=(!css&&(css=root,root=this),root.querySelector(css)),
1213
alias={txt:'textContent'},
1314
get=(_,prop)=>(r=v=node[alias[prop]||prop],(typeof v=='function'&&(r=(...args)=>v.apply(node,args))),r),
@@ -20,12 +21,12 @@
2021
console.log($('#test').txt);
2122
$('#test').style.color='red';
2223

23-
var tn=document.createTextNode('hello');
24+
let tn=document.createTextNode('hello');
2425
$('#test').append(tn);
2526

26-
var n=$('#test').cloneNode(true);
27+
let n=$('#test').cloneNode(true);
2728
console.log(n);
28-
29+
}
2930
</script>
3031

3132

@@ -34,8 +35,8 @@ <h3>test</h3>
3435
</div>
3536

3637
<script>
37-
38-
var $=function(root,css,_,node,alias,set,get,v,r){return (
38+
{
39+
let $=function(root,css,_,node,alias,set,get,v,r){return (
3940
node=(!css&&(css=root,root=this),root.querySelector(css)),
4041
alias={txt:'textContent'},
4142
get=(_,prop)=>(r=v=node[alias[prop]||prop],(typeof v=='function'&&(r=(...args)=>v.apply(node,args))),r),
@@ -46,6 +47,7 @@ <h3>test</h3>
4647

4748
$('h3').txt='my-test'
4849
console.log($('h3').txt);
50+
}
4951
</script>
5052

5153

@@ -54,21 +56,12 @@ <h3>test3</h3>
5456
</div>
5557

5658
<script>
57-
58-
var $=function(root,css,_,node,alias,set,get,v,r){return(
59+
{
60+
let $=function(root,css,_,node,alias,set,get,v,r,proxy){return(
5961
$._list=[],$._this=document.documentElement,
6062
node=(!css&&(css=root,root=$._this),css||=':scope',root.matches(css)&&root||root.querySelector(css)),
6163
alias={txt:'textContent'},
6264
get=(value,prop,rec)=>{
63-
if (prop === Symbol.toPrimitive) { // Make instanceof Node checks pass
64-
console.log('toPrim');debugger;
65-
return () => node;
66-
}
67-
if (prop === Symbol.hasInstance) {
68-
console.log('hasInstance');
69-
return (value) => value === rec || value instanceof Node;
70-
}
71-
7265
if(prop=='clone')return node.cloneNode(true);
7366
if(prop=='html')return node.innerHTML;
7467
if(prop=='on')return new Proxy(node,{set:(_,prop,v)=>($._list.push({prop,fn:v}),node.addEventListener(prop,v,false))});
@@ -78,28 +71,22 @@ <h3>test3</h3>
7871
return (r=v=node[alias[prop]||prop],(typeof v=='function'&&(r=(...args)=>v.apply(node,args))),r)
7972
},
8073
set=(_,prop,v)=>node[alias[prop]||prop]=v,
81-
new Proxy(node,{set,get,getPrototypeOf(){return Node.prototype}})
74+
proxy=new Proxy(node,{set,get}),
75+
proxy.node=node,
76+
proxy
8277
)};
8378
$._this=test3;
8479

8580

86-
var clone=$('h3').clone
81+
let clone=$('h3').clone
8782
$().append(clone);
8883

89-
var fn = e=>console.log('hello');
84+
let fn = e=>console.log('hello');
9085
$('h3').on.click = fn;
9186
$('h3').rem(fn);
9287

9388

94-
</script>
95-
96-
97-
98-
99-
<script>
100-
101-
102-
89+
10390
function _get(target,prop){
10491

10592
var datatype = v=>Object.prototype.toString.call(v).slice(8,-1).toLowerCase();
@@ -176,13 +163,13 @@ <h3>test3</h3>
176163

177164
}//get
178165

179-
var node = document.createElement('div');
166+
let node = document.createElement('div');
180167
$.create = new Proxy(node,{get:_get});
181168
//debugger;
182-
var div=$.create.div({append:$('#test3'),text:'helloworld',style:{color:'green',fontWeight:'bold'}});
169+
let div=$.create.div({append:$('#test3').node,text:'helloworld',style:{color:'green',fontWeight:'bold'}});
183170
console.log(div);
184171

185-
172+
}
186173
</script>
187174

188175

@@ -194,37 +181,34 @@ <h3>test4</h3>
194181

195182

196183
<script>
184+
{
197185

198-
var $=function $(root,css,_,node,alias,set,get,v,r){return(
186+
let $=function $(root,css,_,node,alias,set,get,v,r){return(
199187
!$._list&&($._list=[]),!$._this&&($._this=document.documentElement),
200188
node=(!css&&(css=root,root=$._this),css||=':scope',root.matches(css)&&root||root.querySelector(css)),
201-
alias={txt:'textContent'},
202-
get=(_,prop)=>{
203-
if(prop=='clone')return node.cloneNode(true);
204-
if(prop=='html')return node.innerHTML;
205-
if(prop=='on')return new Proxy(node,{set:(_,prop,v)=>($._list.push({prop,fn:v}),node.addEventListener(prop,v,false))});
206-
if(prop=='rem'||prop=='remove')return new Proxy(()=>{},{
207-
apply:(_,__,args)=>($._list=$._list.filter(({prop,fn,r})=>(r=fn!==args[0],!r&&node.removeEventListener(prop,fn,false))))
208-
});
209-
return (r=v=node[alias[prop]||prop],(typeof v=='function'&&(r=(...args)=>v.apply(node,args))),r)
210-
},
211-
set=(_,prop,v)=>node[alias[prop]||prop]=v,
212-
new Proxy(node,{set,get})
189+
Object.defineProperty(node,'txt',{get:()=>node.textContent,set:v=>node.textContent=v}),
190+
Object.defineProperty(node,'clone',{get:()=>node.cloneNode(true)}),
191+
Object.defineProperty(node,'on',{get:()=>new Proxy(node,{set:(_,prop,v)=>($._list.push({prop,fn:v}),node.addEventListener(prop,v,false))})}),
192+
Object.defineProperty(node,'rem',{get:()=>new Proxy(()=>{},{
193+
apply:(_,__,args)=>($._list=$._list.filter(({prop,fn,r})=>(r=fn!==args[0],!r&&node.removeEventListener(prop,fn,false))))
194+
})}),
195+
node
213196
)};
214-
$.new=function(v,$2){return ($2=eval(`(${this.toString()})`),$2._this=v||document.documentElement,$2.new=eval(`(${this.new.toString()})`),$2.create=new Proxy({},{get:_get}),$2.bind=v=>($this._this=v,this),$2)};
197+
$.new=function(v,$2){return ($2=eval(`(${this.toString()})`),$2._this=v||document.documentElement,$2.new=eval(`(${this.new.toString()})`),$2.bind=eval(`(${this.new.toString()})`),$2.create=new Proxy({},{get:_get}),$2)};
198+
$.bind=function(v){$this._this=v;return v};
215199

216200

217201

218202

219203

220-
var $2 = $.new(test4);
204+
let $2 = $.new(test4);
221205
$2().txt='hello';
222206

223-
var $3 = $2.new($2());
207+
let $3 = $2.new($2());
224208
$3().txt='bye';
225209

226210

227-
211+
}
228212
</script>
229213

230214

0 commit comments

Comments
 (0)