JavaScript 高级框架设计

在现在,jQuery等框架已经非常完美,以致于常常忽略了JavaScript原生开发,但是这是非常重要的.

所以,我打算写一个简单的框架,两个目的

  • 熟练框架的思想

  • 熟练DOM操作.

所以我打算,模仿jQuery,实现一个简单的类似jQuery的库 Hpawn.

关于JavaScript面向对象高级,会在以后介绍.

关于我所有的代码,都会托管到 github上,https://github.com/apawn

我的开发环境是VSCode.


在Hpawn中,我会分为七个模块.

  • 选择器模块

  • dom操作模块

  • 事件模块(click,on) 比较简单

  • 属性模块

  • 样式模块

  • 动画模块,使用缓动函数而不是css3.

  • 面向对象封装

选择器模块

在这里,我们要实现一个类似于jQuery选择器的东西,但是要简单很多.

代码 01.html

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 100px;
border: 1px red solid;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>

现在我们要给上面的div添加绿色背景,按照传统的办法,可能会这么写

01.js

   onload = function(){
var divs = document.getElementsByTagName("div");
for(var i = 0,length = divs.length;i<length;i++){
divs[i].style.backgroundColor="green";
}
}

但是,这样的DOM操作真的很麻烦.

代码冗余.丑,易错, 还会影响性能,为什么?

因为代码要压缩,document.getElementsByTagName()不会改变,但是如果改为get方法,只会存在一个g.

现在开始解决,首先解决代码冗余

02.js

先封装一个get方法

var get = function (tag) {
return document.getElementsByTagName(tag);
}

代码可能会变成现在这样,

var divs = get("div");
for(var i = 0,length = divs.length;i<length; i++){
divs[i].style.background = "green";
}

但是,似乎还是很冗余,继续封装.

03.js

var get = function (tag) {
return document.getElementsByTagName(tag);
}
var each = function (arr,style,value) {
for(var i = 0,length = arr.length;i<length; i++){
arr[i].style[style] = value;
}
} var divs = get("div");
each(divs,"backgroundColor","green") ;

代码变成了上面那样,有木有觉得好了很多呢.

可能并不觉得会简单,那是因为我只包含了两个元素.

但是,上面的代码只能做一件事情,就是设置样式,可是我还设置动作,设置属性.

好了,第一步优化完成,下面开始第二部.

04.js

var get = function (tag) {
return document.getElementsByTagName(tag);
}
var each = function (arr,func) {
for(var i = 0,length = arr.length;i<length; i++){
func(arr[i],i);
}
} var divs = get("div");
each(divs,function (item,index) {
item.style.background = "red";
});

我传递了一个函数进去,我将arr[i] 和i 传给函数,这是最关键的一步.

但是,一个问题出现了.

比如,我先查找数组 arr =[1,2,3,4] 中元素为3的索引,上面的代码可以吗?

我找到了,怎么跳出呢?

也许想到这样的代码

each(arr,function(v,i){
if(v===5){
breadk;
}
})

但是,break 可以写在函数中吗??

// 为了查看单独的js代码,我使用了node作为运行环境,所以代码库里有一些并没有对应的html文件.

还是需要再修改each 函数

05.js

 var each = function (arr, func) {
for (var i = 0, length = arr.length; i < length; i++) {
if (func(arr[i], i) === false) {
break;
}
}
}; var a = [1, 2, 3, 4];
var index = -1;
each(a, function (v, i) {
if (v === 3) {
index = i;
return false;
}
});
console.log(index); // 输出2

大功告成!

但是,我们每次调用函数的时候都要传一个v和i 才能使用,如果不小心忘了呢?

似乎有更好的办法

07.js,继续回到第一个例子

var get = function (tag) {
return document.getElementsByTagName(tag);
}
var each = function (arr, func) {
for (var i = 0, length = arr.length; i < length; i++) {
if (func.call(arr[i],arr[i], i) === false) {
break;
}
}
};
var divs = get("div");
each(divs,function (item,index) {
this.style.background = "red";
});

现在,我们看看jQuery的each是怎么实现的.

each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj ); else
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} return obj;
},

是不是差不多呢....

现在,继续优化get方法.

如果用get方法获得多个元素,就会获得多个数组,为了简化开发,可以考虑合并到一个数组中,调用多次get方法.

给get添加一个result参数

var get = function (tag, result) {
result = result || [];
result.push.apply(result, document.getElementsByTagName(tag));
return result;
}
var each = function (arr, func) {
for (var i = 0, length = arr.length; i < length; i++) {
if (func.call(arr[i], arr[i], i) === false) {
break;
}
}
};
var divs = get("div");
each(divs, function (item, index) {
this.style.background = "red";
});

但是,这里为什么要用apply呢?

因为document.getElementsByTagName() 返回一个伪数组,但是push方法只能接受真数组,在这里调用apply,因为apply接受的其他参数必须是一个数组,这里把document.getElementsByTagName() 的返回结果进行展开,然后一个一个push进去.

当然也可以这么写,但是性能肯定不及原生方法性能高.

each( document.getElementsByTagName(tag),function(){
result.push(this);
})

再次体现了封装的意义.

下面JavaScript高级框架设计(二) 将会开始介绍基本选择器的实现

JavaScript 框架设计的更多相关文章

  1. JavaScript框架设计(三) push兼容性和选择器上下文

    JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...

  2. JavaScript框架设计(四) 字符串选择器(选择器模块结束)

    JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...

  3. 偶的《javascript框架设计》终于出版

    #cnblogs_post_body p{ text-indent:2em!important; } 历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有 ...

  4. JS读书心得:《JavaScript框架设计》——第12章 异步处理

    一.何为异步   执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...

  5. Javascript框架设计思路图

    这个系列的随笔都是关于Javascript框架设计一书的读书笔记(作者是司徒正美),不是本人原创!!! 一.简介: 1.市面上主流的JS框架,大多数是由一个个模块组合而成,模块化是大多数让软件所遵循的 ...

  6. JavaScript 框架设计(二)

    JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...

  7. 浅谈JavaScript框架设计

    在这个js框架随处乱跑的时代,你是否考虑过写一个自己的框架?下面的内容也许会有点帮助. 一个框架应该包含哪些内容? 1.语言扩展 大部分现有的框架都提供了这部分内容,语言扩展应当是以ECMAScrip ...

  8. javascript框架设计(读书笔记)

    我觉得多看几本进阶的书 与其十本书读一遍,不如一本书读十遍 读书的启示: 读好书(看推荐) 精读(重复看) 能读厚书(javascript权威指南) Object.keys Object.keys=O ...

  9. JavaScript框架设计 第14章 动画引擎

    easing-js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. ajax内调用WCF服务

    WCF可以当作WebService一样被调用,在html内通过ajax调用WCF服务的方法如下: 1.新建一个WCF服务的网站项目: 2.在项目内增加一个新项:启用了ajax的WCF服务: 3.在对应 ...

  2. py2exe

    1- 生成单一的exe文件: pyinstaller.py -F d:\open_txt\t.py 2- 添加必要的搜索路径: pyinstaller.py -F -p D:\python27\Lib ...

  3. vscode过滤pyc文件

    在工作区设置里添加如下代码: { "files.exclude": { "**/.git": true, "**/.svn": true, ...

  4. 多个table切换 getElementsByClassName

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. Daily Scrum02 12.11

    今天的会议的主要内容基本是解决界面组的问题,原本开始进行人员分配的时候没有考虑到要花特别长的时间为美化界面整理素材,且由于进行素材PS的同学的时间安排问题,和不熟练,很久没有将素材准备这项任务完成.因 ...

  6. [转]定位占用oracle数据库cpu过高的sql

    今天在吃饭的时候我的朋友的数据库出现了问题,cpu占用率为97%,当我看到这个问题的时候我就想到了或许是sql导致的此问题,由于忍不住吃饭,暂时没有帮他看这个问题,这是我饭后自己模拟的故障,进行的分析 ...

  7. 使用html5 地理位置技术 和 百度地图api查询当前位置

    使用了  zepto  和 requirejs define(['zepto'],function($){ var geolocation = { init:function(config,onSuc ...

  8. IDT HOOK思路整理

    IDT(中断描述符表)分为IRQ(真正的硬件中断)和软件中断(又叫异常). HOOK的思路为,替换键盘中断处理的函数地址为自己的函数地址.这样在键盘驱动和过滤驱动之前就可以截获键盘输入. 思路确定之后 ...

  9. Ajax请求

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  10. win 8 换 win7 注意事项

    win8 换win7 硬盘格式修改一下gpt 格式转换为mbr模式 当进入到要选择安装到某一个盘时,由于磁盘的类型不同,会提示:“选中的磁盘采用GPT分区形式无法安装系统”.这时需要重新设置分区形式( ...