`

如何调试KISSY组件的代码?

 
阅读更多

http://highsea90.com/index.php/archives/1680

 

kissy
如果你是Gallery组件开发者,你的组件可能会被很多页面使用,任何用到你的组件的页面都可能需要你的调试。KISSY的组件代码如何快速调试,本文将带给你一些指引。

如果你是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

安装generator-kissy-gallery

npm install generator-kissy-gallery -g

2,配好浏览器端环境

两个方法,第一个方法,配 host 到本地

127.0.0.1 a.tbcdn.cn

这当然很好理解,第二个方法,给浏览器配置代理

2

注意,这里代理的端口是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将二者整合到一起。

kissy

本地服务实际上有两部分组成,flex-combo服务(默认80端口)和反向代理服务(默认8080端口)。请求到达反向代理时,所有a.tbcdn.cng.tbcdn.cn的请求会被代理到80端口,由flex-combo去解析Combo链接,并决定哪些文件取本地、哪些文件取线上。

如上文所说,反向代理主要给移动终端和不便配host的终端使用,浏览器如上文所述设置代理,手机终端这样设置代理:

4

开启本地服务的时候,同时启动了grunt watch监听,任何对源码的修改都会触发构建操作,保持要调试的代码是最新的。同时,在命令行窗口中可以看到所有请求的log都会打到屏幕上,方便我们的调试。

5


如果你是Gallery组件开发者,你的组件可能会被很多页面使用,一方面大家在享受你的代码带来的便利,另一方面,也在考验你代码在各种环境中的 可靠性。也就是说,任何用到你的组件的页面都可能需要你的调试。上面说到的技巧可以很大程度减少你的调试成本,赶快尝试一下吧。

分享到:
评论

相关推荐

    js KISSY框架仿阿里云滑动下拉导航菜单效果代码.zip

    在实际项目中,还需要根据具体需求进行调整和扩展,如添加多级菜单、自定义事件、或者与其他组件集成等。在压缩包提供的代码中,你将找到这些概念的具体实现,通过阅读和学习,你可以深入了解KISSY框架在实际项目中...

    top:返回顶部的kissy组件

    标题中的“top:返回顶部的kissy组件”指的是一个基于Kissy框架的JavaScript组件,它的主要功能是提供一个用户交互的方式,使用户可以方便地将页面滚动回到顶部。Kissy是一个轻量级、模块化的JavaScript库,它允许...

    kissy editor 2.0

    1. **Kissy框架**:Kissy Editor 2.0基于Kissy JavaScript库构建,Kissy是一个轻量级、模块化的前端开发框架,提供了一套完整的组件化开发方案,使得编辑器具有良好的性能和稳定性。 2. **DOM操作**:利用Kissy的...

    步骤条组件-来自明河共影

    Kissy组件可以通过设置或更新状态属性来控制激活的步骤,比如: ```javascript stepsComponent.setActiveStep(1); // 设置第二步为活跃状态 ``` 这将改变相应步骤的视觉效果,如高亮、加粗等。 4. **自定义单...

    kissy模块化实践

    Kissy的核心模块包括了一系列基础组件和工具,如DOM操作、事件处理、动画效果等。这些模块遵循统一的接口规范,通过`S.add`函数定义,然后通过`S.use`函数按需加载和使用。这种设计使得Kissy能够轻松地与其他库或...

    淘宝开源编辑器KISSY Editor

    在实际开发中,开发者可以结合标签“源码”和“工具”,深入研究KISSY Editor的源代码,理解其内部工作原理,同时利用提供的工具进行调试和定制。此外,通过阅读博客文章(如指定的链接)和其他社区资源,可以获取更...

    js编辑器KISSY和TinyEditor

    JavaScript(简称JS)是网页开发中的重要脚本语言,它为网页添加动态功能,而编辑器则是开发者编写和调试JS代码的重要工具。在JS编辑器领域,KISSY和TinyEditor是两个备受关注的实现。 KISSY是一个开源的JavaScript...

    kissy_editor淘宝官方。点开demo.html即可实现网页编辑器

    首先,Kissy Editor基于Kissy框架,这是一个JavaScript组件库,强调模块化和高性能。这使得Kissy Editor具有良好的可扩展性和灵活性,开发者可以根据需要选择需要的功能模块,避免了不必要的性能开销。同时,Kissy ...

    基于KISSY的动画导航.zip

    KISSY是一个轻量级、模块化的JavaScript库,尤其适合中国开发者,因为它内置了对中文字符集的支持,并且提供了丰富的组件和API,便于构建复杂的Web应用。下面我们将深入探讨这个项目可能涉及的关键知识点。 1. **...

    基于KISSY的背景渐变特效.zip

    KISSY是阿里巴巴开源的一款轻量级的JavaScript框架,旨在提供一套完整的前端解决方案,支持模块化开发、组件化构建,并具有丰富的UI组件库。 1. **KISSY框架**:KISSY的核心理念是"Keep It Simple and Stupid",它...

    KISSY.Suggest 仿百度、淘宝输入提示补全功能的组件及实例

    内容索引:脚本资源,Ajax/JavaScript,输入提示,补全插件 KISSY.Suggest 提示补全组件, 整个组件代码,由两大部分组成:数据处理 + 事件处理。功能丰富,有很多控制参数可选,像提示层的宽度设置、是否显示关闭按钮...

    js淘宝kissy框架制作千百汇家居购物商城购买引导动画效果

    Kissy是一个模块化、组件化的JavaScript框架,它支持AMD(异步模块定义)和CMD(Common Module Definition)规范,使得开发者可以方便地组织和管理代码。Kissy的核心功能包括事件处理、DOM操作、AJAX通信等,同时...

    淘宝开源的前端UI框架

    此外,Kissy还支持自定义配置,使得团队可以根据项目特点调整框架的行为,以满足特定的业务需求。 组件齐全是Kissy的另一个优势。它包含了丰富的UI组件,如按钮、表单、布局、对话框、提示等,这些组件设计精良,...

    开源的javascript项目Kissy介绍

    为了更好地管理组件和代码组织,Kissy还实现了多种机制,比如命名空间(namespace)、对象继承(extend)、对象成员拷贝(mix/merge)、原型拷贝(argument)、对象声明(app)等。这些机制为开发者提供了强大的代码封装和复用...

    digitalScroll:基于 KISSY 和 Layer-anim 的 javascript 数字滚动小部件

    2. **模块化**:基于KISSY的模块化设计,digitalScroll可以轻松地与其他组件集成,降低代码冲突的可能性,同时方便维护和升级。 3. **自定义配置**:digitalScroll允许开发者自定义滚动速度、滚动方向、动画类型等...

    全屏海报左侧代码

    这种方式虽然方便快速调整,但对于大型项目来说不利于维护,推荐使用外部CSS文件或内部样式表来进行样式管理。 ### 四、JavaScript交互分析 由于提供的代码片段中没有涉及到具体的JavaScript代码,因此无法直接...

    阿里巴巴的10款开源项目.pdf

    5. **Dexposed**:面向Android应用的AOP框架,基于Xposed,提供运行时的代码修改能力,主要用于快速修复线上问题和调试。 6. **TDDL**:TDDL是淘宝的分布式数据层,实现了数据库的分库分表、读写分离等功能,通过...

    Asp.net用户前台富文本编辑器

    在ASP.NET应用中,可以将Kissy Editor作为前端组件,通过Ajax或者Web API等方式与后端ASP.NET服务进行通信,实现数据的提交和获取。 在实际应用中,集成富文本编辑器通常包括以下步骤: 1. **安装和引入**:首先,...

    阿里云滑动下拉导航菜单

    阿里云滑动下拉导航菜单是基于KISSY框架实现的一种高效、易用的网站导航组件,主要用于提升用户体验,提供直观且便捷的页面导航。KISSY是一个强大的JavaScript库,它集成了模块化、组件化、事件驱动等现代前端开发...

    阿里巴巴的10款开源项目 (2).docx

    它允许开发者使用同一套代码在不同移动平台上运行,极大地提升了开发效率和代码复用性。 2. **JStorm**:这是一个实时流式计算框架,源自Apache Storm并进行了多项改进,如在网络IO、线程模型和资源调度等方面的...

Global site tag (gtag.js) - Google Analytics