zoukankan      html  css  js  c++  java
  • 云平台项目--学习经验--打包压缩工具requirejs

    requirejs是一个JavaScript模块加载器。适合在浏览器中国使用,也可以在其他脚本环境使用,它鼓励了代码的模块化。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
    如何加载RequireJS呢?
      假如项目中的JS都放在一个"script"目录下,例如有个index.html和一些script,则该布局如下:
      项目目录:
      ·index.html
      ·scripts/
        ·main.js
        ·helper/
          ·until.js
    添加require.js到scripts目录下,则该目录如下:
      ·index.html
      ·scripts/
        ·main.js
        ·require.js
        ·helper/
          ·until.js
    为了充分利用该优化工具,可将所有的scripts放到HTML外面,然后只引用RequireJS来请求加载其他script:
    可以只写一个main.js,通过它来加载你所需要运行的scripts,这可以保证你所需要的Scripts都是在这里加载的。
    例如:
    <!DOCTYPE html>
      <html>
        <head>
          <title>REQUIREJS</title>
          <script data-main="scripts/main" src="scripts/require.js"></script>
        </head>
        <body>
          <h1>test</h1>
        </body>
    </html>

    RequireJS以一个相对baseUrl的地址来加载所有代码,页面顶层<script>标签含有一个特殊的属性data-main,require.js用它来启动脚本加载过程,而baseUrl一般设置与该属性相一致的目录。下列示例中展示了baseUrl的设置:
    <script data-main="scripts/main.js" src="scripts/require.js"></script>
    baseUrl可以通过RequireJS config手动设置。如果没有显式指定config以及data-main,默认boseUrl包含RequireJS那个HTML页面所属的目录。

    实际应用中,可将项目库和第三方库分开,为一扁平结构。
    如:
      ·index.html
      ·js/
      ·app/ *项目库*
        ·sub.js
      ·lib/ *第三方库*
        ·jquery.js
        ·canvas.js
      ·app.js

    则index.html:
    <script data-main="js/app.js" src="js/require.js"></script>

    app.js:
    requirejs.config({
      baseUrl: 'js/lib',
      paths: {
      app: '../app'
      }
    });
    requirejs(['jquery', 'canvas', 'app/sub'],
    function ($, canvas, sub) {

    });

    在实际项目中,是这样的:
    ·web/
      ·default.html
      ·js/
        ·第三方库
      ·module_js/
        ·原生js
        ·main.js
    在main.js中,首部写法如下:
    require(["Log","Play"....],function(doc,inc,Log....){内容函数}); //注意没有后缀

    而在default.html中,首部写法如下:
    通过定义一个require:
    var require = {
      baseUrl: "module_js", //baseUrl
      urlArgs: '1.8.4',
      map:{
        "*":{
          css:"../js/css"
          }
        }  
    };
    require.paths={
      "jasmine":"../spec/jasmine-2.5.2/jasmine",
      "jasmine-html":"../spec/jasmine-2.5.2/jasmine-html",
      "runJasmine":"../spec/test/run",
      "jquery":"../js/jquery.min",
    ....................
    };

  • 相关阅读:
    进程与线程(二)(线程池)
    进程与线程(一)(基本定义和demo)
    SpringBoot的整合(二、整合redis)
    SpringBoot的整合(一、定时任务task)
    Thymeleaf的学习(二)(常用标签的使用方法)
    程序员常用单词词汇汇总
    程序员代码打字练习题库
    浅谈原型对象和原型链(源于学习整理笔记)
    JS中this的四种用法
    VS code自定义用户代码片段snippet
  • 原文地址:https://www.cnblogs.com/xizhu/p/9783908.html
Copyright © 2011-2022 走看看