jasonmcaffee / modulus Goto Github PK
View Code? Open in Web Editor NEWDrop dead simple module definition and dependency management library.
Drop dead simple module definition and dependency management library.
for shim config, it is convenient to write out the config for runtime.
var modulusConfig = {
shim:{...}
};
modulus should check for a runtime config when init is called, and merge that config in with any other configs.
IE8 does not support the global functions option, e.g.
function moduleA(moduleB){
}
because global variables are not enumerable.
e.g.
function moduleA(){}
for(var key in window){
console.log(key); //would not print 'moduleA' in IE8
}
We could potentially fixing this by adding a config option:
/**
* When set to true, will attempt to fix ie8 issue with global vars not being enumerable, by registering modules
* as they are requested by first checking if there is
*/
globalModuleFunctionsMode: false,
And attempt to register modules as they are requested, instead of registering them all at once.
if context is not supplied via the config, do not scan the window for potential functions.
shim config should still be called though:
_findAndRegisterModules:function (){
var foundModuleFunctions = this._findModuleFunctions();
var foundModules = this._createModulesFromFunctions(foundModuleFunctions);
if(this.shim){
var shimModules = this._createModulesFromShim();
foundModules = shimModules.concat(foundModules);//foundModules.concat(shimModules);
}
this._registerModules(foundModules);
}
Allow excluding certain modules (and module's dependencies) in the build dist configuration.
dist:{
files:{
'./dist/testProject/pageOne.js':{
dependencies:['pageOne'],
excludes:['someModule']
}
}
},
Currently the folder that the dist file config points to must exist.
Make is so that the dir is created if it doesn't exist.
Provide a build option to include any other js files.
Should be at the file level.
modulus.build({
dist:{
files:{
'./dist/someFile.js': {
include:[
{
path: './src/vendor/metrics.js',
locationInDistFile: 'bottom' //place at the bottom of built file
}
]
}
}
}
});
allow for inversion of control by providing a map configuration.
map:{
requestsFor:{
'moduleA':{
from:{
'moduleB':{
}
}
}
},
requestsFrom:{
'moduleB':{
for:{
'moduleA':{
shouldGetThisModule:{
'moduleB':{
//any configuration overrides
}
},
//or
executeThisFirst: function(moduleA){
}
//...
}
}
}
}
},
Third party libraries which don't use modulus formatting for module definitions need to have a shim configuration.
e.g.
modulus.init({
shim:{
'$': {
dependencies: [],
export: '$'
}
}
});
See Shim Build Config: #2
Allow for modules to be asynchronously downloaded at runtime.
function moduleA(asynchModuleB){
}
moduleA.module = {
params:{
asynchModuleB: 'http://www.example.com/js/moduleB.js'
}
}
or
modulus.config({
paths:{
'asynchModuleB':'http://www.example.com/js/moduleB.js'
}
});
should only be 10-15 lines of code.
just write a script tag in the head and listen for load.
Allow module registration to happen without initializing any modules.
Ensure that once a module is registered, it can't be re-registered (to help prevent issues with globally defined functions)
Alternatively, require and define could be the same function:
require when no function name give, define when function name given.
modulus(function(moduleA){
});
modulus(function moduleB(){
}, {metadata});
//shortcut
m(function moduleA(){
})({
autoInit:true
});
or just the old commonjs-similar way
modulus.define(function moduleA(moduleB){
return {
prop1: 123 + moduleB.prop1
}
}, {autoInit:true}); //metadata is second param
modulus.define(function moduleB(){
return {
prop1: 1
};
});
Third party libraries which don't use modulus formatting for module definitions need to have a shim configuration.
e.g.
modulus.build({
shim:{
'$': {
path:'src/vendor/jquery.js',
dependencies: [],
export: '$'
}
}
});
Minification will rename param names, remove function names if the named function is passed into another function, etc. and this messes with modulus.
Provide an api similar to requirejs which the build engine can use during build.
e.g. modulus.build({protectAgainstMinification:true})
m('moduleName', ['dependencyName1', 'dependencyName2'], function(dep1, dep2){...}, {metadata});
Some may feel that global module functions are too risky, and opt to use a namespace instead.
Need to finish implementing _findModuleFunction (pass it the configured context)
Also _createModuleFromFunction needs to figure out the function name based on a syntax like:
var myContext = {};
myContext.moduleA = function (moduleB){};
When a module is registered, make sure that all its metadata is included.
e.g. _createModuleFromFunction should return object with all metadata.
This is not needed.
lib/modulus.js _recursivelyFindDependencies needs detection for circular dependencies.
What I would like is logic to detect that there is a circular dependency, and break out of recursion when it's detected.
e.g. moduleA depends on moduleB which depends on moduleC which depends on moduleA.
I haven't run into an issue with circular deps before, but I think it's a valid issue. http://stackoverflow.com/questions/4881059/how-to-handle-circular-dependencies-with-requirejs-amd
in the async-loading-spec, i found an issue when implementing fakeWindow for another ie8 bug (cant delete window properties)
if backbone and underscore aren't assigned to fakeWindow, the require for Backbone is never resolved.
it may be an exception that is getting swallowed...
investigate further
Support modulus.on('event', function(){...})
especially to allow custom handling of modules as they are registered
modulus.on('registerModule', function(moduleMetadata){
if(moduleMetadata.isWidget){ ...}
});
if a module is defined twice during runtime, there can be issues, so provide detection.
var context = {};
context.moduleA = function(moduleB){}
context.moduleA = function(){}
we can probably facilitate this with getter setters or observers.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters
modulus.init({
_defineContextSetter:function(){
//by default use native. if devs want to polyfill, they can override this function.
}
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.