Require.js示例–设置时间2分钟

最新推荐文章于 2022-08-18 22:50:16 发布

dingshi7798

最新推荐文章于 2022-08-18 22:50:16 发布

阅读量203

点赞数

文章标签： javascript ViewUI

只需2分钟即可设置Require.js。 或下载下面的代码并使其正常运行。

我在下面添加了一些require.js更好的屏幕截图。

在GitHub上查看项目

什么是Require.js？

RequireJS是一个JavaScript文件和模块加载器。 它针对浏览器内使用进行了优化，但可以在其他JavaScript环境中使用，例如Rhino和Node。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。

速度 -异步JavaScript加载。
管理JavaScript依赖项，例如jQuery插件。
文件结构 Web应用程序文件。

当您变得不错时，您可以对执行特定Web应用程序功能的模块进行编码。
无需在HTML中包含100个脚本标签。
可以轻松地与构建脚本集成 。

它行得通吗？

是。下面的屏幕截图来自我的开发人员，其chrome开发人员工具处于打开状态（禁用缓存），因此速度自然很快，但即使在这里您也可以看到性能提高，这令人惊讶。

不需要

Web App结构

这是可用于Web应用程序的非常基本的结构。

根/
- index.html
- js
  - 供应商
    - [外部JavaScript文件和jQuery插件]
  - 应用程式
    - main.js
    - [您的模块和Web应用程序JavaScript文件]
  - app.js
- 的CSS
- img

HTML之前：

加载脚本的常规方法是…Modernizr放在头上，其余部分放在体内。

< !DOCTYPE html>

    My Web App
     rel="stylesheet" href="app/css/main.css"/>

HTML之后：

Require.js放在首位。干净利落。

 < !DOCTYPE html>

    My Web App
      rel="stylesheet" href="app/css/main.css"/>

app.js

该文件包含require.js的配置。如果更改目录结构，则需要匹配。我正在向您展示shim版本，您还可以从CDN加载jQuery 。

// Place third party dependencies in the lib folder
//
// Configure loading modules from the lib directory,
requirejs.config({
    "baseUrl": "js/vendor",
    "paths": {
      "app": "../app"
    },
    "shim": {
        "backbone": ["jquery", "underscore"],
        "bootstrap": ["jquery"]
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

main.js

该文件包含Web应用程序的依赖关系，一旦加载，您就可以使用任何喜欢的框架（例如Backbone或Angular）启动应用程序。

//Load Web App JavaScript Dependencies/Plugins
define([
    "jquery",
    "modernizr",
    "underscore",
    "backbone",
    "bootstrap"
], function($)
{
    $(function()
    {

        //do stuff
        console.log('required plugins loaded...');

    });
});