requirejs（模块化）

最新推荐文章于 2023-03-09 11:11:51 发布
转载 最新推荐文章于 2023-03-09 11:11:51 发布 · 98 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yuyedaocao/p/10272029.html
文章标签：

#javascript #ViewUI

本文详细介绍了RequireJS模块加载器的使用与配置方法，包括如何设置基目录、定义路径别名，以及如何通过RequireJS加载和初始化多个模块。同时，文章还探讨了模块化编程的实践，如函数封装和依赖管理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<script src="../../dist/js/require.js" data-main="../../dist/js/main.js"></script>
main.js:
requirejs.config({
　　paths: {
　　　　jquery: 'plugins/jQuery/jquery-2.2.3.min',
　　　　icheck: 'plugins/iCheck/icheck.min'
　　}
});
requirejs(['jquery','icheck'],function($) {
　　$('.checkLine').iCheck({
　　　　checkboxClass: 'icheckbox_flat-blue',
　　　　radioClass: 'icheckbox_flat-blue',
　　});
});

require.config({

　　　　baseUrl: "js/lib",改变基目录

　　　　paths: {

　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"

　　　　}

　　});

 http://www.ruanyifeng.com/blog/2012/11/require_js.html
http://www.requirejs.cn/
 
https://gitee.com/qiaozh/codes/coamv6il59gw3n0kp421x49
 
所谓的模块化：将一个个函数封装在一个对象里，再将该对象赋值给一个全局变量
(function($){
var courseObj = {
　　name:'笑话',
　　set:function(){
　　},
　　openCourseBook:function(){
　　},
　　printCourse:function(){
　　}
};
　　window.courseService = courseObj;
})(jQuery || {})
或
var courseService = (function($){
var courseObj = {
　　name:'笑话',
　　set:function(){
　　},
　　openCourseBook:function(){
　　},
　　printCourse:function(){
　　}
};
   return courseObj;
})(jQuery || {})
 
当出现依赖关系：（缺陷：引入时被调用的需要放在前面）
<script src="./courseSkin.js"></script>
<script src="./courseTable.js"></script>
courseSkin.js：
(function($){
　　var skin = {
　　name:'ccc',
　　get:function(){
　　　　alert(this.name);
　　}
};
window.courseSkin = skin;
})(jQuery || {})
courseTable.js：
(function($,courseSkin){
var courseObj = {
　　name:'笑话',
　　set:function(){
　　　　alert(this.name);
　　},
　　openCourseBook:function(){
　　　　courseSkin.get();//调用courseSkin
　　},
　　printCourse:function(){
　　　　alert("printCourse");
　　}
};
window.courseService = courseObj;
})(jQuery || { },courseSkin)

转载于:https://www.cnblogs.com/yuyedaocao/p/10272029.html

模块化加载require和import详解
Garbrielle的博客
10-15 563
模块化加载 require 首先从理解层面来介绍require能带来的好处 正常编写 缺点：污染全局作用域，依赖关系不明显 index.html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="a.js"></script> </head> <body> <span>body
require模块化
爱学习的豪豪的博客
09-15 400
模块化规范 模块的使用一般分为导入和导出，定义一个模块需要导出出去在需要使用的地方导入。所谓模块化规范就是规定了模块的使用方式，不同的规范制定了不同的导入和导出的方式。常见的模块化规范有如下几种： AMD ​ 依赖前置：提前引入，文件开头把需要的模块一次性全部引入，后面直接使用 ​ 前期消耗比较大，后期执行效率很高 ​ 代表作是 require.js CMD ​ 按需加载：在代码执行过程当中需要一个模块了才去加载 ​ 整个曲线比较平缓 ​ 代表作是sea.js，但是现在已经很少使用了 ES6 Module
Require 模块化
chenjiaquan4321的博客
09-02 317
require 模块化的使用 1.引入require的javascript代码，<script data-main="js/main.js" src="js/libs/require.js"></script> src="js/libs/require.js" 是req...
Require.js(模块化)
weixin_44275692的博客
03-20 248
需要了解到的一些相关的数据 src中的require.js文件根据你的文件存放位置而定; 主入口文件路径同理; 主入口文件(主模块)的配置: require.config({ baseUrl : ‘…/js’, //这里写的是引用文件所在的根目录 // (目的就是为了下面的paths里面少写点代码) paths : { ‘jquery’ : ‘./jquery’ // (引用文件的路径) ...
require模块化语法
cjx177187的博客
07-30 425
利用require导入一个自己的模块mytool，然后调用mytool模块中的tool函数。后端运行时引入第三方js文件就用require()也可以用import(es6语法)新建一个mytool.js在里面导入我们想要调用的tool函数。node.js环境中的全局函数require。===>核心模块【node.js安装时就配置好的】【下载后使用】npmI模块名。注意填写正确路径，后缀名最好的写上。引入前端的js文件用import。node.js中有3种模块。...
seajs和requirejs模块化简单案例分析
10-16
本文将深入探讨Seajs和RequireJS这两款经典的模块化工具，并通过具体的案例来阐述它们的工作原理和使用技巧。 Seajs是一款基于CMD（Common Module Definition）规范的模块加载器，它允许开发者按需加载模块，避免了...
requireJS模块化实现返回顶部功能的方法详解
10-19
通过这种方式，RequireJS 模块化实现的返回顶部功能，不仅使代码结构清晰，易于维护，而且可以灵活地与其他模块组合使用，提升了代码的复用性。在实际项目中，可以根据需求调整配置，如滚动速度、显示位置等，以满足...
使用requirejs模块化开发多页面一个入口js的使用方式
10-19
本文主要介绍了在多页面应用中使用RequireJS进行模块化开发的实践方式，特别是如何只通过一个入口JavaScript文件来实现模块化的加载和管理。这里将详细介绍RequireJS的使用方法、原理和配置策略，以及如何通过该方式...
require模块化载入
weixin_30692143的博客
08-24 192
1,模块化require的载入步骤 　　1,一个总文件夹,,里面三个子文件夹 ,, 分别是 　　　　　　　　 　　　2,common 里面是放一些公共方法和自己封装的方法 js里面是放自己的业务逻辑js文件和一些模块化的入口和模块化的配置文件 lib里面放的是一些库..和框架的引入地址 　　3, list.html<!DOCTYPE html> <ht...
requireJs 模块化编程
u011472830的博客
09-22 405
立即执行函数写法使用”立即执行函数”（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。　　var module1 = (function(){ 　　　　var _count = 0; 　　　　var m1 = function(){ 　　　　　　//... 　　　　}; 　　　　var m2 = function(){
jquery-插件iCheck 使用
weixin_30797199的博客
04-05 127
这是一个兼容多种浏览器的插件 官网：http://icheck.fronteed.com/ 官方给出了很多的例子，我说一个使用的问题。 使用的时候，要放到window..load的外部。 页面html使用代码： 转载于:https://www.cnblogs.com/Blogs-Wang/p/6667736.html...
JS 中的require 和 import 区别
DxCaesar的博客
02-15 332
原文链接：JS 中的require 和 import 区别 在研究react和webpack的时候，经常看到在js文件中出现require，还有import，这两个都是为了JS模块化编程使用。CSS的是**@import** 1.ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 Require是CommonJS的语法，CommonJS的模块是对象，输...
node模块化 和 require原理
GMLGDJ的博客
03-09 1879
自执行函数是前端模块化的实现方案之一，在早期前端没有模块化系统的时代，自执行函数可以很好的解决命名空间的问题，并且模块依赖的其他模块都可以通过参数传递进来。第二个参数就是函数的结束部分。node中并没有选用他们来实现模块化，eval有一个致命的问题，就是容易被不属于它的变量所影响，而未使用new Function()的原因未知，如下str字符串中并没有定义a，但是确可以使用上面定义的a变量，这显然是不对的，在模块化机制中，str字符串应该具有自身独立的运行空间，自身不存在的变量是不可以直接使用的。
require.js模块化整理
qq_36458054的博客
05-25 373
本文是对自己JS学习的一个总结和一些碎片化学习的整理，主要是关于模块化的以及require.js。后面可能会写个小插件的或者源码阅读的博文。 如果有同学不幸看到本人的这篇博文，对此实属抱歉。你可以去看原著，我这里只是自己的整理。 文章参照阮一峰老师的博文：Javascript模块化编程（三）：require.js的用法 （注：原著真的很清楚详细，如果你看不懂有两种可能：zs不够或层次未到。我...
前端模块化——RequireJS
sleepwalker_1992的专栏
07-12 3114
为什么模块很重要？因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块。目前，通行的Javascript模块规范共有两种：CommonJS和AMD。AMD是"Asynchronous Module Definition"的缩写，即"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这...
requireJS多页面应用实例
weixin_34310369的博客
06-29 196
本文是requireJS的一些知识点的总结，配上多页面应用中的实例分析。 本案例的目录结构如下： requireJS API的三个主要函数：define（创建模块），require（加载模块），config（配置） 1、HTML文件中加载JS文件 page1.html内容如下： 1 <!DOCTYPE html> 2 <html...
RequireJS模块化加载
小石头
10-14 1308
RequireJS是什么 RequireJS是以一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。 Require的基本思想 通过define 方法，将代码定义为模块； 通过require 方法，实现代码的模块加载；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值