SeaJS入门】的更多相关文章

SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的buil…
最近想搞搞JS模块化, 读到了园子里的一篇好文:  http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 看里面讲seajs不错, 于是想学一下, 到官网一看, 5分钟入门, 真是好感度倍增,  万万没想到人家那教程,  是写给玩过nodejs, requirejs之类的高人看的, 咱这智商,50分钟都不够啊. 好容易找资料弄出个最最简单的东西, 记录一下:   1) 下载seajs.    不知道各个版本都有什么区别, 总之下载最新的…
研究了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是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑.SeaJS可以与jQuery这类框架完美集成.使用SeaJS可以…
一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.js——SeaJS脚本.3.init.js——init模块,入口模块,依赖data.jquery.style三个模块.由主页面载入.4.data.js——data模块,纯json数据模块,由init载入.5.jquery.js——jquery模块,对 jQuery库的模块化封装,由init载入.6.s…
Sea.js是一种模块加载工具 官网:http://seajs.org/docs/ 使用步骤: 1.下载sea.js 2.引入sea.js 3.加入配置代码 // seajs 的简单配置 seajs.config({ base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) 4.加载入口模块 //开发环境 if (location.href.…
使用 Sea.js 进行模块化开发还能够带来非常多优点: 模块的版本号管理. 通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理. 提高可维护性.模块化能够让每一个文件的职责单一,很有利于代码的维护.Sea.js 还提供了 nocache.debug 等插件,拥有在线调试等功能.能比較明显地提升效率. 前端性能优化. Sea.js 通过异步载入模块,这对页面性能非常故意. Sea.js 还提供了 combo.flush 等插件,配合服务端,能够非常好地对页面性能进行调优. 跨环境共…
SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器   [CMD规范](https://github.com/cmdjs/specification/blob/master/draft/module.md)9.seaJs启动函数的回调函数 官网:http://seajs.org/docs/ github:https://github.com/seajs/seajs 如何选择一个技术产品栈: - 看作者是否是大牛 - 看社区是否活跃 - 看是否经常更新 SeaJS的作者已经不更新该项目了…
一.安装grunt: npm install -g grunt-cli //安装 npm install grunt –save-dev //安装Grunt最新版本到项目目录中,并将其添加到devDependencies内 grunt –version //出现grunt -cli 和 grunt的版本号即安装成功 二.配置packge.json文件: [代码中去掉注释] module.exports = function(grunt) { // Project configuration. g…
随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发的seaJs,它有很多优点: 遵从CMD规范,代码模块化 中文文档通俗易懂,入门上手简单 兼容性好.配置简洁明了.提供插件接口 seajs模块化基本流程: 引入sea.js库 define定义模块 exports暴露模块 require导入模块 安装 npm安装 npm i seajs bower安…
本文所用例子的代码目录结构: seajs example |--sea-module //存在依赖文件 |--jquery |--jqeury.js |--sea.js |--static //存放自定义模块js |--main.js |--index.html //调用页面 seajs页面引入 下面开始,首先看下index: <!DOCTYPE html> <html lang="en"> <head> <meta charset="…
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,…
转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是100多kb: 2.兼容IE6+,符合天朝市场需求: 3.效率更高,跑起来比angular和knockout都要更快,在移动端上该优势会更大(avalon有移动端专版的avalon.modern.js).关于其性能…
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期…
简述 前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现.类似于c/c++的include,java中的import关键字,在js中也定义了require关键字,用以引进依赖模块. 由于规范的多样性,模块化的实现也是各有各的不同.nodejs遵从的就是commonJS规范,它有着一些形式上的约定: require为函数,该函数接受一个字符串作为模块标示符 require函数返回值…
一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能.webpack的官网是 http://webpack.github.io/ ,文档地址是http://webpack.github.io/docs/,官网对webpack的定义是MODULE BUNDLER,他的目的就是把有依赖关系的各种…
本文只是seajs的入门贴.要详细了解,请看GitHub主页上的相关链接,精彩不断,精选几篇: 前端模块化开发的价值 前端模块化开发的历史 ID和路径匹配原则 与RequireJS的异同 模块的加载启动 下面本文开始: seajs的价值 原生javascript的一个弱项,就是不支持模块化,说白了就是没有其他语言的import,include等语句.所以开发者就只有2个选择:把所有的东西写到一起,或者通过全局变量来交互 这至少造成以下几个问题: 1.污染全局变量,容易发生命名空间冲突,难以维护…
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模块. 新建目录结构如下 这次新建了一个子目录js,把main.js和selctor.js放入其中,require.js仍然和index.html在同一级目录. HTML 如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!doctype html>…
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得到广大产品和开发人员的使用.作为一个开发人员,这里总结下echart的开发配置. 1.ECharts简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10…
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. 当然也不会有阻塞(blocking)的情况发生.好,以一个简单示例开始. 新建一个目录,结构如下 目录r1下有index.html.jquery-1.7.2.js.main.js.require.js.require.js和jquery-1.7.2.j…
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模块. 新建目录结构如下 这次新建了一个子目录js,把main.js和selctor.js放入其中,require.js仍然和index.html在同一级目录. HTML 如下 <!doctype html> <html> <head> <title>requir…
JavaScript模块化开发库之SeaJSSeaJS由国内的牛人lifesinger开发.目前版本是1.1.1,源码不到1500行,压缩后才4k,质量极高.这篇会讲述SeaJS的一些基本用法,不会面面俱到,但会就个人的理解讲述官方文档没有提到的一些细节. 一.SeaJS的全局接口 SeaJS向全局公开了两个标识符: seajs 和 define. 如果你的项目中已经用了标识符seajs,又不想改.这时SeaJS可以让出全局的seajs.如var boot = seajs.noConflict(…
seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发,以及它的一些弊端. 使用seajs进行模块化开发 项目目录 新建新项目 引入sea.js,文件路径modules/sea.js 引入公共库jquery. 新建index.html,index.js 项目目录如下: 关于sea.js的公共模块路径sea.js加载时,会自动获取sea.js所在的路径,将…
前端神器avalonJS入门(一) posted @ 2014-10-31 17:44 vajoy 阅读(1665) 评论(32) 编辑 收藏   avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是100多kb: 2.兼容IE6+,符合天朝市场需求: 3.效率更高,跑起来比angular和knockout都要更快,在移动端上该优势会更大(avalon有移动…
参考seajs快速入门 一.前端模块化的价值 解决命名冲突 摆脱文件依赖 性能优化 提高可维护性 seajs.use方法调用通过exports暴露接口通过require引入依赖 二.Sea.js 的常用 API seajs.config base string    Sea.js 在解析顶级标识时,会相对 base 路径来解析 seajs.use 用来在页面中加载模块 require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口require 的参数值 必须 是字符串直接…
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期…
前端神器avalonJS入门(一) posted @ 2014-10-31 17:44 vajoy 阅读(8759) 评论(42) 编辑 收藏   avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是100多kb: 2.兼容IE6+,符合天朝市场需求: 3.效率更高,跑起来比angular和knockout都要更快,在移动端上该优势会更大(avalon有移动…
前端的构建打包工具很多,比如grunt,gulp.相信这两者大家应该是耳熟能详的,上手相对简单,而且所需手敲的代码都是比较简单的.然后webpack的出现,让这两者打包工具都有点失宠了.webpack比起前两者打包工具,对于前端程序员JS编程能力的要求还是挺高的.不过需要兼容ie8及以下的小伙伴们,就不要考虑webpack了,他很傲娇地不兼容! webpack 前期准备 webpack,这是一个组合词"web"+"pack",web就是网站的意思,"pac…
常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图文列表</title> 6 <style type="text/css"> 7 li{list-style-ty…
摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了 作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别? Library 库,本质上是一些函数的集合.每次调用函数,实现一个特定的功能,接着把控制权交给使用者 代表:jQuery jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作 Fra…