tangram是什么

tangram是百度前端开发团队开发的一款JS框架，该框架具有一下特点：

• 可通过定制创建最适合的轻量级版本
• 多种机制实现扩展，良好的插件支持
• 丰富的中文文档以及案例，容易上手
• 全浏览器跨平台兼容
• 平滑的版本升级体验

tangram codesearch

tangram codesearch是一个tangram方法定制的工具，他可以定制你需要的tangram方法，将没使用到的方法去除，从而减少文件的大小，提升加载速度。

但在真正开发和使用这个工具的时候，你会发现这个工具很鸡肋，为什么呢？主要有下面几个原因：

• 项目之初你可能根本不知道你要用到哪些方法，可能只能将一些最基本的方法选定，待开发过程中慢慢去重新定制。这种方式非常耗费时间。
• 项目之初使用全部的tangram，项目完成时统计使用到哪些方法，然后将这些方法打包。首先统计需要耗费一定的时间，其次升级时都要做这个事情很麻烦。如果有哪个方法不在使用了，可能并不会删除。

在JS中，由于中文和英文是同等对待的，但有时候我们希望是一个中文按两个字节算，这就出现了按字节截取字符串的功能。下面列举了 2种实现方式。

循环检测

这种实现方式来自于Tangram，具体实现如下：

baidu.string.getByteLength = function (source) {
return String(source).replace(/[^\x00-\xff]/g, “ci”).length;
};
/*
* Tangram
* Copyright 2009 Baidu Inc. All rights reserved.
*
* path: baidu/string/subByte.js
* author: dron, erik
* version: 1.1.0
* date: 2009/11/30
*/
/**
* 对目标字符串按gbk编码截取字节长度
*
* @param {string} source 目标字符串
* @param {number} length 需要截取的字节长度
* @return {string} 字符串截取结果
*/
baidu.string.subByte = function (source, length) {
source = String(source);
var getLen = baidu.string.getByteLength, i, len, current, next, currentLen, nextLen;
if (length < 0 || getLen(source) <= length) {
return source;
}
len = source.length;
for (i = Math.floor(length / 2) – 1; i < len; i++) {
current = next || source.substr(0, i);
currentLen = nextLen || getLen(current);
if (currentLen == length) {
return current;
}
else {
next = source.substr(0, i + 1);
nextLen = getLen(next);
if (nextLen > length) {
return current;
}
}
}
return source;
};

baidu.string是字符串常见操作的对象。

正则替换

这种方式的实现原理是先将中文替换成中文加个空格，这样变相的将一个中文变成了2个字节，然后在这个基础上截取，截取完成后在将中文加空格变成中文。

baidu.string.subByte1 = function(source, length){
return (source+”).substr(0,length).replace(/([^\x00-\xff])/g,’$1 ‘).substr(0,length).replace(/([^\x00-\xff]) /g,’$1′);
}

这种实现方式不管是从代码量上还是从效率上都要比第一种高很多，这里有个测试案例。

在js中，创建一个类和实例化该类一般方式是：

var cls = function(){}
cls.prototype = {
attr:”,
method:function(){}
}
var clsInstance = new cls;

这种方式简单明了，但如果类很多的话就比较痛苦了，并且代码看起来不够优化。

动态创建类

动态创建类实际上类似于一种代理的模式，代码如下：

var Fath = function(methods){
var cls = function(){
return new fn(arguments);
},
fn = function(args){
return this.init && this.init.apply && this.init.apply(this,args);
};
fn.prototype = cls.prototype = methods || {};
try{
return cls;
}finally{
cls = null;
}
}

创建一个类：
var TestClass = Fath(methods) //这里的methods是方法或者属性集合，是一个静态对象
实例化该类：
var testInstance = TestClass(params) //这里的params是传进去的形参
通过这种方式后，一个好处就是实例化类的时候不用再使用new了，当然使用new也是可以的，作用的等价的。避免了到处是new和prototype的好处。
性能上在1K数量级上没有很大的区别。

到目前为止，javascript中array还没有内置的unique方法，本来这篇文章很早就写了，但由于之前的虚拟主机忘记续费导致数据丢了，前几天JerryQu问了我这个问题，觉得可能还有其他人要，这里在写出来，备大家参考。

实现方式

这里给出2中实现方式。一种是大家应该都知道的indexOf检测的方式，另一种是结合lastIndexOf和splice实现方式。

//首先给Array对象原型上添加indexOf和lastIndexOf方法.(如果没有的话)
if(!Array.prototype.indexOf){
Array.prototype.indexOf = function(element, index){
var length = this.length;
if(index == null){
index = 0;
}else{
index = +index || 0;
if(index < 0) index+= length;
if(index < 0) index = 0;
}
for(var current;index current = this[index];
if(current === element) return index;
}
return -1;
}
}
if(!Array.prototype.lastIndexOf){
Array.prototype.lastIndexOf = function(element, index){
var length = this.length;
if(index == null){
index = length - 1;
}else{
index = +index || 0;
if(index < 0) index+= length;
if(index < 0) index = -1;
else if(index >= length) index = length – 1;
}
for(var current;index>=0;index–){
current = this[index];
if(current === element) return index;
}
return -1;
}
}
//很常见的实现方式
var arrayUnique1 = function(arr){
for(var i=0,len=arr.length,result=[],item;i item = arr[i];
if(result.indexOf(item) < 0) {
result[result.length] = item;
}
}
return result;
}
//通过lastIndexOf和splice方法实现方式
var arrayUnique2 = function(arr){
var length = arr.length;
while(--length){
//如果在前面已经出现，则将该位置的元素删除
if(arr.lastIndexOf(arr[length],length-1) > -1) {
arr.splice(length,1);
}
}
return arr;
}

继续阅读 »