seaJS

seaJs学习笔记2 – seaJs组建库的使用

原文地址:seaJs学习笔记2 – seaJs组建库的使用我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最近在学习seaJs和AngualrJs的指令和服务,感觉angularjs实在太强大了,好吧,步入主题,今天在深入了解seaJs的时候发现了一款神器,不过这款神奇貌似没有更新和维护了,但我测试了一下,还是可以用的. 这款神奇就是SeaJS 组件库 ,Sea.js 是一个适用于 Web 浏览器端的模块…

初学seaJs模块化开发，利用grunt打包，减少http请求

原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —dist //压缩后的目标文件夹 —lib //各个模块 —drag //拖拽模块 —scale //缩放模块 —seajs //seajs库 —seajs_drag //入口的主文件main.js —main.js /*——————————————————————————…

JS模块化开发：使用SeaJs高效构建页面

一.扯淡部分很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就更别说会知道js还有面向对象,设计模式,MVC,MVVM,模块化,构建工具等等这些高大上的概念了.现在想想还真是Too young too naive.前两天某大神在群里分享他招聘前端的心得的时候就说,就是那些以为能写两个页面就可以自称前端的人拉低了行业水平.这样看来前两年我还真的扯了不少后腿呢………

seajs的使用

写在前面 seajs是什么? Seajs是一个js文件加载器. 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 用于Web开发的模块加载工具,提供简单.极致的模块化体验一:使用文件目录: demo_1.html <!DOCTYPE html> <html> <head> <title></title> <script src="seajs/sea.js"></script> <…

用spm2构建seajs项目的过程

前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具,所以这里总结一下自己的使用心得. 在试用SeaJs和官方推荐的CMD包管理工具——Spm2.x的过程中,遇到了很多高低版本不兼容和配置参数没弄明白的问题,后来在网上各处找资料才大概弄懂.这里我强调一下版本,是因为可能有的同学项目开始较早,用了以前版本的Seajs,再去看Seajs官网的API有些地方…

jquery插件封装成seajs模块

jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery) { // 插件源码..... // 插件源码..... // 插件源码..... // 插件源码..... // 插件源码..... } }) 这样它就是一个seajs模块了, 像下面这样引用到项目: define(function (require, exports, module) { re…

快速上手seajs——简单易用Seajs

快速上手seajs——简单易用Seajs 原文 http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslove.net/seajs/ 背景一个网站必然会涉及很多功能,tab选项卡.slide轮播图.pop弹出层.美化alert.paging分页等等等等,如果是企业网站那整合成一个js文件就够了,即插件库 . 但是对于一个大的网站平台来说需要的功能可能会有很多,而且随着平台的发展,功能会越来越多.到最…

seajs学习一天后的总结归纳

公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴奋的开始了seajs的学习,正好对模块化开发仰慕已久,终于有机会大展身手了! 一开始总是有点曲折的,我照着玉伯的github上的教程一步步来,然后发现在我引入jquery的时候,require到的jquery竟然是undefined,经过一番摸索,我发现原来jquery是基于amd规范的,seajs…

RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理,于是出现CommonJS项目,提出了一些规范模块化的写法,在Nodejs中普遍应用,同样浏览器端也出现了类似的解决方案,并结合浏览器异步加载的特性,有RequireJS提出的AMD(Asynchronous Module Definition)规范,以及SeaJS提出的CMD(Common Modu…

新手 gulp+ seajs 小demo

首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1.首先,务必先说明,本demo是基于nodeJs环境下开发的,因此要安装nodeJs(地址:https://nodejs.org/en/): 2.接下来安装gulp: 在第一步成功的情况下,安装gulp构建工具,并且将其依赖到项目进来:同时需要安装browser-sync,gulp-seajs-co…

grunt任务之seajs模块打包

grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile.js,配置并注册grunt的任务,最终我们可以通过命令行来执行任务. seajs主要用于模块化,通过define定义一个模块,可以通过require加载模块,exports导出模块.具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解. 在实际生产中,如果紧紧定义一系列…

深入seajs源码系列三

入口方法每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use(),这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个为回调函数.入口方法定义了一个新的模块,这个新定义的模块依赖入参提供的模块.然后设置新模块的回调函数,用以在loaded状态之后调用.该回调函数主要是执行所有依赖模块的工厂函数,最后在执行入口方法提供的回调. // Public API // 入口地址 seajs.use = function(id…

深入seajs源码系列二

模块类和状态类参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出. 首先定义了一个Module类,对应与一个模块 function Module(uri, deps) { this.uri = uri this.dependencies = deps || [] this.exports = null this.status = 0 // Who depends on me this._waitings = {} //…

深入seajs源码系列一

简述前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现.类似于c/c++的include,java中的import关键字,在js中也定义了require关键字,用以引进依赖模块. 由于规范的多样性,模块化的实现也是各有各的不同.nodejs遵从的就是commonJS规范,它有着一些形式上的约定: require为函数,该函数接受一个字符串作为模块标示符 require函数返回值…

介绍一种基于gulp对seajs的模块做合并压缩的方式

之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题.然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的应…

seajs的使用--主要了解模块化

一个使用sea.js的Demo sea.js可以解决命名问题,js文件间的依赖等. index.html内容如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti…

SeaJS入门篇一怎么使用query

研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'></script> 2.配置脚本路径 // seajs 的简单配置 seajs.config({ //base: "",//默认和sea.js同级,jquery.js和它同级,所以没有写:注意:如果为默认不要写,否则路径出错 alias: { "jquery&quo…

seajs源码分析

seajs主要做了2件事 1.定义什么是模块,如何声明模块:id.deps.factory.exports ----define=function(id,deps,factory){return exports} 2.管理模块依赖,解决自动加载.本质其实是个加载器loader:id配上路径规则,factory可以提取依赖模块,递归遍历后自动加载js文件核心的代码是util-path.js和module.js 发现seajs已经修订到3.0.0部分实现有改动,有些地方随手写的,也没求证过估计误人…

seajs hello world

http://localhost/seajs/index.html <!doctype html> <head> <title>Hello Seajs</title> <script src="sea.js"></script> <script> seajs.config({ // 调试模式 debug: true, // Sea.js 的基础路径 base: 'http://localhost/sea…

seajs和requirejs

一.seajs 1. 使用seajs的一般步骤 a)在主页面引入sea.js b)写模块 c)在主页面使用模块 2.模块的写法 math.js define(function(require, exports, module){ var squareObj=require("square"); module.exports={ add:function(a,b){ return a+b; }, cube:function(a){ return squareObj.square(a)*a…

seajs实现JavaScript 的模块开发及按模块加载

seajs实现了JavaScript 的模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http://seajs.org/docs/#docs 首先看看seajs是怎么进行模块开发的.使用seajs基本上只有一个函数"define" fn.define = function(id, deps, factory) { //code of function- } 使用define函数来进行定…

1. seajs是用来进行模块化管理,将每一个功能当做是一个功能模块,在模块之间运用require进行连接,类似于java/C++/C等语言中的类. 2. 在文件html 的尾部引入入seajs的文件,调用seajs.use("main.js");main.js时文件的主功能模块的js文件部分. define(require,exports,module); require("**.js")引用路径 exports 提供单个接口exports…

Seajs教程配置文档

seajs.config Obj alias Obj 别名配置,配置之后可在模块中使用require调用require('jQuery'); seajs.config({ alias:{ 'jquery' : 'jquery/jquery/1.10.1/jquery' } }) defined(function( require , exports , module ){ //引用jQuery var $ = require('jquery'); }); paths Obj 设置路径,方便跨目录…

RequireJS和seaJS的区别与联系

RequireJS和seaJS的区别与联系联系:都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然. RequireJS(除了是模块加载器,还是文件加载器) seaJS 遵循的规范不同遵循 AMD(异步模块定义)规范,预执行,相对来讲解析模块时间短,停顿次数少.也就是RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了, 而且模块执行的顺序也不一定100%按照代码中出现的顺序. 遵循 CMD…

模块化以及requirejs和seajs

我们用模块化的思想进行网页的编写是为了更好的管理我们的项目模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能. 模块化所涉及的规范commonjs,AMD,CMD,UMD 其中的commonjs是服务器规范,用到的是同步加载,适用于nodejs后台的操作由于commonjs的特性是同步加载,并不适用于前端,人们想解决前端异步加载的问题,AMD就应运而生了. AMD将commonjs的思想全部推翻,产生了一套新的规范,它是专门为前端定制的规范,实现了异步加载. CMD和AMD的区别是…

关于seajs模块化的搭建

搭建seajs这个鬼吧!好像必须要用服务器起.... 然后我开始弄了个nodejs服务器. 安装nodejs:在网站上下载,安装,安装.. 打开命令行,输入cdm. 输入node -v ,输出版本信息,则安装成功. 建个空文件夹. 把路径弄进去! 安装express模块. 输入express,创建结构. 输入npm install 下载控件. 接下来介绍构建seajs,实现单页面跳转. 在主页面的html中引入sea.js文件. <!DOCTYPE html> <html> &l…

seajs封装js方法

必须要先引入sea.js文件 <script src="js/sea.js"></script> 其次,引入其他js文件 <script> seajs.config({ alias: { "layer": "layer/layer.js", "jsRender": "jquery.jsRender.min.js", "dataInfo": "…

seaJs的简单应用

sea.js的应用模块化: 将Js代码按模块化分开,提高了代码的重用性:seaJs的好处: 解决了文件的依赖解决了变量名的冲突seaJs的使用 1.定义模块 define(function(require,exports,module)){ require:引入一个模块如:var _msg = require("msg"); exports:输出一个模块如:exports.msg = function(){ alert("ok"); } module:批量输出…

seajs的CMD模式的优势以及使用

之前有一篇博客非常详细的介绍了sea.js的加载流程,以及源代码实现,链接地址:http://www.cnblogs.com/chaojidan/p/4123980.html 这篇博客我主要讲下sea.js的介绍和使用. 首先,先介绍下sea.js的CMD规范,以及跟其他规范的区别. CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践. 09年下半年这帮充满干劲的小伙子们想把 ServerJS 的成功经验进一步推广到浏…

seaJS循环依赖的解决原理

seajs模块的六个状态. var STATUS = { 'FETCHING': 1, // The module file is fetching now. 模块正在下载中 'FETCHED': 2, // The module file has been fetched. 模块已下载 'SAVED': 3, // The module info has been saved. 模块信息已保存 'READY': 4, // All dependencies and self are r…

【seaJS】的更多相关文章