JavaScript - 前端MVC

时间:2017-08-30 11:22:02

标签: javascript jquery css django

我的实际问题在这里:

我想知道(beargrylls.com)是否使用Django或它的软件包。或者其他一些框架。还是自定义框架?此外,如果您查看网站(beargrylls.com),您会发现它使用了大量的paralax滚动,滑块和炫酷的动画。这是定制的还是另一个框架/插件/什么?

如果在beargrylls.com找到了一个很棒的网站(awwwards.com)。我熟悉Laravel使用的MVC模型。所以我知道基础知识。但我发现(beargrylls.com)在其脚本中使用了某种路由!?

我还发现重要的是网站的脚本和entite css以内联HTML加载。因此没有HTTP请求,除了图像

之外没有要加载的文件

哪个框架/插件编译了这个?

示例:

  , Route = function t() {
    classCallCheck(this, t);
    var e = new Router({
        xhr: !0
    });
    e.get("/", HomeController),
    e.get("/about", AboutController),
    e.get("/television", TelevisionController),
    e.get("/live", LiveController),
    e.get("/experiences", ExperiencesController),
    e.get("/socialwall", SocialwallController),
    e.get("/adventurers", AdventurersController),
    e.get("/termsofuse", TermsofuseController),
    e.get("/faqs", FaqsController),
    e.get("/signup", SignupController),
    e.error(ErrorController),
    e.run()
}
  , App = function t() {
    classCallCheck(this, t),
    Support.init(),
    index.TopWhenRefresh(),
    new Route
};
new App;

另一个增加我怀疑的例子可以在它的createClass函数或类中找到。它可以创造课程。

this.backgroundWrap = index.Geb.id("h-header-background-wrap"),
this.centerWrap = index.Geb.id("h-header-center-wrap"),
this.foregroundWrap = index.Geb.id("h-header-foreground-wrap"),
this.titleWrap = index.Geb.id("h-header-title-wrap"),
this.introTxt = index.Geb.id("h-intro-txt"),
this.introLine = index.Geb.id("h-intro-line"),
this.introVideo = index.Geb.id("h-intro-video"),
this.introScroll = index.Geb.id("h-intro-scroll"),
this.nav = index.Geb.class("nav")[0],
this.progress = index.Geb.id("h-intro-progress"),
this.scrollLineWrap = index.Geb.id("h-header-scroll-line-wrap"),
this.scrollTxtWrap = index.Geb.id("h-header-scroll-txt-wrap"),
this.stickyBurger = index.Geb.id("sticky-burger"),

所以在我看来几乎整个网站(路由,元素类等)都是通过这个脚本创建的。我甚至在这里看到一些mailchimp标签。

由于/static/等媒体文件夹的一些链接,我查看了Django框架。

1 个答案:

答案 0 :(得分:-2)

Penryn的起动

用于Web开发的入门套件。

  1. 泊坞
  2. Browsersync
  3. PHP 7.1.8
  4. PostCSS
  5. Css Nano
  6. ES2015
  7. ESLint
  8. 汇总
  9. Uglify JS 3
  10. SKYLAKE微架构
  11. https://github.com/ariiiman/penryn-starter

    SKYLAKE微架构:

    这是一个名为 Skylake 的轻型JavaScript库:

    https://github.com/ariiiman/skylake

    示例:

    const animation = new S.Merom('.element', '3dy', 0, 100, 1000, 'Power4InOut')
    animation.play()
    animation.reverse()
    

    beargrylls.com上的Google Devtools的“来源”标签中也可以找到类似的功能:

    this.tlImg.from(this.background, "3dy", 10, 0, 2e3, "ExpoOut")
    

    另外,在脚本中可以找到litlarally:

    scroll: {
        throttle: !0,
        skylake: "Scroll"
    },
    

    但我不太清楚这实际上是做什么的。我无法解释路由类或任何类似的东西。但它确实使用了这个Skylake库。

    在这些网站上可以找到相同的代码结构:https://www.aristidebenoist.com/(Skylake的作者)和http://www.jennyjohannesson.com/

    虽然我不认为这些网站正在使用Skylake。或者只是使用其他变量或其他东西。但是这个:

                  , App = function e() {
                    classCallCheck(this, e),
                    Support.init(),
                    index.TopWhenRefresh(),
                    new Router({
                        xhr: !0
                    })
                };
                !function(e) {
                    new App
                }();
            }
            )();
    

    与beargrylls.com上的完全相同

    http://www.jennyjohannesson.com/

    上也可以找到几乎完全相同的Route类