易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

js模拟php:print_r

javascript模版系统

常用函数：copyToClipboard

CSS中media标签的作用

关注：jQuery Mobile来了！

js模拟php:print_r

javascript模版系统

常用函数：copyToClipboard

CSS中media标签的作用

关注：jQuery Mobile来了！

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

浏览模式: 标准 | 列表分类:Javascript

Submitted by gouki on 2010, August 24, 2:04 PM

在PHP中，我们打印一个数组或者对象的时候，都是用print_r，相对比较直观，可是javascript就不行。翻了翻资料，也看到一些代码的写法。这里是一个简单的处理（不能打印window,document等对象）：

JavaScript代码

function print_r( $value ){
if($value.constructor == Array || $value.constructor == Object ){
document.write("<ul>");
for (var $i in $value){
if($value[$i].constructor == Array || $value[$i].constructor == Object ){
document.write("<li>["+$i+"] => " + typeof( $value ) + " </li><ul>");
print_r($value[$i]);
document.write("</ul>");
}else{
document.write("<li>["+$i+"] => " + $value[$i] + "</li>");
}
}
document.write("</ul>");
}
}
var s = {};
s.i = '123';
s.o = {};
s.o.test = 'tt';
print_r(s);

然后看了一下phpjs.org，它上面的print_r就比较复杂了。。。

JavaScript代码

function print_r (array, return_val) {
// Prints out or returns information about the specified variable
//
// version: 1008.1718
// discuss at: http://phpjs.org/functions/print_r // + original by: Michael White (http://getsprink.com)
// + improved by: Ben Bryan
// + input by: Brett Zamir (http://brett-zamir.me)
// + improved by: Brett Zamir (http://brett-zamir.me)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // - depends on: echo
// * example 1: print_r(1, true);
// * returns 1: 1
var output = "", pad_char = " ", pad_val = 4, d = this.window.document; var getFuncName = function (fn) {
var name = (/\W*function\s+([\w\$]+)\s*\(/).exec(fn);
if (!name) {
return '(Anonymous)';
} return name[1];
};
var repeat_char = function (len, pad_char) {
var str = ""; for (var i=0; i < len; i++) {
str += pad_char;
}
return str;
};
var formatArray = function (obj, cur_depth, pad_val, pad_char) {
if (cur_depth > 0) {
cur_depth++;
}
var base_pad = repeat_char(pad_val*cur_depth, pad_char);
var thick_pad = repeat_char(pad_val*(cur_depth+1), pad_char);
var str = "";
if (typeof obj === 'object' && obj !== null && obj.constructor && getFuncName(obj.constructor) !== 'PHPJS_Resource') {
str += "Array\n" + base_pad + "(\n";
for (var key in obj) {
if (obj[key] instanceof Array) {
str += thick_pad + "["+key+"] => "+formatArray(obj[key], cur_depth+1, pad_val, pad_char); } else {
str += thick_pad + "["+key+"] => " + obj[key] + "\n";
}
}
str += base_pad + ")\n"; } else if (obj === null || obj === undefined) {
str = '';
} else { // for our "resource" class
str = obj.toString();
}
return str;
};
output = formatArray(array, 0, pad_val, pad_char);
if (return_val !== true) {
if (d.body) {
this.echo(output);
} else {
try {
d = XULDocument; // We're in XUL, so appending as plain text won't work; trigger an error out of XUL
this.echo('<pre xmlns="http://www.w3.org/1999/xhtml" style="white-space:pre;">'+output+'</pre>');
} catch (e) {
this.echo(output); // Outputting as plain text may work in some plain XML
}
}
return true; } else {
return output;
}
}

果然是没有做不到的事，只有想不到的事呀。。。（上面的phpjs.org的print_r需要echo方法，请到phpjs.org下载）

Tags: print_r, php

Javascript | 评论:0 | 阅读:23244

Submitted by gouki on 2010, August 22, 11:32 PM

用javascript做模版的话，说来也算是比较方便的，特别是对于PHP开发来说，只要扔一个json数组过来。然后剩下的就可以让javascript来完成了。
搜索一下jQuery的plugin，可以找到大约5~6个模版程序。好象用的比较多的还是jTemplate，上一次司徒正美用javascript写了一个简单的例子，这次又写了一个比较详细的，说是v2，有兴趣的朋友可以尝试一下。。
--start--司徒正美认为模版要处理复杂的玩意，所以写的功能就强大了。
本版本主要是对原模板系统进行提速，去掉消耗巨大的辅助函数。本来想用它与John Resig的 Micro-Templating比较一下速度，发现对方无法处理复杂的模板，残念。

JavaScript代码

//司徒正美 javascript template - http://www.cnblogs.com/rubylouvre/ - MIT Licensed
(function () {
if(!String.prototype.trim){
String.prototype.trim = function(str) {
return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
}
}
var dom = {
quote: function (str) {
str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
var special = metaObject[chr];
return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)
});
return '"' + str.replace(/"/g, '\\"') + '"';
}
},
metaObject = {
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'\\': '\\\\'
},
parser = document.createElement("div"),
startOfHTML = "\t__views.push(",
endOfHTML = ");\n";
//onsite，可选，Boolean，是否就地替换掉模板容器，默认true，如果为false，则返回一个文档碎片，交由用户自己插入到需要的地方
dom.ejs = function (obj) {
var onsite = obj.onsite === void 0 ,
left = obj.left || "<%",
right =obj.right || "%>",
selector = obj.selector,
isLeft = true,
buff = ["var __views = [];\n"],
fragment = document.createDocumentFragment(),
el = document.getElementById(selector),
ejs = dom.ejs;
if (!el) throw "找不到目标元素";
var str = el.text.trim();
if(!ejs[selector]){
while(str.length){
var condition = isLeft ? left :right;
var index = str.indexOf(condition);
if(index !== -1){//取左边
var text = str.slice(0,index);
if(isLeft){
buff.push(startOfHTML, dom.quote(text.trim()), endOfHTML);
}else{
switch (text.charAt(0)) {
case "#"://处理注释
break;
case "="://处理后台返回的变量（输出到页面的);
buff.push(startOfHTML, text.slice(1), endOfHTML)
break;
default:
buff.push(text, "\n")
};
}
}else{
if(isLeft){
buff.push(startOfHTML, dom.quote(str), endOfHTML);
break;
}else{
throw "在字符串{{ "+dom.quote(str)+" }}中找不到右界定符"+right
}
}
str = str.slice(index+2).trim();
isLeft = !isLeft;
}
ejs[selector] = new Function("json", "with(json){"+buff.join("") + '};return __views.join("");')
}
parser.innerHTML = ejs[selector](obj.json || {});
while (parser.firstChild) {
fragment.appendChild(parser.firstChild)
}
return onsite ? el.parentNode.replaceChild(fragment, el) : fragment;
};
window.dom = dom;
})();

这种使用原生代码写的例子，可以被任何代码所使用，如果你有兴趣也可以看看司徒正美的例子的。原文网址在javascript 模板系统 ejs v2，可以移步一观。

Tags: jquery, template, 模版, 模板

Javascript | 评论:0 | 阅读:20337

Submitted by gouki on 2010, August 18, 11:56 PM

COPY文字到剪贴板很方便，我是指在IE下面，而其他的就有点复杂了。firefox下面有安全选项的。所以很多人都采用了flash来实现。如果不计flash，那么下面这个函数就十分有用了，可能是转的过多了，也不记得来源是哪里了。如果是原作者看到，请提示一下，一定加上您的链接。

JavaScript代码

function copyToClipboard(txt) {
if(window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
} else if(navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
alert("复制成功！")
}

Tags: clipboard, flash, firefox

Javascript | 评论:0 | 阅读:20311

Submitted by gouki on 2010, August 16, 11:16 AM

在网页中，看到使用CSS的地方，大多数都会有这么一句：

XML/HTML代码

<link rel="stylesheet" type="text/css" href="global.css" media="screen">

那么，究竟这个media有什么作用呢？通过查下资料了解到：

XML/HTML代码

all-- 用于所有设备类型
aural-- 用于语音和音乐合成器
braille-- 用于触觉反馈设备
embossed-- 用于凸点字符（盲文）印刷设备
handheld-- 用于小型或手提设备
print-- 用于打印机
projection-- 用于投影图像，如幻灯片
screen-- 用于计算机显示器
tty-- 用于使用固定间距字符格的设备。如电传打字机和终端
tv-- 用于电视类设备

虽然media有10个值，但我们经常看到的也就print,和screen两种。当然也会有没有media标签的情况，这个时候其实就是默认media="all"。
既然如此，那我们也就相当于了解了，如果你需要打印，那么你在按下打印的时候，系统就会默认调用media="print"所对应的CSS文件了。也因此这样可以让你更好的整理你的打印页面，比如把一些不需要打印的内容屏蔽掉、优化打印页面（让内容更利于被打印）等等

虽然我不是前端，但。。了解一下这些内容还是有点用处的。

Tags: css, media, screen, print

Javascript | 评论:0 | 阅读:25844

Submitted by gouki on 2010, August 15, 2:26 PM

　　为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project（http://jquerymobile.com）。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。

　　对于大名鼎鼎的jQuery开发团队来说，当然要让jQuery Mobile支持全球主流的移动平台，而不仅仅是北美流行的移动平台。想要知道jQuery Mobile项目将要做些什么吗？请看jQuery移动平台策略；想要知道jQuery Mobile项目将会支持哪些浏览器吗？请看Mobile Graded Browser Support。

　　jQuery Mobile开发团队正在紧张工作，准备那些要支持的移动设备并针对这些设备进行测试。他们争取在今年晚些时候发布jQuery Mobile。如果你想为jQuery Mobile提供帮助，请加入jQuery Mobile社区的讨论组。

　　jQuery Mobile项目已经得到了Palm, Mozilla等移动浏览器厂商的赞助。

　　jQuery Mobile开发团队说：“能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。”

　　编者：移动互联网，挡不住的趋势...

　　英文原文：Announcing the jQuery Mobile Project

　　博客园编译

Tags: jquery, jquery mobile

Javascript | 评论:0 | 阅读:25059

Records:307«‹22 23 24 25 262728 29 30 31 ›»

« 2025年06月 »