公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松的实现类继承,不过javascript的类继承方法还是有的,常见的有构建函数、原型扩展、综合……,也有一些专门写类的函数,例如jQuery的作者有个类继承函数。关于类继承写法可以简单看看这篇文章。

我自己写的框架也不知道叫什么名字,刚开始写的时候随手写了个W(姓拼音,之前写过jQuery弹出框插件wBox),现在写这篇文章重新整理了一下思想,换了YQ(名字拼音,你懂的~)。

核心代码

框架设计的时候尽量做到了支持链式写法,也就是返回this,可以$(selector).handler1().handler2()……无限写下去,只要不是有返回值的就可以继续。包括了event,dom,css,还有fadeIn,fadeOut动画(因为再重构爱墙[html5+css3]版,所有顺手加上了这个功能)。如果配合sizzle选择器就更牛了!

下面说说框架的核心代码,等完善了之后跟新版html5爱墙一起放出,主要的代码如下:

  1 (function(window,document){
  2         var DOC = document,YQ = window.$ =function(selector){
  3                 if(!selector){
  4                         return YQ.elems
  5                 }
  6                 typeof selector ==='string'&&(selector = getElements(selector));//简单的判断是dom对象,还是字符串,字符串则开始选择器
  7                 return superElems(selector);
  8         }
  9         function superElems(elems){
 10                 if(elems){
 11                         if(elems.nodeType){//判断是否为DOM
 12                                 if(typeof elems.getAttribute!=="unknown"){
 13                                         var temp = elems;
 14                                         elems =[];
 15                                         elems[0]= temp;//把本身作为超级对象的第一个,其他方法进行扩展
 16                                         for(var i in YQ.elems){
 17                                                 //扩展对象,保留已有的方法
 18                                                 typeof elems[i]==="undefined"&&(elems[i]= YQ.elems[i])
 19                                         }
 20                                 }
 21                         }else{//如果为对象,则对对象进行扩展
 22                                 elems = YQ.extend(elems,YQ.elems);
 23                         }
 24                 }
 25                 return elems;
 26         }
 27         function getElements(selector){
 28                 //伟大的选择器,可以使用sizzle
 29                 var dom = DOC.getElementById(selector);//……
 30                 return dom;
 31         }
 32         YQ.tool={
 33                 isFunction:function(obj){//简单的判断是否为函数
 34                         return obj &&typeof obj ==="function";
 35                 }
 36         }
 37         //此处为超级对象一些扩展
 38         YQ.elems={
 39                 each:function(dom,callback){//强大的each
 40                         if(YQ.tool.isFunction(dom)){
 41                                 arguments.callee.call(this,this,dom);
 42                         }else{
 43                                 for(var i =0, len = dom.length; i < len; i++){
 44                                         callback.call(dom, i, dom[i]);
 45                                 }
 46                         }
 47                         returnthis;
 48                 },
 49                 find:function(selector){
 50                         var doms =[];
 51                         this.each(function(i,dom){
 52                                 doms.push(YQ.DOM.find(selector,dom));
 53                         })
 54                         return superElems(doms);
 55                 }
 56         }
 57         YQ.each= window.Array.prototype.each= YQ.elems.each;//扩展Array
 58         YQ.extend=function(subClass,baseClass){
 59                 for(var i in baseClass){
 60                         subClass[i]= baseClass[i];
 61                 }
 62                 return subClass;
 63         }
 64         YQ.AJAX={}
 65         YQ.CSS={
 66                 names:{
 67                         'float':'cssFloat',//区分cssFloat or styleFloat
 68                         opacity:'opacity'
 69                         //……
 70                 }
 71         }
 72         YQ.browser={
 73                 isIE:'',
 74                 isFirefox:'',
 75                 version:'3.6'
 76                 //……
 77         }
 78         YQ.event={
 79                 names:{
 80                         mousewheel:YQ.browser?"DOMMouseScroll":"mousewheel"
 81                 },
 82                 fix:function(e){
 83                         if(e && e.clone)return e;//如果已经处理了,直接返回
 84                         e = window.event|| e;//event是全局变量
 85                         var fixE ={
 86                                 clone:true,
 87                                 stop:function(){//冒泡
 88                                         if(e&&e.stopPropagation){
 89                                                 e.stopPropagation();
 90                                         }else{
 91                                                 e.cancleBubble=true
 92                                         }
 93                                 },
 94                                 prevent:function(){//默认动作
 95                                         if(e && e.preventDefault){
 96                                                 e.preventDefault();
 97                                         }else{
 98                                                 e.returnValue=false;
 99                                         }
100                                 },
101                                 target:e.target|| e.srcElement,
102                                 x:e.clientX|| e.pageX,
103                                 Y:e.clientY|| e.pageY,
104                                 //鼠标滚轮事件统一处理
105                                 wheel:e.wheelDelta/120||-e.detail/3
106                         }
107                         return fixE;
108                 }
109         }
110         YQ.DOM={
111                 find:function(selector,parentDom){
112                         //do something
113                 }
114         }
115 })(window,document);

简单的分析

代码中的注释还算详细,结合注释就可以看懂,下面我再啰嗦几句,高手飘过,欢迎拍砖……

总得来看是个匿名函数,定义了全局变量$(似乎都喜欢美元,如果有喜欢的人民币的,下次加上),函数里面有个YQ的对象,有很多function,包括一些私有的。

使用$可以作为选择器,如果为空,则返回YQ.elems对象,选择后的DOM根据YQ.elems进行扩展,最后得到的就是注释里面说的superElems(此处创建superElems方法参考了下jRaiser),跟jQuery的superElems类似,绑定了很多方法,可以方便的进行操作,YQ的方法可以通过YQ.elems扩展到选择器选择的对象上去,而选择器主要的函数getElements,可以使用sizzle,这样就方便了dom操作,不过sizzle似乎也是代码太多,此处将来会支持简单的标签,#ID,.class,标签+class选择器。

另外框架中中对一些Array,string进行了扩展,例如上面的Array.each方法,YQ.elems.each是重量级的函数方法,可以支持superElems的遍历(返回本身),还可以支持简单数组的遍历。

框架中还对一些兼容性进行了处理,例如YQ.event.fix处理事件,css中处理float

基本就这些了,今天就先说核心的部分,其实通过这段代码已经很清晰的了解到这个框架的思想了,后续继续给力的coding,补充扩展……

目前为止,框架不到800行代码,包括了常见的jQuery方法,压缩后不到9k,gzip 4.5K~

写在最后

本想写一系列的文章,可是敲了几个字又不知道说啥,今后学习下司徒正美追求短小精悍的博文~呵呵

源文档 <http://js8.in/677.html>

转载于:https://www.cnblogs.com/quinnxu/p/3260315.html

一个轻量级javascript框架的设计模式相关推荐

  1. 写的一个轻量级javascript框架的设计模式

    公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架.谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可 ...

  2. 自己写的一个轻量级javascript框架的设计模式

    2019独角兽企业重金招聘Python工程师标准>>> 公司一直使用 jQuery 框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架.谈到 ...

  3. 2016 年 50 个最佳的轻量级 JavaScript 框架和库一

    2016 年 50 个最佳的轻量级 JavaScript 框架和库 IT程序狮 · 1 天前 回顾今年已发布的 JS 框架和库,我们针对地筛选了一些能够提供直接和具体功能的免费 JavaScript ...

  4. java 轻量级 job_oxygen: 一个轻量级Java框架,包含ioc、aop、config、cache、job、Jdbc、web等...

    oxygen 轻量级Java框架 介绍 一个轻量级Java框架 oxygen-core 配置管理,支持${attrs.key:defaultValue}表达式获取配置 加解密管理,提供加解密服务内置基 ...

  5. 简单分享一个轻量级自动化测试框架目录结构设计

    更多关于python selenium的文章,请关注我的专栏:Python Selenium自动化测试详解 很多人在做自动化测试的过程中会遇到一个瓶颈,就是能够写脚本,但是不知道怎么去组织代码,怎么搭 ...

  6. 转载:::::简单分享一个轻量级自动化测试框架目录结构设计

    很多人在做自动化测试的过程中会遇到一个瓶颈,就是能够写脚本,但是不知道怎么去组织代码,怎么搭建测试框架,今天博主就放点干货,分享一个轻量级的自动化测试框架的目录结构,如下图: 分层如下: config ...

  7. c#自己封装一个轻量级ORM框架FastORM

    在日常进行数据库操作的过程中,我的数据层使用的是微软企业库,但对于多字段的数据的插入与更新时写sql语句就会显得特别费时间,还会经常出现错误耗费时间排查,所以决定基于微软企业库封装一个轻量级的ORM框 ...

  8. 超轻量级 Javascript 框架,暂且取名为MYJS

    2008年3月7日 15:41 关于该JAVASCRIPT框架的文档和相关的Demo还没有写,先把一些开发过程中的测试界面放在此 http://www.taoxueba.com/myjs 上面的界面虽 ...

  9. python开发框架 代码生成_500 行 Python 代码构建一个轻量级爬虫框架

    转载:https://www.jqhtml.com/11084.html 既然已经有像 Scrapy 这样优秀的爬虫框架,为何还要造轮子呢?嗯,其实最主要的还是想要将学习到 Python 知识综合起来 ...

最新文章

  1. NVIDIA DGX SUPERPOD 企业解决方案
  2. php上传,PHP-文件上传和下载「程序员培养之路第三十八天」
  3. stm32_19264液晶LCD驱动程序
  4. hp380g5 安装linux7,hp 380G5 安装centos 7
  5. idea maven repositories为空
  6. 极客大学架构师训练营 框架开发 第三次作业
  7. 跨境B2B电商市场血雨腥风,供应链管理系统成争夺焦点
  8. 2017 4 自考java_自考00831英语语法2017年4月真题及答案【解析版】
  9. html设置ie兼容性视图,如何用脚本配置IE兼容性视图设置
  10. 如何让 uni-app 页面中的背景图片高度和宽度自适应
  11. 2022 面试必刷 461 道大厂架构面试真题汇总 + 面经 + 简历模板
  12. SpringBoot下载Excel文件,在Wps上可以打开但是Office上的excel打不开的问题
  13. 电脑经常蓝屏是什么原因
  14. 供独立游戏开发者参考的2D美工教程(四)
  15. python视频转图片、图片转视频
  16. Gravatar头像-网站头像设置详解
  17. openid示例_OpenID Connect客户端示例
  18. axure命令行_Axure RP Pro 4原创教程:(二)界面与功能
  19. python kmean 多维_如何使用KMeans对多维和未知数据进行聚类?
  20. 基于JAVA和SQL SERVER数据库实现个人财务管理系统

热门文章

  1. jps 显示有问题 解决方法
  2. 台达plc读取变频器电流案例_MODBUS通信之触摸屏与变频器通信知识分享(一)
  3. devexpress 创建窗口句柄时出错_实验一 线程的创建和撤销
  4. 电脑位数怎么看_看完了这篇文章你就知道怎么选电脑了...
  5. 调整地面材质_【C4DtoA 13】Arnold渲染器(材质七): Shadow Matte Shader
  6. java转换字符集_Java字符集转换解释
  7. update yum 到指定版本_CentOS 使用yum update 更新时保留特定版本的软件
  8. 500万数据mysql_mysql 单表500万数据经过处理后新增到新表
  9. unity连接mysql并读取所有数据库_Unity 3D 连接Mysql数据库
  10. linux服务器健康检查,Linux 检查硬盘健康状态