For example, in the remote webpage, there is a snippet of code like this:
<script>
function foo(){
this.bar = 0;
}
In my greasemonkey script, I want to create an object of this class:
var _foo= unsafeWindow['foo'];
new _foo();
Then I got an Illegal Value error.
Here's how to do it:
var _foo = eval('(' + unsafeWindow.foo.toSource() + ')');
var x = new _foo();
This workaround may be required due to the different security zones or sandboxing that Greasemonkey does, though I'm not entirely sure.
Related
I am trying to use require.js to load my modules dependencies and so far it is working, but I have a doubt. I've created a little function to test the modules and placed it in a file called panelTest.js:
define(['./panel/View', './panel/TitleView'], function(View, TitleView) {
return function test(container) {
// main view
var panel = new View(container, 'main');
var panelTitle = new TitleView(panel.getContainer(), 'main-title');
panelTitle.setTitle('Properties Panel');
//panelTitle.addCss('pjs-panelTitle');
panel.addView(panelTitle);
// sections
var top = new View(panel.getContainer(), 'top');
panel.addView(top);
var middle = new View(panel.getContainer(), 'middle');
panel.addView(middle);
var bottom = new View(panel.getContainer(), 'bottom');
panel.addView(bottom);
};
});
In the html that uses the modules I included this script tag as shown in the require.js documentation to load panelTest.js.
<script data-main="panelTest.js"
src="require.js"></script>
My question is how can I call the test function from outside the module, since the container parameter it is supposed to come from outside the module.
You have to access the module through the appropriate channels provided by RequireJS. You could do it like this in a script tag that appears after the one that loads RequireJS:
require(['panelTest'], function (panelTest) {
panelTest(/* some value */);
});
Given the code you show, your panelTest module does not seem to really make sense as a "main module" so I would not put it as data-main.
If you want to use it from anther module, put the module in its own file and define it like this:
define(['panelTest'], function (panelTest) {
panelTest(/* some value */);
});
I am currently testing a module in isolation using proxquire to overwrite a require of this module.
Overwriting a path of a require works fine with proxyquire. For example:
var bar = require('./bar');
But can you use proxyquire also to overwrite just a specific function of a module which is required in the module to test? So something like:
var bar = require('./foo').bar();
I need to stay at proxyquire for this since I am using it for mocking a http-request happening in another layer of the architecture. But in case of the test I need to mock the time for "now" in the module as well.
So currently I have this:
var uraStub = sendMockRequest(paramListOfCheckin, queryList);
var setNowStub = function(){ return 1425998221000; };
var checkin = proxyquire('../src/logic/logicHandlerModules/checkin', {
'../../persistence/ura' : uraStub,
'./checkin.setNow' : setNowStub
});
checkin.checkin(...)
The implementation of setNow is:
var setNow = function(){
return new Date().getTime();
};
var checkin = function (...) {
var now = require('./checkin').setNow();
Obviousley './checkin.setNow' : setNowStub in proxyquire doesn't work, since this is the wrong path. But using './checkin'.setNow() : setNowStub also doesn't work because of wrong syntaxis in the object-definition.
Any suggestions?
Thanks in advance!
What you are looking for is the noCallThru() and callThru() methods. https://github.com/thlorenz/proxyquire#preventing-call-thru-to-original-dependency
By default proxyRequire will call through to the mocked dependency which will allow you to pick the methods that you want to overwrite with your own custom function.
So if a dependency in the path '../foo' has a method bar() and fooBar() you would be able to mock out just bar by doing.
proxyquire.callThru();
var fooFunc = proxyquire('../foo', {
bar: () => return 'bar'
})
Now bar() will hit your custom overwritten funtion while fooBar() will be called as normal.
I'm trying to split some client-side-only code into several files in a Derby.js project. It has to be client-side only since it's interacting with the TinyMCE editor. So I tried:
app.ready(function(model) {
var tiny = derby.use(require('../../lib/app/TinyMCE'))
//other client-side code
}
and put the following into lib/app/TinyMCE.js:
var derby = require('derby')
module.exports.decorate = 'derby'; //because before I got an 'decorate' is undefined error...
module.exports.TinyMCE = function() {
//code
}
But now I'm getting a object is not a function error.
Am I even on the right track? I also considered putting the code in the public directory, but the cache-expiration of one year makes this rather inconvenient.
Also, is there really no isServer or isClient method to query?
Okay, I don't know whether that's a good way, but I got it working:
module.exports = tiny
tiny.decorate = 'derby'
function tiny() {
//code
}
For testing purposes I am trying to remove some amd modules and reload updated versions from the server - with the goal of not refreshing the browser.
I am currently doing the following but the browser still doesn't reload the items from the network.
var scripts = document.getElementsByTagName('script');
var context = require.s.contexts['_'];
for (var key in context.defined) {
if(key.indexOf("tests")>-1){
requirejs.undef(key);
for (var i = scripts.length - 1; i >= 0; i--) {
var script = scripts[i];
var attr = script.getAttribute('data-requiremodule')
if (attr === key){
script.parentNode.removeChild(script);
}
}}
It deletes the references from the context and removes the script tags successfully.
But alas...
Does anyone know the mechanism to clear all the references from requirejs?
Any help much appreciated
We are currently trying out this implementation:
require.onResourceLoad = function(context, map)
{
require.undef(map.name);
};
No issues has surfaced so far.
Edit: IE doesn't care much about this fix. Chrome and FF is fine however.
Also, you should try live-edit in PhpStorm. Works like a charm. A demo can be seen here. Chrome only though.
this answer is similar to the user1903890 but i think its easy to follow making other implementation.
Basically we have to encapsulate in an init function the main.js requirejs controller specified in our index.html. Once it's defined, then we call to this init function to init requirejs normally
function init_requirejs(){
console.log("--------------------------- INIT requirejs:");
require([ "helpers/util"], function(util) {
var count=0;
$('#content').empty();
$('#content').append("<input type='button' id='increment_button' value='click to increment the counter'>");
$('#content').append("<h1 id='the_counter'>0</h1>");
$('#content').append("<br><br><input type='button' id='init_button' value='click to initialize requirejs files'>");
$('#increment_button').on('click', function(){
count++;
$('#the_counter').text(count);
});
$('#init_button').on('click', function(){
end();
init_requirejs();
});
util();
});
};
init_requirejs();
Also we need and use the require.onResourceLoad function to store all the files that participate in the requirejs app
var all=[];
require.onResourceLoad = function (context, map, depArray) {
all.push(map.name);
};
And we need a reset requirejs configuration function to delete the actual instance of requirejs, we will do it with the require.undef function:
function end(){
console.log("--------------------------- END requirejs:");
all.map(function(item){
require.undef(item);
});
};
That's all!
Later from our code we can force the reload app without reload the browser only calling to end() function and init_rquirejs() function. For example inside a jquery click event:
$('#init_button').on('click', function(){
end();
init_requirejs();
});
The code of the demo is in
https://github.com/juanantonioruz/requirejs-force-reload
And an online version
https://dl.dropboxusercontent.com/u/8688858/requirejs-force-reload/project.html
I hope this solution work for you!
Juan
What a crappy title. Maybe someone can edit it for me. Here's the scoop:
I need to work in jQuery no-conflict mode, but I'd still like to take advantage of the $ shortcut, so all of my functions etc are defined within the typical closure of (function($){ ... })(jQuery);
All this is defined in an external source.js file that is included at the top of my HTML web page.
A little later on, I need to add some inline <script> that uses one of the utility functions I defined within the closure. Obviously I've namespaced myself into a box and can't access that function.
What's the right pattern to use here?
To control how much and what you expose in the global namespace, it is custom to expose what you need through one global object, usually in all capital letters.
FOO.module1.init();
FOO.module2.init();
You would do this by making sure FOO exists, and if it doesn't: create it.
var FOO = this.FOO || {};
The same for your module namespaces:
FOO.module1 = FOO.module1 || {};
and then inside of the anonymous function, expose what you want.
Complete example
module1.js:
var FOO = this.FOO || {};
FOO.module1 = FOO.module1 || {};
(function ($) {
var my, local, data;
function init() {
// use my, local and data here.
}
FOO.module1.init = init;
}(jQuery));
module2.js:
var FOO = this.FOO || {};
FOO.module2 = FOO.module2 || {};
(function ($) {
var some, other, data;
function init() {
// use some, other and data here.
}
FOO.module2.init = init;
}(jQuery));
controller.js:
FOO.module1.init();
FOO.module2.init();
Magnar's answer is the way to go for anything complex. But just for the sake of completeness, for something very simple you can just make it global like this:
$.noConflict();
(function($){
window.doSomething = function(){
$("body").css("background-color","red");
}
})(jQuery);
doSomething();
by adding the function to window it becomes global.
http://jsfiddle.net/cxTYV/