Skip to content

Commit 6bd066d

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 2b96500 commit 6bd066d

File tree

1 file changed

+239
-0
lines changed

1 file changed

+239
-0
lines changed

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

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
2+
<style>
3+
div {border:1px solid lightgray;padding:10px}
4+
</style>
5+
6+
<div id=test></div>
7+
8+
<script>
9+
10+
var $=function(root,css,_,node,alias,set,get,v,r){return (
11+
node=(!css&&(css=root,root=this),root.querySelector(css)),
12+
alias={txt:'textContent'},
13+
get=(_,prop)=>(r=v=node[alias[prop]||prop],(typeof v=='function'&&(r=(...args)=>v.apply(node,args))),r),
14+
set=(_,prop,v)=>node[alias[prop]||prop]=v,
15+
new Proxy(node,{set,get})
16+
)}.bind(document);
17+
18+
19+
$('#test').txt=123
20+
console.log($('#test').txt);
21+
$('#test').style.color='red';
22+
23+
var tn=document.createTextNode('hello');
24+
$('#test').append(tn);
25+
26+
var n=$('#test').cloneNode(true);
27+
console.log(n);
28+
29+
</script>
30+
31+
32+
<div id=test2>
33+
<h3>test</h3>
34+
</div>
35+
36+
<script>
37+
38+
var $=function(root,css,_,node,alias,set,get,v,r){return (
39+
node=(!css&&(css=root,root=this),root.querySelector(css)),
40+
alias={txt:'textContent'},
41+
get=(_,prop)=>(r=v=node[alias[prop]||prop],(typeof v=='function'&&(r=(...args)=>v.apply(node,args))),r),
42+
set=(_,prop,v)=>node[alias[prop]||prop]=v,
43+
new Proxy(node,{set,get})
44+
)}.bind(test2);
45+
46+
47+
$('h3').txt='my-test'
48+
console.log($('h3').txt);
49+
</script>
50+
51+
52+
<div id=test3>
53+
<h3>test3</h3>
54+
</div>
55+
56+
<script>
57+
58+
var $=function(root,css,_,node,alias,set,get,v,r){return(
59+
$._list=[],$._this=document.documentElement,
60+
node=(!css&&(css=root,root=$._this),css||=':scope',root.matches(css)&&root||root.querySelector(css)),
61+
alias={txt:'textContent'},
62+
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+
72+
if(prop=='clone')return node.cloneNode(true);
73+
if(prop=='html')return node.innerHTML;
74+
if(prop=='on')return new Proxy(node,{set:(_,prop,v)=>($._list.push({prop,fn:v}),node.addEventListener(prop,v,false))});
75+
if(prop=='rem'||prop=='remove')return new Proxy(()=>{},{
76+
apply:(_,__,args)=>($._list=$._list.filter(({prop,fn,r})=>(r=fn!==args[0],!r&&node.removeEventListener(prop,fn,false))))
77+
});
78+
return (r=v=node[alias[prop]||prop],(typeof v=='function'&&(r=(...args)=>v.apply(node,args))),r)
79+
},
80+
set=(_,prop,v)=>node[alias[prop]||prop]=v,
81+
new Proxy(node,{set,get,getPrototypeOf(){return Node.prototype}})
82+
)};
83+
$._this=test3;
84+
85+
86+
var clone=$('h3').clone
87+
$().append(clone);
88+
89+
var fn = e=>console.log('hello');
90+
$('h3').on.click = fn;
91+
$('h3').rem(fn);
92+
93+
94+
</script>
95+
96+
97+
98+
99+
<script>
100+
101+
102+
103+
function _get(target,prop){
104+
105+
var datatype = v=>Object.prototype.toString.call(v).slice(8,-1).toLowerCase();
106+
var node = document.createElement(prop);
107+
108+
function set(...args){
109+
110+
args.forEach(arg=>{
111+
112+
var type = datatype(arg);
113+
set[type](arg);
114+
115+
});
116+
117+
return node;
118+
119+
}//set
120+
121+
122+
set.object = function(attr){
123+
124+
var keys = Object.keys(attr);
125+
keys.forEach(name=>{
126+
127+
if(name=='text'){
128+
var tn = document.createTextNode(attr['text']);
129+
node.append(tn);
130+
return;
131+
}
132+
if(name=='par'){
133+
var par = attr['par'];
134+
switch(par){
135+
case par===null : par=$._this; break;
136+
case par==='body' : par=document.body; break;
137+
case par==='head' : par=document.head; break;
138+
}//switch
139+
par.append(node);
140+
return;
141+
}
142+
if(name=='append'){debugger;
143+
node.append(attr.append);
144+
return;
145+
}
146+
if(name=='style'){
147+
if(typeof attr.style=='string'){
148+
node.style = attr.style;
149+
}else{
150+
for(var sname in attr.style){
151+
152+
node.style[sname] = attr.style[sname];
153+
154+
}//for
155+
}
156+
return;
157+
}
158+
159+
//if(name==='onclick')debugger;
160+
node[name] = attr[name];
161+
162+
})//for
163+
164+
}//object
165+
166+
167+
set.string = function(str){
168+
169+
var tn = document.createTextNode(str);
170+
node.append(tn);
171+
172+
}//string
173+
174+
175+
return set;
176+
177+
}//get
178+
179+
var node = document.createElement('div');
180+
$.create = new Proxy(node,{get:_get});
181+
//debugger;
182+
var div=$.create.div({append:$('#test3'),text:'helloworld',style:{color:'green',fontWeight:'bold'}});
183+
console.log(div);
184+
185+
186+
</script>
187+
188+
189+
190+
191+
<div id=test4>
192+
<h3>test4</h3>
193+
</div>
194+
195+
196+
<script>
197+
198+
var $=function $(root,css,_,node,alias,set,get,v,r){return(
199+
!$._list&&($._list=[]),!$._this&&($._this=document.documentElement),
200+
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})
213+
)};
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)};
215+
216+
217+
218+
219+
220+
var $2 = $.new(test4);
221+
$2().txt='hello';
222+
223+
var $3 = $2.new($2());
224+
$3().txt='bye';
225+
226+
227+
228+
</script>
229+
230+
231+
232+
233+
234+
235+
236+
237+
238+
239+

0 commit comments

Comments
 (0)