当前位置:  编程技术>WEB前端
本页文章导读:
    ▪用JavaScript实现自己的DOM选择器      解释器模式（Interpreter）：定义一种语法格式，通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。开放封闭原则：面向对象中.........
    ▪简易版 jquery HttpClient      原文  思路不错。简单的封装了js 的get post 等请求返回xml.json等 1 /*! 2 ** Simple jQuery HttpClient library 3 ** By Imran Baloch 4 */ 5 6 (function ($, undefined) { 7 window.HttpClient = function() { 8 } 9 10 HttpCl.........
    ▪12款免费素材图标系列一      日期：2013-3-1  来源：GBin1.com 分享一套迷你OS图标 这是一套超酷的微型OS图标，在这套图标中包含了4种mini操作系统图标(专用于PNG格式和向量格式SV、PDF)，你可以使用它们在一.........

[1]用JavaScript实现自己的DOM选择器
    来源:    发布时间: 2013-11-06

解释器模式（Interpreter）：定义一种语法格式，通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。

开放封闭原则：面向对象中的开放封闭原则是类或模块应该对扩展开放对修改封闭，在这个dom选择器中实现id选择器，元素选择器，类选择器，如果以后需要属性选择器的话定义一个属性选择器实现相应的方法，同时在简单工厂中增加相应的创建属性选择器对象分支即可。

匹配原理：浏览器在匹配CSS选择符时是按照从右到左匹配的，所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。

代码：

(function (ns) {
/*
//tagName
console.log(dom.get("p"));

//#id
console.log(dom.get("#div"));

//.class
console.log(dom.get(".span", document.body));

//tag.class
console.log(dom.get("div.span"));

//#id .class
console.log(dom.get("#div .span"));

//.class .class
console.log(dom.get(".ul .li-test"));
*/

var doc = document;
var simple = /^(?:#|\.)?([\w-_]+)/;

function api(query, context) {

context = context || doc;

//调用原生选择器
if(!simple.test(query) && context.querySelectorAll){
return context.querySelectorAll(query);
}else {
//调用自定义选择器
return interpret(query, context);
}

}

//解释执行dom选择符
function interpret(query, context){
var parts = query.replace(/\s+/, " ").split(" ");
var part = parts.pop();
var selector = Factory.create(part);
var ret = selector.find(context);

return (parts[0] && ret[0]) ? filter(parts, ret) : ret;
}

//ID选择器
function IDSelector(id) {
this.id = id.substring(1);
}
IDSelector.prototype = {

find: function (context) {
return document.getElementById(this.id);
},

match: function(element){
return element.id == this.id;
}

};
IDSelector.test = function (selector) {

var regex = /^#([\w\-_]+)/;

return regex.test(selector);

};

//元素选择器
function TagSelector(tagName) {
this.tagName = tagName.toUpperCase();
}
TagSelector.prototype = {

find: function (context) {
return context.getElementsByTagName(this.tagName);

},

match: function(element){
return this.tagName == element.tagName.toUpperCase() || this.tagName === "*";
}
};
TagSelector.test = function (selector) {
var regex = /^([\w\*\-_]+)/;
return regex.test(selector);
};

//类选择器
function ClassSelector(className) {
var splits = className.split('.');

this.tagName = splits[0] || undefined ;
this.className = splits[1];
}
ClassSelector.prototype = {

find: function (context) {
var elements;
var ret = [];
var tagName = this.tagName;
var className = this.className;
var selector = new TagSelector((tagName || "*"));

//支持原生getElementsByClassName
if (context.getElementsByClassName) {
elements = context.getElementsByClassName(className);
if(!tagName){
return elements;
}
for(var i=0,n=elements.length; i<n; i++){
if( selector.match(elements[i]) ){
ret.push(elements[i]);
}
}

} else {
elements = selector.find(context);
for(var i=0, n=elements.length; i<n; i++){
if( this.match(elements[i]) ) {
ret.push(elements[i]);
}
}
}

return ret;

},

match: function(element){
var className = this.className;
var regex = new RegExp("^|\\s" + className + "$|\\s");
return regex.test(element.className);
}

};
ClassSelector.test = function (selector) {
var regex = /^([\w\-_]+)?\.([\w\-_]+)/;

return regex.test(selector);
};

//TODO:属性选择器
function AttributeSelector(attr){

this.find = function(context){

};

this.match = function(element){

};

}

AttributeSelector.test = function (selector){
var regex = /\[([\w\-_]+)(?:=([\w\-_]+))?\]/;
return regex.test(selector);
};

//根据父级元素过滤
function filter(parts, nodeList){
var part = parts.pop();
var selector = Factory.create(part);
var ret = [];
var parent;

for(var i=0, n=nodeList.length; i<n; i++){
parent = nodeList[i].parentNode;
while(parent && parent !== doc){
if(selector.match(parent)){
ret.push(nodeList[i]);
break;
}
parent = parent.parentNode;
}
}

return parts[0] && ret[0] ? filter(parts, ret) : ret;
}

//根据查询选择符创建相应选择器对象
var Factory = {

create: function (query) {

if (IDSelector.test(query)) {
return new IDSelector(query);
} else if (ClassSelector.test(query)) {
return new ClassSelector(query);
} else {
return new TagSelector(query);
}
}
};

ns.dom || (ns.dom = {});
ns.dom.get = api;
}(this));

　　

本文链接


    
[2]简易版 jquery HttpClient
    来源:    发布时间: 2013-11-06

原文  

思路不错。简单的封装了js 的get post 等请求返回xml.json等

1 /*!
2 ** Simple jQuery HttpClient library
3 ** By Imran Baloch
4 */
5
6 (function ($, undefined) {
7 window.HttpClient = function() {
8 }
9
10 HttpClient.prototype = {
11 getAsync: function (url, done, fail) {
12 return sendRequest('GET', undefined, url, done, fail);
13 },
14 postAsync: function (url, data, mediaType, accept, done, fail) {
15 return sendRequest('POST', data, url, mediaType, accept, done, fail);
16 },
17 postAsJsonAsync: function (url, data, accept, done, fail) {
18 return sendRequest('POST', data, url, 'application/json; charset=utf-8', accept, done, fail);
19 },
20 postAsXmlAsync: function (url, data, accept, done, fail) {
21 return sendRequest('POST', data, url, 'application/xml; charset=utf-8', accept, done, fail);
22 },
23 putAsync: function (url, data, mediaType, accept, done, fail) {
24 return sendRequest('PUT', data, url, mediaType, accept, done, fail);
25 },
26 putAsJsonAsync: function (url, data, accept, done, fail) {
27 return sendRequest('PUT', data, url, 'application/json; charset=utf-8', accept, done, fail);
28 },
29 putAsXmlAsync: function (url, data, accept, done, fail) {
30 return sendRequest('PUT', data, url, 'application/xml; charset=utf-8', accept, done, fail);
31 },
32 deleteAsync: function (url, done, fail) {
33 return sendRequest('DELETE', undefined, url, done, fail);
34 }
35 }
36
37 function sendRequest(type, data, url, mediaType, accept, done, fail) {
38 var options = getOptions(type, data, url, mediaType, accept, done, fail);
39 return $.ajax(options)
40 .done(function (msg) {
41 if (options.done) {
42 options.done(msg);
43 }
44 })
45 .fail(function (msg) {
46 if (options.fail) {
47 options.fail(msg);
48 }
49 });
50 }
51
52 function getOptions(type, data, url, mediaType, accept, done, fail) {
53 var dataType;
54 if (mediaType && typeof mediaType === "function") {
55 if (accept && typeof accept === "function") {
56 fail = accept;
57 accept = undefined;
58 }
59 done = mediaType;
60 mediaType = undefined;
61 }
62 else if (accept && typeof accept === "function") {
63 if (done && typeof done === "function") {
64 fail = done;
65 }
66 done = accept;
67 accept = undefined;
68 }
69 else if (mediaType && accept && typeof mediaType !== "function" &&
    
[3]12款免费素材图标系列一
    来源: 互联网  发布时间: 2013-11-06

日期：2013-3-1  来源：GBin1.com

分享一套迷你OS图标

这是一套超酷的微型OS图标，在这套图标中包含了4种mini操作系统图标(专用于PNG格式和向量格式SV、PDF)，你可以使用它们在一些我们常用的网站设计上，比如电子商务网站、管理面板、统计类型网站和CMC应用程序等。

一套免费Metro图标下载

来自设计师Kawsar Ali的一套免费Metro图标下载，包含了20个社交媒体图标，尺寸包含了 32x32 和 64x64两种。非常适合使用在你的个人博客和网站中，而且完全免费！ BanzaiTokyo设计的一套艺术品图标集

BanzaiTokyo设计的一套艺术品图标集(包含34个图标, PNG格式)，非常适合艺术类型网站或者个人作品集中使用，相信大家会喜欢，基于Creative Commons Attribution 3.0 License。 可以免费给使用，包括商业应用。 300个免费的图标（PSD格式） - Batch

带有PSD的源文件，可以免费个人或者商业使用，希望大家喜欢！ 免费图标集：Pika

免费图标集：Pika (42个图标包括了Icons, PNG, AI三种格式)，尺寸30x30，60x60 ，包括：书本，手机，上传，下载，文件，移动，拷贝，方向键等等。 免费图标：16个常用的web设计图标

免费图标：16个常用的web设计图标，支持矢量格式.vi和.eps，你可以无损质量的修改大小，包含了常用的图标，例如，主页，箭头，刷新，日历等等 超棒的现代手提袋式的社交媒体图标

超棒的现代手提袋式的社交媒体图标，包含了dribbble，twitter，linked-in, facebook, google plug等图标，提供PSD格式下载 超棒的简化风格的免费图标设计

超棒的简化风格的免费图标设计，提供了30个图标(PSD和CSH)，包含了常用的图标，例如，电脑，用户，留言，画板，照片等等. 漂亮的浏览器支持免费图标设计

漂亮的浏览器支持免费图标设计(PSD格式)， 属于清单的口味，相信喜欢清爽风格的朋友会喜欢！

免费图标字体

网络上有很多漂亮的图标字体，有付费和免费的两种不同类型 版本。使用图标字体通常要比使用传统标准图标要灵活的多。然而，它们却有一个非常大的弱点，每个图标字体通常都是一个单一的字体文件，如果要是使用在某一 个项目中，即使我们只需要其中部分的图标，仍然需要加载整个文件。 一款免费的圣诞节图标字体

一款免费的圣诞节图标字体（icon font），相信大家会喜欢！ 来自smashing的免费圣诞节图标

来自smashing的免费圣诞节图标（10个高质量的图标，png格式）

来源：12款免费素材图标系列一

作者：jjfat 发表于2013-3-1 14:52:20 原文链接
阅读：0 评论：0 查看评论

    
最新技术文章:
 




特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3