1. /*
  2. * @Author: 我爱科技论坛
  3. * @Time: 20180715
  4. * @Desc: 实现一个类似于JQuery功能的框架
  5. * V 1.0: 实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建
  6. * V 2.0:实现了框架的进一步优化,具有良好的扩展性, 可以支持链式访问
  7. * */
  1. / 主框架: 只做一件事,就是用于获取所有的元素集合
  2. (function (w) {
  3. // 定义一个Xframe对象,后面就是他的构造函数
  4. var xframe = function (selector, context) {
  5. // 为了使得后面的函数this始终指向的是xframe框架,这里需要修改函数内部this的指向
  6. return this.init.apply(this, [selector, context]);
  7. };
  8. // 定义一个初始化函数,用于初始化获取所有的元素集合
  9. // 只要用户使用了类似于JQuery中的选择元素的方法,就开始选择一个元素集合
  10. // 这里的核心功能:实际上是为了使用一个伪数组实现一个类似于JQuery中的链式访问的功能
  11. xframe.prototype.init = function (selector, context) {
  12. // 开始构建一个伪数组:{1 : list[0], 2 : list[1], , , , length : list.length}
  13. this.length = 0;
  14. if (typeof selector === 'string'){
  15. var nodeList = (context || document).querySelectorAll(selector);
  16. this.length = nodeList.length;
  17. for (var i = 0, len = this.length; i < len; i++){
  18. this[i] = nodeList[i];
  19. }
  20. } else if (selector.nodeType){
  21. // 如果获取的是一个元素节点,文本节点,或者属性节点的话
  22. this[0] = selector;
  23. this.length++;
  24. }
  25. // 为了可以支持链式访问必须把这个this对象返回出去
  26. return this;
  27. };
  28. // 使用双对象法则继续暴露出去一个对象,进行对象的二次封装
  29. // 【双对象法则的使用】
  30. var $$ = function (selctor, context) {
  31. // 这里使用一个简单的异步加载机制,等待所有的DOM元素执行完毕之后再开始继续向下执行
  32. if (typeof selctor === 'function'){
  33. // selector就是DOM元素加载完毕之后的继续向下执行的回调函数
  34. w.onload = selctor;
  35. } else {
  36. // 如果不是一个函数的话
  37. return new xframe(selecor, context);
  38. }
  39. }
  40. // 添加一个extend方法, 用于扩充一个对象的方法, 扩展向一个类中拷贝方法
  41. $$.extend = function () {
  42. // 这里需要分为两种情况:
  43. // 1. 如果传过来的是一个参数的话,就相当于是给xframe对象添加方法
  44. // 2. 如果是两个参数的话,就相当于是给一个类扩充方法
  45. var len = arguments.length,
  46. target = null, // target 用来存储需要把方法拷贝进去的目标函数
  47. i = 1, // 初始化变量i, 表示需要开始遍历的起始位置标记
  48. key; // 为了防止定义太多的局部变量,可以把后面需要用到的所有局部变量事先在前面定义好
  49. if (len === 0){
  50. return;
  51. } else if (len === 1){
  52. // 给xrame对象添加方法
  53. target = xframe.prototype;
  54. i--;
  55. } else{
  56. // 两个参数的话,那么第一个参数就是我需要拷贝新的方法进去的目标对象
  57. // 如果是两个参数的话:就不需要修改变量i的值了, 直接从第一个位置开始,拿到第一个参数后, 把第二个参数的方法全部拷贝给第一个对象
  58. // 注意: 这里有可能也是三个参数或者是多个参数, 因此也可以吧后面的好几个对象的属性或者方法添加给第一个对象
  59. target = arguments[0];
  60. }
  61. // 确定好了target 这个目标对象以后,开始遍历原始对象那个source,把source里面的方法全部都拷贝到这个target对象里面
  62. for (; i < len; i++){
  63. // 这里实际上在遍历一个json对象,json对象的每一项实际上就是一个属性或者方法
  64. for (key in source){
  65. target[key] = arguments[i][key];
  66. }
  67. }
  68. return target;
  69. }
  70. // 为了把主框架里面的局部变量暴露出去供其他模块使用
  71. w.xframe = w.$ = $$;
  72. })(window);
  73. // 公共框架
  74. (function (xframe) {
  75. // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
  76. xframe.extend({
  77. each : function () {
  78. }
  79. });
  80. // 不需要参与链式访问的
  81. /*公共部分*/
  82. xframe.extend(xframe, {
  83. });
  84. /*字符串处理模块*/
  85. xframe.extend(xframe, {
  86. });
  87. /*数组相关*/
  88. xframe.extend(xframe, {
  89. });
  90. /*Math*/
  91. xframe.extend(xframe, {
  92. });
  93. /*数据类型检验*/
  94. xframe.extend(xframe, {
  95. });
  96. })(xframe);
  97. // 事件框架
  98. (function (xframe) {
  99. // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
  100. xframe.extend({
  101. each : function () {
  102. }
  103. });
  104. // 不需要参与链式访问的
  105. xframe.extend(xframe, {
  106. });
  107. })(xframe);
  108. // 属性框架
  109. (function (xframe) {
  110. // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
  111. xframe.extend({
  112. each : function () {
  113. }
  114. });
  115. // 不需要参与链式访问的
  116. xframe.extend(xframe, {
  117. });
  118. })(xframe);
  119. // 内容框架
  120. (function (xframe) {
  121. // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
  122. xframe.extend({
  123. each : function () {
  124. }
  125. });
  126. // 不需要参与链式访问的
  127. xframe.extend(xframe, {
  128. });
  129. })(xframe);
  130. // DOM框架
  131. (function (xframe) {
  132. // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
  133. xframe.extend({
  134. each : function () {
  135. }
  136. });
  137. // 不需要参与链式访问的
  138. xframe.extend(xframe, {
  139. });
  140. })(xframe);
  141. // 缓存框架
  142. (function (xframe) {
  143. // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
  144. xframe.extend({
  145. each : function () {
  146. }
  147. });
  148. // 不需要参与链式访问的
  149. xframe.extend(xframe, {
  150. });
  151. })(xframe);
  152. // 基础框架: 基本上都是不需要参与链式访问的
  153. // 实现功能: 如果是一个参数的话,就直接给类添加方法
  154. // 如果是多个参数的话,就表示给指定的对象添加方法
  155. xframe.extend(xframe, {
  156. ltrim: function () {
  157. },
  158. rtrim: function () {
  159. },
  160. trim: function () {
  161. },
  162. ajax: function () {
  163. },
  164. formateString: function () {
  165. },
  166. random: function () {
  167. },
  168. isNumber: function () {
  169. },
  170. isBoolean: function () {
  171. },
  172. isString: function () {
  173. },
  174. isUndefined: function () {
  175. },
  176. isObject: function () {
  177. },
  178. isNull: function () {
  179. },
  180. isArray: function () {
  181. },
  182. })
  183. // 选择框架
  184. /***
  185. * 如果下面的框架需要用到上面的框架,就直接可以把上面的去全局变量/对象暴露出去,这里是使用了前面的xframe全局变量
  186. */
  187. (function ($$) {
  188. $$.$all = function () {
  189. };
  190. $$.$id = function (id) {
  191. };
  192. $$.$tag = function () {
  193. };
  194. $$.$class = function () {
  195. };
  196. $$.$group = function () {
  197. };
  198. $$.cengci = function () {
  199. };
  200. $$.$select = function () {
  201. }
  202. })(xframe);
  203. // 事件框架
  204. (function ($$) {
  205. $$.on = function () {
  206. }
  207. })(xframe);
  208. // CSS框架
  209. (function ($$) {
  210. $$.css = function () {
  211. };
  212. // 元素的显示与隐藏
  213. $$.show = function () {
  214. };
  215. $$.hide = function () {
  216. };
  217. // 元素的宽度和高度
  218. $$.width = function () {
  219. };
  220. $$.height = function () {
  221. };
  222. // 元素的滚动宽度和高度
  223. $$.scrollWidth = function () {
  224. };
  225. $$.scrollHeight = function () {
  226. };
  227. // 滚动条相对于上面和左边的距离
  228. $$.scrollTop = function () {
  229. };
  230. $$.scrollLeft = function () {
  231. };
  232. // 屏幕的宽度和高度
  233. $$.screenWidth = function () {
  234. };
  235. $$.screenHeight = function () {
  236. };
  237. // 文档区域的宽度和高度
  238. $$.wWidth = function () {
  239. };
  240. $$.wHeight = function () {
  241. };
  242. // 获取文档滚动窗口的相关属性参数信息
  243. $$.wScrollHeight = function () {
  244. };
  245. $$.wScrollWidth = function () {
  246. };
  247. // 获取文档滚动窗口距离上面和左边的距离和宽度
  248. $$.wScrollTop = function () {
  249. };
  250. $$.wScrollLeft = function () {
  251. };
  252. })(xframe);
  253. // 属性框架
  254. (function ($$) {
  255. // 私有方法
  256. function removeName() {
  257. };
  258. function addName() {
  259. }
  260. // 公有方法
  261. $$.attr = function () {
  262. };
  263. $$.addClass = function () {
  264. };
  265. $$.removeClass = function () {
  266. }
  267. })(xframe);
  268. // 内容框架
  269. (function () {
  270. $$.html = function () {
  271. };
  272. $$.text = function () {
  273. };
  274. $$.val = function () {
  275. }
  276. })();
  277. // 动画框架
  278. (function () {
  279. function Animate() {
  280. }
  281. Animate.prototype = {}
  282. })();

【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建的更多相关文章

  1. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  2. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  3. 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装

    // 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  4. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装

    // 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...

  6. 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装

    // 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  7. 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装

    // CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...

  8. 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装

    // 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...

  9. 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

    // 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...

随机推荐

  1. fzu 2173 floyd+矩阵快速幂

    #include<stdio.h> #define inf 1000000000000000 #define N 100 long long tmp[N][N],ma[N][N]; int ...

  2. Redis Hash 的 HSET、HGET、HMSET、HMGET 性能测试

    [压测环境] 操作系统: Ubuntu 14.04 LTS Linux版本: 3.13.0-24-generic x86_64 GNU/Linux 处理器: 4核的 AMD Athlon(tm) II ...

  3. 洛谷——P1094 纪念品分组

    https://www.luogu.org/problem/show?pid=1094#sub 题目描述 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作.为使得参加晚会的同学所获得 的纪念品价 ...

  4. UVa 11466 - Largest Prime Divisor

    題目:給你一個整數n(不超過14位).求出他的最大的素數因子.假设仅仅有一個素數因子輸出-1. 分析:數論. 直接打表計算10^7內的全部素數因子,然後用短除法除n.記錄最大的因子就可以. 假设最後下 ...

  5. C#趣味程序----分数之和

    问题:求这种四个自然数p,q,r,s(p<=q<=r<=s).使得等式1/p + 1/q +1/r +1/s=1成立. 分析:将原式同分,化简整理后得到:2<=p<5,p ...

  6. Working with macro signatures

    https://docs.kentico.com/k11/macro-expressions/troubleshooting-macros/working-with-macro-signatures ...

  7. dns tunnel 使用 nishang 下载TXT里的cmd(TXT里)实现CC command+ ceye实现数据外发

    摘自:https://hk.saowen.com/a/a06909f1c57cb8452db969b3deede4151de42a7d69f4bb52c5bf027033fb91bd Powershe ...

  8. webkitdirectory 实现文件夹上传

    文件夹上传这个功能在web端可能有需求,这里就简单介绍下用法. 目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件 ...

  9. DataTable转Json就是这么简单(Json.Net DLL (Newtonsoft))

    之前JSON转DataTable可以见我之前的随笔 链接Json转换成DataTable 之前没有用过DataTable,之后随着需求的叠加发现需要将DataTable转换成Json.因为之前都是用的 ...

  10. Android--XML页面的编写

           五个页面  代码如下:    图片资源链接: https://pan.baidu.com/s/1jIoTDGE //  第一个 <RelativeLayout xmlns:andr ...