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

前端如何封装一个组件？怎么造轮子？手写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)

  • HUELOJ：123 删除元素
    题目描述输入一个递增有序的整型数组A有n个元素，删除下标为i的元素，使其仍保持连续有序。注意，有效下标从0开始。定义如下两个函数分别实现删除元素操作和数组输出操作。voiddel(inta[],intn,inti);/删除数组a中下标为i的元素/voidPrintArr(inta[],intn);/输出数组a的前n个元素/输入描述输入分三行，第一行是一个整数n(n=0。输出描述输出删除下标为i的元
  • 基于pyQt5为前端实现的智能座椅控制系统，集成了人脸识别、语音合成和座椅记忆功能，为用户提供个性化的座椅调节体验，后期可连接智能座椅。 渴死的鱼仔 qt前端开发语言
    智能座椅控制系统：基于PyQt5的个性化解决方案界面描述：一、系统概述基于PyQt5开发的智能座椅控制系统，深度融合人脸识别、语音交互与座椅记忆功能，打造个性化舒适体验。系统通过实时用户识别自动调节座椅参数，后期可无缝对接智能座椅硬件，实现"无感式"智能生活场景。二、核心功能模块1.人脸识别引擎高精度识别：基于Dlib库实现亚毫米级人脸特征提取动态管理：支持多人脸特征存储与实时匹配快速响应：毫秒级
  • 运维打铁: Shell 脚本自动化任务编写与优化 懂搬砖 运维打铁原力计划运维ruby自动化
    文章目录思维导图一、基础编写1.变量与数据类型2.控制结构if-else语句for循环3.函数定义二、高级特性1.正则表达式2.文件处理3.远程操作三、性能优化1.代码结构优化2.资源管理3.并发处理总结思维导图Shell脚本自动化任务编写与优化基础编写高级特性性能优化变量与数据类型控制结构函数定义正则表达式文件处理远程操作代码结构优化资源管理并发处理一、基础编写1.变量与数据类型在Shell脚本
  • 数据库、HTML
    一、数据库数据库文件与普通文件区别:普通文件对数据管理(增删改查)效率低2.数据库对数据管理效率高，使用方便常用数据库:1.关系型数据库:将复杂的数据结构简化为二维表格形式大型:0racle、DB2中型:MySq1、sQLServer小型:Sqlite2.非关系型数据库以键值对存储,且结构不固定。//JSONRedisMongoDB嵌入式数据库:sqlite3:stu.db1.开源免费，c语言开发
  • C# Linq源码解析之Aggregate 黑哥聊dotNet DotNet-Linq详解c#linqlist
    前言在Dotnet开发过程中，Aggregate作为IEnumerable的扩展方法，十分常用。本文对Aggregate方法的关键源码进行简要分析，以方便大家日后更好的使用该方法。使用Aggregate是对序列应用累加器的函数。看下面一段代码:List lst = new List() { "张三", "李四", "王麻子" };给了我们这样的一个list集合，我们想要得到"张三哈哈哈李四哈哈哈王
  • Anime.js的cleanInlineStyles用法
    第一章：动画的“身后事”——我们为什么需要清理样式？在深入探讨cleanInlineStyles这个具体的工具函数之前，理解它所要解决的根本问题至关重要。这个问题源于JavaScript动画库的核心工作机制，尤其是像Anime.js这样直接与DOM（文档对象模型）交互的库。1.1Anime.js的工作原理：内联样式的魔法与诅咒Anime.js的强大之处在于其能够以极高的性能和灵活性来驱动网页动画1
  • 【C++】C++内存分配与动态内存管理 Sherry的成长之路 C++学习c++开发语言c语言
    个人主页：@Sherry的成长之路学习社区：Sherry的成长之路（个人社区）专栏链接：C++学习长路漫漫浩浩，万事皆有期待文章目录C++内存分配与动态内存管理1.C/C++内存分布2.C语言中动态内存管理方式3.C++中动态内存管理方式3.1new和delete操作内置类型3.2new和delete操作自定义类型4.operatornew和operatordelete函数5.new和delete
  • 【自动化从入门到进阶】Playwright 实战指南，提升测试效率必修课！ 朱公子的Note pythonPlaywright自动化
    你是否也有过“页面点击没反应，接口明明没问题”的糟心经历？就算写再多单元测试，也无法覆盖复杂的用户交互。而Playwright的出现，正为前端开发者和QA带来一剂“提效良方”：跨浏览器、强校验、自动重试、不再依赖Selenium！在2025年的软件开发浪潮中，Web应用的复杂性和用户期望持续攀升，单页应用（SPA）和跨浏览器兼容性让测试变得更加关键。想象一下，您的电商平台上线后因未发现的UI错误导
  • C#中Lambda表达式与=＞运算符 三千道应用题 C#学无止境c#
    本文仅作为参考大佬们文章的总结。Lambda表达式是C#中一种强大的语法特性，它极大地简化了匿名方法的编写，使代码更加简洁和富有表现力。一、Lambda表达式基础概念1.基本定义Lambda表达式是C#中一种简洁的表示匿名函数的方法，它使用=>运算符（称为lambda运算符）将参数列表与表达式或语句块分隔开。Lambda表达式主要用于LINQ查询、事件处理程序、回调函数等场景，使得代码更加简洁和易
  • js数组去重的几种方法 魔仙堡杠把子灬
    我听见寒风,扰乱了叶落数组去重,这个知识点很重要,很多面试的地方都会问这个这个问题,我总结了一下第一种方法,最基本的去重方法,思路:定义一个新数组,并存放原数组中的第一个元素,然后将旧数组的元素一一与新数组的元素进行对比,如果不相同就放到新数组中代码实现vararr=[1,2,5,8,9,6,3,4,0,4,7,5,2,0,3];functionunique(arr){//定义一个新数组,新数组里
  • 2024年09月CCF-GESP编程能力等级认证C++编程四级真题解析 码农StayUp c++CCFGESP编程能力等级认证
    本文收录于专栏《C++等级认证CCF-GESP真题解析》，专栏总目录：点这里。订阅后可阅读专栏内所有文章。一、单选题（每题2分，共30分）第1题在C++中，（）正确定义了一个返回整数值并接受两个整数参数的函数。A.intadd(inta,intb){returna+b;}B.voidadd(inta,intb){returna+b;}C.intadd(a,b){returna+b;}D.voida
  • 网盘项目实现GitHub第三方登录 dhdjfj github
    用户访问/main/files↓路由守卫检查（未登录）↓重定向到/login?redirectUrl=/main/files↓用户点击GitHub登录↓callbackUrl="/main/files"传给后端↓后端保存到session[state]="/main/files"↓GitHub授权完成↓后端取出session[state]="/main/files"↓返回给前端callbackUrl
  • Anime.js 超级炫酷的网页动画库详解 伍哥的传说 前端源码分享javascript开发语言ecmascriptanime.jstimelineanimate
    简介Anime.js是一个轻量级的JavaScript动画库，它提供了简单而强大的API来创建各种复杂的动画效果。以下是Anime.js的主要使用方法和特性：安装npminstallanimejs示例基本用法import{animate,createScope,createSpring,createDraggable}from"animejs";import{useEffect,useRef,us
  • 前端 Vue.js 动画效果实现技巧 大厂前端小白菜 前端vue.jsjavascriptai
    前端Vue.js动画效果实现技巧关键词：Vue.js、动画、过渡、CSS动画、JavaScript动画、性能优化、交互设计摘要：本文将深入探讨Vue.js中实现动画效果的多种技巧，从基础的CSS过渡到复杂的JavaScript动画，涵盖过渡组件使用、动画性能优化、第三方库集成等实用内容。通过丰富的代码示例和实际案例，帮助开发者掌握在Vue应用中创建流畅、吸引人的动画效果。背景介绍目的和范围本文旨在
  • UE4中通过C++配合蓝图编程常见的方式 Lif68
    委托例子比如我要弄一个叫OnRespawn的委托.h中可以这样声明DECLARE_DYNAMIC_MULTICAST_DELEGATE(FOnRespawn);这样你就能新建蓝图可以引用的委托了UPROPERTY(BlueprintAssignable,Category="Delegate")FOnRespawnonrespawn;*用来在c++中呼叫，让蓝图读到委托的工具函数voidHandle
  • 网络编程中的 Protobuf 和 JsonCpp 全面解析 筏.k c++asio网络编程网络开发语言c++服务器
    文章目录前言一、为什么需要序列化？序列化的好处：常见序列化格式包括：二、JsonCpp与Protobuf对比三、JsonCpp简介与示例（客户端通信）JsonCpp使用示例（客户端发送请求）：JsonCpp使用示例（服务器解析请求）：四、Protobuf简介与示例（服务器通信）定义消息格式（user.proto）编译生成代码：服务器端序列化&发送数据接收端解析数据五、使用建议总结前言在网络编程中，
  • C#语法基础总结（超级全面）（二） inwith C#语法基础c#开发语言
    文章目录c#语法基本元素关键字操作符（operator）类型转换标识符（Identifier）语句try语句迭代语句（循环语句）索引器文本（字面值）五大数据类型引用类型：值类型：变量、对象与内存装箱和拆箱类类的实例化类的三大成员（属性、方法、事件）属性（property）方法（函数）方法参数值参数引用参数输出参数数组参数具名参数可选参数扩展方法（this参数）方法的重载构造器（constructo
  • 想要实现electron一打开，窗口就是全屏状态，代码怎么写？ 几道之旅 electronjavascript前端
    在Electron中实现应用启动时自动全屏显示窗口，可通过以下两种主流方法实现（基于主进程代码）：方法1：创建窗口时直接设置fullscreen:true在main.js（主进程文件）中创建BrowserWindow实例时，通过配置项启用全屏：const{app,BrowserWindow}=require('electron');functioncreateWindow(){constmainW
  • CFD中动网格资料
    文章目录一、动网格控制方程推导1.基本思想2.ALE形式下的质量守恒方程3.ALE形式下的动量守恒方程4.能量方程（略）二、Fluent中使用UDF编写动网格函数示例1：周期性平移运动（正弦运动）使用说明：示例2：刚体旋转运动（绕Z轴旋转）使用说明：三、动网格设置建议（Fluent）四、注意事项五、总结在计算流体力学（CFD）中，动网格（MovingMesh）技术用于处理边界运动或变形的问题，例如
  • java cas aba问题_Java CAS操作的ABA问题 自考大三学狗 javacasaba问题
    CAS介绍比较并交换(compareandswap,CAS)，是原子操作的一种，可用于在多线程编程中实现不被打断的数据交换操作，从而避免多线程同时改写某一数据时由于执行顺序不确定性以及中断的不可预知性产生的数据不一致问题。CAS操作基于CPU提供的原子操作指令实现，各个编译器根据这个特点实现了各自的原子操作函数。来源维基百科：C语言：由GNU提供了对应的__sync系列函数完成原子操作。Windo
  • 前后端分离场景下的用户登录玩法&Sa-token框架使用
    两种方案的token、用户登录信息都存储在redis中！！方案一该方案是前端把token和token有效期一起加密存储到浏览器的localStorage中，每次请求时调用前端的getTokenIsExpiry()获取token并检查token是否过期，过期则remove并跳转登录页，这样前端有个问题就是前端也要知道token的有效期，需要和后端的token有效期保持一致，而后端则提供两个拦截器，分
  • STM32之TB6612电机驱动模块 如愿小李单片机设计 stm32嵌入式硬件单片机
    目录一、模块概述二、模块简介2.1模块特点2.2电气特性2.3模块接口说明2.4结构与工作原理2.5原理图设计2.6实际应用注意事项三、硬件设计3.1硬件组成3.2硬件连接四、软件设计4.1开发环境配置4.2关键代码实现4.2.1PWM初始化(PWM_Init)4.2.2GPIO初始化4.2.3电机控制函数4.2.4主函数五、功能实现与优化5.1基础功能实现5.2高级功能扩展5.3性能优化建议六、
  • 王财贵：发起读经教育的初心 dcfac6b15823
    编者按：本文节录自季谦先生《学》、《只要你明白》两场演讲及《走在时代前端的教育》一文的相关内容，均已经先生修订定稿，题目「我的读书经历及读经推广之初心」为编者所拟。又按（季谦先生按语）前几天我在交流网上发表的一段话或可作为二十年的总结与后续的愿望：读经人在心志上，既本于尊重经典，且长期受经典之熏陶，必有经典的意识，即能开放心胸，赏识同侪，涵纳异见，相观而善，敦厚笃实，单纯宽简，不忘初心，从容中道。
  • 前端：优秀架构的坟墓
    你是否曾经见过那个设计精良的后端系统——界限分明、模式优雅、抽象层层递进——让人不禁感叹，这一定是极致享受的工作环境？然后，你打开了前端代码。顿时，你陷入了全局状态的迷宫，深度嵌套的组件，半途而废的Hooks，以及用十七种挫败方言“喊叫”的CSS之中。优秀的架构一路走过后端，经过DevOps的打磨，成功在云端扩展……却在React的某个上下文里因为一个下拉菜单绊倒，彻底崩溃。我干这一行够久了，见过
  • C# 函数memcpy和memmove的使用和模拟实现（详解） muzi_liii c#c语言
    内存函数memcpy函数memmove函数memcpy函数memcpy——内存拷贝（负责不重叠的内存拷贝）函数定义：void*memcpy(void*destination,constvoid*source,size_tnum);//从source的位置开始复制num个字节个数到destination指向的内存中//num代表要拷贝的字节数//返回的是detination的起始地址memcpy的使
  • 深入探索C++ STL：从基础到进阶
    目录引言一、什么是STL二、STL的版本三、STL的六大组件容器（Container）算法（Algorithm）迭代器（Iterator）仿函数（Functor）空间配置器（Allocator）配接器（Adapter）四、STL的重要性五、如何学习STL六、STL的缺陷总结引言在C++的世界里，标准模板库（STL）是一项极为强大的工具。它不仅为开发者提供了可复用的组件库，更是一个融合了数据结构与算
  • Opencv学习_2 （opencv结构&显示图像）
    opencv结构：1：主要包含：cxcorecvmachinelearninghighguicvcamcvaux2：cxcore:基础结构:CvPoint,CvSize,CvScalar等数组结构:cvCreateImage,cvCreateMat等动态结构:CvMemStorage,CvMemBlock等绘图函数:cvLine,cvRectangle等数据保存和运行时类型信息：CvFileSto
  • 挖矿病毒（基于SMB漏洞传播）分析 艾旎米提颉
    本文旨在对SMB挖矿病毒传播机制做分析。网络中的计算机出现由SMB漏洞传播的挖矿病毒，基于目前黑客技术上流行的非PE攻击模式。攻击性质较为隐蔽，完全依赖Windows本身的系统组件。攻击目的较为单一，即通过消耗系统资源集中算力挖矿牟利。本次着重分析的基于WindowsPowerShell的挖矿模式，是基于网页挖矿的一种分支。较早的时候还是基于JS。从攻击者的角度分析，JS过度依赖浏览器，相比Pow
  • React 常用 Hooks
    1、useState状态管理useState是ReactHooks中最基础的状态管理Hook，语序在函数组件中声明和管理状态。使用方法：constinitCount=0;const[count,setCount]=useState(initCount);setCount(2)setCount(preCount=>preCount+1)注意：在v16中，状态更新是同步的，但在事件回调中，会进行批处理
  • Copula 回归与结构方程模型：R 语言构建多变量因果关系网络
    技术点目录专题一、R及Python语言及相关性研究初步专题二、二元Copula理论与实践（一）专题三、二元Copula理论与实践（二）【R语言为主】专题四、Copula函数的统计检验与选择【R语言为主】专题五、高维数据与VineCopula【R语言】专题六、正则VineCopula（一）【R语言】专题七、正则VineCopula（二）【R语言】专题八、时间序列中的Copula【R语言】专题九、Co
  • 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其他