崔迪的傻大猫
崔迪的傻大猫

前端如何封装一个组件？怎么造轮子？手写js封装一个dialog弹窗组件。

文章目录

    • 一、现在要你完成一个Dialog组件，说说你设计的思路？它应该有什么功能？
      • 大体功能
    • 二、文档结构
    • 三、样式Css文件
    • 四、模拟调用场景index.html文件
    • 五、dialog弹窗js组件
      • 最终效果

一、现在要你完成一个Dialog组件，说说你设计的思路？它应该有什么功能？

以前没有尝试过封装组件，其实也没有严格意义的去笼统的学习过封装组件，最近使用layui满频繁的，想要封装一个dialog，尝试一下自己去动手封装一个组件，锻炼一下自己的动手能力，当然在这里也是分享给大家。

回到上方我们其实可以回想一下大体的功能，如果是一个弹窗的话，我们应该怎样去调用？应该怎么去使用呢？是使用js api来调用，还是说放置一个已经写好的html模板，让其设置display:none? js 手动将其显示?

其实上面的问题，我们可以参照一下layui和bootstrap

首先我们可以先看一下bootstrap的弹窗组件
前端如何封装一个组件？怎么造轮子？手写js封装一个dialog弹窗组件。_第1张图片

前端如何封装一个组件？怎么造轮子？手写js封装一个dialog弹窗组件。_第2张图片

我们其实可以明显的看出在bootstrap中其实也就是手动的将html标签语句放置在了body体内，而layui其实就是将对应的弹窗封装成了一个js文件，当调用时，去调用这个js文件的方法，然后采用插入节点的方式，将弹窗呈现。

那么我们应该去采用哪种方式来封装这个弹窗呢？在这里的话我们就将其手动的写入到js文件当中，让其使用js api的方式，让弹窗跳出，从而实现效果。

大体功能

  • 该组件需要提供hook指定渲染位置，默认渲染在body下面。
  • 然后改组件可以指定外层样式，如宽度等
  • 组件外层还需要一层mask来遮住底层内容，点击mask可以执行传进来的onCancel函数关闭Dialog。
  • 另外组件是可控的，需要外层传入visible表示是否可见。
  • 然后Dialog可能需要自定义头head和底部footer，默认有头部和底部，底部有一个确认按钮和取消按钮，确认按钮会执行外部传进来的onOk事件，然后取消按钮会执行外部传进来的onCancel事件。
  • 组件高度可能大于页面高度，组件内部需要滚动条。

我略微的删减掉了几个功能，因为我们采用的是像layui 式js的跳出方式，所以我们不需要 对应的变量去控制对应的展示还是隐藏，所以我们的dialog需要实现的就是上方的几个功能。

二、文档结构

前端如何封装一个组件？怎么造轮子？手写js封装一个dialog弹窗组件。_第3张图片
我们大体需要3个文件，一个css、一个html、一个js文件

三、样式Css文件

/*index.css*/
*{
     
  margin:0;
  padding:0;
}
/* a标签去除下划线改变颜色 */
a{
     
  text-decoration: none;
  color: black;
}
/* 弹窗容器 */
.keyui-dialog-box{
     
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000;
}
/* 遮罩层样式 */
.keyui-masking-layer{
     
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
/* 弹窗默认样式 */
.keyui-dialog{
     
  width:50vw;
  height:50vh;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
/* 头部设置固定高度 */
.keyui-dialog-head{
     
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eeeeee;
  position: relative;
}
/* 右上角关闭图标 */
.keyui-rightUp-close{
     
  position: absolute;
  right: 20px;
}
/* 弹窗内容区域 */
.keyui-dialog-content{
     
  height: calc(100% - 40px);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;  /* 为什么要设置auto,因为内容区域有时会超出弹窗大小 */
}
/* btn按钮样式 */
.keyui-btn {
     
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #FFF;
  border: 1px solid #DCDFE6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: .1s;
  transition: .1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px; 
}
/* 鼠标移入按钮效果 */
.keyui-btn:hover {
     
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
/* 确认按钮 */
.keyui-btn-primary {
     
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
/* 确认按钮鼠标移入效果 */
.keyui-btn-primary:hover {
     
  background: #66b1ff;
  border-color: #fff;
  color: #fff;
}
/* 确认按钮mini样式 */
.keyui-btn-mini {
     
  font-size: 12px;
  border-radius: 3px;
  padding: 7px 15px;
}
/* 确认按钮small样式 */
.keyui-btn-small {
     
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}
/* 下框按钮区域居中，来一些边距样式 */
.dialog-bottom{
     
  padding:5px;
  background-color: #fff;
  text-align: center;
}

四、模拟调用场景index.html文件


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹窗组件封装title>
    
    <link rel="stylesheet" href="./index.css" />
  head>
  <body>
    
    <button id="btn">弹窗组件button>

    
    <div id="content" style="display:none;">我是一个小天才div>
  body>
html>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>

<script src="./index.js">script>

<script>
  $('#btn').click(function () {
      
    // 配置参数  index对应我们返还的节点
    var index = keyui.dialog({
      
      title:'弹窗',// title左上角标题
      content: '#content',// content 指定对应内容指向哪一个标签
      btn: ['确认', '取消'],// 下bottom按钮
      area:['200px','200px'],// 弹窗宽高大小
      yes: function () {
       //点击确认按钮事件
        console.log(index) //对应上方的index变量，传递给close参数，用于关闭弹窗
        keyui.close(index) //关闭弹窗
      },
      no:function(){
       //点击取消按钮事件
        keyui.close(index) //关闭弹窗
      }
    })
  })
script>

五、dialog弹窗js组件


// 点击删除方法
function rightclose(box) {
     
  $('#'+box).remove()
}
// dom节点转换为字符串方法
function toInnerHTML(obj){
     
  // 创建一个节点
  const div = document.createElement("div")
  // 将节点插入进去
  div.appendChild(obj);
  // 将传递进来的dom设置为显示  因为是复制的上方节点嘛
  obj.style.display="block"
  // 获取当当前的dom节点字符串
  var a=div.innerHTML;
  // return出去
  return a;
}
var yes1= function(){
     
}
var no1 = function(){
     
}
var keyui = {
     
  // 弹窗方法  外部可直接使用keyui.dialog调用
  dialog: function (obj) {
     
    // 设置默认值等等
    var {
     title='弹窗',content='',btn=[],yes,no,area=['50%','50%']} = obj
    // 创建一个时间戳当层级id
    var date = new Date().getTime()
    // 判断是不是真的传递了yes或者no 如果传递了yes或者no才会让对应的方法赋予上方的全局方法，供与回调
    if(typeof yes === "function"){
     
      yes1 = yes
    }
    if(typeof no === "function"){
     
      no1 = no
    }
    // 判断当前有没有btn这个数组
    var dialog_bottom=''
    //有btn并且btn的长度不为0那么说明传递了按钮
    if(btn&&btn.length){
     
      // 拼接
      dialog_bottom+= `
`
      // 循环传递进来的数组
    btn.forEach((element,index) => {
     
      // 我们在这里只考虑传递两个按钮第一个相当于确认，第二个相当于取消，同时挂载点击方法，也就对应了我们上方的yes1，no1
      dialog_bottom +=  `
${
       index==0?'keyui-btn-primary':''}" οnclick="${
       index==0?'yes1()':'no1()'}">${
       element}
`
     });
     dialog_bottom+= `
`
    }
    // 拼接一个dom节点，其实原理上我们还是使用的插入节点的方式。
    var box = $(`
${
       date}" class="keyui-dialog-box">
                

                  
${
       area[0]};height:${
       area[1]}">
                    

                    ${
       title}
                      ${
       date}')">X
                    

                    

                      ${
       content?toInnerHTML($(content).clone(true)[0]):''}
                    

                      ${
       dialog_bottom}
                  

                

              
`)
    // 分别说一下上方对应变量的意思
    /**
     * @param date 时间戳，主要是为了弹窗之中在弹弹窗，用于区分当前究竟是哪一个弹窗
     * @param area[] 0：宽度，1高度
     * @param title 标题
     * @param toInnerHTML($(content).clone(true)[0]) 完全克隆一个dom节点并作为参数传递给toInnerHTML用于拿到dom字符串
     * @param dialog_bottom bottom内容，如果传递的按钮是空的，那么就不会渲染，如果不是就会渲染
     */

    //  将数据插入到对应的body页面中  当然层级我们肯定要设置很高，防止被其他内容盖住
    $('body').append(box)

    // 返回我们拼接的id值  用于关闭这个弹窗
    return $('#keyui-'+date)[0]
  },
  // 关闭弹窗方法，index其实对应的是一个dom节点也就是上方弹窗返还的节点
  close: function (index) {
     
    //  取当前节点  直接清除
    index.remove();
  }
}

最终效果

你可能感兴趣的:(前端,函数,js)

  • 第十七章:Future Directions_《C++ Templates》notes 郭涤生 c/c++c++开发语言笔记
    FutureDirections核心重难点：示例代码：设计题多选题答案设计题详解核心重难点：泛型非类型模板参数允许任意类型作为非类型模板参数（如template）需解决类型推导和链接问题编译期控制流constexprif替代模板偏特化（减少代码膨胀）折叠表达式优化可变参数模板处理反射与元编程增强类型检查（is_convertible_v等）反射提案（如成员变量/函数查询）模块化支持解决传统头文件包
  • 机器学习knnlearn1 XW-ABAP 机器学习机器学习人工智能
    importmatplotlib.pyplotaspltimportnumpyasnpimportoperator#定义一个函数用于创建数据集defcreateDataSet():#定义特征矩阵，每个元素是一个二维坐标点，代表不同策略数据点的坐标group=np.array([[20,3],[15,5],[18,1],[5,17],[2,15],[3,20]])#定义每个数据点对应的标签，用于区分
  • LeetCode剑指offer题目记录3 t.y.Tang LeetCode记录学语言c++leetcode哈希算法
    leetcode刷题开始啦,每天记录几道题.目录剑指offer05.替换空格题目描述思路pythonC++剑指offer06.从尾到头打印链表题目描述思路1python思路2pythonC++剑指offer05.替换空格题目描述让我们实现一个函数,把字符串s中的每个空格替换为%20.思路这个题目我只能想到遍历,在空间控制上应该有原地修改的办法会省一些.python如果用python,那直接用spl
  • .net 4.0 webServices 的使用，从前端到后端，代码超全。 静静香甜 .net前端后端c#
    1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin
  • 数字签名与数字证书 TABE_ 计算机网络数字签名数字证书
    这里写目录标题数字签名数字证书数字证书的原理数字证书的特点如何验证证书机构的公钥不是伪造的数字签名数字签名是非对称密钥加密技术与数字摘要技术的应用，数字签名就是用加密算法加密报文文本的摘要（摘要通过hash函数得到）而生成的内容。发送报文时，发送方用一个哈希函数从报文文本中生成报文摘要，然后用发送方的私钥对这个摘要进行加密生成数字签名，之后将数字签名和报文一起发送给接收方，即数字证书。接收方首先用
  • 如何设计一个 RPC 框架？需要考虑哪些点？ 蒂法就是我 rpc网络协议网络
    设计一个完整的RPC框架需要覆盖以下核心模块及关键技术点：一、核心架构模块模块功能与实现要点服务注册与发现使用Zookeeper/Nacos等实现服务地址动态注册与订阅，支持心跳检测和节点变更通知网络通信层基于Netty或gRPC的HTTP/2实现异步非阻塞传输，优化连接池复用与零拷贝技术序列化协议支持Protobuf（高性能）、JSON（可读性）、Hessian（跨语言）等，需平衡性能与扩展性动
  • Python Lambda 函数详解 2201_75491841 python开发语言lambda函数
    一、引言在Python编程中，我们经常会遇到一些简单的函数，这些函数可能只在某个特定的地方使用一次，而且逻辑非常简单。如果为了这些简单的功能定义一个常规的函数，不仅会增加代码的冗余，还会使代码结构变得不够简洁。这时，lambda函数就派上用场了。lambda函数也被称为匿名函数，它为我们提供了一种简洁的方式来定义小型的、一次性使用的函数。在本文中，我们将深入探讨Python中的lambda函数，包
  • HTML+CSS案例展示(CSS3D效果旋转相册) hacalili htmlcss前端css3
    参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate(180deg)scale()...顺序对最后的效果有影响，需要根据需求安排位移和其他属性的顺序；实现暂停动画效果：animation-play-state:paused;经常和鼠标经过等其
  • conda篇----在已有conda环境的基础上升级python包 心惠天意 condapythonjvm
    conda篇----在已有conda环境的基础上升级python包原先的python版本第一步：condaupdate--all(py11)[xxx@aivrs01xxx]$condaupdate--allCollectingpackagemetadata(current_repodata.json):doneSolvingenvironment:done==>WARNING:Anewervers
  • HTML实现酷炫3D相册 算法与编程之美 编程之美csshtmljscss3javascript
    欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！目录1、创建文件目录2、调背景色3、制作3D相册4、将图片散开，围成一圈。5、绘制透明底盘6、最终效果1、创建文件目录在Hbuilder在新建一个目录，创建css和js文件。图12、调背景色在style块里面给整个页面渲染成黑色调。*{padd
  • echart绘制海南地图时增加南海诸岛显示（现成geojson数据） 火火PM打怪中 工作中的问题
    使用场景：产品经理要求展示海南地图时，需要显示南海诸岛；问题：南海诸岛在中国地图上的显示，是echart在mapName=‘china’时，默认fix进去。但是海南省不会默认fix进去解决方案：将南海诸岛的geojson数据想办法弄到，将其直接放在海南省地图数据里面（将三沙市删除）处理结果：{"type":"FeatureCollection","features":[{"id":"460100"
  • CSS动画：逐帧动画与steps()函数 双囍菜菜 前端随记css前端
    逐帧动画与steps()函数：精准掌控动画节奏关键词：steps()函数、雪碧图、精灵动画、帧动画优化文章目录逐帧动画与steps()函数：精准掌控动画节奏一、逐帧动画的本质：时间函数的维度突破1.1线性动画的局限性1.2steps()函数数学解析二、视觉化解析：steps()工作原理2.1时间轴切片演示2.2与线性动画对比三、商业级案例：RPG游戏角色行走动画3.1雪碧图制作规范3.2完整实现代
  • Python 高手编程系列一千七百零八：在事件循环中使用 executors 杨琴1 python开发语言
    Executor.submit()方法返回的Future类实例在概念上非常接近异步编程中使用的协程。这就是为什么我们可以使用执行器在协同多任务和多进程或多线程之间进行混合。此解决方法的核心是事件循环类的BaseEventLoop.run_in_executor(executor,func,*args)方法。它会在进程池或线程池中调度执行由executor参数表示的func函数。这个方法最重要的是它
  • pythontype函数使用_Python astype(np.float)函数使用方法解析 weixin_39870238 pythontype函数使用
    Pythonastype(np.float)函数使用方法解析我的数据库如图结构我取了其中的nameagenr，做成array，只要所取数据存在str型，那么取出的数据，全部转化为str型，也就是array阵列的元素全是str，不管数据库定义的是不是int型。那么问题来了，取出的数据代入公式进行计算的时候，就会类型不符，这是就用到astype(np.float)代码如下importpymysqlim
  • SassScript：Sass中的编程特性详解 jiajia651304 sass前端css
    Sass（SyntacticallyAwesomeStylesheets）是一种强大的CSS预处理器，它允许开发者使用类似于编程语言的语法来编写CSS，然后通过编译生成标准的CSS代码。SassScript是Sass中的编程特性集合，它包含了变量、嵌套规则、混合、函数以及控制指令等，极大地提高了CSS的开发效率和可维护性。1.变量SassScript中的变量允许开发者在样式表中存储和重复使用值。变
  • 前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例 jiajia651304 前端ajaxjavascript
    前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例1.AJAX——传统的异步请求1.1基本用法示例1.2AJAX特点2.FetchAPI——现代化请求方案2.1基本用法示例2.2Fetch特点3.Axios——第三方HTTP请求库3.1安装Axios3.2基本用法示例3.3Axios特点4.总结前端请求全面解
  • OpenLayers集成天地图服务开发指南 喆星时瑜 WebGIS#天地图OpenLayersGIS天地图WebGISHTML地图地图API
    以下是一份面向GIS初学者的OpenLayers开发详细教程，深度解析代码：一、开发环境搭建1.1OpenLayers库引入ol.css：包含地图控件、图层等可视化样式ol.js：OpenLayers核心功能库推荐使用固定版本号（如v7.3.0）确保稳定性1.2地图容器设置.map{//设置地图控件显示尺寸height:95vh;width:95vw;}使用视口单位(vh/vw)实现响应式布局保留
  • Python 常用函数全解析，轻松提升编码效率 jiajia651304 python开发语言windows
    Python常用函数全解析，轻松提升编码效率Python常用函数全解析，轻松提升编码效率1.基础内置函数1.1`print()`与`input()`1.2`len()`、`type()`与`isinstance()`2.数学与数值处理函数2.1`abs()`、`round()`与`pow()`2.2`divmod()`与`max()/min()`3.序列与迭代相关函数3.1`range()`与`e
  • 编程内容简述！ 恶霸不委屈 开发语言青少年编程汇编javapython
    编程是指通过计算机语言来开发软件、程序和应用的过程，通常通过编写一系列的指令，来让计算机完成特定的任务。编程可以涉及多个领域和技术，以下是一些主要的编程内容：1.编程语言编程语言是程序员与计算机进行沟通的桥梁，不同的编程语言适用于不同的任务。常见的编程语言有：Python：简单易学，适用于数据分析、人工智能、网页开发等。JavaScript：网页开发中不可或缺的语言，用于动态网页和前端开发。Jav
  • 在 C 和 C++ 编程里，要引用一个文件中的函数，包含头文件和使用extern，通常包含头文件是更好的做法 weixin_44799641 C/C++c语言c++
    在C和C++编程里，要引用一个文件中的函数，通常包含头文件是更好的做法，下面为你详细分析：包含头文件优点代码清晰规范：在源文件里包含函数声明所在的头文件，能让代码结构更清晰，其他人阅读代码时能很容易明白函数的来源和用途。比如，#include"can_port.h"这样的语句明确表示该源文件要使用can_port.h头文件里声明的函数。自动更新声明：要是函数的声明有变动，只需修改头文件，所有包含该
  • 【第21节】windows sdk编程：网络编程基础 攻城狮7号 Windows编程(C++)windowswindows编程windowssdkc++网络编程
    目录引言：网络编程基础一、socket介绍(套接字)1.1BerkeleySocket套接字1.2WinSocket套接字1.3WSAtartup函数1.4socket函数1.5字节序转换1.6绑定套接字1.7监听1.8连接1.9接收数据1.10发送数据1.11关闭套接字二、UDP连接流程2.1接收数据2.2发送数据三、阻塞与非阻塞模式四、示例代码4.1TCP协议代码4.2UDP协议代码引言：网络
  • AWS CLI with MinIO Server 库海无涯 aws云计算
    1、InstallMinIOServerhttps://min.io/docs/minio/linux/index.htmlCreateAKandSKandrecordinformation.AK:ZYYMPcLi6dSPsDfr5QeWSK:Am3m2qtpkUk2wAgT5dPbpE4hGD2tX7a6RpjsbeEdAndcreateabucketnamedaswtest.2、Install
  • C++ 地图 + 配对组合！3 分钟吃透 map 和 pair 的黄金搭档 Reese_Cool STL数据结构与算法c++算法开发语言stl
    文章目录pair一、基本概念二、pair的声明与初始化三、成员访问与修改四、常用操作1.比较运算2.交换值3.tie函数（解包pair）五、pair的应用场景六、pair与结构体/类的对比七、pair与tuple的对比八、代码示例1.返回多个值2.存储键值对九、总结map一、基本概念二、map的声明与初始化三、常用操作四、map的应用场景五、注意事项在C++编程里，map和pair是标准库中十分实
  • Unity编辑器扩展快速回顾 托塔1 Unity知识快速回顾unity编辑器游戏引擎
    知识点来源：总结人间自有韬哥在，唐老狮，豆包目录1.自定义菜单栏拓展1.1.Editor文件夹用途1.2.添加自定义页签1.3.Component菜单加脚本1.4.Inspector脚本右键菜单1.5.快捷键设置2.自定义窗口扩展2.1.创建窗口类2.2显示窗口2.3.窗口事件回调函数2.4.窗口中常用的生命周期函数2.5.编辑器窗口类中的常用成员3.EditorGUI3.1.EditorWind
  • Axios 和 跨域 这两个概念 PLJJ685 前后端分离的仓库管理系统前端
    1.Axios是什么？Axios是一个用于发送网络请求的工具，类似于浏览器自带的fetch，但更强大、更易用。在前端（Vue）中，我们通常用Axios来向后端（SpringBoot）请求数据。举个例子：假设你在一个仓储系统中，前端需要从后端获取商品库存信息。这时，前端就可以用Axios发送一个请求，比如：axios.get('/api/inventory').then(response=>{con
  • uni-app 与webView 互相传值 九亿少女无法触及的梦ى uni-app
    uni-app向webView传值在uni-app传值有多种实现方式，主要推荐evalJS，次要webSorcket重点：1.webView要找到正确的children！如果页面中只有一个webView标签则直接可以currentWebview.children()[0]2.H5页面中的监听function必须写在全局，不要写在任何load事件中！//index.vueletcurrentWebv
  • springBoot 和springCloud 版本对应关系 m0_74824894 面试学习路线阿里巴巴springbootspringcloud后端
    请求下面链接：拿到的json数据，格式化https://start.spring.io/actuator/info[这里是图片001]https://start.spring.io/actuator/info云原生脚手架CloudNativeAppInitializer(aliyun.com)[这里是图片002]https://start.aliyun.com/idea阿里云脚手架插件：Aliba
  • Python匿名函数Lambda，不止是省略函数名这么简单 橙色小博 python的学习之旅python开发语言
    目录1.前言2.Lambda函数的基本用法3.关于Lambda函数的应用3.1与map函数结合3.2lambda与if-else语句3.3多参数lambda3.4嵌套lambda3.5字典与lambda（也是我本人最喜欢的用法）3.6lambda其他用法4.总结：Lambda的编程哲学1.前言在Python的广阔天地里，Lambda函数宛如一颗璀璨的明珠，以其简洁优雅的姿态，为代码增添了一份独特的
  • 第十六章:Specialization and Overloading_《C++ Templates》notes 郭涤生 c/c++c++开发语言笔记
    SpecializationandOverloading一、模板特化与重载的核心概念二、代码实战与测试用例三、关键知识点总结四、进阶技巧五、实践建议多选题设计题代码测试说明一、模板特化与重载的核心概念函数模板重载(FunctionTemplateOverloading)//基础模板templateTmax(Ta,Tb){returna>b?a:b;}//显式特化(FullSpecializatio
  • 麦谷科技-前端面经 dancehole 科技前端
    base：车联网，uniapp小程序。面试时间：2025-03月（应届）投递岗位：前端（转正实习）面试流程比较短，可能是因为经历不匹配或者第一题答的不好Tvt时间：上午约一面，下午约二面，隔一天（第三天）约hr面。整体流程还是很快的。HR面去公司线下参观了，整体地理环境也很nice。最后因为个人原因没有入职，也是相当可惜一面自我介绍&BG：两端实习，介绍了一下自己的工作。面试官表示不太感兴趣（问了
  • js动画html标签（持续更新中） 843977358 htmljs动画mediaopacity
    1.jQuery 效果 - animate() 方法    改变 "div" 元素的高度：    $(".btn1").click(function(){      $("#box").animate({height:"300px
  • springMVC学习笔记 caoyong springMVC
    1、搭建开发环境    a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar    b>、在web.xml中配置前端控制器       <servlet>     &nbs
  • POI中设置Excel单元格格式 107x poistyle列宽合并单元格自动换行
    引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结： 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
  • jquery 获取A href 触发js方法的this参数 无效的情况 一炮送你回车库 jquery
    html如下：  <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>"   j
  • md5 3213213333332132 MD5
    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
  • 完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
    完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：     第一步：停用所有Oracle相关的已启动的服务；     第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中         &
  • apache 的access.log 日志文件太大如何解决 darkranger apache
    CustomLog logs/access.log common  此写法导致日志数据一致自增变大。 直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log 
  • Hadoop单机模式环境搭建关键步骤 aijuans 分布式
            Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
  • PL/SQL DEVELOPER 使用的一些技巧 atongyeye javasql
    1 记住密码 这是个有争议的功能，因为记住密码会给带来数据安全的问题。 但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。 位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
  • PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
    有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。   好！不说Ruby了，让我们来谈谈PHP   PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分...   但无论如何，它并没有说我们不能做这样
  • ThreadLocal与线程安全 bijian1013 javajava多线程threadLocal
    首先来看一下线程安全问题产生的两个前提条件：  1.数据共享，多个线程访问同样的数据。  2.共享数据是可变的，多个线程对访问的共享数据作出了修改。    实例：         定义一个共享数据： public static int a = 0;        
  • Tomcat 架包冲突解决 征客丶 tomcatWeb
    环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
  • 【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
    Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class    2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值    
  • java 线程池管理机制 BlueSkator java线程池管理机制
    编辑 Add Tools   jdk线程池   一、引言 第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。  
  • 关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL存储函数
    转自于：http://www.iteye.com/problems/23775 问： 我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
  • 读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
  • 常用SQL chenjunt3 oraclesqlC++cC#
    --NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
  • 数学是科学技术的语言 comsci 工作活动领域模型
      从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？    最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
  • Linux系统手动安装rzsz 软件包 daizj linuxszrz
    1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf  rzsz-3.34.tar.gz 3、安装  cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
  • 读源码之:ArrayBlockingQueue dieslrae java
        ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时 不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
  • C语言学习九枚举的定义和应用 dcj3sjt126com c
    枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
  • Vagrant 三种网络配置详解 dcj3sjt126com vagrant
    Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。 端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
  • 16.性能优化-完结 frank1234 性能优化
    性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)， 软件设计（比如多线程并行化，选择合适的数据结构）， 数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等） 以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。 性能水很深， 笔者经验尚浅 ，赶脚也就了解了点皮毛而已，我觉得
  • Word Search hcx2013 search
    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
  • Spring4新特性——Web开发的增强 jinnianshilongnian springspring mvcspring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装配置tengine并设置开机启动 liuxingguome centos
    yum install gcc-c++  yum install pcre pcre-devel  yum install zlib zlib-devel  yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
  • 第14章 工具函数（上） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Xelsius 2008 and SAP BW at a glance blueoxygen BOXelsius
    Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？ 以下Wiki文章应该提供了全面的概览。   http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
  • oracle表空间相关 tongsh6 oracle
    在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件    ALTER TABLESPACE "表空间的名字" ADD DATAFILE    '表空间的数据文件路径' SIZE 50M;   &nb
  • .Net framework4.0安装失败 yangjuanjava .netwindows
    上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了 和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！ 下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他