上一页 1 ··· 5 6 7 8 9 10 11 12 13 ··· 18 下一页

JavaScript模块化开发库之SeaJS

摘要: SeaJS由国内的牛人lifesinger开发。目前版本是1.1.1,源码不到1500行,压缩后才4k,质量极高。这篇会讲述SeaJS的一些基本用法,不会面面俱到,但会就个人的理解讲述官方文档没有提到的一些细节。一、SeaJS的全局接口SeaJS向全局公开了两个标识符: seajs 和 define。如果你的项目中已经用了标识符seajs,又不想改。这时SeaJS可以让出全局的seajs。如var boot = seajs.noConflict(); 这时boot就相当于先前的seajs。如果你的项目中连标识符define也用到了,也不想改。SeaJS是很宽容的,它的define也可以让出。. 阅读全文
posted @ 2012-03-30 08:03 snandy 阅读(25002) 评论(12) 推荐(22) 编辑

UMD和ECMAScript模块

摘要: 一、UMD:AMD 和CommonJS的糅合前面花了很长的篇幅介绍了两大类模块规范,CommonJS(Modules/Modules/Wrappings)及AMD。我们知道Modules/Wrappings是出于对Node.js模块格式的偏好而包装下使其在浏览器中得以实现。而Modules/Wrappings的格式通过某些工具(如r.js)也能运行在Node.js中。事实上,这两种格式同时有效且都被广泛使用。AMD以浏览器为第一(browser-first)的原则发展,选择异步加载模块。它的模块支持对象(objects)、函数(functions)、构造器(constructors)、字符串( 阅读全文
posted @ 2012-03-19 20:38 snandy 阅读(9163) 评论(2) 推荐(7) 编辑

AMD:浏览器中的模块规范

摘要: 前面提到,为实现与Node.js相同方式的模块写法,大牛们做了很多努力。但浏览器环境不同于服务器端,它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地),这个请求过程多数使用script tag,script 默认的异步性导致很难实现与Node.js一模一样的模块格式。Modules... 阅读全文
posted @ 2012-03-12 07:59 snandy 阅读(31896) 评论(7) 推荐(16) 编辑

Node.js模块风格在浏览器中的尝试

摘要: 前面提到Node.js有一套简洁的格式写模块,它遵循的就是 Moudles。浏览器里的JavaScript呢? 尽管语言本身暂不支持模块(ES6打算支持),但可以用现有的 API 包装一个写法出来。毫无疑问,首先想到的是Node.js的 Modules 格式,它是最好的效仿对象。因为前后端有一个统一... 阅读全文
posted @ 2012-03-09 07:30 snandy 阅读(5922) 评论(4) 推荐(7) 编辑

JavaScript中模块“写法”

摘要: 在JavaScript模块到底是什么,能用代码具体展现一下吗?其实上一篇已经写了一段事件模块代码event = function() { // do more return { bind: function() {}, unbind: function() {}, trigger: funct... 阅读全文
posted @ 2012-03-08 07:42 snandy 阅读(11450) 评论(1) 推荐(13) 编辑

拥抱模块化的JavaScript

摘要: 我们再一次被计算机的名词,概念笼罩。backbone、emberjs、spinejs、batmanjs等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs 等模块化的JavaScript概念及库扑面而来。模块化JavaScript的概念尤为突出,... 阅读全文
posted @ 2012-03-07 07:27 snandy 阅读(15233) 评论(4) 推荐(10) 编辑

图片播放(3)

摘要: 功能1,图片数量控制2,自动播放控制(左右来回)3,每次移动图片数量控制4,播放速度控制效果图接口jQuery('.scroll-pic').videoImg({ duration:300, moveCount: 2, autoPlay: true}, arr); slide3.zip 阅读全文
posted @ 2012-03-06 11:57 snandy 阅读(808) 评论(0) 推荐(0) 编辑

图片播放(2)

摘要: 效果图jQuery插件方式var imgs = [ { p: 'http://i1.itc.cn/20120209/3ab_28e81ccb_8694_65ad_6eb6_801b4d9d0cdf_5.jpg', l: 'http://mikesakai.blog.sohu.com/203130261.html', t: '博友实拍日本史上最猛烈降雪' }, { p: 'http://i3.itc.cn/20120209/3ab_28e81ccb_8694_65ad_6eb6_801b4d9d0cdf_4.jpg', l:  阅读全文
posted @ 2012-03-06 09:48 snandy 阅读(775) 评论(0) 推荐(1) 编辑

图片播放(1)

摘要: 一道题目,要求:在页面的固定区域内实现图片的展示1) 每点击一次右箭头,图片区域向左滚动出一张图片,反之相同;2) 当发现图片滚动到末尾时,响应的箭头变成不可点击状态;3) 鼠标在图片区域内滑动滚轮,图片会随着鼠标滚轮的方向进行响应的滚动;4) 当超过5秒没有任何交互操作时,进入自动滚动状态,间隔为5秒,到末尾时自动回到起始状态;5) 要求使用jQuery-1.6以上版本,遵循web开发规范,js文件以plugin组件方式封装或采用jQueryUI Widget方式封装;6) 可以使用原生JS开发,但要解决浏览器兼容问题,封装方式可参考CommonJS规范;考核点:1. 符合W3C标准2. 实 阅读全文
posted @ 2012-03-05 17:16 snandy 阅读(1564) 评论(0) 推荐(1) 编辑

使用r.js压缩整个项目的JavaScript文件

摘要: r.js是RequireJS的一部分(optimizer)。它依赖于UglifyJS,而UglifyJS基于nodejs。r.js多数时候配合模块化(AMD)写法进行合并,压缩。如果你的代码不采用AMD方式,也可以用它来压缩。这篇讨论的是当不采用AMD方式组织代码时压缩整个项目的js文件。假设项目中所有的js文件都在scripts目录中项目中有css,html,scripts三个目录,分别对应css,html和js文件。下载的r.js与myapp平行放置。scripts-build目录放置压缩后的js文件,结构同scripts,但会多生成一个build.txt文件。build.js文件是需要我 阅读全文
posted @ 2012-03-05 11:03 snandy 阅读(15432) 评论(3) 推荐(3) 编辑

使用UglifyJS合并/压缩JavaScript

摘要: 在UglifyJS入门中主要记录了UglifyJS的安装,配置。篇末在命令行中使用了一个简单命令来压缩一个JS文件。这篇以编程的方式去压缩JS文件。即写一个build.js文件,使用node命令执行该文件。build.js中的代码会去调用UglifyJS的接口函数以执行压缩任务。1,去github下载最新的UglifyJS。两种方式下载,如果安装了git,进入git控制台使用如下命令git clone git://github.com/mishoo/UglifyJS.git或者使用http方式下载,点击zip下载。解压后其目录结构如下2,新建一个项目(文件夹)myApp,将uglify-js. 阅读全文
posted @ 2012-03-04 17:08 snandy 阅读(7447) 评论(3) 推荐(2) 编辑

Node.js的模块写法入门

摘要: 前面提到了Node.js的命令行和Web版之“Hello,World”。命令行是直接执行hello.js文件,Web版的需要require http模块。http模块是NodeJS自身提供的。我们知道每个模块对应一个js文件,这篇写一个最简单的模块hello.js, 然后在另一个js文件(main.js)中require自定义的模块。hello.jsfunction hello(name) { console.log('hello, '+ name);}exports.hello = hello;main.jsvar h = require('./hello') 阅读全文
posted @ 2012-03-03 23:22 snandy 阅读(13110) 评论(0) 推荐(1) 编辑

Node.js入门

摘要: 首先,去http://nodejs.org 下载安装。我下的版本是0.8.14。安装很简单,下一步下一步就哦了。我的安装目录是C:\Program Files (x86)\nodejs。这时使用node -v 命令查看下安装的版本一、helloworld在Node.js安装目录中新建一个文件hello.js,里面敲一行代码console.log('hello, nodejs.') ;进入命令行控制台,进入到Node.js目录敲node hello.js控制台输出了“hello, nodejs.”二、web版的helloworld在Node.js安装目录中新建一个http.js, 阅读全文
posted @ 2012-03-03 08:23 snandy 阅读(18826) 评论(3) 推荐(7) 编辑

Uglifyjs入门

摘要: 需要先安装node,进入命令行,查看node,npm是否正确安装。接下来安装UglifyJS,命令如:npm install uglify-js -g最后别忘了把node和npm添加到环境变量中,我的分别是C:\Program Files (x86)\nodejs\;C:\Users\taozhou\AppData\Roaming\npm;现在就可以使用uglifyjs就行压缩了,如uglifyjs folder/dom.js -> folder/dom-min.js会把目录folder下dom.js压缩,保存在同一个目录下。详细参数参考: https://github.com/mish 阅读全文
posted @ 2012-03-03 08:23 snandy 阅读(16586) 评论(1) 推荐(2) 编辑

JavaScript模态对话框类(拖拽时动画)

摘要: 2010年写了一个模态对话框类,这次进行一些重构和扩充。拖拽时使其有动画效果。接口没变,如下 new ModelDialog({ caption 标题 '对话框标题'(默认) template 主体内容 ''(默认) dialogCls 对话框className 'md-dialog'(默认) headCls 头部className 'md-head'(默认) btnCloseCls 关闭按钮className 'md-close'(默认) bodyCls ... 阅读全文
posted @ 2012-03-02 20:05 snandy 阅读(2406) 评论(1) 推荐(6) 编辑

Javascript自动补全类(2)

摘要: 前一篇中的补全内容不会随着输入的自行筛选。即补全的内容是固定不变的。这篇的则会随着用户输入而自动匹配。接口:new InputSuggest({ input HTMLInputElement 必选 data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className ... 阅读全文
posted @ 2012-03-02 19:47 snandy 阅读(2587) 评论(2) 推荐(6) 编辑

JavaScript中“+”的陷阱(续)

摘要: 一、两个中括号相加[] + []中括号没有语句块的作用,因此这里的两个中括号就是一个数组。两个数组(对象类型)相加先要将其转换成值类型(基本类型)。1,转成值类型调用valueOf,[]的valueOf()还是自己var arr = [];arr.valueOf() === arr; // true2,转成字符串,[]的toString是空字符串[].toString(); // ""String([]) // ""结果出来了。两个空字符串相加,结果仍然是空字符串。即这里的“+”指字符串连接而非数字相加。二、大括号和中括号的相加{} + []注意这里的大 阅读全文
posted @ 2012-03-02 13:05 snandy 阅读(2426) 评论(2) 推荐(6) 编辑

JavaScript中“+”的陷阱

摘要: 以下运算{}+{}结果是什么?稍等..先了解下+运算符。JavaScript中运算符 “+” 很简单,有两种意思1,字符串连接2,数字相加运算时其它值都将转换成这两个类型。JavaScript中有基本类型(undefined, null, booleans, numbers, strings)、对象类型(objects, arrays)和函数类型(functions)。类型转换时先将对象/函数类型转换成基本类型。然后在根据运算符“+”转成字符串或数字。其它基本类型转成数字 有如下规则Number(undefined) // NaNNumber(null) // 0Number(tru... 阅读全文
posted @ 2012-03-02 09:29 snandy 阅读(2226) 评论(11) 推荐(1) 编辑

仅IE6/7浏览器SPAN元素包含块级元素会使SPAN的背景色显示

摘要: 这个bug发生在下面的网页,http://yyhygw.blog.sohu.com/204511710.html博客文字在IE下有背景色,其它浏览器没有。重现代码如下<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><span style="background-color:gray;"> <p>block element</p> <div>block elem 阅读全文
posted @ 2012-03-02 07:21 snandy 阅读(2726) 评论(3) 推荐(2) 编辑

call和apply的第一个参数是null/undefined时函数内的的this指向window或global

摘要: call/apply用来改变函数的执行上下文(this),它们的第一个参数thisArg是个对象,即作为函数内的this。多数时候你传啥函数内就是啥。仅以call示例function fun() { alert(this);}fun.call(1);fun.call('a');fun.call(true);fun.call({name:'jack'}); 分别弹出“1”、“a”、“true”、“[object Object]”。有两种情况需要注意,传null或undefined时,将是JS执行环境的全局变量。浏览器中是window,其它环境(如node)则是gl 阅读全文
posted @ 2012-03-01 11:32 snandy 阅读(12996) 评论(4) 推荐(5) 编辑

JavaScript中函数声明优先于变量声明

摘要: 同一个标示符,先后用var和function声明它。最后它是什么呢?var a; // 声明一个变量,标识符为afunction a() { // 声明一个函数,标示符也为a}alert(typeof a);显示的是“function”,即function的优先级高于var。有人觉得这是代码顺序执行的原因,即a被后执行的funcion覆盖了。好,将它们调换下。function a() {}var a;alert(typeof a);结果仍然显示的是“function”而非“undefined”。即函数声明优先于变量声明。我们把代码稍作修改,声明a时同时赋值。function a() {}var 阅读全文
posted @ 2012-03-01 07:28 snandy 阅读(5460) 评论(24) 推荐(6) 编辑

JavaScript中的变量声明早于赋值

摘要: 如下var a = 3;实际有两个步骤:1 初始化a为undefined2 a赋值3 因此会出现一些“匪夷所思”的现象,即JS中变量可以先使用后声明。这在Java中是不允许的。System.out.println(a);int a = 1;编译通不过。但JS可以,如下alert(a);var a;虽然是undefined,但不会报错。说明a的确声明了,且为undefined。如果只是“alert(a)”,没有“var a”的话JS引擎会报错的。alert(a);FF中如下虽然可以先使用再声明,但这样会造成赋值的效果丢失。如下alert(a);var a = 1;这次输出的仍然是undefine 阅读全文
posted @ 2012-02-29 10:14 snandy 阅读(2951) 评论(2) 推荐(2) 编辑

JavaScript中使用构造器创建对象无需new的情况

摘要: JS中创建对象可以直接使用直接量的方式,这里讨论的是定义一个构造器(function)的情况。如下function Person(name, age) { this.name = name; this.age = age;}var p = new Person('lily', 20);发现某些库代码中创建正则对象的方式无需new,这让人感到奇怪。如下var reg = RegExp('^he$');测试发现使用或不使用new,最后返回的都是正则对象,且typeof它们都是“object”。var reg1 = new RegExp('^he$') 阅读全文
posted @ 2012-02-29 07:31 snandy 阅读(4029) 评论(10) 推荐(3) 编辑

设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

摘要: 设置iframe的document.designMode为On可以让其可编辑,一般用在富文本编辑器组件中。这里仅列出各浏览器差异。重现如下:<!doctype html><html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title> <meta charset="utf-8"> </head> <body> <iframe frameborder="1&qu 阅读全文
posted @ 2012-02-27 18:36 snandy 阅读(2848) 评论(0) 推荐(2) 编辑

Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试

摘要: 偶然发现的,页面中没有引入Prototype和jQuery。控制台中敲$却发现是一个函数。又试着敲$$,也是个function。霍霍..接着在各个浏览器中测试,发现Firefox/Chrome/Safari中有,IE9/Opera没有。$ 相当于 document.getElementById$$ 相当于 document.querySelectorAll在chrome控制台敲$,$$一目了然这两个函数都是浏览器调试工具自带的。 阅读全文
posted @ 2012-02-12 17:41 snandy 阅读(1784) 评论(5) 推荐(0) 编辑
上一页 1 ··· 5 6 7 8 9 10 11 12 13 ··· 18 下一页