SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制，兼容所有主流浏览器 SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载...，让开发可以专注于代码本身的逻辑 上手示例 html中加载初始化模块init.js，init 中调用 module1 模块，同时 module1 模块调用 module2 模块 ?...模块的定义 SeaJS中使用“define”函数定义一个模块 define(id?, deps?...id : 模块标识（选填），不填时，id会被默认赋值为此js文件的绝对路径 deps : 是模块依赖（选填） factory : 模块定义方法（必填） 例如 define('hello', ['jquery.../a"); （3）基址地址——如果载入字符串既不是绝对路径也不是以”./”开头的相对位置，则相对SeaJS全局配置中的“base”来寻址
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS，CMD，AMD等规范后文会提到，这里主要先了解如何在代码中使用。 如果你有使用过nodejs ，那么理解起来就容易多了。...首先，当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包，解压后 在 /dist/目录下可以 找到 sea.js CMD规范是懒加载，...按需加载，也就是在require的时候相应的模块才会被加载进来。...index.html是主界面，main.js这里充当了主模块文件（一般需要 seajs.use('.main') 的方式来加载主模块），然后主模块main又调用main1,main2小模块，理解执行过程.../sea.js"> //加载入口文件main.js，默认后缀js自动匹配 seajs.use('.
参考seajs快速入门 一、前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用 通过exports暴露接口 通过require引入依赖 二、Sea.js...的常用 API seajs.config base string Sea.js 在解析顶级标识时，会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require...中，方式与写jQuery代码相同 1 seajs.config({ 2 3 // 别名配置 4 alias: { 5 'es5-safe': 'gallery.../es5-safe/0.9.3/es5-safe', 6 'json': 'gallery/json/1.0.2/json', 7 'jquery': 'jquery/jquery/...1 通过 use 方法，可以在页面中加载任意模块： 2 3 // 加载模块 main，并在加载完成时，执行指定回调 4 seajs.use('.
朋友网前台页面使用Seajs装载jQuery来进行开发的，大概查看了一下编写的代码，写的比较优雅。上面表情插入的聊天框只要监听它的onpaste(低版本的opera监听它的oninput)进行处理。...我在写例子之前是参考过这篇文章的：《JavaScript模块化开发库之seajs》 Seajs适用于分模块化开发的应用，比如类似QZone，点击“装扮空间”时需要动态加载CSS、JS，在资源加载完成后渲染装扮..._util, seajs._data, seajs....dom模块==>seajs.use(‘dom’)，它将会请求一个dom.js，如果dom.js未定义名为dom的模块或是未使用define(fn)时，当文件被加载后，调用seajs在内部调用fetch方法时...假设test.html页面引用了dom.js，而dom.js 依赖event.js 而event.js依赖cache.js，那么加载顺序将是 dom.js –> event.js –> cache.js
document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages
原生JavaScript的window.onload 将获取元素的语句写到页面头部，会因为元素还没有加载而出错。...JavaScript为了避免加载页面的元素报错的问题，需要在加载之中增加window.onload方法。 如下： ?...jQuery的ready方法 相对的，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。...jQuery的ready方法示例 ? 因为页面没有加载完毕，所以JavaScript中直接获取页面元素就会导致报错。需要加上window.onload方法，如下： ? 此时，可以看到没有报错了。...那是现在再使用jQuery的ready方法，如下: ? 那么，再将ready方法，再简写一下，如下： ?
seajs.config({ alias: { 'jquery': 'jquery/jquery/1.10.1/jquery', 'app/biz': 'http://path/to...//=> 加载的是 http://path/to/base/jquery/jquery/1.10.1/jquery.js var biz = require('app/biz'); /...// 在老浏览器中，提前加载好 ES5 和 json 模块 seajs.config({ preload: [ Function.prototype.bind ?...比如： seajs.config({ preload: 'a' }); // 在加载 b 之前，会确保模块 a 已经加载并执行好 seajs.use('....可以多次运行，每次运行时，会对配置项进行合并操作： seajs.config({ alias: { 'jquery': 'path/to/jquery.js', 'a': 'path
/jquery' }, // 设置别名，方便调用 alias: { 'class': 'arale/class/1.0.0/class', 'jquery': 'jquery...seajs.use 用来在页面中加载一个或多个模块。有点像 es6 中的 import 关键字，就是用来导入文件的 但是 seajs.use 是用来加载模块的。...// 就比如说我们创建了一个 a.js 文件，我们就可以使用 seajs.use 加载一个模块 seajs.use('..../a'); // 加载一个模块，在加载完成时，执行回调 seajs.use('..../a', function(a) { a.doSomething(); }); // 加载多个模块，在加载完成时，执行回调 seajs.use(['./a', '.
但是异步加载并不阻塞代码的运行，如果函数上下文中应用了加载的依赖模块，而此时依赖模块并未加载或者解析完毕，就会抛出undefined错误，避免该错误的发生可以使用回调模式。...当所有依赖模块均加载完毕，后执行代码。这也就是Module/Wrappings规范，而seajs基本实现了该规范。...剖析 阅读seajs官网的入门demo，首先在主页面引入seajs文件，并设置入口 // seajs 的简单配置 seajs.config({ base: "...../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加载入口模块 seajs.use...函数并加载main.js文件，此时解析main模块的依赖，并加载jquery和spining模块，待这两个模块加载完毕，执行回调函数。
一、懒加载 1.什么是懒加载 目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片...，从而节约了网络带宽和提高了初次加载的速度。...二、获取屏幕高度：jquery的height()和javascript的height 1、jquery的各种高度 首先来说一说$(document)和$(window)，如下： $(document)...实现懒加载 <!...2.当滚动页面时，检查页面所有的img标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时 再去判断它是否已经加载过，如果没有加载，加载它 */
由于现在很多的网站都带有大量的图片，而图片的加载又会特别的慢，特别是在移动端，懒加载就显的特别重要了，说白了就是按需加载，用户要看到哪里就显示哪里，下面来记录一下懒加载的基本实现步骤！...1.引入jquery.js与jquery.lazyload.js，由于jquery.lazyload.js依赖于jquery，所以必须要引入jquery 2.配置lazyload...，比如加载效果、没有加载时显示的默认图片等等，可以简单的封装一个方法，方便去调用． function lazy(className) { $(className).lazyload({...//图片在距离屏幕 200 像素时提前加载.
延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop...scrollTop - windowHeight < 100 ){ console.log("到底了"); //ajax渲染页面 } }); jQuery...(function($){ var topicBoxTopHeight = jQuery('#topicBox').offset().top; var topicBoxTopHeight_show
因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的！原始参考：JQuery异步加载实例，相对来说这篇博客还算规整！...springMVC中中文乱码问题：解决办法 准备工作 1 JQuery ZTree，下载地址 复制其中的JS和CSS即可，其实没必要引那么多，用什么引什么就可以。 ?...css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="resources/js/<em>jquery</em>.ztree.core-3.5.js
/sea-modules/”, //别名 alias : { “jquery”: “jquery/jquery/1.10.1/jquery.js(路径)” //方便调用...在CommonJS中，有一个全局性方法require()，用于加载模块 浏览器端 -- AMD(requirejs) CMD(Seajs) 因为服务器与APP都是加载的本地的资源，所以，不用回调这种操作...module.exports = ... }) 启动模块 seajs.use 加载入口模块，我们把define定义的js就叫模块 这个用于在html代码里面的加载 seajs使用的时候，可以先在配置文件中...，修改base设置基本路径，以后加载，都是相对seajs文件所在文件，但是安全起见，最好少用。...js 代码，一定要在 seajs.use 内部通过 window.onload 或者 $(function(){}) requirejs与seajs的区别 requirejs是优先加载的 seajs
GitHub上可以下载； Alice： 是支付宝的前端css解决方案, 是arale的子集； seajs（ 现在由淘宝和腾讯的人在维护这个项目.seajs简单来说, 就是类似与labjs, requirejs..., labjs是可以动态载入js文件, 然后延迟将js功能加载到内存的工具）； 简单的说 Node.js 就是运行在服务端的 JavaScript。...seajs安装 首先安装node.js：直接到官网下载安装； 再用npm（node.js模块管理工具）安装seajs模块，命令行：npm install seajs -g；-g：全局安装； 说明：推荐使用淘宝...npm install spm-build # 必装 npm install spm-doc # 必装 npm install spm-publish # 这个命令发布你的模块到seajs.org..., 必须注册seajs.org网站用户 npm install spm-deploy # 这个命令是ssh发布到服务器 方法二：在spm装好了之后, 使用如下命令 spm install init
seajs主要用于模块化，通过define定义一个模块，可以通过require加载模块，exports导出模块。...在实际生产中，如果紧紧定义一系列seajs模块而并不进行合并压缩的话，加载性能很低，原因大家都懂的，seajs在浏览器端处理依赖模块，并进行异步加载，这个过程中会有多个http请求，大大降低页面的加载速度.../gallery/", alias:{ jquery: 'jquery/jquery-1.11.1' }.../application.js’]；然后设置use模块的callback，并调用load函数加载依赖模块。.../src/util’,’jquery’,’./src/test’,’./src/name’]。
').addClass('active'); }); // 加载模块 seajs.use(['myModule.js'], function(my){ }); 4.1、Seajs Seajs是一个加载器...SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。 ?...与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。...SeaJS可以与jQuery这类框架完美集成。...加载单个依赖 //加载模块 main，并在加载完成时，执行指定回调 seajs.use('.
关于AMD和CMD的理解 AMD（异步模块定义）的典型就是requirejs，而CMD（通用模块定义）的典型是淘宝的seajs。 他们的相同点是，都会异步的加载js。...但是不同点是，require.js加载完会立即执行；而seajs则是等到进入主函数需要执行时才执行。...如果使用seajs初始的加载执行效率会比较高，但是在使用的过程中可能会取执行js，因此可能会出现卡顿，影响用户体验（由于我也没试过，要是说错了，别见怪）。...这时，a模块很显然已经加载完了 。...requirejs使用jquery-ui的问题 由于requirejs加载js文件后会立即执行，如果你的jquery ui 插件需要刷新DOM页面，那么可能会导致页面的事件失效。
seajs鼓励使用define(function(require,exports,module){})这种模块定义方式，这是典型的Module/wrappings规范实现。... 加载模块可以有多种方式，xhr方式可以同步加载，也可以异步加载，但是存在同源问题，因此难以在此使用。...在seajs中，是采用script element方式来并行加载js/css资源的，并针对旧版本的webkit浏览器加载css做了hack。...node, for deriving url in `define` call currentlyAddingScript = node // ref: #185 & http://dev.jquery.com...这些逻辑在fetch方法中得以体现： // Fetch a module // 加载该模块，fetch函数中调用了seajs.request函数 Module.prototype.fetch = function
入口方法 每个程序都有个入口方法，类似于c的main函数，seajs也不例外。系列一的demo在首页使用了seajs.use()，这便是入口方法。...seajs提供的插件plugins，非主要功能，可以忽略。...加载依赖之load方法 load方法可谓是seajs的精华所在。该方法主要加载依赖模块并依次执行依赖模块的回调函数，最终执行的回调函数则是通过seajs.use(“....，则先fetch，将seajs.request函数绑定在对应的requestCache上，此时并未加载模块 if (m.status < STATUS.FETCHING) { m.fetch...(emitData.requestUri, emitData.onRequest, emitData.charset) } 并行加载所有依赖，当依赖加载完毕，执行onRequest回调，向上冒泡，加载依赖的依赖
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
