博客园_web前端开发-Jun

canvas构建一个平面直角坐标系

2012-04-27T09:57:00Z

功能：

1：可设置只显示某个象限（onlyQuadrant）

2：可设置刻度大小（setCalibration）

3：可设置放大比例（setProportion）

可调用的方法（包括上面3个）：

向坐标系打印一点（printPoint）

在坐标画一条直线（printLine）

设置下一画笔的填充色（setFillColor）

设置下一画笔的边框色（setStrokeColor）

获取某个坐标的真实x坐标（getx）

获取某个坐标的真实y坐标（gety）

例子：http://jun-lu.github.com/jun/canvas_sin_cos_tan.html

源码：https://github.com/jun-lu/jun/blob/master/src/FlatSystem.js

/**
平面直角坐标系类
可以轻松在一块画布上画出平面直角坐标系，可设置宽度，高度，绘制比例，以及单位刻度
构造函数 : FlatSystem
context：画布的2d上下文
width：绘制的最大宽度
height：绘制的最大高度
属性设置：
this.calibration=30 //刻度可通过 setCalibration(number) 设置 ,这个方法也是对外API之一
this.proportion=2 //绘制比例可通过 setProportion(number) 设置这个方法也是对外API之一
api:
setCalibration(number);// 设置坐标系刻度
setProportion();// 设置坐标系绘制比例
init();//在画布上画出坐标系，如果在init之前没有设置刻度和绘制比例会使用默认的值
clear(x,y,width,height)//清除画布的某块区域，如果不传递任何值会清空全部画布

*/
function FlatSystem(context, width, height){

this.context = context;
this.width = width;
this.height = height;
this.calibration = 20;//刻度
this.proportion = 2;//绘制比例
this.jx = this.width/2; //0坐标点的x位置
this.jy = this.height/2; //0坐标点的y位置

//this.init();

}
FlatSystem.prototype = {
constructor:FlatSystem,
init:function(){
this.context.clearRect(0,0,this.width, this.height);
//this.width *= this.proportion;
//this.height *= this.proportion;
this.context.moveTo(0,0);
this.setFillColor("#000");
this.setStrokeColor("#000");
this.build();
},
clear:function(x, y, width, height){
this.context.clearRect(x ||0,y || 0,width || this.width, height || this.height);
},
setProportion:function(proportion){//整数
this.proportion = proportion;
},
setCalibration:function(calibration){
this.calibration = calibration;//刻度
},
onlyQuadrant:function(quadran){//显示某一象限 1， 2， 3， 4
if(quadran == 0){
this.jx = this.width/2;
this.jy = this.height/2;
}

if(quadran == 1){
this.jx = 50;
this.jy = this.height-50;
}
if(quadran == 2){
this.jx = this.width - 50;
this.jy = this.height - 50;
}
if(quadran == 3){
this.jx = this.width -50;
this.jy = 50;
}
if(quadran == 4){

this.jx = 50;
this.jy = 50;
}
},
/**
在坐标系统打印一个点
x 轴坐标
y 轴坐标
width 点的宽度
height 点的高度
*/
printPoint:function(x,y,width,height){//默认点阵宽度2

x = this.getx(x);
y = this.gety(y);

if(x < this.width && y < this.height){
this.drawRect(x, y, width || 2, height || 2);
return true;
}
return false;
},
/***
在坐标系中画一条直线（线段）
x 线段结束点 x坐标
y 线段结束点 y坐标

sx 线段开始点 x坐标可选不传递将会使用上次画笔结束点
sy 线段开始点 y坐标可选

*/
printLine:function(x, y, sx, sy){
this.drawLine(this.getx(x), this.gety(y), this.getx(sx),this.gety(sy));
},
/**
设置填充色
*/
setFillColor:function(color){
this.context.fillStyle = color;
},
/**
设置边框色
*/
setStrokeColor:function(color){
this.context.strokeStyle = color;
},
/**
非公开
*/
drawRect:function(x,y,width, height){

this.context.beginPath();
this.context.fillRect(x-width/2, y-height/2, width, height);
this.context.stroke();
},
/***
非公开
在画布打印一个点，坐标为真实开始坐标和结束坐标
*/
drawLine:function(x, y, sx, sy){//目标x y 开始sx sy
this.context.beginPath();
if(sx !== undefined && sy !== undefined ){
this.context.moveTo(sx,sy);
}
//this.context.beginPath();
this.context.lineTo(x, y);
this.context.stroke();
},
fillText:function(text, x, y){
this.context.fillText(text, this.getx(x), this.gety(y));
},
build:function(){//构建坐标系

this.drawLine(this.jx, this.height, this.jx, 0);// y
this.drawLine(0, this.jy, this.width, this.jy);// x
this.setFillColor('#d8d8d8');
this.fillText("O", this.jx+5 , this.jy+10);//原点坐标 0
this.buildCoordinate();// +x height/2

},
buildCoordinate:function(){//构建坐标系中的刻度和数字

var calibration = this.calibration * this.proportion;//calibration 最小刻度
var width = this.width;
var height = this.height;

// len = 中心点到4个最远点的最大绝对值 / 最小间隔单位
var len = Math.max(
Math.max( Math.abs(this.getx(0) - width), Math.abs(this.getx(0) - 0) ), //x轴绝对最大值
Math.max( Math.abs(this.gety(0) - height ), Math.abs(this.gety(0) - 0) ) //y轴绝对最大值
)*this.proportion / calibration;

//this.setFillColor('#d8d8d8');
var fixed = this.proportion >= 1 ? function(x){//对于绘制比例小于1 处理小位数
return x;
} : function(x){ return (x).toFixed(1);};

var j=0;//中间变量
var d = 0;
var sx=0;
var sy=0;

this.context.textBaseline = "middle";
this.setFillColor('#d8d8d8');
for(var i=1; i<=len;i++){//注释过的代码都是适当优化过的其实等于没优化

j = String(fixed(calibration*i));
//console.log(typeof j);
sx = this.getx(calibration*i);//第一象限
sy = this.gety(0);

this.drawLine(sx, sy, sx, sy-5);
this.context.textAlign = "center";
this.context.fillText(j, sx, sy+10);
/***/

sx = this.getx(-calibration*i);//第3象限
//sy = this.gety(0);
this.drawLine(sx, sy, sx, sy-5);
this.context.fillText(j, sx, sy+10);
/***/
sx = this.getx(0);//第4象限
sy = this.gety(-calibration*i);

this.drawLine(sx, sy, sx-5, sy);
this.context.textAlign = "left";
this.context.fillText(j, sx+5, sy);
/***/

//sx = this.getx(0);//第2象限
sy = this.gety(calibration*i);

this.drawLine(sx, sy, sx-5, sy);
this.context.fillText(j, sx+5, sy);
/***/
}

},
isIn:function(x, y){
var x = this.getx(x);
var y = this.gety(y);
return x>=0 && x <= this.width && y>=0 && y<= this.height;
},
/**
获取真实x坐标
*/
getx:function(x){
return parseInt(this.jx+(x/this.proportion));
},
/**
获取真实x坐标
*/
gety:function(y){
return parseInt(this.jy-(y/this.proportion));
}
};

本文链接

如何判断一个拼图是否可还原！

2012-04-25T03:34:00Z

在写完JS版本拼图游戏以后，偶然发现其实打乱顺序的拼图不是都能还原的。

在一个3*3的拼图中，会把图片裁切成9块，然后打乱顺序，通过调换空格块与邻块的位置来还原图片。

（图1）完全还原的拼图（设 8 号为空格位）

0 1 2
3 4 5
6 7 8

（图2）一个不能还原的顺序（拼到最后你发现6和7的位置倒了，而其他图片的位置正确）

0 1 2
3 4 5
7 6 8

如何判断一个打乱的拼图可还原？

一个打乱顺序的拼图，把数字连起来可以组成一个排列（比如图2= 0123456768）。

可以通过计算这个排列的逆序数个数加空格位置的坐标,最终得到的数的奇偶性判断。

数学原理比较复杂您可以看 http://blog.csdn.net/tailzhou/article/details/3002442

/**
判断一个打乱顺序的数字拼图是否可还原

order: 打乱以后的数字顺序；比如[0,1,2,3,4,5,7,6,8]
order里的数字8表示空位
size: 3*3的拼图就传3就可以了

返回值：true false
*/
function solvability(order, size){
var a;
var count = 0;
var m = 0;
var n = 0;

var len = order.length;
size = size || 3;
//[0,1,2,3,4,5,7,6,8]
for(var i=0; i<len; i++){
var a = order[i];

if(a == 8){
m = parseInt(i/size);
n = parseInt(i%size);
}

for(var j=i+1; j<len; j++){

if(order[j]<a){
count++;
}
}
}
count += m;
count += n;
return count%2 == 0;
}

本文链接

【记录】javascript Object使用Array的方法

2012-03-17T10:52:00Z

Array.prototype.push

push向数组尾部添加一项并更新length ，返回数组长度。

如果Object使用push会怎样？

看下面代码, obj好像数组一样工作了。length会自动更新。

Array.prototype.length Array.prototype.splice

把length和splice 给Object

看下面代码：obj这货居然变成数组了？其实不然这可能是调试工具的一些输出检查问题。
我们用 instanceof 测试 obj instanceof Array //false

var obj = {
length:0,
splice:Array.prototype.splice
};
console.log( obj ); // 打印：[]

继续看下面的代码：

obj.push(0)//返回obj.length 1
obj.push(1)//返回obj.length 2
obj.splice(0, 1);//删除第一项返回删除项[0]
obj.length // 1 splice删除一项的时候同样更新 length属性

这样obj的表现几乎和array一样了。不出意外slice,pop,shift,unshift什么的都可以正常工作在object中。

不过如果直接设置length，在数组中会删除大于length的下表的项，但里的obj并不不会更新。

应用在哪？
jQuery对象表现像一个array，其实他是一个对象。这种对象如何new出来呢？
实际jQuery把Array的方法借给Object,从而达到这个jQuery对象的效果，jQuery对象内部也直接使用push等Array的方法。

看看jQuery的部分源码 (注意加粗)

// Start with an empty selector
selector: "",

// The current version of jQuery being used
jquery: "1.7.1",

// The default length of a jQuery object is 0
length: 0,
......

// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: [].sort,
splice: [].splice

如果你要把Object玩成Array，那么可能潜在的问题length属性不会和“数组”项总和对应起来。

所以直接使用length设置长度不会得到支持。

看下面jquery代码，虽然length更新了，jquery的对象并没更新。（当然这并不是jquery的问题）

var jq = $('div') //假设我们在页面获取了40个div
jq.length // 40
jq.length = 0;
jq// ? jq中仍然存放了40个dom对象 length属性不会和“数组”项总和对应起来。

Object使用array的方法还能正常工作，实在有些意想不到，可能实际应用远不止这些。

本文链接

【分享】让AJAX不依赖后端接口

2012-01-31T07:05:00Z

问题是怎么个情况？

网页中的ajax请求越来越多，或者应用开始就一直使用ajax与后端进行数据交换。（目前我在公司参与的项目就是如此）N多接口前后端来回调试是个麻烦事。

后端不可能短时间把所有的接口都写完，也不会为了前端测试而制造假的数据和接口，不仅耗费时间而且到了开发阶段返回的数据结构、接口名称也可能会有许多改动。那么后端

一边写接口一边给前端，这看起来不错。但在具体实施过程中，后端未完成的接口可能有错误，你需要不停的和后端沟通不停的找原因，有可能中途还会停滞等待后端返回数据正
确才能继续。

为什么会这样？

1：前端在开发初期就依赖了未成形的接口。

2：后端不完全知道前端需要的数据项及数据格式。

如何解决？

1：需求确认会议中前后端充分讨论功能和接口。（需求明确的backlog，这个工作非常简单）

在有完善的backlog文档前提下，用户的每个操作都被记录成明确的功能。只要在最后的确认中开发人员一致认同这些条目，就很容易总结出需要的接口。

2：前端写接口文档（后端辅助）。

为什么是前端？

　1：前端完全了解页面需要展示的数据。2：前端完全了解需要的数据格式（如何处理错误码等等）

前端的接口文档可能是这样：（示例登录接口）

1：用户登录
url: ? （留给后端补充）
请求方式：POST
请求参数：email:String
pwd:String
checkCode:String
返回数据：
{
code:int,//错误编码,登录成功为0 其他错误返回错误编码，没有result项
result:{
id:int // 用户ID
name:string //用户名
...
}
}

后端如何辅助？

1：补充请求url。2：修正返回数据的字段。如果返回数据项很多文档中的字段不符合后端的开发字段，那么后端需要修改过来。
　修改文档是一个前后端讨论的过程，有任何疑问都可以沟通。文档完成以后各自一份。（文档中任何修改都可以使用其他颜色标注，提醒其他人员注意）

后端补充完整以后可能是这样：

1：用户登录
url: user/login.php (补充)
请求方式：POST
请求参数：email:String
pwd:String
checkCode:String
返回数据：
{
code:int,//错误编码,登录成功为0 其他错误返回错误编码，没有result项
result:{
id:int // 用户ID
user:string //用户名（修改）
...
}
}

3：开发过程完全依照文档

文档完成以后，大家心里都很清楚我只要这样做，返回、使用这样的数据就一定没错。

后端开始写代码，完全不用理会前端，他根本不会来找你的麻烦。

前端如何依照文档开始工作？

接口都有了，返回数据也有了。那么接下来的工作就是构建一套可以使用模拟数据测试的框架。

如果使用jquery,一个简单的结构可能是这样。

用户点击登录按钮，前端模拟了文档中描述的数据，直接调用了回调函数。这跟真实情况一样。

Common = {
post:function(url, data, success){//一个基本的post请求封装
$.ajax({
url:url,
type:"post",
data:data,
dataType:"json",
error:function(){
//Common.tip(TipData["1002"], 0);
//ajax错误提示
},
success:function(data){

if(data && data.code != 0){
//Common.showError(data);
//错误处理code转换成文字提示给用户
};

success && success(data);
}
});
}
};

// 1：用户登录
function login(email, pwd, checkCode, callback){

//测试环境
var data = { //模拟数据
code : 0,
result:{
id:'123456',
user:"lujun"
}
};
callback(data);//直接把模拟数据传递给回调函数
return ;
//---链接真实数据的时候注释以上代码，上线以前通过压缩工具这些注释掉会被移除

//正式环境
Common.post("user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback);
};

//点击事件驱动登录
//登录成功执行一些列动作
$('#submit').click(function(){

var email = $('#email').val();
var pwd = $('#pwd').val();
var checkCode = $('#checkCode').val();

//调用登录接口
login(email, pwd, checkCode, function(data){
if(data && data.code == 0){
//ajax执行成功
data = data.result;
$('#userName').text(data.user);
//其他代码 ...
}
});
});

如何更好的工作？

全部功能接口都采用这样的方式工作，会发现整个应用不需要后端支持，完全用模拟数据就可以验收测试，是不是酷了一点呢！

一旦你准备链接正式数据，注释掉测试代码以后（这可能分布在代码的各个角落，10处或者更多）。你不能在测试环境、链接数据库的环境中快速切换！

这样的测试代码价值太有限。

我们可以把测试数据独立出来作为一个文件，使用方法覆盖的方式把最底层的AJAX请求方法覆盖。

//testData.js 用来存放所有测试数据
TestData = {
"userlogin":{ //登录的测试数据
code : 0,
result:{
id:'123456',
user:"lujun"
}
}
// ... 其他结构的测试虎踞
};

// common.js
// 覆盖 Common.post 方法
Common.post:function(url, data, success){//一个基本的post请求封装
//把url进行MD5来作为key也是一个不错的想法，可以省去那么多判断
if(url == "user/login.php"){
success(TestData["userlogin"]);
}else if(url == "other"){//其他接口
//...
}

};

// 1：用户登录
function login(email, pwd, checkCode, callback){
Common.post("user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback);
};

//点击事件驱动登录
//登录成功执行一些列动作
$('#submit').click(function(){

var email = $('#email').val();
var pwd = $('#pwd').val();
var checkCode = $('#checkCode').val();

//调用登录接口
login(email, pwd, checkCode, function(data){
if(data && data.code == 0){
//ajax执行成功
data = data.result;
$('#userName').text(data.user);
//其他代码 ...
}
});
});

上面的代码很容易理解，想要模拟数据测试的时候就把最底层的ajax请求方法覆盖掉。

当然这只是其中的一种，你可能有更好的方法或者通过一个全局变量就可以切换两个环境，就好象 debug = false, debug = true 这样！

最后

方法说透了其实也非常简单，重要的是scrum中backlog的分解和理解。
我所在的团队现在采用这种方式工作非常顺利。
最后我一直在考虑一个合并混淆压缩有500K JS 的应用如何组织代码？

本文链接

【记录】一些平时留意过的

2011-11-29T06:21:00Z

CSS

css outline 与border 重要区别，outline不参与到文档流中，即outline是不站位置的。
最好为a标签的每一个状态都设置你需要的 text-decoration，不然各种悲催的浏览器表现不一样
::selection 这应该是一个新的伪类，定义了网页选中的背景颜色，在“又拍”发现的。
两个同级的div 都设置了 inline-block，你会发现他们之间有一些间隙（ff,chrome大多A级浏览器都这样），非常莫名其妙。这是由于代码换行导致的，强制把代码写在一行就行了。具体为什么还真不知道，太BUG了。文章链接
用label 包裹 input 不写for 不能聚焦到input(IE6下)，其他浏览器可以！
一个关于z-index在IE下表现错误的测试。一篇博客看图更容易理解
一个微软的文档
display:table;
在Chrome下可能引发横向布局算法发生变化。比如border宽度被计算到width内！
---- 这可能是Chrome的一个BUG，firefox和其他浏览器表现正常
疑惑 --- white-space 用来处理空白字符在浏览器中的表现，为什么有一个nowrap来控制文本是否断行，这个任务不是应该交给 word-wrap 、 word-break 吗？
div:nth-child(1){ // 这个CSS3的新选择器需要纠结一会，有好几个类似也是这个规则
font-size:24px;
} / * 在容器第1个元素是div * /

div:nth-of-type(1){
font-size:36px;
}/* 在容器中所有div中的第1个 */
行内元素（内联元素display:inline）,不接受宽度（width）,高度(height),上下外边距（margin-left，margin-top）,这很容易理解。
但是postition:absolute|fixed;会改变这个状况,使其可以接受以上CSS属性。(IE6 fixed 出外)

javascript

发布以后这里的内容不见了,不再敲一遍了。哎

其他

IE 7上传一个jpg图片，PHP读取到的图片类型是 image/pjpeg。大多浏览器都是 image/jpg, image/jpeg 。据说IE6也有可能这样。

本文链接

【分享】javascript 拼图游戏

2011-10-30T03:36:00Z

近2个月来没有阅读技术书籍，感觉有点盲目。

期间看了《明朝那些事儿》（1，2，3）、《FBI教你破解身体语言》我看书很慢。

现在又迷上了手机拼图游戏，写了一个JS版本的，本想可以利用小键盘在3*3的拼图上提高速度，最后发现其实在手机上才能最快。（一个普通的3*3数字拼图15内秒可以完成，30%可以10秒类完成）！

JS版本的数字拼图在这里 GIT PUZZLE

手机上的拼图游戏名字叫：拼图（数字）游戏（可以在市场中找到，LOGO是一朵花）

顺便提供一下RAR 下载JS拼图游戏

源码如下----------------------------

//一个puzz类
var Puzz = function(index, width, height, size, wrap, url, end){//顺序宽度，高度，比例，父容器，url, 是否是最后一个元素
this.ele = null;
this.left = 0;
this.top = 0;
this.defaultBackground = "#fff";
this.width = width;
this.height = height;
this.size = size;
this.wrap = wrap;
this.url = url;
this.end = end;//标识是否最后一个
this.index = index + 1;
this.x = 0;
this.y = 0;
};
Jun.mix(Puzz.prototype, {
init:function(){
this.create();
},
setLeft:function(value){
this.left = value+'px';
},
setTop:function(value){
this.top = value+'px';
},
setDefaultBackground:function(color){
this.defaultBackground = color;
},
getProperty:function(key){
return this[key];
},
move:function(x, y){//移动到一个坐标
this.setLeft( x * this.width );
this.setTop( y * this.height );
this.update();
this.x = x;
this.y = y;
},
create:function(){
var div = Jun.dom.create('div');
div.className = "puzz-item";
div.style.width = this.width+"px";
div.style.height = this.height+"px";
this.ele = div;

var lie = parseInt((this.index-1)/this.size);
var row = parseInt((this.index-1)%this.size);

if(this.url && this.end == false){
this.setShowBackground("url("+ this.url +") no-repeat -"+(row*this.width)+"px -"+(lie*this.height)+"px");
}else{
this.setShowBackground(this.defaultBackground);
}

this.move(row, lie);

},
setShowInt:function(){
var p = Jun.dom.create('p');
p.innerText = this.index;
Jun.dom.append(this.ele, p);
},
setShowBackground:function(background){
this.ele.style.background = background;
},
update:function(){
this.ele.style.left = this.left;
this.ele.style.top = this.top;
},
isOkay:function(){
return parseInt((this.index - 1) / this.size) == this.y && parseInt((this.index-1)%this.size) == this.x;
},
drawing:function(x, y){
Jun.dom.append(this.wrap, this.ele);
},
click:function(callback, obj){
var _this = this;
this.ele.onclick = function(){
callback.call(obj, _this.y, _this.x);
}
}
});

var Puzzie = function(id, width, height, url, size, isNunber){//容器ID，宽度，高度，图片url, 拆分模块数量, 是否拼数字
var dom = Jun.dom;
this.dom = dom;
this.ele = dom.$(id);
this.url = url;
this.width = width;
this.height = height;
this.size = size;
this.itemList = [];//全部item
this.listOrder = [];//顺序多维
this.isNunber = isNunber != false ? true : false;//undefined
this.init();
};
Jun.mix(Puzzie.prototype, {
init:function(){
this.ele.style.background = "url("+this.url+")";
this.itemWidth = this.width / this.size;
this.itemHeight = this.height / this.size;
this.itemList = [];
this.create();
},
create:function(){
var list = this.itemList;
var item = null;
var end = false;
var url = '';
for(var i=0, len = this.size * this.size; i<len; i++){
end =(i+1 == len ? true : false);
item = new Puzz(i, this.itemWidth, this.itemHeight, this.size, this.ele, this.url, end);//new 新的item
item.init();

if(this.isNunber == true && end == false){
item.setShowInt();
}

list.push( item );
}
if(this.size == 3){
this.bindWindow();//绑定键盘事件可以用小键盘操作
}
},
regEvent:function(x, y){//判断移动

var size = this.size;
var list = this.itemList;
var order = this.listOrder;

var j = null ;

if(x > 0 && list[order[x-1][y]].end){//上
list[order[x][y]].move(y, x-1);
list[order[x-1][y]].move(y, x);
j = order[x][y];
order[x][y] = order[x-1][y];
order[x-1][y] = j;
}else if(y < order.length-1 && list[order[x][y+1]].end){//右边
list[order[x][y]].move(y+1, x);
list[order[x][y+1]].move(y, x);
j = order[x][y];
order[x][y] = order[x][y+1];
order[x][y+1] = j;
}else if(x < order.length-1 && list[order[x+1][y]].end){//下边
list[order[x][y]].move(y, x+1);
list[order[x+1][y]].move(y, x);
j = order[x][y];
order[x][y] = order[x+1][y];
order[x+1][y] = j;
}else if(y > 0 && list[order[x][y-1]].end){//左边
list[order[x][y]].move(y-1, x);
list[order[x][y-1]].move(y, x);
j = order[x][y];
order[x][y] = order[x][y-1];
order[x][y-1] = j;
}

if(this.isOkay()){
this.success();
};

},
start:function(){
var list = this.itemList;
for(var i=0, len=list.length; i<len; i++){
list[i].drawing();
list[i].click(this.regEvent, this);
};
this.shuffle();
},
sort:function(array){
return array.sort(function(){
return Math.random() - 0.5;
});
},
shuffle:function(){//洗牌

if(this.itemList.length == 0){
this.init();
this.start();
return ;
}

var order = [];//位置序列

for(var i=0; i<this.size * this.size; i++){
order.push(i);
};

order = this.sort(order);
order = this.sort(order);
order = this.sort(order);

var size = this.size;
var listOrder = this.listOrder = [];
var itemList = this.itemList;

for(i=0; i<size ; i++){//矩阵
listOrder.push(order.slice(i*size, (i+1)*size));
};
var list = this.itemList;
for(i=0,len=listOrder.length; i<len; i++){
for(var j=0; j<listOrder[i].length; j++){
itemList[listOrder[i][j]].move(j, i);
}
};

},

isOkay:function(){
var okay = true;
var list = this.itemList;
for(var i=0, len=list.length; i<len; i++){
if( !list[i].isOkay() ){
okay = false;
break;
};
};
return okay;
},
success:function(){//完成
this.itemList = [];
this.ele.innerHTML = '';
},
keyMove:function(index){
var lie = parseInt((index-1)/this.size);
var row = parseInt((index-1)%this.size);
this.regEvent(lie , row);
},
bindWindow:function(){
var _this = this;
//var keyboard = {97:1,98:2,99:3,100:4,101:5,102:6,103:7,104:8,105:9};//正常键盘
var keyboard = {97:7,98:8,99:9,100:4,101:5,102:6,103:1,104:2,105:3};//反转键盘 789 = 123
document.onkeyup = function(event){
var e = event || window.event;
var index = keyboard[e.keyCode];
if(index){
_this.keyMove(index);
}
}
}
});

var PuzzTest = {// 测试api
order1:[0,1,2,3,4,5,7,6,8],
shuffleOrder:function(order){//按照order的顺序来刷新
var size = this.size;
var listOrder = this.listOrder = [];
var itemList = this.itemList;

for(i=0; i<size ; i++){//矩阵
listOrder.push(order.slice(i*size, (i+1)*size));
};
var list = this.itemList;
for(i=0,len=listOrder.length; i<len; i++){
for(var j=0; j<listOrder[i].length; j++){
itemList[listOrder[i][j]].move(j, i);
}
};
}
};

本文链接

【分享】javascript合并混淆压缩

2011-09-16T08:36:00Z

公司项目上线需要混淆合并压缩javascript代码。

原本有一个混淆压缩工具，因为内部服务器挂掉了工具也没有了。

使用的压缩算法来自 http://dean.edwards.name/packer/ 。这里只是做了一些简单的合并调用。

上面的算法有一些缺点，如果源码缺少必要的分号或者存在多余的逗号压缩以后的文件会出现语法错误。

方案：可以先使用google的压缩工具压缩，它可以提示错误，找出一些潜在问题。然后再用混淆压缩！

注意：这个压缩工具是运行在服务器环境下的（这里采用了PHP，合并以后要保存文件所以必须是服务器环境）

使用的时候需要配置 bulid/config.js 就可以了。

var config = {
"model1":{
"base62":false,
"shrink":false,
"outputFile":"../helloworld.js",//文件路径相对于config.js 在压缩之前先建立这个文件
"jsList":[//文件路径相对于config.js
"../helloworld/hello.js",
"../helloworld/world.js"
]
}
}

界面大约是这样

下载地址（因为里面包含了compiler.jar google的压缩工具java包所以文件有5M）；

完毕

真完毕了

本文链接