首页 > 将js模块化的问题

将js模块化的问题

(function(factory) {
    if (typeof define === 'function') {
        // 如果define已被定义,模块化代码
        define('sayHello', ['jquery'], function(require, exports, moudles) {
            factory(require('jquery')); // 初始化插件
            return jQuery; // 返回jQuery
        });
    } else {
        // 如果define没有被定义,正常执行jQuery
        factory(jQuery);
    }
} (function($) {
    console.log('init', $);
    $.sayHello = function() {
        console.log("Hello");
    };
}));

我的疑问在于
1.这个也属于自执行函数的一种写法吗?
2.factory是什么意思。
3.对这个的整个流程比较模糊
求大神帮助。。。。


1.是自执行函数的一种写法,2.factory是工厂的意思,就是工厂函数,看一下设计模式就知道是什么意思了,3.这个流程是用来支持多种模块化方式的,typeof define ==='function'是用来嗅探你的模块加载方式的,define是CMD规范的写法,typeof exportsexports.amd什么的都是一个道理,如果你引入了requirejs或者seajs,这些值就对应为function或者object,如果没引入就都是undefined,就乖乖地走else的流程。


1 (function(factory) {
2     //...
3 }(function($) {
4     //...
5 }));
  1. 是自执行函数;

  2. factory 是第一行那个函数的 形参,对应的 实参 是第三行的函数function($)...。自执行的是第一个函数,第二个函数是第一个函数的参数而已。


答案重置:

卧槽,手机版的sf真他妈神了,误点了删除按钮也没个提示就直接把我的答案给删了|_|

重新编辑答案:

这是一段不太典型的umd格式代码。

umd的目标很简单,就是希望这个库能够成功的运行在AMD, CommonJS以及普通的<script>标签加载的环境里。

常见的umd声明方式如下:

if( typeof define === "function" && define.amd ){
    //如果使用者的环境是`requirejs`加载器,那把该库的具体实现通过`define`关键字声明
    define(factory);
} else if( typeof module != "undefined" && typeof module.exports != "undefined" ){
    //如果使用者的环境是nodejs,或者webpack,browserify等加载器,那通过commonjs的模块方式暴露
    module.exports = factory();
} else {
    //最后如果使用者就是直接在html里通过<script src="xxx">的方式引入该库,那把该库的内容直接挂在window对象上 
    window["Sortable"] = factory();
}

factory就是你要开发的库的具体实现体

【热门文章】
【热门文章】