leadJS初构建
目录：
1. 面向对象篇
2. 数据结构篇
3. 全局函数篇
4. APICloud篇
1. 面向对象篇
JS原本无法进行程序员世界的面向对象编程，故此对JS封装成一种具有面向对象编程能力的JS.
/**
* ----------------------------------------------------------
* ---------------------- 面向对象篇 ------------------
* ----------------------------------------------------------
*/ var /**
*
* @Title Base
*
* @Description 实现js面向对象编程的基类(所有类都是继承于该类)
*
*/ Base = { /**
*
* @Title is
*
* @Description 判断 类与类之间 以及 对象与类之间 关系的基础方法
* 情况一(类与类之间)：
* 1. 父类.is(子类) -> false
* 2. 子类.is(父类) -> true
* 情况二(对象与类之间)：
* 1. 父类对象.is(子类) -> false
* 2. 子类对象.is(父类) -> true
*
* @param {object} type 类名称
*
* @return {boolean}
*
*/ is : function(type){
var
self = this; /**
* 调用对象.is(指定对象)
* 判断 调用对象 是否 包含 指定对象(属性)
* 或者也可以这样说
* 判断 指定对象 是否 包含于 调用对象(属性)
*/ while ( self ) { if ( self == type ) return true; self = self.__type__; // __type__ : (1)Class-引用其父类 (2)New-实例所属的类 } return false; }
} , /**
*
* @Title Class
*
* @Description 创建类的函数，用于声明类及继承关系,BaseClass.create.call(this, ..., ...); // 调用基类的构造函数
*
* @param {Object} DefineClass 定义类的对象
*
* @param {Object} BaseClass 需要继承的类(省略默认为 Base)
*
* @return {Class} 创建类
*
*/ Class = function(DefineClass, BaseClass){ // 默认继承 Base 基类 var
parent = BaseClass || Base , // 创建类的临时函数壳 _class _class = function(){ // __type__ 属性 : 引用其父类
this.__type__ = parent; // 复制类的全部定义到当前创建的类
for( var member in DefineClass ) { this[member] = DefineClass[member]; } } ; _class.prototype = parent; return new _class(); } , /**
*
* @Title New
*
* @Description 创建对象的函数，用于任意类的对象创建
*
* @param {Object} ClassName 类
*
* @param {Object} ClassParam 类参数(构造函数需要的参数)
*
* @return {Object} 创建对象
*
*/ New = function(ClassName, ClassParam){ // 创建对象的临时函数壳 _new var _new = function(){ // __type__ 属性 : 据此可以访问到对象所属的类
this.__type__ = ClassName; if(typeof ClassName.create === 'function'){ // 约定 所有 类的构造函数： create !
ClassName.create.apply(this, ClassParam); } } ; _new.prototype = ClassName; return new _new(); } ;
编写一个例子来说明：
// 定义一个类名为 ClassName 的类
var ClassName = Class({
// create 为 构造函数
create : function(){
/**
* 注意：成员变量没有私有(private)、保护(protected)、公开(public)
* 私有 - 用 '_' 开头定义变量
* 保护 - 不存在
* 公开 - 不用 '_' 开头定义变量
*/
// 列举一些成员变量
this._privateVar = 'privateValue'; // 私有变量
this.publicVar = 'publicValue'; // 公开变量
},
// 列举一些成员方法
_privateFun : function(){ // 私有方法
// ...
},
publicFun : function(){ // 公开方法
// ...
}
});
非常好，程序非常符合我们面向对象编写形式，但是你会问我：继承呢？
// 建立一个类为 ClassName2 继承 ClassName
var ClassName2 = Class({},ClassName);
// 注意：私有变量、方法也会被继承到子类。因为JS原本就没有变量的私有、保护、公开之说
如果你看不懂这些代码，那么你应该多去复习复习面向对象的知识，再回来瞧瞧。好像还忘记告诉你了，你用Class()建立的类默认会继承Base类。
2. 数据结构篇
接下来介绍介绍几种简单的数据结构 http://www.cnblogs.com/jiangxiaobo/p/5619638.html
/**
* 队列类
*/
var Queue = Class({
create : function(){
var
self = this
,
argsLen = arguments.length
,
i = 0
; self.queue = []; for(;i<argsLen;i++){
self.queue.push(arguments[i]);
}
self.queue.reverse();
},
enter : function(){
var
self = this
,
argsLen = arguments.length
,
i = 0
; self.queue.reverse(); for(;i<argsLen;i++){
self.queue.push(arguments[i]);
} self.queue.reverse();
},
out : function(popNum){
var
self = this
,
popNum = !popNum?0:(popNum-1)
,
i = 0
; for(;i<popNum;i++){
self.queue.pop();
} return self.queue.pop();
}
});
/**
* 堆栈类
*/
var Stack = Class({
create : function(){
var
self = this
,
argsLen = arguments.length
,
i = 0
; self.stack = []; for(;i<argsLen;i++){
self.stack.push(arguments[i]);
}
},
enter : function(){
var
self = this
,
argsLen = arguments.length
,
i = 0
; for(;i<argsLen;i++){
self.stack.push(arguments[i]);
}
},
out : function(popNum){
var
self = this
,
popNum = !popNum?0:(popNum-1)
,
i = 0
; for(;i<popNum;i++){
self.stack.pop();
} return self.stack.pop();
}
});
/**
* 延时类
*/
var Deferred = Class({
create : function(){
var self = this;
// 调用父类的构造函数,将所有的参数传给父类
Queue.create.apply(this,arguments);
},
resolve : function(){
var self = this,then = self.out();
if(then) then.apply(null,arguments);
},
done : function(callback){
var self = this;
if(typeof callback === 'function'){
self.enter(callback);
}
}
},Queue);
这些可能你认为会没有用处，数据结构我个人认为是一种思想，按照这种思想去设计程序，想必会少出一些bug吧。可能队列和堆栈都能明白，但是延时类拿来干嘛？
好，你设想一下，在移动开发中，程序几乎都是异步进行，意思就是在一段程序执行之后可能会等一段时间才能执行下一段程序，那么这空闲的时间内有可能也有其他程序在执行，所以JS程序常常会使用回调来解决这个问题。回调可以使程序按照我们的思路一直回调下去，但是由于回调的层次越深，那么阅读代码就越困难，而且代码也会非常臃肿，不协调，于是有一个方法可以解决这个问题就是这个延时类，具体分析代码如下：
// 有一个延时任务
setTimeout(function(){
alert(1);
// 想在 alert(1) 执行之后在执行 alert(2)
// 于是就会出现 定义一个函数 aa
// 然后在这里调用
aa();
});
// alert(2);
function aa(){
alert(2);
}
//实例化传统类
var dfd = New(Deferred);
//延时任务
setTimeout(function(){
alert(1);
dfd.resolve('哈哈');
},1000);
dfd.done(function(str){
alert(str);
dfd.resolve();
});
dfd.done(function(){
alert(3);
});
对比以上两个程序会发现下面的程序更为优雅易懂。
3. 全局函数篇
/**
* ----------------------------------------------------------
* ---------------------- 全局函数篇 ------------------
* ----------------------------------------------------------
*/ var /**
*
* @Title Extend
*
* @Description 对象合并
*
* @param {Object} des 源对象
*
* @param {Array|Object} src 对象数组
*
* @param {Boolean} override 是否重写源对象
*
* @return {object} 返回源对象的引用
*
*/ Extend = function(des, src, override){ var i = 0 , l = 0 , k = null , argsLen = arguments.length ; if ( argsLen === 0 ) { return {}; } else if ( argsLen === 1 ) { return arguments[0]; } if ( src instanceof Array ) { for ( i = 0, l = src.length; i < l; i++ ) { Extend(des, src[i], override); } } else { for ( k in src ) { if ( override || !(k in des) ) { des[k] = src[k];
} } } return des; } , /**
*
* @Title Each
*
* @Description 迭代器
*
* @param {Array} obj 待迭代对象数组
*
* @param {Function} callback 迭代回调方法
*
* @param {Object} context 环境变量,用作回调函数中this的对象
*
* @param {*} arg 传入迭代回调函数的参数
*
* @throws {jsonstringify} 缺少参数
*
*/ Each = function(obj, callback, context, arg){ var k = null , argsLen = arguments.length ; if ( argsLen === 0 || argsLen === 1 ) { throw new Error('缺少参数'); } if ( typeof callback !== 'function' ) { throw new Error('参数类型必须为function'); } for ( k in obj ) { callback.call( context||null, k, obj[k], arg ); } } , /**
*
* @Title VarToBool
*
* @Description 将变量值转换为布尔值。规定 ''|null|undefined|NaN|0|{}|[] 都为false，其他变量均为true
*
* @param {Object} data 需要判断的变量
*
* @return {Boolean}
*
*/ VarToBool = function(data){ var _t = typeof data , hasProp = false , prop = null ; if ( _t === 'object' ) { for ( prop in data ) { hasProp = true; // 证明该对象存在属性
break; } return hasProp; } return !!data; } , /**
*
* @Title GetType
*
* @Description 得到 变量 类型 字符串。
*
* @param {*} data 需要得到类型的变量
*
* @return {String}
*
* 'abc' return 'string'
* true return 'boolean'
* 123,NaN,Infinity return 'number'
* [] return 'array'
* {} return 'object'
* function(){} return 'function'
* new Date return 'date'
* new RegExp return 'regexp'
* Math return 'math'
* null return 'null'
* undefined return 'undefined'
*
*/ GetType = function(data){ var _t = '' ; return ( (_t = typeof data) == 'object' ? data == null && 'null' || Object.prototype.toString.call(data).slice(8,-1):_t ).toLowerCase(); } , /**
*
* @Title InArray
*
* @Description 检查值是否在数组中。
*
* @param {*} val 值
*
* @param {Array} arr 数组
*
* @return {Boolean} 在数组中返回true，否则返回false
*
* @throws {jsonstringify} 数组不存在
*
*/ InArray = function(val,arr){ var i = 0 , l = 0 ; if ( GetType(arr) !== 'array' ){ throw new Error('数组不存在'); } for ( i = 0, l = arr.length; i < l; i++ ) { if ( arr[i] === val ) { return true; } } return false; } ;
/**
* ----------------------------------------------------------
* ---------------------- DOM操作篇 ------------------
* ----------------------------------------------------------
*/ var Dom = (function(){ var dom = function(selector){ return new dom.fn.init(selector); }; dom.fn = dom.prototype = { length : 0, selector : '', nodelist : [], init : function(selector){ var self = this; if ( !selector ) { return self; } self.selector = selector; return self.makeArray(document.querySelectorAll(selector)); }, makeArray : function(nodelist){ var self = this; self.nodelist = []; if ( !nodelist.length && nodelist.length != 0 ) { // 证明是单个节点
self.nodelist.push(nodelist); } else if ( nodelist.length && nodelist.length != 0 ) { // 证明是 nodelist
for ( var i=0,l=nodelist.length; i<l; i++ ) { self.nodelist.push(nodelist[i]); } } // else 证明是 [] // else 节点数组为空 或者 也不是单个节点 self.length = self.nodelist.length; return self; } }; dom.fn.init.prototype = dom.fn; // dom 静态扩展 方法
dom.extend = function(src, override){ Extend(dom, src, override); }; // dom 动态扩展 方法
dom.fn.extend = function(src, override){ Extend(this, src, override); }; dom.fn.each = function(callback,arg){ Each(this.nodelist,callback,this,arg); }; /**
* 动态扩展 dom
*/
dom.fn.extend({ on : function(name, fn, useCapture){ var self = this; useCapture = useCapture || false; self.each(function(index,node){ if ( node.addEventListener ) { node.addEventListener(name, fn, useCapture); } }); return self; } , off : function(name, fn, useCapture){ var self = this; useCapture = useCapture || false; self.each(function(index,node){ if ( node.removeEventListener ) { node.removeEventListener(name, fn, useCapture); } }); return self; } , one : function(name, fn, useCapture){ var self = this; useCapture = useCapture || false; self.each(function(index,node){ var _cb = function(){ if ( fn && typeof fn === 'function' ) { fn(); } if ( node.removeEventListener ) { node.removeEventListener(name, _cb, useCapture); } }; if ( node.addEventListener ) { node.addEventListener(name, _cb, useCapture); } }); return self; } , find : function(selector){ var self = this; if ( !selector ) { return self.makeArray(); } else { return self.makeArray(self.nodelist[0].querySelectorAll(selector)); } } , eq : function(index){ var self = this; if ( !index || index <= 0 ) { return self.makeArray(self.nodelist[0]); } else if ( index >= self.length ) { return self.makeArray(self.nodelist[self.length-1]); } else { return self.makeArray(self.nodelist[index]); } } , get : function(index){ var self = this; if ( !index || index <= 0 ) { return self.nodelist[0]; } else if ( index >= self.length ) { return self.nodelist[self.length-1]; } else { return self.nodelist[index]; } } , remove : function(){ var self = this; self.each(function(index,node){ node.parentNode.removeChild(node); }); return self; } , attr : function(name, value){ var self = this; if (arguments.length == 1) { // 获取属性值
return self.nodelist[0].getAttribute(name); } else if(arguments.length == 2) { // 设置属性值
self.each(function(index,node){ node.setAttribute(name, value); }); } return self; } , removeAttr : function(name){ var self = this; if ( !name ) { return self; } else { self.each(function(index,node){ node.removeAttribute(name); }); } return self; } , hasClass : function(cls){ var self = this; if (self.nodelist[0].className.indexOf(cls) > -1) { return true; } else { return false; } } , addClass : function(cls){ var self = this; self.each(function(index,node){ if ('classList' in node) { node.classList.add(cls); } else { var preCls = node.className; var newCls = preCls +' '+ cls; node.className = newCls; } }); return self; } , removeClass : function(cls){ var self = this; self.each(function(index,node){ if ('classList' in node) { node.classList.remove(cls); } else { var preCls = node.className; var newCls = preCls.replace(cls, ''); node.className = newCls; } }); return self; } , toggleClass : function(cls){ var self = this; self.each(function(index,node){ if ('classList' in node) { node.classList.toggle(cls); } else { if (node.className.indexOf(cls) > -1) { var preCls = node.className; var newCls = preCls.replace(cls, ''); node.className = newCls; } else { var preCls = node.className; var newCls = preCls +' '+ cls; node.className = newCls; } } }); return self; } , offset : function(){ var self = this,sl = 0,st = 0,rect=null,node = self.nodelist[0]; sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); st = Math.max(document.documentElement.scrollTop, document.body.scrollTop); rect = node.getBoundingClientRect(); return { l: rect.left + sl, t: rect.top + st, w: node.offsetWidth, h: node.offsetHeight }; } , data : function(name, value){ var self = this; if (arguments.length == 1) { // 获取属性值
return self.nodelist[0].dataset[name]; } else if(arguments.length == 2) { // 设置属性值
self.each(function(index,node){ node.dataset[name]=value; }); } return self; } }); return dom; })();
leadJS初构建的更多相关文章
- grunt 构建工具(build tool)初体验
操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/ 直接点击install ,会根据你的操 ...
- 【原创】构建高性能ASP.NET站点 第六章—性能瓶颈诊断与初步调优（下前篇）—简单的优化措施
原文:[原创]构建高性能ASP.NET站点 第六章-性能瓶颈诊断与初步调优(下前篇)-简单的优化措施 构建高性能ASP.NET站点 第六章—性能瓶颈诊断与初步调优(下前篇)—简单的优化措施 前言:本篇 ...
- pytorch入门2.2构建回归模型初体验（开始训练）
pytorch入门2.x构建回归模型系列: pytorch入门2.0构建回归模型初体验(数据生成) pytorch入门2.1构建回归模型初体验(模型构建) pytorch入门2.2构建回归模型初体验( ...
- pytorch入门2.0构建回归模型初体验（数据生成）
pytorch入门2.x构建回归模型系列: pytorch入门2.0构建回归模型初体验(数据生成) pytorch入门2.1构建回归模型初体验(模型构建) pytorch入门2.2构建回归模型初体验( ...
- pytorch入门2.1构建回归模型初体验（模型构建）
pytorch入门2.x构建回归模型系列: pytorch入门2.0构建回归模型初体验(数据生成) pytorch入门2.1构建回归模型初体验(模型构建) pytorch入门2.2构建回归模型初体验( ...
- JCEF 初体验，window系统构建jar包
前言 本文记录如何通过jcef源代码去构建自己所需要的jar包,此文章构建的为windows64位jcef 的 jar 包,若需要构建 32 位的 jar 包,则需要按照文章将相关准备软件设置为 32 ...
- gradle的安装，配置，构建，研究，初体验......（入职一周研究的第一个大知识点）
(1)Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置.更 ...
- .NET Core初体验 在window上构建第一个app
ASP.NET Core 是一个跨平台,高性能的开源框架,用于构建现代化的,基于云的互联网应用程序.使用 ASP.NET Core ,您可以: 构建Web应用程序和服务,IoT应用程序和移动后端. 在 ...
- 初入SpringBoot——使用IDEA构建最小SpringBootDemo
前言 从SpringBoot一出现,就开始关注这个东西了. 但是一直不敢使用,因为一个原则是刚出来的东西肯定有很多坑.而且之后会不会流行也需要时间的检验. 现在渐渐的时间检验之后,SpringBoot ...
随机推荐
- 手机端点击复制链接到剪切板（以及PC端）
一直在找如何能点击按钮将一串字符串放到手机的剪切板上,但是可能是因为搜索的关键字不对,一直无果. 向同事请教了一下,给了一个clickboard.js的插件.开始试验的时候,使用手机自带浏览器进行测试 ...
- WebService连接sql serever并使用Android端访问数据
一.下载sql serever(真真难下) 建立数据库 二.创建WebService VS2015中新建项目,进行连接调试 1. 服务资源管理文件->数据连接->新建连接 2. 继续-&g ...
- php pear包打包方法
一)首先下载工具onion 浏览器打开,服务器上wget测试无法正常下载 地址:https://raw.github.com/c9s/Onion/master/onion 二)在临时目录下,建立相关目 ...
- Esper学习之九：EPL语法（五）
本篇的内容主要包括了Subquery(也就是子查询)和Join,内容不少,但是不难,基本上和sql差不太多. 1.Subquery EPL里的Subquery和sql的类似,是否比sql的用法更多我不 ...
- CSS3 -- 动画库
http://www.jq22.com/yanshi819 文件结构: html <!DOCTYPE html> <html lang="zh-CN"> & ...
- 重建索引：ALTER INDEX..REBUILD ONLINE vs ALTER INDEX..REBUILD
什么时候需要重建索引 1. 删除的空间没有重用,导致 索引出现碎片 2. 删除大量的表数据后,空间没有重用,导致 索引"虚高" 3.索引的 clustering_facto 和表不 ...
- Delete触发器
- vsCode_1.27.2
User Settings: 一,当前行高亮显示: "editor.renderLineHighlight": "line", 二,如何呈现空白字符(一般选no ...
- [原]linux下将网卡设置为混杂模式
设置为混杂模式ifconfig eth2 promisc取消设置ifconfig eth2 -promisc ------------------------------------------ 下面 ...
- JavaScript 异步进化史
前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...