http://highsea90.com/index.php/archives/1680
如果你是Gallery组件开发者,你的组件可能会被很多页面使用,一方面大家在享受你的代码带来的便利,另一方面,也在考验你代码在各种环境中的可靠性。也就是说,任何用到你的组件的页面都可能需要你的调试。
淘宝首页的首焦轮播使用了我开发的Slide组件,他们报bug给我时,有没有一键式方法调试slide.js?
最直接的方法当然是用fiddler创建本地映射,但是淘宝首页发起的请求是一个Combo链接,类似:
http://g.tbcdn.cn/??tb/global/2.2.22/global-min.js,s/kissy/gallery/slide/1.2/index-min.js
如何为Combo链接中的某个文件创建映射(到本地)?
KISSY Gallery 组件构建工具最新一次更新便提供了这样轻巧的调试环境,一键启动服务,调试非常方便。来看如何在淘宝首页调试本地的Slide代码
1,首先准备环境
安装grunt和Yeoman
npm install yo grunt-cli -g
npm install generator-kissy-gallery -g
2,配好浏览器端环境
两个方法,第一个方法,配 host 到本地
127.0.0.1 a.tbcdn.cn
这当然很好理解,第二个方法,给浏览器配置代理
注意,这里代理的端口是8080,这种方法主要是提供给手机终端调试用(手机中当然没办法配host)
3,checkout 组件源代码
git clone https://github.com/jayli/slide.git
4,补全node_modules
进入到slide目录中,执行
npm install
5,启动服务
在slide目录下执行
grunt debug
注意:Mac和linux下加sudo,并确保本机无其他服务占用80端口(flexcombo用)或8080端口(反向代理用),80和8080端口均可配置。
6,修改源代码1.2/base.js
随便加个 debug
断点或alert()
7,打开淘宝首页
打开控制台,端点生效,Cool!
实现原理
解析Combo链接的服务使用了Flex-combo,反向代理服务使用了reserve-proxy,本地Grunt服务使用Grunt-flexcombo将二者整合到一起。
本地服务实际上有两部分组成,flex-combo服务(默认80端口)和反向代理服务(默认8080端口)。请求到达反向代理时,所有a.tbcdn.cn
和g.tbcdn.cn
的请求会被代理到80端口,由flex-combo去解析Combo链接,并决定哪些文件取本地、哪些文件取线上。
如上文所说,反向代理主要给移动终端和不便配host的终端使用,浏览器如上文所述设置代理,手机终端这样设置代理:
开启本地服务的时候,同时启动了grunt watch
监听,任何对源码的修改都会触发构建操作,保持要调试的代码是最新的。同时,在命令行窗口中可以看到所有请求的log都会打到屏幕上,方便我们的调试。
如果你是Gallery组件开发者,你的组件可能会被很多页面使用,一方面大家在享受你的代码带来的便利,另一方面,也在考验你代码在各种环境中的 可靠性。也就是说,任何用到你的组件的页面都可能需要你的调试。上面说到的技巧可以很大程度减少你的调试成本,赶快尝试一下吧。
相关推荐
在实际项目中,还需要根据具体需求进行调整和扩展,如添加多级菜单、自定义事件、或者与其他组件集成等。在压缩包提供的代码中,你将找到这些概念的具体实现,通过阅读和学习,你可以深入了解KISSY框架在实际项目中...
标题中的“top:返回顶部的kissy组件”指的是一个基于Kissy框架的JavaScript组件,它的主要功能是提供一个用户交互的方式,使用户可以方便地将页面滚动回到顶部。Kissy是一个轻量级、模块化的JavaScript库,它允许...
1. **Kissy框架**:Kissy Editor 2.0基于Kissy JavaScript库构建,Kissy是一个轻量级、模块化的前端开发框架,提供了一套完整的组件化开发方案,使得编辑器具有良好的性能和稳定性。 2. **DOM操作**:利用Kissy的...
Kissy组件可以通过设置或更新状态属性来控制激活的步骤,比如: ```javascript stepsComponent.setActiveStep(1); // 设置第二步为活跃状态 ``` 这将改变相应步骤的视觉效果,如高亮、加粗等。 4. **自定义单...
Kissy的核心模块包括了一系列基础组件和工具,如DOM操作、事件处理、动画效果等。这些模块遵循统一的接口规范,通过`S.add`函数定义,然后通过`S.use`函数按需加载和使用。这种设计使得Kissy能够轻松地与其他库或...
在实际开发中,开发者可以结合标签“源码”和“工具”,深入研究KISSY Editor的源代码,理解其内部工作原理,同时利用提供的工具进行调试和定制。此外,通过阅读博客文章(如指定的链接)和其他社区资源,可以获取更...
JavaScript(简称JS)是网页开发中的重要脚本语言,它为网页添加动态功能,而编辑器则是开发者编写和调试JS代码的重要工具。在JS编辑器领域,KISSY和TinyEditor是两个备受关注的实现。 KISSY是一个开源的JavaScript...
首先,Kissy Editor基于Kissy框架,这是一个JavaScript组件库,强调模块化和高性能。这使得Kissy Editor具有良好的可扩展性和灵活性,开发者可以根据需要选择需要的功能模块,避免了不必要的性能开销。同时,Kissy ...
KISSY是一个轻量级、模块化的JavaScript库,尤其适合中国开发者,因为它内置了对中文字符集的支持,并且提供了丰富的组件和API,便于构建复杂的Web应用。下面我们将深入探讨这个项目可能涉及的关键知识点。 1. **...
KISSY是阿里巴巴开源的一款轻量级的JavaScript框架,旨在提供一套完整的前端解决方案,支持模块化开发、组件化构建,并具有丰富的UI组件库。 1. **KISSY框架**:KISSY的核心理念是"Keep It Simple and Stupid",它...
内容索引:脚本资源,Ajax/JavaScript,输入提示,补全插件 KISSY.Suggest 提示补全组件, 整个组件代码,由两大部分组成:数据处理 + 事件处理。功能丰富,有很多控制参数可选,像提示层的宽度设置、是否显示关闭按钮...
Kissy是一个模块化、组件化的JavaScript框架,它支持AMD(异步模块定义)和CMD(Common Module Definition)规范,使得开发者可以方便地组织和管理代码。Kissy的核心功能包括事件处理、DOM操作、AJAX通信等,同时...
此外,Kissy还支持自定义配置,使得团队可以根据项目特点调整框架的行为,以满足特定的业务需求。 组件齐全是Kissy的另一个优势。它包含了丰富的UI组件,如按钮、表单、布局、对话框、提示等,这些组件设计精良,...
为了更好地管理组件和代码组织,Kissy还实现了多种机制,比如命名空间(namespace)、对象继承(extend)、对象成员拷贝(mix/merge)、原型拷贝(argument)、对象声明(app)等。这些机制为开发者提供了强大的代码封装和复用...
2. **模块化**:基于KISSY的模块化设计,digitalScroll可以轻松地与其他组件集成,降低代码冲突的可能性,同时方便维护和升级。 3. **自定义配置**:digitalScroll允许开发者自定义滚动速度、滚动方向、动画类型等...
这种方式虽然方便快速调整,但对于大型项目来说不利于维护,推荐使用外部CSS文件或内部样式表来进行样式管理。 ### 四、JavaScript交互分析 由于提供的代码片段中没有涉及到具体的JavaScript代码,因此无法直接...
5. **Dexposed**:面向Android应用的AOP框架,基于Xposed,提供运行时的代码修改能力,主要用于快速修复线上问题和调试。 6. **TDDL**:TDDL是淘宝的分布式数据层,实现了数据库的分库分表、读写分离等功能,通过...
在ASP.NET应用中,可以将Kissy Editor作为前端组件,通过Ajax或者Web API等方式与后端ASP.NET服务进行通信,实现数据的提交和获取。 在实际应用中,集成富文本编辑器通常包括以下步骤: 1. **安装和引入**:首先,...
阿里云滑动下拉导航菜单是基于KISSY框架实现的一种高效、易用的网站导航组件,主要用于提升用户体验,提供直观且便捷的页面导航。KISSY是一个强大的JavaScript库,它集成了模块化、组件化、事件驱动等现代前端开发...
它允许开发者使用同一套代码在不同移动平台上运行,极大地提升了开发效率和代码复用性。 2. **JStorm**:这是一个实时流式计算框架,源自Apache Storm并进行了多项改进,如在网络IO、线程模型和资源调度等方面的...