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

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

  • Bootstrap4 信息提示框 lsx202406 开发语言
    Bootstrap4信息提示框Bootstrap是一个流行的前端框架，它提供了一系列的工具和组件来帮助开发者快速搭建响应式网站。在Bootstrap4中，信息提示框（Tooltip）是一个非常有用的组件，它可以帮助用户更好地理解页面上的元素。本文将详细介绍Bootstrap4的信息提示框组件，包括其基本用法、配置选项以及与实际应用的结合。一、基本用法1.1HTML结构要使用Bootstrap4的信
  • JavaScript系列（68）--运行时优化技术详解 ᅟᅠ        ‌‍‎‏ 一进制 JavaScriptjavascriptjava前端
    JavaScript运行时优化技术详解今天，让我们深入探讨JavaScript的运行时优化技术。运行时优化是提升JavaScript应用性能的另一个关键环节，它关注代码在实际执行过程中的性能表现。运行时优化基础概念小知识：JavaScript运行时优化是指在代码执行过程中，通过各种技术手段来提高代码的执行效率。这包括即时编译（JIT）、内联缓存、类型特化等技术。基本优化实现//1.函数执行优化器c
  • C++ 多态与 C# 的公有继承详解 雪域Code c++c#开发语言C#
    多态是面向对象编程中的一个重要概念，它能够实现在父类引用指向子类对象时的动态绑定，从而在运行时确定调用哪个子类对象的方法。C++和C#是两种流行的面向对象编程语言，在多态性和继承方面有一些共同之处，但也存在一些差异。本文将详细讨论C++中的多态和C#中的公有继承，并附带相应的源代码示例。首先，让我们来看一下C++中的多态性。在C++中，实现多态性通常需要通过虚函数和基类指针或引用来实现。虚函数是在
  • Django ORM - 聚合查询 lsx202406 开发语言
    DjangoORM-聚合查询引言Django是一个强大的PythonWeb框架，它拥有一个功能丰富的对象关系映射（Object-RelationalMapping，简称ORM）。ORM允许开发者以Python类和对象的交互方式来操作数据库，而不是直接编写SQL查询。本文将深入探讨DjangoORM中的聚合查询功能，包括其基本用法、常用函数以及在实际开发中的应用场景。聚合查询简介聚合查询，顾名思义，
  • 用js代码实现贪吃蛇小游戏 guai_guai_guai javascript前端开发语言
    js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰初始化游戏初始化地图地图坐标//1.初始化地图for(leti=0;i=td||newHead.y=tr){collideCheckInfo.isCo
  • 「前端+鸿蒙」鸿蒙应用开发-TS-模块化 吴维炜 大前端开发前端鸿蒙harmonyos华为typescript
    在TypeScript中，模块化是一种将代码分割成独立单元的方式，每个单元可以封装特定的功能或数据。模块化有助于保持代码的组织性、可维护性和可重用性。TypeScript支持ES6模块标准，这意味着你可以使用import和export语句来创建模块。TS快速入门-模块化导出模块成员使用export关键字可以将类、接口、类型、函数或变量导出，以便它们可以在其他文件中被导入。//myModule.ts
  • Pinia入门 qincjun 前端学习指南pinia
    一、铺垫pinia官网：https://pinia.vuejs.org/zh/getting-started.html以下的内容全部来自官网；只不过有时候访问官网上不去；只能自己扒下来；pinia的前端使用非常简单；只需要掌握几个步骤就可以二、套路1.用你喜欢的包管理器安装pinia：yarnaddpinia#或者使用npmnpminstallpinia2.创建一个pinia实例(根store)并
  • 前端开发：CSS选择器 qincjun css前端
    一、基础选择器1.1标签选择器通用型，一次将所有的同类型标签设置成相同属性；p{color:red;}div{color:green;}1.2类选择器类名用.(点)开头的.eat{color:red;}.sleep{color:blue;}.play{color:black;font-size:30px;}吃饭//给段落赋予一个class类名；是此类名的是一样的CSS格式睡觉//一个元素可以赋予多
  • 关键字：static qincjun C语言深度剖析c语言
    1.铺垫1.1全局变量可以跨文件访问吗？答：可以；1.2函数可以跨文件访问吗？答：可以1.3在具体的应用场景中，程序员不想让全局变量或者函数跨文件访问，只在本文件内部被访问？答：可以——引出static关键字2.static2.1static修饰全局变量，该变量只能在本文件内被访问，不能被外部其他文件直接访问；但是可以被间接访问——通过访问非static修饰的函数，访问static修饰的全局变量2
  • Vue前端框架的使用 不想秃头的小杨 Vuevue.js前端框架javascript
    1.正文vue前端框架1.1什么是Vue1.2如何使用vue$Title${{name}}{{age}}/*创建一个Vue对象*/varapp=newVue({//把该对象挂载到div标签上el属性是必有el:"#app",//data:数据区定义一些数据这些数据得类型可以是任意类型。data:{name:"张三",age:15,hobby:["游泳","看书","玩游戏"],}})总结:(1)导
  • 前端框架Vue内容回顾 GISer_Jinger JavascriptVue前端框架vue.js前端
    前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试，这份详细指南将帮助你掌握Vue核心知识，助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染：Vue采用数据驱动视图的方式，通过{{}}语法或v-bind绑定数据，无需手动操作DOM。组件化开发：Vue提供了单文件组件（SFC），支持HTML、CSS、JS组合在.vue文件中，提高代码复用性和可维护性。数据驱动：Vue采
  • tomcat升级报错 格格巫 MMQ!! liunx软件tomcatjavaservlet
    Attributevaluerequest.getContextPath()+“/formula/taskRepetition.do”isquotedwith"whichmustbeescapedwhenusedwithinthevalue1.访问JSP时，报错：Attributevalueisquotedwith"whichmustbeescapedwhenusedwithinthevalue。
  • Apache JMeter 快速入门【图文详情】 甘蓝聊Java 【更新中...】项目中的那些事apachejmeterjava性能测试压力测试
    文章目录ApacheJMeter简介安装ApacheJMeter入门Demo-测试HTTP接口第1步：创建线程组，模拟并发用户第2步：添加HTTPRequest采样器提供HTTP接口创建HTTPRequest采样器创建JSON断言第3步：添加Listener第4步：运行第5步：查看运行结果更多介绍参考本文目标：快速了解ApacheJMeter，并实现一个简单的HTTP接口的性能测试。官网：http
  • Python自学知识清单(持续更新中...) 彩虹小黑馬 Pythonpython开发语言
    Python自学知识清单第一章：数据结构Python自学-变量及对象Python自学-函数的使用Python自学-进制转换Python自学-字符串转义、查找及切片Python自学-字符串处理函数Python自学-字符串格式化输出详解Python自学-列表的用法Python自学-元组的用法Python自学-字典的用法Python自学-集合的用法Python自学-引用与拷贝第二章：语句Python自学
  • 前端三大主流框架：React、Vue、Angular m0_54851477 前端react.jsvue.js
    文章目录一、React、Vue、Angular简介二、React初始化案例三、Vue初始化案例四、Angular初始化案例五、相关链接一、React、Vue、Angular简介前端三大主流框架分别是Angular、React和Vue。以下是这三个框架的详细概述：Angular：Angular原名AngularJS，诞生于2009年，由Google开发并维护。它是一个完整的框架，提供了数据绑定、组件
  • Tomcat安装与配置详解：从入门到精通 一休哥助手 javatomcatjava
    一、Tomcat简介1.1什么是Tomcat？Tomcat是由Apache软件基金会开发和维护的一款轻量级Java应用服务器，能够运行JavaServlet和JSP应用程序。Tomcat作为JavaWeb服务器与传统的Web服务器（如ApacheHTTPServer）配合使用，以便提供动态的Web服务。1.2Tomcat的主要特性轻量级：Tomcat的体积较小，启动速度快，资源消耗低，非常适合开发
  • Python测试框架：pytest 入门 互联网杂货铺 职场和发展python自动化测试测试工具软件测试pytest测试用例
    点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快pytest是一个功能强大而易于使用的Python测试框架。它提供了简单的语法和灵活的功能，用于编写和组织测试代码。1、简单易用：pytest的语法简洁明了，使得编写测试用例更加直观和易于理解。它使用assert语句来验证预期结果，让测试代码更加简洁易读。2、自动发现测试：pytest能够自动发现并执行测试文件和测试函数。它遵循命名规则（
  • 后端使用Spring Boot框架 + 前端VUE 实现滑动模块验证码 ADFVBM 前端springbootvue.js
    在现在常用的登录验证码方式有很多种，但是都不可避免被攻击，但是有很多方式可以防止被攻击，从而进行维护。现在我就讲解一下滑动块验证码的实现方式：这个是前端代码，我使用的是vue，在使用的时候注意：注意几个关键点：使用Vue的data函数来存储组件的状态，如isDragging、sliderPosition等。使用Vue的mounted生命周期钩子来获取容器和滑块的宽度。使用Vue的ref属性来方便地
  • npm : 无法加载文件 npm.ps1 魔兽-SS nodenpm前端node.js
    npm:无法加载文件D:\ProgramFiles(x86)\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Policies。所在位置行:1字符:1npmCategoryInfo:SecurityError:([]，PSSecurityExc
  • 高效高并发调度架构 之群害马 架构
    以下是从架构层面为你提供的适合多核CPU、多GPU环境下API客户端、服务端高级调度，以实现高效并发大规模与用户交互的技术栈：通信协议gRPC：基于HTTP/2协议，具有高性能、低延迟的特点，支持二进制序列化（通常搭配Protobuf），非常适合高并发场景。它提供了流式通信和多路复用功能，可有效减少网络开销。常用于微服务之间的通信，例如机器学习模型服务与前端应用之间的交互。RSocket：是一种基
  • JavaScript系列（73）--装饰器详解 ᅟᅠ        ‌‍‎‏ 一进制 JavaScriptjavascript开发语言ecmascript
    JavaScript装饰器详解JavaScript装饰器是一个强大的语言特性，它让我们能够以声明式的方式修改类和类成员的行为。本文将深入探讨装饰器的原理、使用方法和最佳实践。装饰器基础小知识：装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。装饰器使用@expression形式，其中expression必须计算为一个函数。//基础装饰器语法functionreadonl
  • Spring Boot（8）深入理解 @Autowired 注解：使用场景与实战示例 綦枫Maple #SpringBootspringbootlog4j后端
    搞个引言在Spring框架的开发中，依赖注入（DependencyInjection，简称DI）是它的一个核心特性，它能够让代码更加模块化、可测试，并且易于维护。而@Autowired注解作为Spring实现依赖注入的关键工具，给咱们开发者提供了极大的便利。本文将通过具体的示例详细介绍@Autowired注解的多种使用场景，帮助你更好地掌握这一重要注解~一、构造函数注入1.1基本原理当一个类依赖于
  • STM32之SG90舵机控制 如愿小李 stm32嵌入式硬件单片机
    目录前言：一、硬件准备与接线1.1硬件清单1.2接线二、SG90舵机简介1.1外观1.2基本参数1.3引脚说明1.4控制原理1.5特点1.6常见问题三、单片机简介四、程序设计4.1定时器配置4.2角度控制函数4.3主函数调用五、总结前言：STM32F103C8T6是一款性价比极高的ARMCortex-M3内核微控制器，广泛应用于嵌入式开发。SG90舵机则是小型舵机的代表，常用于机器人、智能家居等场
  • Lua 从基础入门到精通（非常详细） gorgor在码农 Redislua开发语言
    目录什么是Lua？Lua环境安装Lua基本语法注释数据类型nil（空）Booleannumber（数字）string（字符串）function（函数）userdatathreadtable（表）流程控制运算符循环详解string库Lua模块与包案例实战什么是Lua？Lua是一种轻量小巧的脚本语言，它用标准C语言编写并以源代码形式开放。这意味着什么呢？这意味着Lua虚拟机可以很方便的嵌入别的程序里，
  • vue点击左边导航，右边出现页面步骤 胡桃不是夹子 前端
    vue点击左边导航，右边出现页面步骤一定要import不然会出错index.jsCourse作为Homeview子路由Homeview加入点击跳转父Homeview中有RouterView（路由出口，跳转至相应路径）和RouterLink（点击跳转）跳转的页面都为Homeview子只有为el-menu-item标签时，index才会和default-active配对生效高亮:default-act
  • 基于deepseek api和openweather 天气API实现Function Calling技术讲解 匹马夕阳 AI技术ai人工智能
    以下是一个结合DeepSeekAPI和OpenWeatherAPI的完整FunctionCalling示例，包含意图识别、API调用和结果整合：importrequestsimportjsonimportos#配置API密钥（从环境变量获取）DEEPSEEK_API_KEY=os.getenv("DEEPSEEK_API_KEY")OPENWEATHER_API_KEY=os.getenv("OP
  • C C++程序内存的分配_c++分配空间 2501_90326753 c语言c++java
    一、一个C/C++编译的程序占用内存分为以下几个部分：栈区（stack）：由编译器自动分配与释放，存放为运行时函数分配的局部变量、函数参数、返回数据、返回地址等。其操作类似于数据结构中的栈。堆区（heap）：一般由程序员自动分配，如果程序员没有释放，程序结束时可能有OS回收。其分配类似于链表。全局区（静态区static）：存放全局变量、静态数据、常量。程序结束后由系统释放。全局区分为已初始化全局区
  • doris:查询缓存 向阳1218 大数据doris
    概念介绍SQLCache是Doris提供的一种查询优化机制，可以显著提升查询性能。它通过缓存查询结果来减少重复计算，适用于数据更新频率较低的场景。SQLCache基于以下关键因素来存储和获取缓存：SQL文本视图定义表和分区的版本用户变量和结果值非确定函数和结果值行策略定义数据脱敏定义以上因素的组合唯一确定一个缓存数据集。如果其中任何一个发生变化，例如SQL变化、查询字段或条件不同或者数据更新后版本
  • Linux（WSL/Ubuntu）vscode配置C++调试环境与相关问题 力行128 linuxubuntuvscodec++
    步骤：先cmake编译得到可执行的二进制文件，将生成的二进制文件添加到launch.json的"program":处。可用的json文件如下，根据自己程序更改：tasks.json（编译器构建设置）launch.json（调试器设置）c_cpp_properties.json（编译器路径和IntelliSense设置）1.launch.json注：需要将可执行文件填到launch的program处
  • Python 爬虫实战：在东方财富网抓取股票行情数据，辅助投资决策 西攻城狮北 python爬虫实战案例东方财富网
    目录一、引言二、准备工作1.环境搭建2.获取目标网址三、分析网页结构1.查看HTML结构2.分析请求方式四、编写爬虫代码1.导入必要的库2.设置请求头3.获取股票行情数据4.保存数据到CSV文件5.主函数五、数据分析与可视化1.加载数据2.数据清洗3.数据分析4.数据可视化六、总结一、引言在金融投资领域，股票行情数据是投资者做出决策的重要依据。东方财富网作为国内领先的金融信息平台，提供了丰富的股票
  • 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其他