建立一个面向对象的好的代码基础后,为了达到代码重用的目的,通过调试使用适当的测试用例进行测试尤为必要,之后就是打包分发的主题。

一、调试与测试

1、调试

  • Firebug:包含了错误控制台、调试器、DOM查看器。可以很好的定位DOM结构。
  • Chrome:拥有控制台、DOM查看器等于Firebug几乎类似功能。
  • IE浏览器:错误控制台显示错误,F12打开开发者工具,提供了javascript调试工具。
  • Venkman:Mozilla发起的javascript调试器项目,它与javascript引擎本身紧密集成,是你能够对代码的执行做出精确的控制。

2、测试

为代码构建可靠的测试用例时,可以为自己省下无数调试的时间、寻找一个古怪bug的时间或者除去了引入新bug的机会。
  • JSUnit
长期是javascript单元测试的唯一标准,基于java时间中很受欢迎的JUnit程序包。包含三个基本的组件:
测试运行器:为测试过程的执行提供一个图形化输出,还提供了输入测试集并执行的能力。
测试集:一系列测试用例的集合。
测试用例:可以执行以获得真假表达式的单独命令。
  • J3Unit
与JSUnit相比提供了像JUnit和Jetty等对服务器端的测试套件,对java开发者很有用。
  • Test.Simple:比较新,是JSAN的javascript模块的标准测试方案。

二、打包分发

编写好优美的面向对象javascript代码之后,应该与其他javascript库良好配合使用,或者供他人重复使用。

1、命名空间化

为了和全局对象或其他使用的库不冲突,需要考虑命名空间,但是javascript不支持命名空间,因此需要使用对象的属性又可以包含对象的特性,模拟实现命名空间。如:
var YAHOO = {}; //创建一个默认全局命名空间

YAHOO.util = {}; //使用对象设置一些子命名空间
YAHOO.util.Event = {addEventListener: function(){...}}; //创建最终的命名空间,包含一个值为函数的属性 YAHOO.util.Event.addEventListener(); //调用具体命名空间中的函数

很多流行的框架都是利用这个特性构建了各自的命名空间系统。

  • Dojo:dojo.require("dojo.widget.AccordionContainer");导入特定命名空间下的程序包
  • JQuery:$或者是JQuery对象为最外层命名空间,给这个对象添加属性或者方法就是添加的插件。
  • YUI:与Dojo一样使用了深层次的命名空间结构来组织函数和特性,不同的是所有外部代码的导入由自己完成。

2、清理代码

如果希望其他人可以使用或者修改后保存下来,自己的代码需要进行检查和清理,JSLint工具就是使用其内建的一系列规则找出可能引发问题的代码片段。
  • 变量声明:JSLint提出程序中所有的变量都必须在使用前声明,虽然javascript允许不申明直接使用,但是会导致变量实际作用域不好理解。由于null、0、false、‘’、undefined都是两两相等(==),因此JSLint要求每次对false进行比较时都要是要 “!==”、“===”。
  • 代码块与大括号:不应该使用单行的代码块。也就是if、while或者for等语句中,即使后面只有一条语句,也要带上花括号“{”、“}”。
  • 分号:所有的语句都应该在后面加上分号,独占一行的代码结尾可以省略,但是压缩后就可能导致问题。

3、压缩

分发javascript库的关键之一就是使用代码压缩工具来节省带宽,压缩后代码不可读。有三类压缩工具:
  • 只去除多余空白和注释,保留所有有意义的代码。JSMin属于这种,原理最简单,去除多余空白字符和注释。
  • 去除空白和注释,而且修改变量名以减小代码
  • 完成上述两种工作,同时还最小化代码中的所有单词,不仅仅是变量名称。Packer是这类工具,是目前最强大的javascript压缩工具,提供了一种彻底精简代码,并在执行时即时重新展开的方式,能够得到可能是最小的代码。可以看做一个可自解压的ZIP文件,压缩后会多出几百字节的内容用于自解压。小文件的压缩效果可能没有JSMin的效果好,但是大文件则是Packer最合适。

4、分发

javascript编码的这个最后步骤是可选的,根据实际情况复制或上传到供他人使用的地方即可,如果开发了有趣的代码希望其他人都能使用,应该考虑的是JSAN,是类似perl的CPAN这样的功能。
 

javascript进阶——测试和打包分发的更多相关文章

  1. iOS APP打包分发给远程的手机测试

    APP要打包给远程的朋友或客户测试,但又不是企业账号的情况下,我们只能根据手机的udid进行描述证书的配置,再打包分发给提供了udid的手机进行安装 一.如何得到udid? 手机连接到mac电脑,打开 ...

  2. JavaScript 进阶(一)JS的"多线程"

    这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践.主要来源于我几年的开发过程中遇到的问题.小弟第一次写博客,写的不好的地方 ...

  3. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  4. Python 库打包分发、setup.py 编写、混合 C 扩展打包的简易指南(转载)

    转载自:http://blog.konghy.cn/2018/04/29/setup-dot-py/ Python 有非常丰富的第三方库可以使用,很多开发者会向 pypi 上提交自己的 Python ...

  5. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  6. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  7. #笔记#JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  8. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  9. 自己实现的一款在线Javascript正则表达式测试器——JRE-Parser

    本文最初发布于我的个人博客:http://jerryzou.com/posts/jreparser/ 昨天在看<正则表达式30分钟入门教程>的时候,看到博主自己实现了一个C#写的正则测试器 ...

随机推荐

  1. jQuery EasyUI, datagrid, treegrid formatter 参数比较 row index

    如题: datagrid中,见官方文档: formatter function The cell formatter function, take three parameter:value: the ...

  2. @RenderBody()和@RenderSection()

    强大的Razor引擎 一.Razor基础简介 Razor采用了cshtml后缀的文件名,截图如下: A. 版面布局 从图上看到,新的视图引擎已经没有了Site.Master这种MasterPage了, ...

  3. Android开发环境搭建(windows OS)之补充

    这几天搭建了个安卓开发环境,也想玩玩安卓开发.在查询CSDN,CNBLOG,视频网站之后终于把开发环境搭建起来了,发现所有的指导都比较离散,比如有些只说安装方法,有些只说下载方法.本文来个集大成,算是 ...

  4. android颜色对应的xml配置值,颜色表

    网上找的一些颜色值 XML配置 <?xml version="1.0" encoding="utf-8" ?> <resources> ...

  5. linux用户与组的管理(命令加入、手动加入、加入组、用户之间的切换)

    一.用户登录的时候须要验证的是这两个文件 检測username   Login:  root                        到该文件夹下检查 /etc/passwd 检測用passwo ...

  6. css z-index详解

    写css z-index的时候经常会出现很多莫名其妙的问题,下面对z-index属性做彻底的剖析,本文参考了<一个css中z-index的用法>,并做了很多demo,方便了解z-index ...

  7. Error: no `server' JVM at...解决办法 【转】

    出现问题:用java -jar XXX.jar -server -Xms900m -Xmx900m 提示错误Error: no `server' JVM at `C:\Program Files\Ja ...

  8. AFNetworking源码分析

    来源:zongmumask 链接:http://www.jianshu.com/p/8eac5b1975de 简述 在iOS开发中,与直接使用苹果框架中提供的NSURLConnection或NSURL ...

  9. HTML左边和右边是固定的宽度但是中间是自动的布局方式

    对于这个布局方式我们可以是用绝对定位的方式来实现这个效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  10. oracle数据库入门

    oracle  数据库入门. 1.数据 2.数据存储的地方:变量 数组 容器 (内存中),文件,数据库(文件) 3.数据库系统:sqlserver 2000   2005  2008  mysql 5 ...