模块化

作者: 余继莲 | 来源:发表于2017-02-16 22:35 被阅读0次

RequireJS官网:www.requirejs.org

为什么使用RequireJS

1、有效的防止变量冲突
2、解决不同的js文件之间的依赖
3、可以写出模块化的代码

RequireJS常用的方法:

1、requirejs.config
2、requirejs
3、define

入口文件(主模板):
data-main=""

  <script src="js/require.js" data-main="js/main"></script>

主模板main.js如何编写呢?

//配置require 定义别名
requirejs.config({
        //baseUrl: "js/lib",            //改变基目录(baseUrl)
        paths:{                //指定模块的加载路径
            定义模块别名:'引入依赖的js文件的加载路径'
        },shim{        
//专门用来配置不兼容的模块。具体来说,每个模块要定义
//(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
//(2)deps数组,表明该模块的依赖性。        
            'jquery.scroll': {
                  deps: ['jquery'],
                 exports: 'jQuery.fn.scroll'
             }
        }
})

//引入模板
requirejs(['引入依赖模块名','valuedata'],function($,valuedata){        //回调函数
        console.log(valuedata.show);
})

valuedata.js 如何定义一个模块

1、没有依赖项可以直接写函数,有依赖模块define第一项参数必须为数组
2、依赖模块名:·text!review.txt,image!cat.jpg textimage插件,则是允许require.js加载文本和图片文件。

define(['引入依赖模块名'],function(//形参){
    return {
        show:function(){
            return 2;
        };
    }
})

相关文章

  • ES6学习笔记 II

    模块化 注意:模块化需要放到服务器环境使用模块化: 定义模块化如下 export export const a =...

  • 前端开发——模块化(css模块化开发)

    掌握模块化开发的思想是我们进行模块化开发的基础。他有以下几部分组成: 模块化开发的优势 css模块化 css模块化...

  • Node.js模块化学习

    模块化的基本概念Node.js 中模块化npm与包模块的加载机制 模块化的基本概念 什么是模块化 模块化是指解决一...

  • webpack基础笔记

    webpack基础 1.前端工程化 实际的前端开发: 模块化:(js的模块化,css的模块化,资源的模块化) 组件...

  • 模块化开发

    js模块化开发vue模块化开发

  • Vue前端工程化

    1.模块化的分类 A.浏览器端的模块化 B.服务器端的模块化 C.ES6模块化 小结:推荐使用ES6模块化,因为A...

  • 前端工程化

    1.模块化的分类 A.浏览器端的模块化 B.服务器端的模块化 C.ES6模块化 小结:推荐使用ES6模块化,因为A...

  • vue5

    es6新内容 class 解构赋值 扩展对象 模块化 什么是模块化 模块的作用 怎么实现模块化 模块化的标准 Co...

  • Vue基础教程之-组件核心概念(四)

    一、模块化 1.1 为什么需要模块化 没有模块化的世界:全局变量污染、难以管理的依赖。常见的模块化标准:Commo...

  • vue项目基建

    路由模块化 , 高频全局组件模块化 权限

网友评论

      本文标题:模块化

      本文链接:https://www.haomeiwen.com/subject/sjxkwttx.html