Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

表示看不懂test里面的例子,看了好几天 #51

Open
wozaixitangdengni opened this issue Jul 4, 2017 · 9 comments
Open

表示看不懂test里面的例子,看了好几天 #51

wozaixitangdengni opened this issue Jul 4, 2017 · 9 comments

Comments

@wozaixitangdengni
Copy link

刚入行没多久,看到一个前辈使用的modjs这个工具,然后想学习一下,发现他使用的方式和网上使用的方式有很大的不同,然后现在我两种方法都没有出现效果

它使用的方式是这样的:
define('modules/jquery/jquery-2.2.4.min', function(require, exports, module) {
然后这里面就跟着框架或插件的源码,也没有导出啥的,require, exports, module这三个参数也没有用到
});

页面引用:

<script src="__TMPL__Public/movies/js/mod.js"></script> <script type="text/javascript" src="__TMPL__Public/movies/modules/jquery/tool.js"></script> <script type="text/javascript" src="__TMPL__Public/movies/modules/jquery/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="__TMPL__Public/movies/modules/jquery/jquery.tap.js"></script> <script type="text/javascript" src="__TMPL__Public/movies/modules/jquery/pinchzoom.js"></script> <script type="text/javascript" src="__TMPL__Public/movies/modules/jquery/ajaxForm.js"></script> <script> //模块化 window.$ = window.jQuery = require('modules/jquery/jquery-2.2.4.min'); require('modules/jquery/jquery.tap'); require('modules/jquery/pinchzoom'); require('modules/jquery/tool'); require('modules/jquery/ajaxForm'); </script>

就是这样了,看着网上提供的例子,然后又看着他写的,就一脸的懵逼了

@hefangshi
Copy link
Member

window.$ = window.jQuery = require('modules/jquery/jquery-2.2.4.min')define('modules/jquery/jquery-2.2.4.min', function(require, exports, module)没有exports本身是冲突的,按说是获取不到值的

@wozaixitangdengni
Copy link
Author

@hefangshi 对啊,没有导出何来的引入,能不能加个qq好友,刚入行有很多都不懂,希望可以请教一下

@hefangshi
Copy link
Member

不用QQ了,可以调试一下看看,如果 require 的确没有值返回,那么可以确定用法有问题

@wozaixitangdengni
Copy link
Author

@hefangshi 那个前辈的代码我是真心搞不懂

demo文件中的代码:
define("demo",function(require,exports,module){
exports.sum = function(a,b){
return a+b;
}
})
//===============================================================
//mod.js与demo.js是同一级目录的

<script src="js/mod.js"></script> <script> require.resourceMap({ res:{ "js/demo.js":{ url:"js/demo.js" } } }); var obj = require("demo"); obj.sum(1,2); </script>

这个我是按照我的理解来写的,然后报了一个报错了:mod.js:141 Uncaught [ModJS] Cannot find module demo,意思是说demo没定义啥的吧,麻烦帮我看一下

@wozaixitangdengni
Copy link
Author

因为他没有使用require.resourceMap去设置 @hefangshi

@wozaixitangdengni
Copy link
Author

wozaixitangdengni commented Aug 16, 2017

我知道我不明白的地方在什么地方了,例如说:我定义了sum.js文件,在sum.js文件中使用define(
'sum.js', function(require, exports, module){
//------------------------------------------------------------

exports.sum = function (num1,num2) {
    return num1+num2;
}

//------------------------------------------------------------
});导出向对应的模块,但是我在需要引用的页面中只引入mod.js这个文件,然后使用require("sum.js");导入sum模块,使用时会报mod.js:141 Uncaught [ModJS] Cannot find module sum,这个错误,如果我使用script标签把sum.js文件加载的话,再按上面的引用,就不会报错,我不明白的地方就是:如果我使用script标签导入了sum.js这个文件的话,我直接就可以使用了,跟mod.js没多大关系啦,那我直接使用就好,还不用操心什么导入导出啥的。这就是我不明白的地方,还是我的用法有误啊,希望可以指出来
@hefangshi

@2betop
Copy link
Contributor

2betop commented Aug 16, 2017

mod.js 主要还是搭配 fis 一起用的,会自动注意依赖信息之类,如果你就单纯的用,使用成本可能有点高。

可以看下这个 demo https://github.com/fex-team/fis3-demo/tree/master/use-mod.js

@wozaixitangdengni
Copy link
Author

wozaixitangdengni commented Aug 16, 2017

花了些时间去看mod.js的源码,对照我昨天看的http://annn.me/how-to-realize-cmd-loader/ 这个案例,核心思想就是动态生成script标签,然后加载相对应的模块代码吧?

@T-baby
Copy link

T-baby commented Aug 18, 2017

把fis和mod结合用啦。。灰常简单的。。用fis自动给js包起来就好了。

@wozaixitangdengni wozaixitangdengni changed the title 表示看不懂test里面的例子,看了好几天,都快急哭了 表示看不懂test里面的例子,看了好几天 Dec 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants