requirejs | 易学教程

JavaScript模块化的作用、原理、方案

阅读更多关于 JavaScript模块化的作用、原理、方案

一、模块化概念将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。二、模块化作用为什么要用模块化的JavaScript？因为在实际的开发过程中，经常会遇到变量、函数、对象等名字的冲突，这样就容易造成冲突，还会造成全局变量被污染；同时，程序复杂时需要写很多代码，而且还要引入很多类库，这样稍微不注意就容易造成文件依赖混乱；为了解决上面的的问题，我们才开始使用模块化的JS，所以说模块化的作用就是： 1、避免全局变量被污染 2、便于代码编写和维护三、模块化历程 1、普通写法（全局函数及变量）其实只要是不同的函数或变量放一起就是简单的模块，这样弊端很明显，就是变量容易被污染； var name = '卡卡'; function cat1(){ name = '年年'; } function cat2(){ name = '有鱼'; } 2、对象封装将整个模块放在一个对象里面，外部访问时直接调用对象的属性或者方法就行 var cat = { name:'卡卡', cat1:function(){ var name = '年年'; console.log(name); }, cat2:function(){ var name = '有鱼'; console.log

Embedded ember-cli project conflicts with RequireJS

阅读更多关于 Embedded ember-cli project conflicts with RequireJS

问题 I'm trying to embed an EmberJS application into a large portal application which uses extensively the RequireJS library. I'm using ember-cli to build the project. The built application consists of two files, dist/assets/vendor.js and dist/assets/myapp.js . The EmberJS application works after embedding it but the portal app's javascript breaks. After some research I've found out the problem is that vendor.js defines its own variables require , requirejs , requireModule and define which

RequireJS（一）

阅读更多关于 RequireJS（一）

为什么使用RequireJS 有效防止命名冲突声明不同js文件之间的依赖可以是我们的代码以模块化的方式组织 RequireJS常用的方法 reuqirejs.config 为模块设置别名 requirejs 将写好的模块进行引入 define 用来编写模块，相应地方进行引入实例： index.html:引入require.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body&g 大专栏 RequireJS（一）t; <script src="js/require.js" data-main="js/main"></script> </body> </html> main.js:引入jquery，validate.js定义别名 requirejs.config({ paths:{ jquery:'jquery-1.11.1' } }); //传入引入模块 requirejs(['jquery','validate'],function($,validate){ console.log(validate.isEqual(1,2)) }); validate.js:define定义模块 define(['jquery'],function($){ /

SignalR and RequireJS : client methods undefined

阅读更多关于 SignalR and RequireJS : client methods undefined

问题 I am trying to use SignalR (1.3) with RequireJS. My requireJs shim contains : "signalr.core": { deps: ["jquery"], exports: "$.connection" }, "signalr.hubs": { deps: ["signalr.core"], exports: "$.connection" }, I have a module : define(["jquery", "signalr.hubs"], function ($) { var Test = {}; Test.Init = function () { //Code init $.connection.myHub.client.ClientMethod = function () { console.log("Hello"); }; }; Test.Start = function () { return $.connection.hubs.start(); }; return Test; }); I

How to config webpack - libraryTarget + splitChunks + requaire in borwser

阅读更多关于 How to config webpack - libraryTarget + splitChunks + requaire in borwser

问题 I'm writing libs for web pages in JS and "compile" it by Webpack. I need import/require (like requirejs) these libs on pages that are in separate Webpack projects. Libs can be hosted on two separate paths - one is relative and the second is absolute. How I have to config webpacks to export libs that can be import/require in another project? I tried umd, amd, window, this, etc. libraryTarget and in all cases, responses for require is undefined or throw an error. My libs webpack config: const

Creating a reusable RequireJs library

阅读更多关于 Creating a reusable RequireJs library

问题 Given the following simplified scenario, how could I best construct my reusable component so that it is correctly consumable by another application, such that foo.js prints 23? Reusable Component: /home.js /main.js /stuff foo.js -- /home.js: define([], function () { return 23; } /stuff/foo.js: define(['home'], function (home) { console.log(home); } // prints 23 Consumer Application: /app.js /main.js /home.js /views template.html /bower_components /myReusableComponent /home.js /main.js /stuff

Creating a reusable RequireJs library

阅读更多关于 Creating a reusable RequireJs library

How use require.js to load jQuery with noConflict

阅读更多关于 How use require.js to load jQuery with noConflict

问题 I am trying to load jquery in noConflict mode by using require require.config({ paths: { 'jquery': 'libs/jquery-req', underscore: 'libs/underscore', backbone: 'libs/backbone' }, shim: { jquery: { init: function() { console.log('jq init'); var jq = this.jQuery.noConflict(true); jq.support.cors = true; return jq; }, exports: '$' }, backbone: { deps: ['underscore', 'jquery'], init: function() { console.log('b init'); }, exports: 'Backbone' }, underscore: { exports: '_' } } }); and use it like

Trouble debugging content scripts in a chrome extension using require.js

阅读更多关于 Trouble debugging content scripts in a chrome extension using require.js

问题 To load modules in the content scripts I'm using the following code (source http://prezi.com/rodnyr5awftr/requirejs-in-chrome-extensions/): require.load = function (context, moduleName, url) { var xhr; xhr = new XMLHttpRequest(); xhr.open("GET", chrome.extension.getURL(url) + '?r=' + new Date().getTime(), true); xhr.onreadystatechange = function (e) { if (xhr.readyState === 4 && xhr.status === 200) { eval(xhr.responseText); context.completeLoad(moduleName) } }; xhr.send(null); }; The trouble

Write a module that works both in nodejs and requirejs

阅读更多关于 Write a module that works both in nodejs and requirejs

问题 I wrote a small parser that currently works in node app, but wondering if there is a way that I can make a module that will work both in NodeJS app and client side app that uses requirejs? path/to/lib/index.js function someRandom(strings) { // we are doing something here return strings } exports.someRandom = someRandom; Right now I'm getting this in client-side Uncaught ReferenceError: exports is not defined I know that I can use node requirejs and then change the structure to use define but