TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

PlainJS – Vanilla JavaScript Repository

210 点作者 shakes超过 7 年前

32 条评论

batat超过 7 年前
Yea, let&#x27;s bury jQuery again and make more &quot;helpers.js&quot; [1]<p><pre><code> export function extend(src) { var obj, args = arguments for (let i = 1; i &lt; args.length; ++i) { if (obj = args[i]) { for (let key in obj) { &#x2F;&#x2F; check if this property of the source object could be overridden if (isWritable(src, key)) src[key] = obj[key] } } } } </code></pre> or just add super-unique stuff to our classes [2]<p><pre><code> DragSelect.prototype.removeClass = function( element, classname ) { var cn = element.className; var rxp = new RegExp( classname + \&#x27;\\b\&#x27;, \&#x27;g\&#x27; ); cn = cn.replace( rxp, \&#x27;\&#x27; ); element.className = cn; return element; }; DragSelect.prototype.hasClass = function( element, classname ) { var cn = element.className; if( cn.indexOf( classname ) &gt; -1 ) { return true; } else { return false; } }; </code></pre> or write tons of boilerplate code like<p><pre><code> if (typeof element === &#x27;string&#x27;) { owner.element = document.querySelector(element); } else { owner.element = ((typeof element.length !== &#x27;undefined&#x27;) &amp;&amp; element.length &gt; 0) ? element[0] : element; } </code></pre> (mmm, it&#x27;s so vanilla)<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;oncode&#x2F;handorgel&#x2F;blob&#x2F;master&#x2F;src&#x2F;helpers.js#L56" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;oncode&#x2F;handorgel&#x2F;blob&#x2F;master&#x2F;src&#x2F;helpers....</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;ThibaultJanBeyer&#x2F;DragSelect&#x2F;blob&#x2F;master&#x2F;src&#x2F;DragSelect.js#L768" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ThibaultJanBeyer&#x2F;DragSelect&#x2F;blob&#x2F;master&#x2F;s...</a>
评论 #15332229 未加载
评论 #15331505 未加载
评论 #15331897 未加载
评论 #15331847 未加载
评论 #15335068 未加载
评论 #15336546 未加载
评论 #15332408 未加载
91bananas超过 7 年前
I still think jQuery&#x2F;UI, libs maintained by a <i>group</i> that has a vision, organization, etc. Is a better solution than pulling in a ton of shitty half hearted components, functions, what have you from a bunch of random developers and repos scattered across the internet. Bootstrap works because it is built by a team, solves a specific problem and solves it well. jQuery is the same thing.<p>I grant that the things linked from this site are useful and novel, but I don&#x27;t want to build a project sourcing things from 16 different developers when I could just bring in one library that does all of them, and might weigh a little more over the net.
评论 #15333233 未加载
评论 #15332768 未加载
tomcam超过 7 年前
Most cool! A couple notes.<p>Anyone maintaining a public-facing codebase should note that &quot;All functions work properly in IE 9 and above - most of them are compatible with IE 8.&quot; jQuery has compatibility going back much, much further. Users in third world countries with older computers are better served by jQuery.<p>jQuery has an enormous test suite, tons of documentation with examples, and unparalleled third-party support.
disconnected超过 7 年前
This is cute and all, but JQuery is slightly more than just a framework for accessing the DOM.<p>My JS is a bit rusty, but I remember that in JQuery I could do:<p>$(&quot;some selector&quot;).do_things()<p>And &quot;do_things&quot; would be done on all matching elements. For example:<p>$(&quot;li&quot;).addClass(&quot;foo&quot;)<p>Would add the class &quot;foo&quot; to all &quot;li&quot;. I could further refine the selector above to select only the &quot;li&quot;s I wanted of course.<p>With the &quot;plain js&quot; solution, you have to &quot;querySelectorAll&quot; and then iterate over each element.<p>Another example is &quot;ajax&quot; requests. In JQuery you have the general purpose &quot;ajax&quot; method, with simple &quot;success&quot; and &quot;failure&quot; callbacks, and configuration done via a standard JS object filled with all the necessary parameters (and this object could be reused for the most part, since most of the parameters don&#x27;t change). You can also chain ajax requests together with deferred objects. Simple, straightforward and useful.<p>With their proposed solution here, you have to faff around with the XMLHttpRequest object every single time you want to make a POST or a GET. Ugh. And if you need to chain a bunch of those together? Uuuuugh.<p>Yeah, you can put all of these things inside helper functions to hide the ugliness, but if you are going through all that trouble, you are essentially rewriting JQuery (or similar libraries), badly. If it is a one off thing, I guess you don&#x27;t need JQuery, but if you are rewriting most of these methods, you are crazy. Use a library, and trim it down to remove the stuff you don&#x27;t need (JQuery allows this, IIRC).<p>A final aside. One oft overlooked advantage of JQuery is that the &quot;$()&quot; method can be applied to anything, not just the DOM. You can create a JQuery object that encapsulates, say, an array. Then you can iterate with &quot;each&quot;, you can &quot;filter&quot;, etc. Also, you can easily trigger events on your objects with &quot;trigger&quot; that other interested parties can listen to them by setting up event listener with &quot;on&quot;. Useful to give your classes some Qt style signal&#x2F;slot semantics.
评论 #15332017 未加载
评论 #15332059 未加载
评论 #15331863 未加载
评论 #15332032 未加载
AndyKelley超过 7 年前
If you don&#x27;t have VanillaJS you can get it here: <a href="http:&#x2F;&#x2F;vanilla-js.com" rel="nofollow">http:&#x2F;&#x2F;vanilla-js.com</a>
评论 #15331539 未加载
评论 #15332745 未加载
评论 #15331186 未加载
gizmodo59超过 7 年前
jQuery has helped me tremendously in the past and continues to do so. Not everyone has to design a website like google.com and not everyone needs to take into consideration every byte that is loaded in a web page. A library that gives you a single way to do things that many browsers support in a less verbose form is just amazing tbh.<p>At the end of the day when you need to just get things done jQuery still shines. Does it produce spaghetti code? No, you are doing it. Does it become an enabler in spaghetti code? Yes. But not all the use cases are the same.
olavgg超过 7 年前
At my company we prefer using vanilla Javascript over all these (exhausting) frameworks! Especially many of the new features in Ecmascript 6 makes things much simpler. No more overusing bind(), template literals for building HTML and so on.<p>Recently I&#x27;ve missed the way you create DOM elements like you do with React.DOM so I created a simple proxy function like this:<p>let bai = {};<p>bai.DOM = function(){<p><pre><code> return new Proxy({}, { get: function(target, name){ return function(args, body) { let newEle = document.createElement(name); if(args){ let keys = Object.keys(args); for (let i = 0; i &lt; keys.length; i++) { newEle.setAttribute(keys[i], args[keys[i]]); } } if(body){ if(typeof body === &#x27;string&#x27;){ newEle.textContent = body; } else { newEle.appendChild(body); } } return newEle; } } })</code></pre> }();<p>With this you can create new DOM elements as following,<p>document.body.appendChild(<p><pre><code> bai.DOM.div( {&quot;id&quot;: &quot;message&quot;}, bai.DOM.p(null, &quot;hello world&quot;) )</code></pre> );
g00gler超过 7 年前
jQuery is really useful when it comes to DOM manipulation, obviously.<p>Without using any framework you&#x27;ll find yourself iterating over NodeLists all over the place.<p>ie, it&#x27;s much cleaner to write<p>$(&#x27;p&#x27;).css(&#x27;color&#x27;, &#x27;blue&#x27;);<p>Than<p>document.querySelectorAll(&#x27;p&#x27;).forEach(el =&gt; el.style.color = &#x27;blue&#x27;);<p>Also, Microsoft kinda screwed us by keeping IE 11 around until 2025.
评论 #15332425 未加载
评论 #15332279 未加载
throw2016超过 7 年前
There is an unfortunate trend of people running down jQuery indiscriminately.<p>Given millions of people used jQuery for years without issue it&#x27;s difficult to believe those who benefited are going to run it down publicly because they found something better.<p>The only people who would do this are those marketing something else. This is by far the worst part of tech forums, this kind of insidious marketing that seeks to &#x27;force obsolence&#x27; on software and entire groups of people happily using it because some are promoting their own thing.
austincheney超过 7 年前
Or... just learn the DOM api. It is only about 2 hours of practice and study: <a href="http:&#x2F;&#x2F;prettydiff.com&#x2F;guide&#x2F;unrelated_dom.xhtml" rel="nofollow">http:&#x2F;&#x2F;prettydiff.com&#x2F;guide&#x2F;unrelated_dom.xhtml</a>
评论 #15332854 未加载
cuu508超过 7 年前
I&#x27;ve found <a href="http:&#x2F;&#x2F;microjs.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;microjs.com&#x2F;</a> useful quite a few times.
mike-cardwell超过 7 年前
It took me less than 10 seconds to find an XSS on this website. Literally, the first place anybody would look worked.
atonse超过 7 年前
This is such a great idea.<p>I have been a web developer for 18 years, and kicking the jQuery habit has been one of the toughest.<p>Frameworks also still rely on them. I&#x27;m a full time ember developer and last I checked they&#x27;re trying pretty hard to drop the jQuery limitation (REALLY sorry to Ember devs if my info is outdated on this), but the ecosystem of ember&#x2F;non-ember addons surrounding it will prolong things even longer I&#x27;m sure.
projectramo超过 7 年前
It is late in the day to try to replace jQuery. Does PlainJS have components? Does it have bootstrap like functionality (i.e. columns)?
评论 #15331208 未加载
评论 #15331417 未加载
评论 #15331649 未加载
评论 #15331528 未加载
评论 #15331300 未加载
temporallobe超过 7 年前
I&#x27;m so tired of this argument. There&#x27;s no reason to drop jQuery for any of the reasons stated. Especially with modern JavaScript engines, the performance hit is negligible. Also, jQuery is especially optimized for complex DOM manipulation which Vanilla JS cannot do on its own. Sorry, but querySelectorAll is not the same as jQuery&#x27;s powerful selector engine, and you can&#x27;t chain thngs the same way either. Sure, it&#x27;s less relevant now than it once was and for minor projects you could probably get away with a no-library approach, but who are we kidding here? Most modern web apps and sites are extremely library and framework heavy. It&#x27;s complete bullshit to say otherwise. The only exception is of course for design-centric, static content web sites which tend to heavily lean on CSS for display logic. This article is just full of amateur and meaningless advice.
tomxor超过 7 年前
As someone who&#x27;s written a lot of DOM code, i&#x27;ve tried dropping jquery (and do) but selectively. You cannot drop it completely without great pain.<p>It&#x27;s true that the DOM interface has stabilised and is now mostly consistent cross browser, however the API is massively unwieldy in places, from excessively long method names to irritating asymmetric potholes.<p>TLDR; Jquery is not needed for cross browser now, it&#x27;s needed to make using the DOM API not so ridiculously verbose and long winded. You need to use jQuery today because: you want your DOM code to be 1&#x2F;5th the size, more legible, more debug-able.<p>I still use native methods where possible where there is little difference, especially when performance is a concern.
javascriptChris超过 7 年前
I agree jQuery isn&#x27;t really needed but at the same time it&#x27;s simpler for people who may not understand JavaScript fully of willing to look at boring web API docs to replicate some of the functionality.
fiatjaf超过 7 年前
See also <a href="https:&#x2F;&#x2F;svelte.technology&#x2F;" rel="nofollow">https:&#x2F;&#x2F;svelte.technology&#x2F;</a>, the magical disappearing UI framework.
EGreg超过 7 年前
Can someone make a lite version of jQuery?<p>Angular did that.<p>I think Zepto was that for a while.<p>Isn&#x27;t jQuery&#x27;s lite version already there, which drops Android support etc.<p>Why not serve that to correct browsers?
评论 #15331577 未加载
futurefriendly超过 7 年前
Read this thread but replace every mention of jQuery with &quot;table layouts&quot;, the parallels are striking.<p>jQuery has been a good friend for many years. It saved us from the drudgery of cross-browser support and gave us an enjoyable API for browser development.<p>Technology moves on, today&#x27;s browser APIs and tooling are light years ahead of what we had 11 years. You might not need jQuery, and that&#x27;s ok!
talindras超过 7 年前
This is just a fork of <a href="http:&#x2F;&#x2F;vanilla-js.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;vanilla-js.com&#x2F;</a>
alistproducer2超过 7 年前
I went to the site and I&#x27;m a little unclear of what its purpose is. Is it supposed to be a way to learn vanilla JS?
emodendroket超过 7 年前
I mean when does it stop being &quot;vanilla&quot;? jQuery is written in &quot;vanilla JS&quot; too.
评论 #15333906 未加载
tareqak超过 7 年前
Are there any kinds of dead code elimination tools for JavaScript? If &lt;link&gt; tags can take additional attributes &#x2F; query string parameters, the CDN be smart enough to only send down the required code.
stevebmark超过 7 年前
Can you imagine any other language &#x2F; ecosystem where you&#x27;re encouraged NOT to use any libraries of any kind? The web is a weird place.
manigandham超过 7 年前
jQuery usually falls back to native methods if the browser supports it. Also build systems can easily remove unused code (webpack + babel-minify does great with ES6 on the whole bundle), and you can even pick and choose the exact components you need from the jQuery npm package.
ausjke超过 7 年前
the issue is that I need bootstrap which requires jquery
sAbakumoff超过 7 年前
jQuery is here to stay. It will outlive react angular vue and whatever shiny framework you have been using.
woah超过 7 年前
With this article and these comments, I feel like I&#x27;ve been transported back in time 3-4 years.
MentallyRetired超过 7 年前
DHTML, the framework!
jordache超过 7 年前
who still uses jquery? to create usability mockups?
评论 #15331315 未加载
评论 #15331340 未加载
评论 #15331985 未加载
评论 #15333452 未加载
评论 #15332359 未加载
评论 #15331609 未加载
评论 #15332046 未加载
beager超过 7 年前
I think it&#x27;s a pretty amusing observation about the JS dev community to see some of the responses to this here. Some people are here for Irony Club, some people have no clue there&#x27;s an Irony Club meeting, and some people are opening up their jQuery wounds and bleeding all over the room.<p>One thing I&#x27;ll say about jQuery vs doing POJS (Plain-ol&#x27; JavaScript, pronounced <i>Poise</i>, heh) is that jQuery comes from a world where browsers sucked and build processes for JS were virtually non-existent. The market share of sucky browsers is much smaller now, and we have sophisticated build systems for JS. All of the benefits of jQuery (normalization, removing boilerplate, etc) can be had with vanilla plugins that you can put in your project and forget about.<p>The lingering damage of jQuery is that we have a bunch of jQuery devs in the world now who simply cannot write JavaScript. We&#x27;ve got to move past that.
评论 #15332561 未加载