以下是我将平常积累的函数整成类似jquery框架的代码。
麻烦评价下哈。
有多废就直说,哥顶得住!欢迎在回答去畅所欲言哈...谢谢捧场
/*
* SmallJS
* 运行环境:IE 9+(包括 IE9) 或同等级别的其他浏览器
* 借鉴了 jQuery
* 使用时注意: 前面带有 _ 的属性或方法表示私有或受保护的属性或方法,全都是不允许调用的(虽然实际上是可执行的,但是不赞成调用!因为调用后得到的结果尚未测试....)
*/
(function(){
"use strict";
/*
* ********
变量定义
* ********
*/
// 定义调用名称,例如定义 G,那么就可以这么使用: G('#p').getEleW('content-box') // 200
var defaultApiName = 'G';
// 预定义事件类型:支持移动端
var browser = getBrowser();
var click = browser === 'mobile' ? 'touchstart' : 'click';
var mouseDown = browser === 'mobile' ? 'touchstart' : 'mousedown';
var mouseMove = browser === 'mobile' ? 'touchmove' : 'mousemove';
var mouseUp = browser === 'mobile' ? 'touchend' : 'mouseup';
/*
* ********
构造函数
* ********
*/
function SmallJs(selector , context){
if (this === window || this === undefined) {
return new SmallJs(selector , context);
}
// 使用时注意
this._curEle = this._getEle(selector , context);
this.length = this._curEle.length === undefined ? 1 : this._curEle.length;
}
/*
* ************
构造函数原型
* ************
*/
SmallJs.pro = SmallJs.prototype = {
// 版本
version: '1.0' ,
// 构造函数
constructor: SmallJs ,
// 当前引用的DOM对象
_curEle: null ,
// id 选择器
_idSelector: function(selector){
return document.getElementById(selector);
} ,
// class 选择器
_classSelector: function(selector , context){
return document.getElementsByClassName(selector , context);
} ,
// tag 选择器
_tagSelector: function(selector , context){
return document.getElementsByTagName(selector , context);
} ,
// css 选择器
_cssSelectorAll: function(selector){
return document.querySelectorAll(selector);
} ,
/*
* 1. 获取 DOM 元素
* 2. 转换为 SmallJs 对象,并将 _curEle 属性设置为当前元素
*/
_getEle: function(selector , context){
//if ()
var idSelector = /^#\w+$/;
var classSelector = /^\.\w+$/;
var tagSelector = /^\w+$/;
if (selector instanceof Object) {
return selector;
}
if (idSelector.test(selector)) {
return this._idSelector(selector.substring(1));
}
if (classSelector.test(selector)) {
return this._classSelector(selector.substring(1) , context);
}
if (tagSelector.test(selector)) {
return this._tagSelector(selector , context);
}
return this._cssSelectorAll(selector);
} ,
// 获取 DOM 元素|集合,可直接使用 Javascript 原生语法
get: function(){
return this._curEle;
} ,
// 指针移动:第一个元素
first: function(){
if (!this._isDOMList(this._curEle)) {
return this;
}
this._curEle = this._curEle[0];
this.length = 1;
return this;
//return this._merge(this._curEle , this);
} ,
// 指针移动:最后一个元素
last: function(){
if (!this._isDOMList(this._curEle)) {
return this._curEle;
}
this._curEle = this._curEle[this.length - 1];
this.length = 1;
return this;
//return this._merge(this._curEle , this);
} ,
/*
* 指针移动:指定元素
* 1. idx 类型不是 number 时,返回 第一个元素
* 2. idx 的大小 大于等于 总长度时 ,返回最后一个元素
*/
jump: function(idx){
if (!this._isDOMList(this._curEle)) {
return this;
}
var idx = SmallJs.getValType(idx) !== 'number' ? 0 : idx >= this.length ? this.length - 1 : idx;
this._curEle = this._curEle[idx];
this.length = 1;
return this;
//return this._merge(this._curEle , this);
} ,
/*
* 对象合并(继承),不建议使用!
* @param1 HTMLElement src
* @param2 Object copy
* ....
* @return 继承 SmallJs 后的 HTMLElement
*/
_merge: function(){
if (this._isDOMList(this._curEle)) {
throw new Error('当前指针所指向的是一个 DOM 元素集合!不是单一的元素!请设置单一元素后在进行合并!');
}
var src = arguments[0];
var list = SmallJs.mergeObj.apply(null , SmallJs.toArray(arguments , 1));
for (var key in list)
{
if (src[key] === undefined) {
if (SmallJs.getValType(list[key]) === 'array') {
src[key] = [];
this._merge(src[key] , list[key]);
} else if (SmallJs.getValType(list[key]) === 'object') {
src[key] = {};
this._merge(src[key] , list[key]);
} else {
src[key] = list[key];
}
}
}
return src;
} ,
// 判断当前对象是否是 元素集合
_isDOMList: function(obj){
return obj instanceof HTMLCollection || obj instanceof NodeList;
} ,
// 获取样式值
getStyleVal: function(attr){
return window.getComputedStyle(this._curEle , null)[attr];
} ,
// 设置元素 css 样式
css: function(json){
var json = SmallJs.getValType(json) !== 'object' ? {} : json;
for (var key in json)
{
this._curEle.style[key] = json[key];
}
} ,
// ....此处大量省略
// 还原全局变量 s,避免冲突
noConflict: function(){
if (window['_' + defaultApiName] !== undefined) {
window[defaultApiName] = window['_' + defaultApiName];
}
} ,
// 重命名对外暴露的 API 接口名称
renameDefaultApiName: function(name){
var name = typeof name !== 'string' ? defaultApiName : name;
this.noConflict();
defaultApiName = name;
SmallJs.setApiName();
}
};
/*
* ***********************************************************************************
以下是以 SmallJs 作为命名空间的 基础函数库,有先后顺序!所以不能打乱顺序,否则作废!
* ***********************************************************************************
*/
/*
* 正确获取值的类型
* @param Mixed val 待判断的值
* @return string number boolean null undefined regexp date function array object
*/
SmallJs.getValType = function(val){
if (typeof val !== 'object' || typeof val !== 'function') {
return (typeof val).toLowerCase();
}
var sIdx = '[object '.length;
var eIdx = -1;
return Object.prototype.toString.call(val).slice(sIdx , eIdx).toLowerCase();
};
/*
* 判断一个值是否是有效值
*/
SmallJs.isValidVal = function(val){
if (val === '') {
return false;
}
if (val === undefined) {
return false;
}
if (val === null) {
return false;
}
return true;
};
/*
* 递归 对象|数组 拷贝
* @param Object obj 数组 | 对象
* @return Object
*/
SmallJs.copyObj = function(obj , isDeep){...};
/*
* 将一个对象转换为数组
*/
SmallJs.toArray = function(obj , start , end){
var start = SmallJs.getValType(start) !== 'number' ? 0 : start;
var end = SmallJs.getValType(end) !== 'number' ? undefined : end;
return Array.prototype.slice.call(obj , start , end);
};
/*
* 普通对象继承 (不支持元素)
* 第一种模式
* @param Boolean isOverExistsKey 是否覆盖已有键名的键值
* @param Boolean isExtends 是否直接在原对象上进行更改
* @param Boolean isDeep 是否进行深层次递归拷贝
* @param Object args3 继承对象
* @param Object args4 被继承对象
* @param Object args5 被继承对象
....
* 第二种模式
* @param Object args1 继承对象
* @param Object args2 被继承对象
* @param Object args3 被继承对象
....
* @return object
*/
SmallJs.mergeObj = function(){...};
/*
* ************************************************************************************************************************
作为对象的中的对象的 构造函数
意思就是:对象中的某个属性 表示的含义已经超出了值的范围,即单纯使用值已经无法表示该属性的确切含义,因而,将其定义为对象!
* ************************************************************************************************************************
*/
function EventHandler(){
if (this === window || this === undefined) {
return new eventHandler();
}
this._eventList = [];
}
EventHandler.prototype = {....};
SmallJs.mergeObj(SmallJs.pro , new EventHandler());
SmallJs._setApiName = function(){
if (window[defaultApiName] !== undefined) {
window[defaultApiName] = SmallJs;
} else {
window['_' + defaultApiName] = window[defaultApiName];
window[defaultApiName] = SmallJs;
}
};
SmallJs._setApiName();
})();
感觉不适合发到 sf 社区 ... 或许隔壁 v2ex 更合适 ...
不错的小伙子, 不像老哥我, 混吃等死。
小伙子 看好你哟 这么有冲劲