涂根华
涂根华

javascript tab组件

今天研究了下javascript tab代码 到网上看了下 然后自己封装了一个tab组件 本来用jquery写tab是非常简单的事件 但是在做淘宝页面时候 淘宝现在不允许用jquery框架 哇靠 一定要用kissy框架 我就便不用 靠 我直接用javascript写 这应该没有错吧！靠 废话少说！还是要引用上次翻译的一段js 那段js有一个方法是 获取类名的封装方法！如下：

 

  
  
  
  
    
   
   
   
   
  1. <script>  
    2. 
   
   
   
   
  2. var GLOBAL = {};  
    3. 
   
   
   
   
  3.     GLOBAL.namespace=function(str){  
    4. 
   
   
   
   
  4.         var arr = str.split("."),o = GLOBAL;  
    5. 
   
   
   
   
  5.         for (i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){  
    6. 
   
   
   
   
  6.             o[arr[i]] = o[arr[i]] || {};  
    7. 
   
   
   
   
  7.             o=o[arr[i]];      
    8. 
   
   
   
   
  8.         }      
    9. 
   
   
   
   
  9.     }  
    10. 
   
   
   
   
  10.     GLOBAL.namespace("DOM");  
    11. 
   
   
   
   
  11.     GLOBAL.DOM.getElementsByClassName = function(str,root,tag){  
    12. 
   
   
   
   
  12.         if(root){  
    13. 
   
   
   
   
  13.             root = typeof root =="string" ? document.getElementById(root) : root;  
    14. 
   
   
   
   
  14.         }else{  
    15. 
   
   
   
   
  15.             root = document.body;      
    16. 
   
   
   
   
  16.         }  
    17. 
   
   
   
   
  17.         tag = tag || "*";  
    18. 
   
   
   
   
  18.         var els = document.getElementsByTagName(tag),arr=[];  
    19. 
   
   
   
   
  19.         for(var i=0,n=els.length;i<n;i++){  
    20. 
   
   
   
   
  20.             for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){  
    21. 
   
   
   
   
  21.                 if(k[j]==str){  
    22. 
   
   
   
   
  22.                     arr.push(els[i]);  
    23. 
   
   
   
   
  23.                     break;      
    24. 
   
   
   
   
  24.                 }  
    25. 
   
   
   
   
  25.             }  
    26. 
   
   
   
   
  26.         }  
    27. 
   
   
   
   
  27.         return arr;  
    28. 
   
   
   
   
  28.     }  
    29. 
   
   
   
   
  29. </script> 
    30.

因为原审js是没有这个方法 只有封装下呢！下面是js代码：

 

  
  
  
  
    
   
   
   
   
  1. <script>  
    2. 
   
   
   
   
  2.  
    3. 
   
   
   
   
  3. function tabPlug(TabMenu,TabContent){  
    4. 
   
   
   
   
  4.     var list1 = GLOBAL.DOM.getElementsByClassName(TabMenu),  
    5. 
   
   
   
   
  5.         c1 = GLOBAL.DOM.getElementsByClassName(TabContent);  
    6. 
   
   
   
   
  6.         var hover = "hover"; //当点击时增加一个类  
    7. 
   
   
   
   
  7.         //下面是写个函数来获取索引值的函数,通过它获取当前点击在导航中的索引位置  
    8. 
   
   
   
   
  8.         var indexValue = function(self,obj){  
    9. 
   
   
   
   
  9.             for(var i=0;i<obj.length;i++){  
    10. 
   
   
   
   
  10.                 if(obj[i] == self) return i;      
    11. 
   
   
   
   
  11.             }     
    12. 
   
   
   
   
  12.         }  
    13. 
   
   
   
   
  13.         var index; //定于一个变量 来保存当前的索引  
    14. 
   
   
   
   
  14.         list1[0].className = hover; //给第一个列表项添加一个类名  
    15. 
   
   
   
   
  15.         for(var j=1;j<c1.length;j++){  
    16. 
   
   
   
   
  16.             c1[j].style.display = "none";     
    17. 
   
   
   
   
  17.         }  
    18. 
   
   
   
   
  18.         for(var k=0;k<list1.length;k++){  
    19. 
   
   
   
   
  19.             list1[k].onclick = function(){  
    20. 
   
   
   
   
  20.                 index = indexValue(this,list1);  
    21. 
   
   
   
   
  21.                 for(var m=0;m<list1.length;m++){  
    22. 
   
   
   
   
  22.                     list1[m].className = (m==index) ? hover : "";//高亮显示点击项并移除其他项高亮    
    23. 
   
   
   
   
  23.                 }     
    24. 
   
   
   
   
  24.                 for(var n=0;n<c1.length;n++){  
    25. 
   
   
   
   
  25.                     c1[n].style.display = (n==index) ? "block" : "none";//显示点击对应的选项区,隐藏其他  
    26. 
   
   
   
   
  26.                 }  
    27. 
   
   
   
   
  27.             }     
    28. 
   
   
   
   
  28.         }     
    29. 
   
   
   
   
  29. }         
    30. 
   
   
   
   
  30.  </script>  
    31.

这个js不怎么难理解 我知道你们都ok的 所以也没有什么必要解析！上面也有点注释！

所有代码如下：

 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5. <title>无标题文档</title> 
    6. 
   
   
   
   
  6. <style> 
    7. 
   
   
   
   
  7. .tabnav{width:500px;height:25px;margin-left:100px; overflow:hidden;}  
    8. 
   
   
   
   
  8. .tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}  
    9. 
   
   
   
   
  9. .tabnav li.hover{background:#047}  
    10. 
   
   
   
   
  10. .tabbox{width:500px;border:2px solid #047; overflow:hidden;}  
    11. 
   
   
   
   
  11. .tabbox div{margin:10px;line-height:20px}  
    12. 
   
   
   
   
  12. .tabbox .hide{ display:none;}  
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. .tabnav2{width:500px;height:25px;margin-left:100px; overflow:hidden;}  
    15. 
   
   
   
   
  15. .tabnav2 li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}  
    16. 
   
   
   
   
  16. .tabnav2 li.hover{background:#047}  
    17. 
   
   
   
   
  17. .tabbox2{width:500px;border:2px solid #047; overflow:hidden;}  
    18. 
   
   
   
   
  18. .tabbox2 div{margin:10px;line-height:20px}  
    19. 
   
   
   
   
  19. .tabbox2 .hide{ display:none;}  
    20. 
   
   
   
   
  20. </style> 
    21. 
   
   
   
   
  21. <script> 
    22. 
   
   
   
   
  22. var GLOBAL = {};  
    23. 
   
   
   
   
  23.     GLOBAL.namespace=function(str){  
    24. 
   
   
   
   
  24.         var arr = str.split("."),o = GLOBAL;  
    25. 
   
   
   
   
  25.         for (i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){  
    26. 
   
   
   
   
  26.             o[arr[i]] = o[arr[i]] || {};  
    27. 
   
   
   
   
  27.             oo=o[arr[i]];      
    28. 
   
   
   
   
  28.         }      
    29. 
   
   
   
   
  29.     }  
    30. 
   
   
   
   
  30.     GLOBAL.namespace("DOM");  
    31. 
   
   
   
   
  31.     GLOBAL.DOM.getElementsByClassName = function(str,root,tag){  
    32. 
   
   
   
   
  32.         if(root){  
    33. 
   
   
   
   
  33.             root = typeof root =="string" ? document.getElementById(root) : root;  
    34. 
   
   
   
   
  34.         }else{  
    35. 
   
   
   
   
  35.             root = document.body;      
    36. 
   
   
   
   
  36.         }  
    37. 
   
   
   
   
  37.         tagtag = tag || "*";  
    38. 
   
   
   
   
  38.         var els = document.getElementsByTagName(tag),arr=[];  
    39. 
   
   
   
   
  39.         for(var i=0,n=els.length;i<n;i++){  
    40. 
   
   
   
   
  40.             for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){  
    41. 
   
   
   
   
  41.                 if(k[j]==str){  
    42. 
   
   
   
   
  42.                     arr.push(els[i]);  
    43. 
   
   
   
   
  43.                     break;      
    44. 
   
   
   
   
  44.                 }  
    45. 
   
   
   
   
  45.             }  
    46. 
   
   
   
   
  46.         }  
    47. 
   
   
   
   
  47.         return arr;  
    48. 
   
   
   
   
  48.     }  
    49. 
   
   
   
   
  49. </script> 
    50. 
   
   
   
   
  50. </head> 
    51. 
   
   
   
   
  51.  
    52. 
   
   
   
   
  52. <body> 
    53. 
   
   
   
   
  53.  
    54. 
   
   
   
   
  54. <ul class="tabnav"> 
    55. 
   
   
   
   
  55.     <li class="list1">jQuery技术</li> 
    56. 
   
   
   
   
  56.     <li class="list1">CSS技术</li> 
    57. 
   
   
   
   
  57.     <li class="list1">xhtml技术</li> 
    58. 
   
   
   
   
  58. </ul> 
    59. 
   
   
   
   
  59. <div class="tabbox"> 
    60. 
   
   
   
   
  60.     <div class="c1"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    61. 
   
   
   
   
  61.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    62. 
   
   
   
   
  62.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    63. 
   
   
   
   
  63. </div> 
    64. 
   
   
   
   
  64. <br /><br /> 
    65. 
   
   
   
   
  65.   <ul class="tabnav"> 
    66. 
   
   
   
   
  66.     <li class="list2">jQuery技术</li> 
    67. 
   
   
   
   
  67.     <li class="list2">CSS技术</li> 
    68. 
   
   
   
   
  68.     <li class="list2">xhtml技术</li> 
    69. 
   
   
   
   
  69. </ul> 
    70. 
   
   
   
   
  70. <div class="tabbox"> 
    71. 
   
   
   
   
  71.     <div class="c2"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    72. 
   
   
   
   
  72.     <div class="c2 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    73. 
   
   
   
   
  73.     <div class="c2 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    74. 
   
   
   
   
  74. </div>    
    75. 
   
   
   
   
  75.  <script> 
    76. 
   
   
   
   
  76.  
    77. 
   
   
   
   
  77. function tabPlug(TabMenu,TabContent){  
    78. 
   
   
   
   
  78.     var list1 = GLOBAL.DOM.getElementsByClassName(TabMenu),  
    79. 
   
   
   
   
  79.         c1 = GLOBAL.DOM.getElementsByClassName(TabContent);  
    80. 
   
   
   
   
  80.         var hover = "hover"; //当点击时增加一个类  
    81. 
   
   
   
   
  81.         //下面是写个函数来获取索引值的函数,通过它获取当前点击在导航中的索引位置  
    82. 
   
   
   
   
  82.         var indexValue = function(self,obj){  
    83. 
   
   
   
   
  83.             for(var i=0;i<obj.length;i++){  
    84. 
   
   
   
   
  84.                 if(obj[i] == self) return i;      
    85. 
   
   
   
   
  85.             }     
    86. 
   
   
   
   
  86.         }  
    87. 
   
   
   
   
  87.         var index; //定于一个变量 来保存当前的索引  
    88. 
   
   
   
   
  88.         list1[0].className = hover; //给第一个列表项添加一个类名  
    89. 
   
   
   
   
  89.         for(var j=1;j<c1.length;j++){  
    90. 
   
   
   
   
  90.             c1[j].style.display = "none";     
    91. 
   
   
   
   
  91.         }  
    92. 
   
   
   
   
  92.         for(var k=0;k<list1.length;k++){  
    93. 
   
   
   
   
  93.             list1[k].onclick = function(){  
    94. 
   
   
   
   
  94.                 index = indexValue(this,list1);  
    95. 
   
   
   
   
  95.                 for(var m=0;m<list1.length;m++){  
    96. 
   
   
   
   
  96.                     list1[m].className = (m==index) ? hover : "";//高亮显示点击项并移除其他项高亮    
    97. 
   
   
   
   
  97.                 }     
    98. 
   
   
   
   
  98.                 for(var n=0;n<c1.length;n++){  
    99. 
   
   
   
   
  99.                     c1[n].style.display = (n==index) ? "block" : "none";//显示点击对应的选项区,隐藏其他  
    100. 
   
   
   
   
  100.                 }  
    101. 
   
   
   
   
  101.             }     
    102. 
   
   
   
   
  102.         }     
    103. 
   
   
   
   
  103. }         
    104. 
   
   
   
   
  104.  </script>    
    105. 
   
   
   
   
  105.  <script> 
    106. 
   
   
   
   
  106.  tabPlug("list1","c1");  
    107. 
   
   
   
   
  107.   tabPlug("list2","c2");  
    108. 
   
   
   
   
  108.  </script>   
    109. 
   
   
   
   
  109.    
    110. 
   
   
   
   
  110.  
    111. 
   
   
   
   
  111. </body> 
    112. 
   
   
   
   
  112. </html> 
    113.

下面也有压缩包下载 可以看看源码！

你可能感兴趣的:(JavaScript,JavaScript,职场,休闲,tab组件)

  • C++基础匿名对象，友元和常成员(const) 没有百宝袋的哆啦A梦 c++javajvm
    目录学习内容：1.匿名对象2.友元2.1友元的引入2.2友元函数2.3友元类2.4友元的总结3.常成员（const）3.1常成员的引入3.2常成员函数3.3常对象3.4mutable关键字3.5常函数3.6关于C/C++中const的使用(面试题)学习内容：1.匿名对象1>所谓匿名对象，就是没有名字的对象，生命周期只在当前语句内，所以可以理解成时一个将亡值2>定义格式：直接调用类的构造函数3>使用
  • 【搞定Go语言】第3天1：Go语言操作MySQL 就叫一片白纸 Go语言
    MySQL是业界常用的关系型数据库，本文介绍了Go语言如何操作MySQL数据库。Go操作MySQL连接Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口，并不提供具体的数据库驱动。使用database/sql包时必须注入（至少）一个数据库驱动。我们常用的数据库基本上都有完整的第三方实现。例如：MySQL驱动下载依赖goget-ugithub.com/go-sql-dr
  • ROS导航栈中的move_base模块详解：架构、组件关系与数据流 YRr YRr 架构rosmove_base
    ROS导航栈中的move_base模块详解：架构、组件关系与数据流摘要RobotOperatingSystem（ROS）作为广泛应用于机器人开发的开源框架，其导航栈中的move_base模块是实现机器人自主导航的核心组件。本文将深入解析move_base模块的整体架构，详述其主要组成部分及相互关系，探讨节点、话题与传感器数据的流向，并通过实例说明这些组件如何协同工作以实现高效、稳定的自主导航功能。
  • Go操作MySQL 可能只会写BUG golangmysqlgolangmysql开发语言
    Go操作MySQL类别:Golang数据库操作连接Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口，并不提供具体的数据库驱动。使用database/sql包时必须注入（至少）一个数据库驱动。我们常用的数据库基本上都有完整的第三方实现。例如：MySQL驱动下载依赖goget-ugithub.com/go-sql-driver/mysql使用MySQL驱动funcOpe
  • 第三：go 操作mysql 小画家~ gingolangmysql开发语言
    Go操作MySQL连接Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口，并不提供具体的数据库驱动。使用database/sql包时必须注入（至少）一个数据库驱动。我们常用的数据库基本上都有完整的第三方实现。例如：MySQL驱动下载依赖goget-ugithub.com/go-sql-driver/mysql使用MySQL驱动funcOpen(driverName,d
  • python函数支持哪些参数类型_Python函数的几种参数类型 weixin_39965283
    以下代码均以Python3为基础理解。初识Python函数大部分常见的语言如C、Java、PHP、C#、JavaScript等属于C系语言，Python不属于他们中的一员（ruby亦然）。在这些语言中，Python也属于比较新奇的一派，就函数来说，它没有大括号，用def关键字定义一个函数，定义后用:然后换行tab指定函数函数的范围，当然也不存在什么分号。作为一个函数，那个它肯定是有参数的，Pyth
  • 【sgFloatDialog】自定义组件：浮动弹窗，支持修改尺寸、拖拽位置、最大化、还原、最小化、复位 你挚爱的强哥 Vue.jsSg.js框架vue.jsjavascript前端
    sgFloatDialog{{title}}importsgDragMovefrom"@/vue/components/admin/sgDragMove";importsgDragSizefrom"@/vue/components/admin/sgDragSize";exportdefault{name:"sgFloatDialog",components:{sgDragMove,sgDragSi
  • TypeScript模块 vs JavaScript模块：现代化开发的模块化之道 念九_ysl typescript前端typescript
    一、模块化开发的重要性在当今前端开发领域，模块化已成为构建可维护、可扩展应用程序的基石。无论是小型项目还是企业级应用，良好的模块化设计都能显著提升代码的可读性和复用性。让我们通过一个简单对比示例开始：JavaScript实现：//math.jsexportfunctionadd(a,b){returna+b}//app.jsimport{add}from'./math.js';console.lo
  • 深入理解Ajax原理 lfsf802 前端技术ajaxxmlhttprequestjavascript服务器asynchronous
    1.概念ajax的全称是AsynchronousJavaScriptandXML，其中，Asynchronous是异步的意思，它有别于传统web开发中采用的同步的方式。2.理解同步异步异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。举个例子来说同步和异步，同步就好像我们买楼一次性支付，而异步就是买楼分期付款。所以
  • 【 ＜二＞ 丹方改良：Spring 时代的 JavaWeb】之 Spring MVC 的核心组件：DispatcherServlet 的工作原理 Foyo Designer springmvcjavaservletHandlerMappingViewResolver
    点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、DispatcherServ
  • 150.HarmonyOS NEXT系列教程之3D立方体旋转轮播案例讲解之生命周期与初始化 harmonyos-next
    温馨提示：本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦！HarmonyOSNEXT系列教程之3D立方体旋转轮播案例讲解之生命周期与初始化效果演示1.生命周期概述1.1组件生命周期@ComponentexportstructCubeRotateAnimationSamplePage{//组件创建时调用aboutToAp
  • Java动态代理模式深度解析 Vic10101 Java性能优化开发实战项目总结java代理模式开发语言
    1.动态代理基础1.1核心组件Proxy类：动态生成代理对象的工厂类，核心方法为newProxyInstance()。InvocationHandler接口：代理逻辑的处理器，所有方法调用会转发到其invoke()方法。1.2实现步骤定义接口：代理基于接口实现。publicinterfaceUserService{voidaddUser(Stringusername);}实现类（真实对象）：pub
  • 使用vue3和vue-router实现动态添加和删除cachedViews数组 没资格抱怨 vue3vue.js前端typescript
    以下是一个使用Vue3和VueRouter实现动态添加和删除cachedViews数组的代码示例，该示例结合keep-alive组件来动态控制路由组件的缓存。src/├──App.vue├──router/│└──index.js├──views/│├──Home.vue│├──About.vue│└──Contact.vue└──main.js代码实现router/index.jsimport{
  • vue3中如何缓存路由组件 没资格抱怨 vue3缓存springvue.js
    在Vue3中缓存路由组件，主要借助组件来实现，具体方法如下：1.全局缓存路由组件在App.vue等根组件中，直接将包裹在标签内，这样所有的路由组件都会被缓存。2.缓存特定路由组件如果只想缓存部分路由组件，可通过的include和exclude属性来控制。使用include缓存指定组件：include接受字符串或正则表达式，代表需要缓存的组件名称。首先，确保每个需要缓存的路由组件都设置了name属性
  • 2.2[frontEnd]ESLint CQU_JIAKE 前端java
    ESLint是一个开源的JavaScript和TypeScript代码质量和代码风格检查工具。它可以帮助开发者检测代码中的问题（如语法错误、潜在的错误、不一致的代码风格等），从而提高代码质量和可维护性。主要功能检测语法错误：ESLint可以检测代码中的语法错误，例如未关闭的括号、缺少分号等。代码风格检查：ESLint可以强制代码风格的一致性，例如：缩进风格（2空格或4空格）。引号类型（单引号或双引
  • ESG证书：AI预测未来十年职场人的黄金入场券 ESG学习圈 pandaspythondjango
    当ChatGPT开始撰写ESG报告，当机器学习模型精准预测企业碳排放轨迹，一场由AI驱动的ESG革命正在颠覆传统可持续发展领域。根据彭博新能源财经预测，到2030年全球ESG资产管理规模将突破50万亿美元，而AI技术将成为撬动这个万亿级市场的核心杠杆。一、AI透视下的ESG黄金时代在微软开发的AI模型ESG-NOW系统中，通过分析全球4300家上市公司近十年的环境数据，成功预测2025年新能源行业
  • 前端性能优化之SSR优化 xiangzhihong8 前端前端
    我们常说的SSR是指Server-SideRendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。SSR渲染方案一般来说，我们页面加载会分为好几个步骤：请求域名，服务器返回HTML资源。浏览器加载HTML片段，识别到有CSS/JavaScript资源时，获取资源并加载。现在大多数前端页面都是单页面应
  • 3.ArkTS语法介绍 北辰星Charih HarmonyNextharmonyos
    一、具体内容ArkTS语法介绍-华为开发者学堂(huawei.com)二、习题整理2.1判断题1.ArkTS中使用const声明常量。正确(True)错误(False)答案：正确(True)2.允许在容器组件内使用if/else条件渲染语句构建不同的子组件。正确(True)错误(False)答案：正确(True)3.@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中可以使用多个@E
  • 基础篇：ArkTS基础语法介绍 言程序plus 鸿蒙Next开发javascriptarkts鸿蒙
    前言：目前流行的编程语言TypeScript是在JavaScript基础上通过添加类型定义扩展而来的，而ArkTS则是TypeScript的进一步扩展。TypeScript深受开发者的喜爱，因为它提供了一种更结构化的JavaScript编码方法。ArkTS旨在保持TypeScript的大部分语法，为现有的TypeScript开发者实现无缝过渡，让移动开发者快速上手ArkTS。ArkTS比typeS
  • 前端面经分享（25/03/18） CreatorRay react面试前端前端面试react
    北京一家做边缘云服务提供商公司，技术一面，15k-20k，要求3-5年上家公司的项目为什么会选择MQTT进行通信React常用Hook为什么React不能在条件语句里用Hook前端常见的优化策略React如何捕获子组件的错误React给节点加key会有什么效果最近俩家公司都用WebSocket做了什么HTTP各个版本的区别跨域的常见解决方案前端常见布局WebSocket和SSE的区别A页面滚动到一
  • Vue.js 中常见的以 $ 开头的实例属性和方法 遇见~未来 Vue.jsvue.jsjavascript前端
    1.$data作用：包含Vue实例或组件的响应式数据对象。用法：通过this.$data访问组件的data数据。示例：exportdefault{data(){return{message:'Hello,Vue!'};},created(){console.log(this.$data.message);//输出:Hello,Vue!}};2.$el作用：指向Vue实例或组件的根DOM元素。用法：
  • 【万字总结】前端全方位性能优化指南（四）——虚拟DOM批处理、文档碎片池、重排规避 庸俗今天不摸鱼 Web性能优化合集前端性能优化
    前言在浏览器宇宙中，DOM操作如同「时空裂缝」——一次不当的节点更新可能引发连锁重排，吞噬整条渲染流水线的性能。本章直面这一核心矛盾，以原子级操作合并、节点记忆重组、排版禁忌破解为三重武器，重构DOM更新的物理法则。通过虚拟DOM的批处理引擎将千次操作坍缩为单次提交，借助文档碎片池实现90%节点的跨时空复用，再以transform替代top等20项反重排铁律，我们将彻底终结「JavaScript线
  • 实现高德地图自定义点标记跳动，点标记随缩放大小显示和隐藏 时光请留微笑 javascript前端vue.js
    高德地图的自定义标记（Marker）添加一个循环动画效果，比如让图标上下跳动，你可以利用CSS动画或JavaScript动画库（如GSAP）。使用GSAP来创建动画，下面我将展示两种GSAP和CSS类来为Marker的内容添加循环动画。方法一：通过CSS动画实现图标上下跳动首先自定义点标记，在点标记显示内容content中自定义一个图标，这里我用的是element中的图标，给标签一个类名，如i-i
  • 【Dive Into Stable Diffusion v3.5】1：开源项目正式发布——深入探索SDv3.5模型全参/LoRA/RLHF训练 Donvink 大模型#AIGCstablediffusionAIGC人工智能机器学习深度学习
    目录1引言2项目简介3快速上手3.1下载代码3.2环境配置3.3项目结构3.4下载模型与数据集3.5运行指令3.6核心参数说明3.6.1通用参数3.6.2优化器/学习率3.6.3数据相关4结语1引言在人工智能和机器学习领域，生成模型的应用越来越广泛。StableDiffusion作为其中的佼佼者，因其强大的图像生成能力而备受关注。今天，我的开源项目DiveIntoStableDiffusionv3
  • oracle基础知识之表的集合运算 数字天下 oracle数据库
    一个查询就是一个集合：查询的结果集一条记录就是一个元素。集合运算是用来把两个或多个查询的结果集做并、交、查的集合运算，包含集合运算的查询称为复合查询。*Select基本语法如下：SELECTcolumn_1,column_2,…FROMtable_nameWHEREsearch_conditionORDERBYcolumn_1,column_2;2.常用集合运算方式的应用（1）联合运算：联合运算实
  • 使用fastapi部署stable diffusion模型 明晚十点睡 代码fastapistablediffusionpytorchpython人工智能深度学习计算机视觉
    使用vscode运行stablediffusion模型，每次加载模型都需要10+分钟，为算法及prompt调试带来了极大麻烦。使用jupyter解决自然是一个比较好的方案，但如果jupyter由于种种原因不能使用时，fastapi无疑成为了一个很好的选择。参考github链接：https://github.com/jarvislabsai/fastapi-sd-templatefromfastap
  • 项目经理面试全攻略：从底层能力拆解到高通过率话术
    在竞争激烈的职场中，项目经理岗位的面试堪称“综合能力大考”——既要展现系统化的方法论，又要传递真实的领导力，还要让考官相信你能在复杂环境中推动结果落地。据PMI（美国项目管理协会）调查，82%的优秀项目经理在面试中能清晰呈现“业务价值-团队协作-风险控制”的三角能力模型。本文从能力拆解、面试准备、实战话术三个维度，揭秘项目经理面试通关法则。一、项目经理面试的四大核心能力雷达图面试官通过以下维度评估
  • vite中使用Web Worker 脚本
    MDN对WebWorker的说明WebWorker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用XMLHttpRequest（尽管responseXML和channel属性总是为空）或fetch（没有这些限制）执行I/O。一旦创建，一个worker可以将消息发送到创建它的JavaScript代码，通过将消息发布到该代码指定的事件处理器（反
  • 【VSCode】VSCode常用插件 Ctrl Z. vscodeide编辑器
    Chinese(Simplified)(简体中文)LanguagePackforVisualStudioCode：简体中文支持插件HTML/CSS/JavaScriptSnippets：支持HTML/CSS/JavaScript快速匹配输入HTMLSnippets：这个插件提供了一系列HTML代码片段，通过简单的缩写就可以快速生成常用的HTML结构。例如，输入!并按下Tab键，就可以快速生成一个完
  • java 实现数据库备份 李逍遙️ mysql数据库javamysql
    importcom.guangyi.project.model.system.DataBaseInFo;importjava.io.BufferedReader;importjava.io.File;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.InputStream;importjava.io.Inp
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIlinuxPHPandroid
    ╔-----------------------------------╗┆                           
  • zookeeper admin 笔记 braveCS zookeeper
      Required Software 1) JDK>=1.6 2)推荐使用ensemble的ZooKeeper(至少3台)，并run on separate machines 3)在Yahoo!，zk配置在特定的RHEL boxes里，2个cpu，2G内存，80G硬盘   数据和日志目录 1)数据目录里的文件是zk节点的持久化备份，包括快照和事务日
  • Spring配置多个连接池 easterfly spring
    项目中需要同时连接多个数据库的时候，如何才能在需要用到哪个数据库就连接哪个数据库呢？ Spring中有关于dataSource的配置：     <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"   &nb
  • Mysql 171815164 mysql
    例如，你想myuser使用mypassword从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI TH GRANT OPTION; 如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器，并使用mypassword作
  • CommonDAO（公共/基础DAO） g21121 DAO
            好久没有更新博客了，最近一段时间工作比较忙，所以请见谅，无论你是爱看呢还是爱看呢还是爱看呢，总之或许对你有些帮助。         DAO(Data Access Object)是一个数据访问（顾名思义就是与数据库打交道）接口，DAO一般在业
  • 直言有讳 永夜-极光 感悟随笔
      1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313   精华: “直言有讳”是阿里巴巴提倡的一种观念，而我在此之前并没有很深刻的认识。为什么呢？就好比是读书时候做阅读理解，我喜欢我自己的解读，并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重，我觉得阿里巴巴很多价值观其实是基本的做人
  • 安装CentOS 7 和Win 7后，Win7 引导丢失 随便小屋 centos
    一般安装双系统的顺序是先装Win7，然后在安装CentOS，这样CentOS可以引导WIN 7启动。但安装CentOS7后，却找不到Win7 的引导，稍微修改一点东西即可。 一、首先具有root 的权限。      即进入Terminal后输入命令su，然后输入密码即可 二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改 v
  • Oracle备份与恢复案例 aijuans oracle
    Oracle备份与恢复案例 一. 理解什么是数据库恢复当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（硬件故障、软件故障、网络故障、进程故障和系统故障）影响数据库系统的操作，影响数据库中数据的正确性，甚至破坏数据库，使数据库中全部或部分数据丢失。因此当发生上述故障后，希望能重构这个完整的数据库，该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
  • JavaEE开源快速开发平台G4Studio v5.0发布 無為子
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。   访问G4Studio网站 http://www.g4it.org   2013-04-06 发布G4Studio_V5.0版本 功能新增 (1). 新增了调用Oracle存储过程返回游标，并将游标映射为Java List集合对象的标
  • Oracle显示根据高考分数模拟录取 百合不是茶 PL/SQL编程oracle例子模拟高考录取学习交流
    题目要求: 1,创建student表和result表 2,pl/sql对学生的成绩数据进行处理 3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选     1,创建student表,和result表 学生信息表; create table student( student_id number primary key,--学生id
  • 优秀的领导与差劲的领导 bijian1013 领导管理团队
    责任 优秀的领导：优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了，那么他知道该受责备的人是他自己，并且敢于承认错误。 差劲的领导：差劲的领导觉得这不是他的问题，因此他会想方设法证明是他的团队不行，或是将责任归咎于团队中他不喜欢的那几个成员身上。 努力工作 优秀的领导：团队领导应该是团队成员的榜样。至少，他应该与团队中的其他成员一样努力工作。这仅仅因为他
  • js函数在浏览器下的兼容 Bill_chen jquery浏览器IEDWRext
      做前端开发的工程师，少不了要用FF进行测试，纯js函数在不同浏览器下，名称也可能不同。对于IE6和FF，取得下一结点的函数就不尽相同：   IE6：node.nextSibling,对于FF是不能识别的；   FF：node.nextElementSibling,对于IE是不能识别的； 兼容解决方式：var Div = node.nextSibl
  • 【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC) bit1129 垃圾回收
    吞吐量与用户线程暂停时间   衡量垃圾回收算法优劣的指标有两个： 吞吐量越高，则算法越好 暂停时间越短，则算法越好 首先说明吞吐量和暂停时间的含义。   垃圾回收时，JVM会启动几个特定的GC线程来完成垃圾回收的任务，这些GC线程与应用的用户线程产生竞争关系，共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值，因此，好的GC应该占
  • J2EE监听器和过滤器基础 白糖_ J2EE
    Servlet程序由Servlet，Filter和Listener组成，其中监听器用来监听Servlet容器上下文。 监听器通常分三类：基于Servlet上下文的ServletContex监听，基于会话的HttpSession监听和基于请求的ServletRequest监听。   ServletContex监听器 ServletContex又叫application
  • 博弈AngularJS讲义(16) - 提供者 boyitech jsAngularJSapiAngularProvider
      Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。   那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
  • java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 bylijinnan java
    public class CommonSubSequence { /** * 题目：写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 * 写一个版本算法复杂度O(N^2)和一个O(N) 。 * * O(N^2)：对于a中的每个字符，遍历b中的每个字符，如果相同，则拷贝到新字符串中。 * O(
  • sqlserver 2000 无法验证产品密钥 Chen.H sqlwindowsSQL ServerMicrosoft
    在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ
  • [新概念武器]气象战争 comsci
           气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织....        原因如下:        地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
  • oracle 中 rollup、cube、grouping 使用详解 daizj oraclegroupingrollupcube
    oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu -- 使用oracle 的样列库，演示 rollup, cube, grouping 的用法与使用场景    --- ROLLUP ， 为了理解分组的成员数量，我增加了 分组的计数  COUNT(SAL)   
  • 技术资料汇总分享 Dead_knight 技术资料汇总 分享
    本人汇总的技术资料，分享出来，希望对大家有用。 http://pan.baidu.com/s/1jGr56uE 资料主要包含： Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...) Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...) Ser
  • 初一下学期难记忆单词背诵第一课 dcj3sjt126com englishword
    could 能够 minute 分钟 Tuesday 星期二 February 二月 eighteenth 第十八 listen 听 careful 小心的，仔细的 short 短的 heavy 重的 empty 空的 certainly 当然 carry 携带；搬运 tape 磁带 basket 蓝子 bottle 瓶 juice 汁，果汁 head 头；头部
  • 截取视图的图片, 然后分享出去 dcj3sjt126com OSObjective-C
    OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast. I implemented a category method on UIView to get the vi
  • MySql重置密码 fanxiaolong MySql重置密码
    方法一:  在my.ini的[mysqld]字段加入： skip-grant-tables 重启mysql服务，这时的mysql不需要密码即可登录数据库  然后进入mysql mysql>use mysql;  mysql>更新 user set password=password('新密码') WHERE User='root'; mysq
  • Ehcache（03）——Ehcache中储存缓存的方式 234390216 ehcacheMemoryStoreDiskStore存储驱除策略
    Ehcache中储存缓存的方式   目录 1     堆内存（MemoryStore） 1.1     指定可用内存 1.2     驱除策略 1.3     元素过期 2   &nbs
  • spring mvc中的@propertysource jackyrong spring mvc
      在spring mvc中，在配置文件中的东西，可以在java代码中通过注解进行读取了： @PropertySource  在spring 3.1中开始引入 比如有配置文件 config.properties mongodb.url=1.2.3.4 mongodb.db=hello 则代码中   @PropertySource(&
  • 重学单例模式 lanqiu17 单例Singleton模式
    最近在重新学习设计模式，感觉对模式理解更加深刻。觉得有必要记下来。 第一个学的就是单例模式，单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例，保证只有一个实例。 单例模式的常用实现方式有两种，就人们熟知的饱汉式与饥汉式，具体就不多说了。这里说下其他的实现方式 静态内部类方式: package test.pattern.singleton.statics; publ
  • .NET开源核心运行时，且行且珍惜 netcome java.net开源
    背景 2014年11月12日，ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie，在Connect全球开发者在线会议上宣布，微软将开源全部.NET核心运行时，并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布，其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器（GC）和核心
  • 使用oscahe缓存技术减少与数据库的频繁交互 Everyday都不同 Web高并发oscahe缓存
    此前一直不知道缓存的具体实现，只知道是把数据存储在内存中，以便下次直接从内存中读取。对于缓存的使用也没有概念，觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术，发现还是很有必要一探究竟的。   缓存技术使用背景：一般来说，对于web项目，如果我们要什么数据直接jdbc查库好了，但是在遇到高并发的情形下，不可能每一次都是去查数据库，因为这样在高并发的情形下显得不太合理——
  • Spring+Mybatis 手动控制事务 toknowme mybatis
    @Override    public boolean testDelete(String jobCode) throws Exception {       boolean flag = false;  &nbs
  • 菜鸟级的android程序员面试时候需要掌握的知识点 xp9802 android
    熟悉Android开发架构和API调用 掌握APP适应不同型号手机屏幕开发技巧 熟悉Android下的数据存储  熟练Android Debug Bridge Tool 熟练Eclipse/ADT及相关工具  熟悉Android框架原理及Activity生命周期 熟练进行Android UI布局 熟练使用SQLite数据库； 熟悉Android下网络通信机制，S
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他