导航:首页 > 编程语言 > helloseajs

helloseajs

 发布时间：2023-04-21 19:22:09

A. 加速包js怎么实现

基于 AngularJS 的拖拽指令
支持 GPU 加速
支持边界限制
支持设置拖拽把柄
移动端与 PC 端通用
使用
支持使用 script 标签或者 webpack、requirejs、seajs 调用：
script
调用

script src="lib/angular.js"></script>
<script src="dist/angular-drag.js"></script>
<script>
var app = angular.mole('app', ['angular-drag']);
</script>

webpack
安装
npm install angular-drag

调用
require('angular-drag');
var app = angular.mole('app', ['angular-drag']);

angular-drag 依赖 angular 与 jquery 两个全局模块
指令
drag 被拖拽的元素
drag-handle 触发拖拽的把柄（可选）
示例
简单的可拖拽元素
<迟睁侍早橘div drag class="example">

hello world
</div>
自定义拖拽的把柄
<div drag class="example">

<码吵div drag-handle></div>
<p>hello world</p>
</div>

B. seajs和requiejs的区别，和用gulp打包方法

从demo.html 引入一个入口c.js， c.js require-b.js , b.js require - a.js

代码如下：

c mole

[html] view plain print?
define(function(require, exports, mole) {

console.log("hello mole c");

require('b');

console.log("c finished");

});

b mole
[html] view plain print?
define(function(require, exports, mole) {
console.log("hello mole b")
var a = require('a');
console.log("b finished")
});
a mole
[html] view plain print?
define(function() {
console.log("hello mole a")
});

requriejs 的 html代码：

[html] view plain print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="require.min.js" data-main="c.js"></script>
</head>
<body>

</body>
</html>

执行结果：

ello mole aa.js:2

hello mole bb.js:2

b finishedb.js:4

hello mole cc.js:3

c finishedc.js:7

seajs的html代码：

[html] view plain print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="sea.2.3.js"></script>
<script>
seajs.use('./c');
</script>
</head>
<body>

</body>
</html>
执行结果：
hello mole cc.js:3

hello mole bb.js:2

hello mole aa.js:2

b finishedb.js:4

c finishedc.js:7

所以总结：
seajs是从上到下执行，
requriejs是把其中require的js全部加载完了，再往下执行。·

2、依赖的加载有所不同

在define中 requriejs加载了依赖就执行；而seajs在define中只是加载不会执行（如果要执行，需要用require()方法）

案例代码：

c.js模块

[html] view plain print?
define(['b'],function(require,exports,mole){
console.log("hello mole c");

console.log("c finished");
});
b.js模块
[html] view plain print?
define(['a'],function(require,exports,mole) {
console.log("hello mole b")

console.log("b finished")
});

a.js模块

[html] view plain print?
define(['b'],function(require,exports,mole) {
console.log("hello mole a")
});

seajs和requirejs的 html代码 和 1 中一样
执行结果：

seajs执行结果：

hello mole cc.js:2

c finishedc.js:4

requiresj的执行结果：

ello mole aa.js:2

hello mole bb.js:2

b finishedb.js:4

hello mole cc.js:2

c finishedc.js:4

总结： 在define书写中A：requirejs 加载了就执行，所以requirejs是预执行（在define中预先执行所有require依赖的js），RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会"停顿"1次, 完成整个过程是会比SeaJS要快. 预执行

B：seajs只是纯粹的加载依赖的文件，不执行就连console都不执行就是纯粹的“加载”，SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析,
这里耗费了时间, 因为这个特例中的模块巨大, 因此造成"停顿"2次的现象, 这就是我所说的SeaJS中的"懒执行".

在2的基础上 c.js代码为

[html] view plain print?
define(function(require,exports,mole){
require('b');
require('a');
console.log("hello mole c");

console.log("c finished");
});
执行结果都是一样

hello mole bb.js:2

b finishedb.js:4

hello mole aa.js:2

hello mole cc.js:4

c finishedc.js:6

3、取别名时requirejs默认舍掉.js的后缀

4、 打包方法

gulp 打包seajs

requirejs 打包

C. 请教seajs 的define参数 的问题

开发阶段不推荐define的参数传入三个，只需给定后面的factory即可，发布时通过构建工版具提取压权缩模块，会自动加上idhe依赖数组（即第二个参数），这样seajs能够更快的定位本身这个模块和它依赖的模块。
顺便提一下，第二个参数，如果显示传入了，那么seajs就不会再通过正则去扫描factory.toString()，直接根据这个参数去加载依赖模块，如果为[]即表示无依赖。

D. requirejs和seajs的区别

SeaJS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行



如下模块通过SeaJS/RequireJS来加载, 执行结果会是怎样?
define(function(require, exports, mole) {
console.log('require mole: main');

var mod1 = require('./mod1');
mod1.hello();
var mod2 = require('./mod2');
mod2.hello();

return {
hello: function() {
console.log('hello main');
}
};
});

先试试SeaJS的执行结果
require mole: main
require mole: mod1
hello mod1
require mole: mod2
hello mod2
hello main

E. angularJS关于依赖和模块与amd/cmd的区别，分享下结合使用示例

双向绑定，可测试性的代码结构，模型视图分离的一个前端MV*框架

其中angular也提供了模型的概念和依赖管理，不过这个依赖都是要在js对象都已经定义的前提下，没有像amd/cmd提供按需加载。

我个人比较喜欢cmd(seajs)，它对顶级作用域window的使用约束较多，全局对象和方法少，缺点就是很多原生库，都需要手工wrap下。

angular定义的controller一般都是全局的，我想用seajs来管理angular的代码和依赖，下面是一起使用的示例，有类似需求的童鞋可以参考下：

java">//fileng_mole2.js
define(function(require){
	varLog=require('log');
	return{
		init:function(){
			Log.w('Loadangularmole:m2');

			varag=window.angular;
			if(!ag){
				Log.w('Errorwhenloadangularmole:m2:noangular');
				return;
			}

			varm2=ag.mole('m2',[]);
			m2.filter('greet',function(){
				returnfunction(name){
					return'Hello,'+name+'!';
				};
			});
		}
	};
});
//fileng_mole1.js
define(function(require){
	require('mole/demo/ng_mole2').init();
	varLog=require('log');

	return{
		init:function(){
			Log.w('Loadangularmole:m1');

			varag=window.angular;
			if(!ag){
				Log.w('Errorwhenloadangularmole:m1:noangular');
				return;
			}

			varm1=ag.mole('m1',['m2']);
			m1.directive('testDateFormat',function(){
				returnfunction(scope,el,attrs,ctrl){
					varformat='yyyy-MM-dd';
					varupdateTime=function(){
						el.text(newDate().format(format));
					};

					//watchscope.formatinctrl
					scope.$watch('format',function(value){
						format=value;
						updateTime();
					});

					updateTime();
				}
			});
		}
	};
});
//filedemo/ng1.js
//初始化页面
define(function(require){
	varLog=require('log');

	require('mole/demo/ng_mole1').init();
	varagAdaptor=require('x/x.ex.angular');

	return{
		initPage:function(from,pageInfo,params){
			varTestCtrl=function($scope){
				$scope.format='yyyy/MM/dd';
			};
			window.TestCtrl=TestCtrl;

			agAdaptor.init(['m1'],'TestCtrl','ngContext');
		},

		mp:''
	};
});
//filex/x.ex.angular.js
//angularbootstrap适配——在bootstrap之前动态修改下dom
define(function(require){
	var$=require('jquery');
	varLog=require('log');

	return{
		init:function(moles,ctrlName,contextId){
			if(!window.angular){
				Log.w('Noangluardefined!','WARN');
				return;
			}

			var_context=$('#'+contextId);
			this.initCtrl(_context,ctrlName);
			this.initModel(_context);
			this.bootstrapAngular(moles);
		},

		//把ng-controller补上
		initCtrl:function(_context,ctrlName){
			if(ctrlName)
				_context.attr('ng-controller',ctrlName);
		},

		//根据name把ng-model补上
		initModel:function(_context){
			_context.find('[name^=f_]').each(function(){
				var_el=$(this);
				varname=_el.attr('name');
				varmodelName=name.split('_').remove(0).join('.');
				_el.attr('ng-model',modelName);
			});
		},

		bootstrapAngular:function(moles){
			window.angular.bootstrap(document,moles);
		}
	};
});
	<divclass="m_10">
		<h3>Angular——WorkwithSeaJS</h3>

		<divid="ngContext">
			Dateformat:<inputng-model="format">
			<br/>
			Currenttimeis:<spantest-date-format=""></span>
		</div>
	</div>

seajs.use('mole/demo/ng1',function(IPage){
	IPage.initPage();
});

F. GitHub 上有哪些值得推荐的开源电子书

语言无关类
操作系统

G. 请大神帮我解答一下这个函数。。。包括function中的两个参数


jQuery插件开发的五种形态

面对这种情况，通常我们会通过定义function的方式来实现。


复制代码代码如下:


function pluginName($selector){
$.each($selector, function () {
$(this).css("background-color", "#ccc");
// to do something...
});
}
// pluginName(document.getElementsByClassName("demo"));


因为我谈的是jQuery插件开发，那么我现在把这段代码扩展到jQuery上，代码如下：


复制代码代码如下:


// IIFE(立即调用函数表达式); [参考http://suqing.iteye.com/blog/1981591/]
;(function ($) {
// 扩展这个方法到jQuery.
// $.extend() 是吧方法扩展到 $ 对象上，和 $.fn.extend 不同。 扩展到 $.fn.xxx 上后，
// 调用的时候就可以是 $(selector).xxx()
$.fn.extend({
// 插件名字
pluginName: function () {
// 遍历匹配元素的集合
// 注意这里有个"return"，作用是把处理后的对象返回，实现链式操作
return this.each(function () {
// 在这里编写相应的代码进行处理
});
}
});
// 传递jQuery到内层作用域去, 如果window,document用的多的话, 也可以在这里传进去.
// })(jQuery, window, document, undefined);
})(jQuery, undefined);
// 调用方式 $(".selector").pluginName().otherMethod();


但是还差的远，目前只解决了两个问题

代码相对独立
链式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被缓存
可扩展
无冲突处理
事件代理，动态初始化

现在来给插件添加参数支持。代码如下


复制代码代码如下:


;(function($){
$.fn.pluginName = function(options) {
// 合并参数，通过“extend”合并默认参数和自定义参数
var args = $.extend({}, $.fn.pluginName.defaults, options);
return this.each(function() {
console.log(args.text);
// to do something...
});
};
// 默认参数
$.fn.pluginName.defaults = {
text : "hello"
};
})(jQuery);
// $(".selector").pluginName({
// text : "hello world!"
// });


添加参数支持还比较容易些，又解决一问题

代码相对独立
链式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被缓存
可扩展
无冲突处理
事件代理，动态初始化

现在来添加方法的支持，我前面所提到的生命周期可控制，意思差不多，例如添加reInit,destory等方法来控制插件。


复制代码代码如下:


;(function($){
$.fn.pluginName = function (method) {
// 如果第一个参数是字符串, 就查找是否存在该方法, 找到就调用; 如果是object对象, 就调用init方法;.
if (methods[method]) {
// 如果存在该方法就调用该方法
// apply 是吧 obj.method(arg1, arg2, arg3) 转换成 method(obj, [arg1, arg2, arg3]) 的过程.
// Array.prototype.slice.call(arguments, 1) 是把方法的参数转换成数组.
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
// 如果传进来的参数是"{...}", 就认为是初始化操作.
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.pluginName');
}
};
// 不把方法扩展在 $.fn.pluginName 上. 在闭包内建个"methods"来保存方法, 类似共有方法.
var methods = {
/**
* 初始化方法
* @param _options
* @return {*}
*/
init : function (_options) {
return this.each(function () {
var $this = $(this);
var args = $.extend({}, $.fn.pluginName.defaults, _options);
// ...
})
},
publicMethod : function(){
private_methods.demoMethod();
}
};
// 私有方法
function private_methods = {
demoMethod : function(){}
}
// 默认参数
$.fn.pluginName.defaults = {
};
})(jQuery);
// 调用方式
// $("div").pluginName({...}); // 初始化
// $("div").pluginName("publicMethod"); // 调用方法


又解决一问题

代码相对独立
链式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被缓存
可扩展
无冲突处理
事件代理，动态初始化

第三形态的插件修改就已经可以应对大多数插件的需求了。精益求精嘛，继续升级。
第四形态的插件是照帮司徒正美的《javascript框架设计》的代码。加了点面向对象的知识。


复制代码代码如下:


(function ($) {
var Plugin = function (element, options) {
this.element = element;
this.options = options;
};
Plugin.prototype = {
create: function () {
console.log(this.element);
console.log(this.options);
}
};
$.fn.pluginName = function (options) {
// 合并参数
return this.each(function () {
// 在这里编写相应的代码进行处理
var ui = $._data(this, "pluginName");
// 如果该元素没有初始化过(可能是新添加的元素), 就初始化它.
if (!ui) {
var opts = $.extend(true, {}, $.fn.pluginName.defaults, typeof options === "object" ? options : {});
ui = new Plugin(this, opts);
// 缓存插件
$._data(this, "pluginName", ui);
}
// 调用方法
if (typeof options === "string" && typeof ui[options] == "function") {
// 执行插件的方法
ui[options].apply(ui, args);
}
});
};
$.fn.pluginName.defaults = {};
})(jQuery);
// 调用的方式和之前一样。


这里特别要提下缓存这个东西，插件用多了，觉的这个真的是好东西。
在传统面向对象的插件开发中，至少会声明个变量保存它，但是我到目前写的jQuery插件中都没有，用起来很麻烦。自从把初始化后的插件缓存起来后，方便了许多。通过代码$("#target").data("pluginName")就可以取到对象了。 来看看还有什么问题没有解决

代码相对独立
链式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被缓存
可扩展
无冲突处理
事件代理，动态初始化

看了上面的代码是否脑子有点晕了，如果是，休息片刻，稍后回来，下面的代码更精彩。 最后一个方案算是比较全面的了。方案来自Bootstrap，下面代码以 Bootstrap 的 button 插件为例.


复制代码代码如下:


!function ($) {
// ecma262v5 的新东西, 强制使用严谨的代码编写.
"use strict";
// BUTTON PUBLIC CLASS DEFINITION
// ==============================
var Button = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, Button.DEFAULTS, options);
};
Button.DEFAULTS = {
loadingText: 'loading...'
};
Button.prototype.setState = function (state) {
// ...
};
Button.prototype.toggle = function () {
// ...
};
// BUTTON PLUGIN DEFINITION
// ========================
var old = $.fn.button; // 这里的 $.fn.button 有可能是之前已经有定义过的插件，在这里做无冲突处理使用。
$.fn.button = function (option) {
return this.each(function () {
var $this = $(this);
// 判断是否初始化过的依据
var data = $this.data('bs.button');
var options = typeof option == 'object' && option;
// 如果没有初始化过, 就初始化它
if (!data) $this.data('bs.button', (data = new Button(this, options)));
if (option == 'toggle') data.toggle();
else if (option) data.setState(option)
})
};
// ① 暴露类名, 可以通过这个为插件做自定义扩展
$.fn.button.Constructor = Button;
// 扩展的方式
// 设置 : $.fn.button.Constructor.newMethod = function(){}
// 使用 : $btn.button("newMethod");
// ② 无冲突处理
$.fn.button.noConflict = function () {
$.fn.button = old;
return this
};
// ③ 事件代理, 智能初始化
$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
var $btn = $(e.target);
// 查找要初始化的对象
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn');
// 直接调用方法, 如果没有初始化, 内部会先进行初始化
$btn.button('toggle');
e.preventDefault();
});
}(jQuery);


来看看还有什么问题没有解决

代码相对独立
链式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被缓存
可扩展
无冲突处理
事件代理，动态初始化

补充

现在的插件都要求灵活性要高，比如希望插件可以同时适配jQuery和Zepto，又或者需要支持AMD或者CMD规范。

支持jQuery和Zepto


复制代码代码如下:


if (window.jQuery || window.Zepto) {
(function ($) {
// plugin code...
})(window.jQuery || window.Zepto);
}


中间件支持，node


复制代码代码如下:


if (typeof(mole) !== 'undefined')
{
mole.exports = pluginName;
}
requirejs(AMD) support
if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return pluginName;
});
}
seajs(CMD) support
if (typeof define === 'function') {
define([], function () {
'use strict';
return pluginName;
});
}

H. seajs和requiejs的区别，和用gulp打包方法

1、执烂返行顺序不同

从demo.html 引入一个入口c.js， c.js require-b.js , b.js require - a.js

代码如下：

c mole

[html] view plain print?
define(function(require, exports, mole) {

console.log("hello mole c");

require('b');

console.log("c finished");

});

b mole
[html] view plain print?
define(function(require, exports, mole) {
console.log("hello mole b")
var a = require('a');
console.log("b finished")
});
a mole
[html] view plain print?
define(function() {
console.log("hello mole a")
});

requriejs 的 html代码：

[html] view plain print?
<!doctype html>
<html lang="仔晌en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="require.min.js" data-main="c.js"></script>
</head>
<body>

</body>
</html>

执行结果：

ello mole aa.js:2

hello mole bb.js:2

b finishedb.js:4

hello mole cc.js:3

c finishedc.js:7

==============================================

seajs的html代码：

[html] view plain print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="sea.2.3.js"></script>
<script>
seajs.use('./c'饥戚饥);
</script>
</head>
<body>

</body>
</html>
执行结果：
hello mole cc.js:3

hello mole bb.js:2

hello mole aa.js:2

b finishedb.js:4

c finishedc.js:7

所以总结：
seajs是从上到下执行，
requriejs是把其中require的js全部加载完了，再往下执行。·

2、依赖的加载有所不同

在define中 requriejs加载了依赖就执行；而seajs在define中只是加载不会执行（如果要执行，需要用require()方法）

案例代码：

c.js模块

[html] view plain print?
define(['b'],function(require,exports,mole){
console.log("hello mole c");

console.log("c finished");
});
b.js模块
[html] view plain print?
define(['a'],function(require,exports,mole) {
console.log("hello mole b")

console.log("b finished")
});

a.js模块

[html] view plain print?
define(['b'],function(require,exports,mole) {
console.log("hello mole a")
});

seajs和requirejs的 html代码 和 1 中一样
执行结果：

seajs执行结果：

hello mole cc.js:2

c finishedc.js:4

requiresj的执行结果：

ello mole aa.js:2

hello mole bb.js:2

b finishedb.js:4

hello mole cc.js:2

c finishedc.js:4

总结： 在define书写中A：requirejs 加载了就执行，所以requirejs是预执行（在define中预先执行所有require依赖的js），RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会"停顿"1次, 完成整个过程是会比SeaJS要快. 预执行

B：seajs只是纯粹的加载依赖的文件，不执行就连console都不执行就是纯粹的“加载”，SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析,
这里耗费了时间, 因为这个特例中的模块巨大, 因此造成"停顿"2次的现象, 这就是我所说的SeaJS中的"懒执行".

在2的基础上 c.js代码为

[html] view plain print?
define(function(require,exports,mole){
require('b');
require('a');
console.log("hello mole c");

console.log("c finished");
});
执行结果都是一样

hello mole bb.js:2

b finishedb.js:4

hello mole aa.js:2

hello mole cc.js:4

c finishedc.js:6

3、取别名时requirejs默认舍掉.js的后缀

4、 打包方法

gulp 打包seajs

requirejs 打包
http://blog.csdn.net/kongjiea/article/details/48316049

I. seajs和requiejs的区别，和用gulp打包方法

1、执行顺序不同

从demo.html 引入一个入口c.js， c.js require-b.js , b.js require - a.js

代码如下：

c mole

[html] view plain print?
define(function(require, exports, mole) {

console.log("hello mole c");

require('b');

console.log("c finished");

});

b mole
[html] view plain print?
define(function(require, exports, mole) {
console.log("hello mole b")
var a = require('a');
console.log("b finished")
});
a mole
[html] view plain print?
define(function() {
console.log("hello mole a")
});

requriejs 的 html代码：

[html] view plain print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="require.min.js" data-main="c.js"></script>
</head>
<body>

</body>
</html>

执行结果：

ello mole aa.js:2

hello mole bb.js:2

b finishedb.js:4

hello mole cc.js:3

c finishedc.js:7

==============================================

seajs的html代码：

[html] view plain print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="sea.2.3.js"></script>
<script>
seajs.use('./c');
</script>
</head>
<body>

</body>
</html>
执行结果：
hello mole cc.js:3

hello mole bb.js:2

hello mole aa.js:2

b finishedb.js:4

c finishedc.js:7

所以总结：
seajs是从上到下执行，
requriejs是把其中require的js全部加载完了，再往下执行。·

2、依赖的加载有所不同

在define中 requriejs加载了依赖就执行；而seajs在define中只是加载不会执行（如果要执行，需要用require()方法）

案例代码：

c.js模块

[html] view plain print?
define(['b'],function(require,exports,mole){
console.log("hello mole c");

console.log("c finished");
});
b.js模块
[html] view plain print?
define(['a'],function(require,exports,mole) {
console.log("hello mole b")

console.log("b finished")
});

a.js模块

[html] view plain print?
define(['b'],function(require,exports,mole) {
console.log("hello mole a")
});

seajs和requirejs的 html代码 和 1 中一样
执行结果：

seajs执行结果：

hello mole cc.js:2

c finishedc.js:4

requiresj的执行结果：

ello mole aa.js:2

hello mole bb.js:2

b finishedb.js:4

hello mole cc.js:2

c finishedc.js:4

总结： 在define书写中A：requirejs 加载了就执行，所以requirejs是预执行（在define中预先执行所有require依赖的js），RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会"停顿"1次, 完成整个过程是会比SeaJS要快. 预执行

B：seajs只是纯粹的加载依赖的文件，不执行就连console都不执行就是纯粹的“加载”，SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析,
这里耗费了时间, 因为这个特例中的模块巨大, 因此造成"停顿"2次的现象, 这就是我所说的SeaJS中的"懒执行".

在2的基础上 c.js代码为

[html] view plain print?
define(function(require,exports,mole){
require('b');
require('a');
console.log("hello mole c");

console.log("c finished");
});
执行结果都是一样

hello mole bb.js:2

b finishedb.js:4

hello mole aa.js:2

hello mole cc.js:4

c finishedc.js:6

3、取别名时requirejs默认舍掉.js的后缀

4、 打包方法

gulp 打包seajs

requirejs 打包
http://blog.csdn.net/kongjiea/article/details/48316049

J. seajs2.3.0和spm3怎么配合打包

开发一个组件的流程： 初始化组件 在本地磁盘新建文件夹，文件夹名称为组件名称，名称要符合 [a-z\d-.]，并以英文字母开头，首选合适的英文单词， 禁止使用驼峰 。避免组件名称产生冲突。 下面以epay-mole1为例，说明组件初始化过程。 $ mkdir epay-mole1 $ cd epay-mole1 $ spm init Creating a spm package: [?] Package name: epay-mole1 [?] Version: 0.0.0 [?] Description: [?] Author: Initialize a spm package Succeccfully! 初始化完成后会生成一个骨架，在这个基础上进行开发更方便。 epay-mole1 ├── examples 组件演示 │ └── index.md ├── HISTORY.md 版本更新说明 ├── index.js 组件的主要入口文件 ├── package.json 版本等元信息 ├── README.md 组件总体说明，包括功能描述、api文档 └── tests 单元测试 └── index-spec.js 4.首先分析组件的依赖，比如需要 jquery。 可以使用 spm install 下载依赖。 $ spm install jquery --save 这样 spm 会自动在 package.json 中添加依赖，你也可以手动添加并 install 。 "spm": { "dependencies": { "jquery": "1.7.2" } } 并且，所有依赖的模块都会被下载到 spm_moles 下。 修改 index.js 进行开发 var $ = require('jquery') var epayMole1 = function(){ this.info = 'hello mole1' }; mole.exports = epayMole1 启动本地服务进行调试。 $ spm doc 通过浏览器访问 http://127.0.0.1:8000/ 本地调试 examples 也使用 md 编写，这样写起来非常方便。 在 examples/index.md 添加实例化代码，可以直接 use。 seajs.use('../index', function(Mole1) { var mole1 = new Mole1() console.log(mole1.info) }); 也可以用 require 来调用模块。 var Mole1 = require('index'); 通过四个 "````" 所包裹的代码不仅会显示成代码片段，也会插入 HTML 中进行实际运行，这样你调试好代码后，演示页面的文档也同时生成好了。 spm doc 支持 livereload，只要通过 spm doc 启动服务，修改文件后都会自动构建。 修改组件元信息 修改 package.json 配置打包方式 "spm": { "main": "index.js" } 这样 spm build 将打包 index.js 文件，并将这个文件中的本地依赖文件也打包进来。 接下来就可以开始打包，build 后会在 dist 目录生成打包的文件和 -debug 文件。 $ spm build 发布组件 你的组件发布后可以很方便的被其他组件调用。通过 spm publish 命令将会把你的组件发布到服务器上。 $ spm publish 发布组件文档 $ spm doc publish

阅读全文

与helloseajs相关的资料

热点内容
win10扫描的文件在哪里 浏览：615
pdf文件公章歪了怎么处理 浏览：322
java下载文件的路径 浏览：551
现在有哪些热门的软件编程 浏览：453
asp什么文件迅雷下载 浏览：381
巫妖王之怒升级路线 浏览：348
wps如何发送文件 浏览：359
网站怎么加流量 浏览：457
圣魔之光石破解版本 浏览：110
湖北文件柜多少钱一套 浏览：103
artlantis渲染器教程 浏览：679
360系统文件可以清理吗 浏览：256
extjsform样式 浏览：513
电信猫怎么设置wifi密码 浏览：785
p190文件用什么打开 浏览：252
怎么修改ps签署文件 浏览：847
怎么找到编程猫作品文件 浏览：647
铁路局的网站是多少 浏览：194
微信双号 浏览：926
招标文件中的净值是什么意思 浏览：675

友情链接