像写NodeJs一样写KISSY代码

Kissy的模块代码需要Kissy.add()的包裹,比如: KISSY.add(function (S, Node) { var $ = Node.all; }, { requires: ['node'] }); 也可以接近CMD的写法: KISSY.add(function (S, require) { var $ = require(‘node’).all; }); 但还是看着不爽,完全CMD模块的写法: var $ = require(‘node’).all; var Demo = function(){}; module.exports = Demo; 去掉add()包裹神清气爽,基…..

玩转kissy系列教程

去年就想重写kissy的系列教程,一直抽不出时间,现在终于开工了… 先打个目录 第一章:Hello kissy 1-1 什么是kissy? 1-2 聊聊kissy的使用场景 第二章:模块机制 2-1 什么是模块机制? 2-2 loader简单使用 2-3 包配置详解 2-4 模块定义与使用 2-5 依赖表的使用 2-6 模块打包 2-7 代码调试 2-8 使用现成的工程构建器 第三章:node-像JQuery一样使用Kissy 3-1 常用选择器 3-1-1 选择器 3-1-2 子孙选择器 3-1-3 相邻元素选择 3-2 DOM操作常用方法 3-2-1 DOM存在性判断 3-2-…..

Redis+NodeJs实战—kissy gallery的重构(3)

上一篇教程我们学习了散列数据和列表数据,还有些问题没解决: 如何保证id不会重复? 如何对列表数据进行排序? 自增长的id 在关系型数据库中id是自增加的,而且是唯一。而在Redis中如何保证呢?特别在并发写操作中,如果出现竞态,就容易出问题。 使用incr() 方法: db.incr(‘repo:autoId’); 自动给 repo:autoId 这个键值+1。 如果你希望每次递增2: db.incrby(‘repo:autoId’,2); 结合前面的添加组件数据的例子: db.incr(‘repo:autoId’); db.get(‘repo:autoId’).then(function(…..

Redis+NodeJs实战—kissy gallery的重构(2)

上一篇教程简单地介绍了Redis以及NodeJs调用Redis,这篇教程将以几个需求场景演示Redis的小而美。 天生的缓存专家 Redis非常适合于做缓存,比如缓存搜索结果,缓存html页面。gallery需要缓存组件文档页面以提高访问速度。 模板使用Jade。 var jade = require(‘jade’); exports.doc = function(req,res){ var name = req.params.name; var data = {‘name’:name}; //缓存键名 var cacheKey = ‘cache:doc:’+name; //判断是否存在文档h…..

Generators 与 Koa.js(1)

Koa.js是下一代的node.js框架,由Express团队开发,通过生成器(generators JavaScript 1.7新引入的,用于解决回调嵌套的方案),减少异步回调,提高代码的可读性和可维护性,同时改进了错误处理(Express的错误处理方式相当糟糕)。 Koa非常小,只有550的代码(ps:这个数字不准,只要知道Koa很精巧即可),但依旧提供了web应用常用的一整套方法,同时拥有强悍的拓展性。 (PS:阿里几个前端团队已经在做基于Koa的上层应用框架,虽然目前Express仍然是主流,相信Koa才是未来。) Installing Node 由于使用了JavaScript 1.7…..

Redis+NodeJs实战—kissy gallery的重构(1)

屏幕快照 2014-07-18 下午7.38.21

kissy gallery是kissy组件库集合网站,用于展示kissy的组件信息和文档,采用NodeJs开发,第一个版本发布后,每周挂掉3次 -_-! ,原因是那时候图简单,使用文件存储组件数据(是个json文件),在写操作时没有做队列处理,造成竞态写数据,很容易导致读取文件时出现读取json出错。 饱受摧残后下定决心使用数据库,数据库的选择很多,比如广受NodeJs开发者喜欢的mongodb,简单趁手,就像右手,但我选择了 Redis,原因是右手用多了,其实左手也不错 -_-! 。 为什么选择 Redis 1.快,变态快 Redis是内存数据库,所有的数据都存储在内存中,很多系统将Redi…..

一些精巧的HOVER效果

本文介绍通过应用CSS的一些新特性,如3D变换和伪元素来创造一些精巧的hover效果。 现在很常看到好的设计有着优美的线条、留白,简洁的布局和精妙的效果。这里来分享如何创建这些巧妙的hover效果。 这里的hover效果应用3D转换和伪元素。 注意:这些新特性需要浏览器支持,你懂得……字体变形在firefox上不是很流畅。 demo图片来至Unsplash, 所用的icon来至Feather icon set作者 Cole Bemis 结构如下: <figure class=”effect-lily”> <figcaption> Nice Lily Lily likes to pl…..

compass实战—retina sprite

明河讲解了compass的sprite工具的使用,但还没有完,随着retina屏幕的盛行,我们做的sprite必须做下适配,不然在retina屏幕下图片会发虚发糊。这篇教程将围绕 retina 适配展开。 什么是retina? 推荐一篇很好的科普文:《走向视网膜(Retina)的Web时代》,这里不再花大量篇幅说明。 我们的sprite雪碧图,为了适配 retina 需要做些什么呢? 生成一张二倍大小的sprite雪碧图 编写适配css,当时retina屏幕时使用x2的sprite图片 这二件事看似简单,却又不少门道在里面。 推荐二篇文章:《Sass Mixins——支持Retina的Icon…..

compass实战—sprite

做sprite(雪碧图)是对于前端来说一件痛苦耗时的事,比如2014版淘宝首页做的sprite:http://gtms03.alicdn.com/tps/i3/T1wTwXFQFXXXcLNDLI-400-500.png,切这样规整的图(定位时保证偏移都是整数…),我的leader遇春大概花了大半天时间。也许亲会说,傻X,为什么不用compass的sprite工具。实际上项目初始我们是是使用compass的sprite,不过在做retina X2时遇到麻烦,容后再禀。 如何使用compass快速生成sprite compass官网上有篇简单的教程可以看下,腾讯的同学也写了个视频教程…..

compass实战—grunt

上一篇教程明河介绍了compass的安装和编译,这篇教程将深入讲解compass与grunt的结合,包括grunt-contrib-watch、grunt-contrib-compass、sprite等。 grunt-contrib-watch:实时编译sass文件 点此查看完整Gruntfile.js grunt.loadNpmTasks(‘grunt-contrib-watch’); 注册watch任务: grunt.registerTask(‘dev’, ['watch']); watch任务配置: watch: { compass: { files: [‘<%= srcBase …..

compass实战—入门篇

compass

sass作为css预编译器逐渐成为主流关于在于compass,compass对于sass,就像ruby on rails对于ruby。compass是Sass的工具库,涵盖基于sass开发的完整工作流,推荐阅读《Compass用法指南》,这篇文章不够深入,故开个系列教程讲解compass(教程重点不在sass,sass的资料传送门)。 一个好的css工具库必须包含如下几个部分: 工具支撑 css3支持 css常用设计模式库 响应式设计支持 兼容性hack支持 sprite图片支持 retina支持 字体支持 compsass完全满足上述需求,可以提高css编写效率和提高代码的可维护性,这个系列…..

发布kissy小工程构建器generator-bee

bee-loge

generator-bee是kissy简单工程构建器,跟generator-xcake和generator-clam有所不同,强调简单和快速,没有复杂的目录分级和复杂的命令功能,不是以页面作为划分维度,适用于小工程构建,适用于kissy mini工程。 generator-bee 遵循最新的kissy规范,会生成demo页面和测试用例范例,支持kissy mini。 阿里内部环境,使用依赖表——combo的方式,不再静态合并文件。 作者:明河(剑平) 工具库地址 demo工程传送门 反馈bug 安装 安装yeoman npm install yo grunt-cli -g 安装kissy-ga…..

无觅相关文章插件,快速提升流量