对成功网站的JS非常失望

Very Disappointed with JS from successful websites

本文关键字:非常 JS 成功 成功网 网站      更新时间:2023-09-26

我已经学习Web开发大约一年了。然后我开始应用我在网站上学到的东西(我还没有完成)。不幸的是,当我保存一些成功的网站(如亚马逊,Facebook和其他一些网站)的JS和HTML文件时,我对编写JS的完全不同的方法感到震惊。很难阅读和理解。问题:

  1. 我了解到的是,OOP只是在某些情况下是必需的,但是大多数专业网站在其JS文件中几乎到处都使用OOP?
  2. 为什么他们从不给对象和函数起有意义的名字?
  3. 似乎他们正在以最困难的方式编写JS。 我说的对吗? 但为什么呢?
  4. 这是否意味着为了制作一个成功的网站,JS必须以同样的复杂性编写???

我实际上已经学习了有关JS的所有知识,并且非常清楚由于DOM使用不当而会出现的性能问题。但是这些JS文件真的让我失望了。 以下是一些镜头:

Array)for(var c=0;c<a[b].length;c++)a[b][c]();a[b]=!0},add:function(b,c){for(var e=1,f=function(){--e<=0&&g(c)},h=b.length;h--;)a[b[h]]!==!0&&((a[b[h]]=a[b[h]]||[]).push(f),e++);f()}}},m=function(a){a=a||{};this.context=a.context||d;this.once=a.once||!1;this.async=a.async||!1;this.observers=[];this.notifyCount=0;this.notifyArgs=[]};m.prototype={notify:function(){this.notifyCount++;if(!(this.once&&this.notifyCount>1)){this.notifyArgs=[].slice.call(arguments);for(var a=0;a<this.observers.length;a++)this._run(this.observers[a])}},
observe:function(a){if(e(a))if(this.once&&this.isNotified())this._run(a);else return this.observers.push(a),this.observers.length-1},remove:function(a){return a>-1&&a<this.observers.length?(this.observers[a]=function(){},!0):!1},boundObserve:function(){var a=this;return function(){a.observe.apply(a,arguments)}},isNotified:function(){return this.notifyCount>0},_run:function(a){var b=this.notifyArgs,c=this.context;this.async?g(function(){a.apply(c,b)}):a.apply(c,b)}};var p=function(){var a={},b=0,k=
{},o=n(),p={},i=function(a){this.data={name:"nav:"+b++,group:"rcx-nav",value:null,result:null,immediate:!0,process:!1,override:!1,resolved:!1,watched:!1,context:k,when:[],iff:[],filter:[],observe:[],stats:{defined:c(),resolved:-1,buildStarted:-1,buildCompleted:-1,callCount:0,executionTime:0}};for(var e in a)a.hasOwnProperty(e)&&(this.data[e]=a[e]);if(this.data.name.indexOf("]")>-1&&(a=this.data.name.split("]"),a.length===2&&a[0].length>1&&a[1].length>0))this.data.name=a[1],this.data.group=a[0].replace("[",
"")};i.prototype={getDependencyNames:function(){for(var a=[].concat(this.data.when,this.data.filter) 

您可以从任何网站下载此类文件。我非常希望看到有关这个现实生活问题的任何解释。提前非常感谢

也许你应该看看 https://github.com/mishoo/UglifyJS

并阅读有关JavaScript压缩的信息。

这种丑陋化是为了提高性能,它是由工具完成的,当然我们不会那样编写 JS。

也许你需要阅读更多关于javascript编程的信息:

  • https://addyosmani.com/resources/essentialjsdesignpatterns/book/
  • https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.jp098cpni

干杯

这是一个

缩小的文件,例如,它不是以这种方式创作的,而是从另一个源文件生成的。

此外,许多站点使用一些框架和/或预编译器来生成(至少)部分代码。你无法真正从JS判断你可以下载它是如何编写的。

专业网站之所以有看起来像这样的JavaScript文件,是因为它们被缩小了。

这减少了传输时间,因为文件将小得多,并且意味着解析可以更快地开始。

开发人员使用的文件看起来完全不同