JavaScript模块载入框架sea.js 学习一

简单总结sea.js 学习文件文件夹结构 /sea/sea.js 下载地址 http://seajs.org/docs/#downloads /sea/jquery-sea.js 下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;backg…

js模块加载框架 sea.js学习笔记

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

解密javascript模块载入器require.js

require.config require.config设置require.js模板载入选项 // 定义config req.config = function (config) { return req(config); }; // 载入config配置项 req = requirejs = function (deps, callback, errback, optional) { var context, config, contextName = defContextName; //…

Sea.js学习3——Sea.js的CMD 模块定义规范

在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范中,一个模块就是一个文件.代码的书写格式如下: define(factory); define Function define 是一个全局函数,用来定义模块. define define(factory) define 接受 factory 参数,factory 可以是一个函数,也可以是一个对象或字…

sea.js 学习

开篇:终于学习了sea.js的使用了,因为它是一个模块加载工具,所以首先要了解javascript的模块编程,然后对sea.js的了解和使用 javascript 模块编程为什么要模块化编程,为了让开发人员只需要实现业务逻辑代码,只要加载别人写好的模块化代码即可. '简单的说,模块化就是实现特定功能的一组方法' javascript 本身并不支持模块,但是却可以实现"模块"的效果. 从原始写法,将函数和变量写在一起的,即可称为模块,但是这样会污染全局变量. 对象写法 var modu…

Sea.js学习4——Sea.js的配置

可以对 Sea.js 进行配置,让模块编写.开发调试更方便. seajs.config seajs.config(options) 用来进行配置的方法. seajs.config({ // 别名配置 alias: { 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe', 'json': 'gallery/json/1.0.2/json', 'jquery': 'jquery/jquery/1.10.1/jquery' }, // 路径配置 paths: {…

Sea.js学习2——Sea.js的API 快速参考

(7 个接口是最常用的) 一.seajs.config:用来对 Sea.js 进行配置. seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https://a.alipayobjects.com/arale', 'jquery': 'https://a.alipayobjects.com/jquery' }, // 设置别名,方便调用 alias: { 'class': 'arale/class/1.0.0/class', 'jquery': '…

Sea.js学习1——初识Sea.js

Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单.极致的模块化开发体验. 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定义规范.一个文件就是一个模块. define(function(require, exports) { exports.each = function (arr) { // 实现代码 }; exports.log = function (str) { // 实现代码 }; }); 通过 export…

Sea.js学习5——Sea.js的构建工具spm

如果项目遵循推荐的标准目录结构: foo-module/ |-- dist 存放构建好的文件 |-- src 存放 js.css 等源码 | |-- foo.js | `-- style.css `-- package.json 模块信息那么构建很简单.首先安装 spm 工具(spm2): $ npm install spm@2.x -g $ npm install spm-build@0.x -g 然后运行构建命令: $ cd foo-module $ spm build 这样,就会根据 p…

JavaScript 的 MVP 框架 Riot.js

Riot.js 详细介绍 Riot.js是一个客户端模型-视图-呈现(MVP)框架并且它非常轻量级甚至小于1kb.尽管他的大小令人难以置信,所有它能构建的有如下:一个模板引擎,路由,甚至是库和一个严格的并具有组织的MVP模式.当模型数据变化时视图也会自动更新. 标签定义: Seconds Elapsed: { time } this.time = opts.start || 0 tick() { this.time++ } var timer = setInterval…

JavaScript中模块化工具require.js

什么是require.js? RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. 使用require.js带来的好处 1.防止JavaScript加载阻塞页面渲染(因为它遵循AMD[异步模块加载机制]规范): 2.使用程序调用的方式加载js,防止出现如下丑陋的场景: <script type="text/javascript" src="…

javascript模块加载框架seajs详解

SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用SeaJS可提高javascript的可读性和清晰度,解决javascript编程中繁杂的依赖关系(大项目中js的数量众多和依赖关系复杂比较明显)SeaJS的作者是淘宝前端工程师玉伯.SeaJS本身遵循KISS(Keep It Simple, Stupid)理念进行开发,其本身仅有个位数的API,因…

Node.js学习笔记（二）：模块

模块是 Node.js 应用程序的基本组成部分,文件和模块是一一对应的.一个 Node.js 文件就是一个模块,这个文件可能是 JavaScript 代码.JSON 或者编译过的 C/C++ 扩展. 由于JavaScript没有模块系统,所以Node.js依靠CommonJS规范自身实现了模块系统. 模块的简单使用--exports .require 和 module 在编写和使用每个模块时,Node.js都有require.exports.module三个预先定义好的变量可供使用. expor…

sea.js教程

转载自:http://blog.codinglabs.org/articles/modularized-javascript-with-seajs.html 前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,…

很全很全的 JavaScript 模块讲解

模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元.所谓模块化主要是解决代码分割.作用域隔离.模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面. 模块的优点可维护性. 因为模块是独立的,一个设计良好的模块会让外面的代码对自己的依赖越少越好,这样自己就可以独立去更新和改进. 命名空间. 在 JavaScript 里面,如果一个变量在最顶级的函数之外声明,它就直接变成全局可用.因此,常常不小心出现命名冲突的情况.使用模块化开发来封装变量,可以避…

模块化开发之sea.js实现原理总结

seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实现原理,具体使用请看seajs官网:http://seajs.org/docs/ 下面总结一下: 1. sea.js 是怎样解决模块加载(这里说的模块其实就是js文件加载), 2. sea.js 是怎样解决模块依赖 3. sea.js 是怎样解决命名冲突 1.模块加载其实,原理很简单,和手动…

Sea.Js的运行原理(转)

1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node的不同点在于,前者的运行环境是在浏览器中,这就导致A依赖的B模块不能同步地读取过来,所以Sea.js比起Node,除了运行之外,还提供了两个额外的东西: a.模块的管理 b.模块从服务端的同步即Sea.js必须分为模块加载期和执行期.加载期需要将执行期所有用到的模块从服务端同步过来,在再执行期按照…

js学习笔记(一)

1.数组实用方法大全 //给数组添加个方法,返回数组中的最大值 Array.prototype.max = function() { return Math.max.apply(null,this); } [1,2,3,4].max(); //给数组添加个方法,给数组去重 Array.prototype.unique = function() { return this.filter((item, index, arr) => arr.indexOf(item) === index); } [1…

转: javascript模块加载框架seajs详解

javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载). SeaJS可以和jQuery完美集成,使用SeaJS可提高javascript的可读性和清晰度,解决javascript编程中繁杂的依赖关系(大项目中js的数量众多和依赖关系复杂比较明显) SeaJS的作者是淘宝前端工程师玉伯. SeaJS本身遵循KISS(Keep It Simple, S…

【 js 模块加载】深入学习模块化加载（node.js 模块源码）

一.模块规范说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asynchronous Module Definition):异步模块定义,所谓异步是指模块和模块的依赖可以被异步加载,他们的加载不会影响它后面语句的运行.有效避免了采用同步加载方式中导致的页面假死现象.AMD代表:RequireJS. 它主要有两个接口:define 和 require.defin…

谈谈刚接触sea.js框架得看法

向大神致敬,也是我接触框架得开始. 感谢张鑫旭大神,专业!致敬~ sea.js的7个API,都在下面得链接中有详细说明: http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/bootstrapping.html seajs.use 通过 use 方法,可以在页面中加载任意模块 seajs.config 可以使用 config 方法来配置加载器 define 使用全局函数 define 来定义模块 require 函数用来访问其他模块提供的…

node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

一.一个简单的node程序 1.新建一个txt文件 2.修改后缀修改之后会弹出这个,点击"是" 3.运行test.js 源文件使用node.js运行之后的. 如果该路径下没有该文件,会报错 4.运行test2.js 二.模块简单使用为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在Node环境中,一个.js文件就称之为一个模块(module). 模块化的开发的好处:提高代码的可维护性,避免修…

JavaScript模块化编程之require.js与sea.js

为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内部逻辑. 从而,团队化的合作开发成为必然,各种软件工程技术的引进使得JavaScript的模块化开发成为必然与必须. 本文将主要讨论require.js(AMD)以及sea.js(CMD) AMD 是 RequireJS 在推广过程中对模块定义的规范化产出. CMD 是 SeaJS 在推广过程中…

深入学习sea.js

入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/module3.js' ) }); seajs.use('a3') 二.module学习 _ id:模块的id _url:模块的绝对路径 -dependences :模块的依赖数组 _ exports :当前模块的对外接口 define(function(require,exports,modu…

WebGL three.js学习笔记创建three.js代码的基本框架

WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实…

坑人的 Javascript 模块化编程 sea.js

坑人的 Javascript 模块化编程 sea.js 忧伤加蛋疼的开始了看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https://a.alipayobjects.com/arale', //这特么是不是调用标识呀通过alias 别名来进行调用狗日的说清楚呀 'jquery': 'https://a.alipayobjects.com/jquery' }, // 设置别名,方便调用 alias:…

编写浏览器和Node.js通用的JavaScript模块

长期以来JavaScript语言本身不提供模块化的支持, ES6中终于给出了 from, import等关键字来进行模块化的代码组织. 但CommonJS.AMD等规范已经被广为使用,如果希望你的JavaScript同时支持浏览器和Node.js, 现在只有这几种方式: 通过 browserify等工具进行转换. 提供浏览器端CommonJS框架,比如这个简易的 CommonJS 实现. 通过小心的编码来支持多种环境. browserify几乎可以保证Node.js下测试通过的代码在浏览器中仍然…