求职简历网 > 知识 >

seajs

来源:求职简历网时间:2024-03-25 23:09:44编辑:皮带君

sea-config.js是做什么用的

SeaJS是一个遵循CommonJS规范的javascript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。


sea.js异步加载有哪些好处

1, JS文件统一加载管理,统一写法,所以能更规范统一
2, 更适合JAVA等后台开发人员来写js逻辑,因为写法也属于面对对象的
3, 提供异步加载, 优化资源,提供更良好的页面体验
4, 可以设置文件别名或者库别名,有的文件引用时路径加名字太长,可以设置别名, 更便于使用
5, 加载时可以设置一些路径为变量,动态扩展加载


seajs加载jquery时提示$is not a function该怎么解决

jQuery 哪个版本?因为 jQuery 提供 AMD 的加载方式(相关代码在源码后面几行),而 seajs 是基于 CMD 规范,所以一般要对 jQuery 进行改造才能被 jQuery 引用,常见的方法是修改 jQuery 源码,在 jQuery 最后几行找到如下代码(以 2.1.4 版本为例):"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});将其中的“amd”改为“cmd”即可。此时可正常调用 jQuery:define(function(require, exports, module) { var $ = require('lib/jquery-2.1.4.min'); // 载入jquery console.log($); // 返回:function(a,b)});


$on is not a function怎么回事

已经引入jq 要是下面的代码就有问题
$dot.each(function(index,element){

$dot[index].on('mouseover',function(){


$dot.each(function(i,val){

$dot[i].removeClass('selected');

})

this.addClass('selected');
})

要是改成这样就没问题::
$dot.each(function(index,element){

$dot[index].mouseover=function(){


$dot.each(function(i,val){

$dot[i].className="";

})

this.className='selected';

}
哎。。。


sea.js一个模块一个文件,那在大项目里面不是存在着上百个js文件?

seajs 中有一个combo
就是使用前端集成工具把多个文件 合并成一个文件

seajs 的使用 ,
解决命名冲突
功能化分
维护方便

并不是每个 fn 都成一个seajs 中

你可以把一类 搞到一个
比如共公头 共公尾为一个
插件本身是分开的

比如你做登录 注册
登录就可以是一个文件
等等
要合理使用 才能发挥出强大优势来

关注:新航路师徒学院


seajs怎么调用jquery的插件

方法一,将js插件cmd模块化(define封装成seajs模块,返回匿名函数,包含插件的源码)。
/**
* Created with JetBrains PhpStorm.
* User: duph
* Date: 13-3-11
* Time: 上午9:24
* To change this template use File | Settings | File Templates.
*/

define(function(require,exports,moudles){
return function(jquery){
(function($) {
$.fn.pri= function() {
alert($("a").attr("href"))
// 代码区域。
};
})(jquery);
}

})
jquery库在总js文件(调用该插件的文件)中加载。通过require("t1/jquery_pligun")()来传递jquery变量(参数) ,保证了jquery在调用js插件模块之前加载
/**
* Created with JetBrains PhpStorm.
* User: duph
* Date: 13-3-11
* Time: 上午9:40
* To change this template use File | Settings | File Templates.
*/
define(function (require, exports, moudles) {
var $=require("jquery")
require("t1/jquery_pligun")($)
$(document).ready(function () {
$("a").pri()
})


})
补充:SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。


JS或者jQuery怎么给动态添加的DOM元素绑定事件

楼下说得太简单了,估计提问者看不懂。假设,你有以下DOM 在这下面加一个按钮然后你添加一个按钮,方法如下function addButton(){ var $container = $("#dvTest"); $container.append("click me");}然后,给刚加的按钮一个click事件//你要先找到你加的这个按钮$("#dvTest > a").click(function(){ alert('you clicked me') });//或$("#dvTest > a").unbind().on('click'), function(){ alert('you clicked me') });我觉得你主要是jQuery的筛选器用得不够熟。你可以搜一下,大概看看。只要能找到控件,绑定事件都不叫事儿。

js 动态创建的元素怎样添加事件

1、动态创建元素时,将事件触发方式加入到元素创建中例如:document.getElementById('id').innerHTML='';function btnClick(){ alert('事件触发');}2、动态创建元素完成后,重新获取该元素绑定事件例如:document.getElementById('id').innerHTML='';document.getElementById('btn').onclick=function(){ alert('事件触发');}


如何正确理解javascript的模块化

模块化在项目中十分的重要,一个复杂的项目肯定有很多相似的功能模块,如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”,如果每个人有各自的写法,那么肯定会乱套,下面介绍几种JS的模块化的规范。
一:模块化进程一:script标签
这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口。
缺点:
1、污染全局作用域
2、开发人员必须主观解决模块和代码库的依赖关系
3、文件只能按照script标签的书写顺序进行加载
4、在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪
二:模块化进程二:CommonJS规范
该规范的核心思想是允许模块通过require方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口。
require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;

优点:
1、简单并容易使用
2、服务器端模块便于重用
缺点:
1、同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
2、不能非阻塞的并行加载多个模块
module.exports与exports的区别
1、exports 是指向的 module.exports 的引用
2、module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {}
3、require() 返回的是 module.exports 而不是 exports
exports示例:
// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
return r * r * Math.PI;
}

module.exports示例:
// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
return r * r * Math.PI;
}

错误的情况:
// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
return r * r * Math.PI;
}

其实是对 exports 进行了覆盖,也就是说 exports 指向了一块新的内存(内容为一个计算圆面积的函数),也就是说 exports 和 module.exports 不再指向同一块内存,也就是说此时 exports 和 module.exports 毫无联系,也就是说 module.exports 指向的那块内存并没有做任何改变,仍然为一个空对象{},也就是说area.js导出了一个空对象,所以我们在 app.js 中调用 area(4) 会报 TypeError: object is not a function 的错误。
总结:当我们想让模块导出的是一个对象时, exports 和 module.exports 均可使用(但 exports 也不能重新覆盖为一个新的对象),而当我们想导出非对象接口时,就必须也只能覆盖 module.exports 。
三:模块化进程三:AMD规范
由于浏览器端的模块不能采用同步的方式加载,会影响后续模块的加载执行,因此AMD(Asynchronous Module Definition异步模块定义)规范诞生了。
AMD标准中定义了以下两个API
1、require([module], callback);
2、define(id, [depends], callback);
require接口用来加载一系列模块,define接口用来定义并暴露一个模块。
示例:
define("module", ["dep1", "dep2"], function(d1, d2){
return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });

优点:
1、适合在浏览器环境中异步加载模块
2、可以并行加载多个模块
缺点:
1、提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不顺畅
2、不符合通用的模块化思维方式,是一种妥协的实现
四:模块化进程四:CMD规范
CMD(Common Module Definition)规范和AMD很相似,尽量保持简单,并与CommonJS和Node.js的 Modules 规范保持了很大的兼容性。在CMD规范中,一个模块就是一个文件。
示例:
define(function(require, exports, module){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})

优点:
1、依赖就近,延迟执行
2、可以很容易在 Node.js 中运行
缺点:
1、依赖 SPM 打包,模块的加载逻辑偏重
AMD和CMD的区别
AMD和CMD起来很相似,但是还是有一些细微的差别,让我们来看一下他们的区别在哪里:
1、对于依赖的模块,AMD是提前执行,CMD是延迟执行。
2、AMD推崇依赖前置;CMD推崇依赖就近,只有在用到某个模块的时候再去require。看代码:
// AMD
define(['./a', './b'], function(a, b){ // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
});
// CMD
define(function(require, exports, module){
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b')
// 依赖可以就近书写
b.doSomething()
// ...
});

3、AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。
五:模块化进程五:ES6模块化
EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。
在 ES6 中,我们使用export关键字来导出模块,使用import关键字引用模块。需要说明的是,ES6的这套标准和目前的标准没有直接关系,目前也很少有JS引擎能直接支持。因此Babel的做法实际上是将不被支持的import翻译成目前已被支持的require。
尽管目前使用import和require的区别不大(本质上是一回事),但依然强烈推荐使用import关键字,因为一旦JS引擎能够解析ES6的import关键字,整个实现方式就会和目前发生比较大的变化。如果目前就开始使用import关键字,将来代码的改动会非常小。
示例:
import "jquery";
export functiondoStuff(){}
module "localModule" {}

优点:
1、容易进行静态分析
2、面向未来的 EcmaScript 标准
缺点:
1、原生浏览器端还没有实现该标准
2、全新的命令字,新版的 Node.js才支持


javascript模块化是什么?优缺点有哪些?

可维护性 灵活架构,焦点分离 方便模块间组合、分解 方便单个模块功能调试、升级 多人协作互不干扰 可测试性,可分单元测试;性能损耗 系统分层,调用链会很长 模块间通信,模块间发送消息会很耗性能 最近的项目中也有用到模块化;使用的是seajs,但是当引用到jquery,jquery easyui/或者jquery;UI组件时,有可能会用到很多jquery插件,那这样要是实现一个很复杂的交互时,模块间的依赖会很多,使用define()方法引入模块会很多。

javascript模块化是什么及其优缺点介绍

如今backbone、emberjs、spinejs、batmanjs
等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而
来。web前端已经演变成大前端,web前端的发展速度之快。

1)我们来看看什么是模块化?
模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性。javascript中的模块在一些C、PHP、java中比较常见:

c中使用include 包含.h文件;php中使用require_once包含.php文件
java使用import导入包
此中都有模块化的思想。

2)模块化的优缺点:

a>优点:
可维护性
1.灵活架构,焦点分离
2.方便模块间组合、分解
3.方便单个模块功能调试、升级
4.多人协作互不干扰
可测试性
1.可分单元测试

b>缺点:
性能损耗
1.系统分层,调用链会很长
2.模块间通信,模块间发送消息会很耗性能

3)最近的项目中也有用到模块化,
使用的是seajs,但是当引用到jquery,jquery easyui/或者jquery
UI组件时,有可能会用到很多jquery插件,那这样要是实现一个很复杂的交互时,模块间的依赖会很多,使用define()方法引入模块会很多,不知
有么有什么好的方法?

4)附:
内聚度
内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显,当把相关的任务分组后去阅读就容易多了。 设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。

耦合度
耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性,进入或调用模块的位置等。与内聚度相反,在设计时应尽量追求松散耦合的系统。


javascript框架有哪些

目前来看,JS框架以及一些开发包和库类有如下几个,Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fxDojo (JS library and UI component ):Dojo是目前最为强大的j s框架,它在自己的Wiki上给自己下了一个定义,dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱,不仅仅是浏览器层面的,野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API,包括了JS本身的语言扩展,以及各个方面的工具类库,和比较完善的UI组件库,也被广泛 应用在很多项目中,他的UI组件的特点是通过给html标签增加tag的方式进行扩展,而不是通过写JS来生成,dojo的API模仿Java类库的组织 方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了,dojo强大的地方在于界面和特效的封装,可以让开发者快速构建一些兼容标准的界面。优点:库相当完善,发展时间也比较长,功能强大,据说利用dojo的io.bind()可以实现comet,看见其功能强大非一般,得到IBM和SUN的支持缺点:文件体积比较大,200多KB,初次下载相当慢,此外,dojo的类库使用显得不是那么易用,j s语法增强方面不如prototype。Prototype (JS OO library):是一个非常优雅的JS库,定义了JS的面向对象扩展,DOM操作API,事件等等,以prototype为核心,形成了一个外围的各种各样 的JS扩展库,是相当有前途的JS底层框架,值得推荐,感觉也是现实中应用最广的库类(RoR集成的AJAX JS库),之上还有 Scriptaculous 实现一些JS组件功能和效果。优点:基本底层,易学易用,甚至是其他一些js特效开发包的底层,体积算是最小的了。缺点:如果说缺点,可能就是功能是他的弱项Scriptaculous (JS UI component based on prototype):Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件,不同的文件对应不同的js效果,所以说,如果底层用 prototype的话,做js效果用Scriptaculous那是再合适不过的了,连大名鼎鼎的digg都在用他,可见不一般优点:基于prototype是最大的优点,由于使用prototype的广泛性,无疑对用户书锦上添花,并且在《ajax in action》中就拿Scriptaculous来讲述js效果缺点:刚刚兴起,需要时间的磨练yui-ext (JS UI component):基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件 能实现复杂的Layout布局,界面效果可以和backbase媲美,而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid,支持XML和Json数据类型,直接可以迁入grid。许多组件实现了对数据源的支持,例如动态的布局,可编辑的表格控件,动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作,推出基于jQuery的Ext 1.0,提供了更多有趣的功能。优点:结构化,类似于java的结构,清晰明了,底层用到了Jquery的一些函数,使整合使用有了选择,最重要的一点是界面太让让人震撼了。缺点:太过复杂,整个界面的构造过于复杂。Jquery :jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!并且简介的语法和高的效率一直是jQuery追求的目标,优点:注重简介和高效,js效果有yui-ext的选择,因为yui-ext 重用了很多jQuery的函数缺点:据说太嫩,历史不悠久。Mochikit :MochiKit自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发,另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便,能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的,如果与 MochiKit 和 Ajax 结合在一起,使用 XHTML 包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出,比较实用和方便。它还有自己的 js 代码解释器优点:MochiKit.DOM这部分很实用,简介也是很突出的缺点:轻量级的缺点mootools :MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似,语法几乎一样。但它提供的功能要比prototypejs多,而且更强大。比如增加了动画特效、拖放操作等等。优点:可以定制自己所需要的功能,可以说是prototypejs的增强版。缺点:不大不小,具体应用具体分析moo.fx :moo.fx是一个超级轻量级的javascript特效库(7k),能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准,提供控制和修改任何HTML元素的CSS属性,包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计,所以可以在它的基础上开发你需要的任何特效。优点:小块头有大能耐缺点:这么小了,已经不错了


上一篇:mscorsvw

下一篇:没有了

相关推荐

热门头条