我在人间贩卖青春
我在人间贩卖青春

javaScript之原生js封装组件（弹窗为例）

组件封装

  • html调用组件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .k-dialog {
            width: 30%;
            z-index: 2001;
            display: block;
            position: absolute;
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            margin: 0 auto;
            top: 15vh;
            left:30%;
        }

        .k-wrapper {
            position: fixed;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            background: black;
            opacity: 0.4;
            z-index: 2000;
        }

        .k-header {
            padding: 20px 20px 10px;
        }

        .k-header .k-title {
            line-height: 24px;
            font-size: 18px;
            color: #303133;
            float: left;
        }

        .k-body {
            padding: 30px 20px;
            color: #606266;
            font-size: 14px;
        }

        .k-footer {
            padding: 10px 20px 30px;
            text-align: right;
        }

        .k-close {
            color: #909399;
            font-weight: 400;
            float: right;
            cursor: pointer;
        }

        .k-default {
            color: #606266;
            border: 1px solid #dcdfe6;
            text-align: center;
            cursor: pointer;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: 500;
            margin-right: 10px;
        }

        .k-default:hover {
            color: #409eff;
            background: #ecf5ff;
            border-color: #c6e2ff;
        }

        .k-primary {
            border: 1px solid #dcdfe6;
            text-align: center;
            cursor: pointer;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: 500;
            background: #409eff;
            color: #fff;
            margin-left: 10px;
        }

        .k-primary:hover {
            background: #66b1ff;
        }
        .k-input{
            width: 100%;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .input-inner {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
            margin-top: 20px;
        }
    style>
head>

<body>
    <button class="btn1">点击button>
    <button class="btn2">点击button>
    
    <show-dialog
        title="自定义组件标题"
    >show-dialog>
<script type="module">
import Dialog,{InputDialog} from './dialog.js';
let dialog = new Dialog({
    title:"我的标题",
    content:"我的内容",
    isCancel:true ,
    dragable: true,
    success(){
        console.log("点击了确定");
    },
    cancel(){
        console.log("点击了取消");
    },
    maskable: true
})
document.querySelector(".btn1").onclick = function(){
    dialog.open();
}
let dialog2 = new InputDialog({
    title:"我的标题2",
    content:"我的内容2",
    isCancel:true ,
    dragable: true,
    success(e){
        console.log("点击了确定",e.detail);
    },
    cancel(){
        console.log("点击了取消");
    },
    maskable: true
})
document.querySelector(".btn2").onclick = function(){
    dialog2.open();
}

// axios({})  /axios.get()...post put delete head; 
// success: 点击确定之后触发自定义success 事件；
document.querySelector("show-dialog").addEventListener("success",function(){
    console.log("触发了组件的事件");
})
script>
body>
html>
  • 封装的弹窗
export default class Dialog extends EventTarget{
    constructor(options){
        super();


        // 默认配置
        let defalultOptions = {
            width: "30%",
            height: "250px",
            title: "测试标题",
            content: "测试内容",
            dragable: true, //是否可拖拽
            maskable: true, //是否有遮罩
            isCancel:false, //是否有取消
            success(){},
            cancel(){}
        }
         // 合并配置；
         //方法一：
        // this.opts = Object.assign(defalultOptions,options);
        //方法二:
        this.opts = {...defalultOptions,...options};
        //方法三：
        // this.opts = {
        //     width,
        //     height,
        //     title,
        //     content,
        //     dragable,
        //     maskable,
        //     isCancel,
        //     success,
        //     cancel
        // }
        // console.log(this.opts);
       this.init();
    }
    // 初始化组件方法
    init(){
        this.createElement();
        // this.addEvent("success",this.opts.success);
        this.addEventListener("success",this.opts.success)
        this.addEleEvent();
        if(!this.opts.maskable){
            this.divEles.querySelector(".k-wrapper").style.display = "none";
        }
        if(this.opts.dragable){
            this.drag();
        }
    }
    // 创建节点
    createElement(){
        // console.log(this.opts.width)
        let divEles = document.createElement("div"); 
        divEles.innerHTML = `

        
${this.opts.width};height:${this.opts.height}">
            

                ${this.opts.title}X
            

            

                ${this.opts.content}
            

            

                ${this.opts.isCancel?'取消':''}
                确定
            

        
`;
        divEles.style.display = "none";
        document.body.appendChild(divEles);
        this.divEles = divEles;
    }
    // 添加事件
    addEleEvent(){
        // let closeEle = this.divEles.querySelector(".k-close");
        // closeEle.addEventListener("click",()=>{
        //     this.close();
        // })
        // let cancelEle = this.divEles.querySelector(".k-default") ;
        // console.log(cancelEle)
        // cancelEle &&  cancelEle.addEventListener("click",()=>{
        //     console.log("close")
        // })
        // 事件委托
        let kDialog = this.divEles.querySelector(".k-dialog");
        kDialog.addEventListener("click",e=>{
        //    console.log(e.target); 
         let className = e.target.className;
        //  console.log(className);
            switch(className){
                case 'k-close':
                    this.close();
                    break;
                case 'k-default':
                    this.opts.cancel();
                    this.close();
                    break;
                case 'k-primary':
                    // this.opts.success();
                    // this.trigger("success");
                    this.sure();
                    this.close();
                    break;
                default:
                    console.log("未点中");
                    break;
            }

        })
    }
    sure(value){
        let success = new CustomEvent("success",{
            detail:value
        });
        this.dispatchEvent(success);
    }
    // 关闭组件
    close(){
        this.divEles.style.display = "none";
    }
    // 打开组件
    open(){
        // console.log("open");
        this.divEles.style.display = "block";
    }
    drag(){
        let kDialog = this.divEles.querySelector(".k-dialog");
        kDialog.onmousedown = function (e) {
            let x = e.clientX  - this.offsetLeft;
            let y = e.clientY - this.offsetTop;
            this.onmousemove = function (e) {
                let xx = e.clientX;
                let yy = e.clientY;
                this.style.left = xx - x + "px";
                this.style.top = yy - y + "px";
            }
        }
        document.onmouseup = function () {
            kDialog.onmousemove = "";
        }
    }
}
// 通过继承扩展功能；
export class InputDialog extends Dialog{
    constructor(options){
        super(options);
        this.createInput();
    }
    createInput(){
        let myInput = document.createElement("input");
        myInput.classList.add("input-inner");
        this.divEles.querySelector(".k-body").appendChild(myInput);
        this.myInput = myInput;
    }
    sure(){
        let value = this.myInput.value;
        super.sure(value);
    }
}
class ShowDialog extends HTMLElement{
    constructor(){
        super();
        this.innerHTML = ``;
        let dialog = new Dialog({
                title:this.title,
                success:(e)=>{
                    // console.log("点击了确定")
                    this.dispatchEvent(new CustomEvent("success"))
                }   
        })
        // this.title = this.getAttribute("title")
        this.onclick = function () {
            dialog.open();
        }
    }
    get title(){
        return this.getAttribute("title") ?? "默认标题"
    }

}
customElements.define("show-dialog",ShowDialog);

你可能感兴趣的:(javaScript,前端,javascript,封装)

  • HTML+CSS面试试题（部分） 四分十七 前端学习htmlhtmlcss大数据
    目录1:主流浏览器的内核分别是什么？2:每个HTML文件开头都有，它的作用是什么3:div+css的布局较table布局有什么优点？4:img的alt属性与title属性有何异同5:strong标签与em标签的异同6:渐进增强和优雅降级之间的不同7:为什么利用多个域名来存储网站资源8:网页标准和标准制定机构的意义9:简述一下src与href的区别10:网页制作会用的图片格式有哪些11:微格式，前端
  • python反爬虫处理--处理动态内容加载（Selenium库） 范哥来了 python爬虫开发语言
    使用Selenium处理动态加载的内容Selenium是一个强大的工具，可以用来模拟真实用户与网页进行交互。这对于处理那些通过JavaScript动态加载内容的网站特别有用。下面我将介绍如何安装Selenium库以及如何使用它来抓取动态加载的内容。1.安装Selenium库首先，您需要确保已经安装了Selenium库。您可以使用pip来安装Selenium：pipinstallselenium此外
  • selenium用例执行过程采集操作形成测试报告上的回复 进阶的DW selenium测试工具
    在代码执行的过程中不断的进行截图，把截图拼接成gif动态图，放在测试报告上1、每条用例执行启动一个线程，这个线程会每隔0.3秒进行截图项目下创建一个临时目录video用来存储所有截图以及gif动态图封装不断截图的方法，每隔0.3秒进行截图#封装一个普通函数，实现每隔0.3秒截图#dr代表核心操作对象#worker_id代表当前进程id，主要是用来在多进程并发时区分不同进程下的截图defshot(d
  • RV1126的RGB数据传输到共享内存 学习嵌入式的小羊~ 算法数据结构
    上图是RV1126后台程序生成RGB数据通过共享内存进行传输的图解，台程RV1126后序(进程一)生成的RGB视频流放入到共享内存,而CGI程序(进程二)通过获取共享内存的RGB数据刷新到网页上面。代码封装#pragmaonce#include#include#include//共享内存五步走//1.创建共享内存//2.链接到内核里面去//3.通信//4.删除链接//5.删除共享内存#define
  • 深入C++编程：从基础到实践 水坑儿
    本文还有配套的精品资源，点击获取简介：C++是一种多范式编程语言，具有高效性、灵活性和广泛的应用范围，适用于系统软件、游戏开发等多个领域。本教程涵盖C++的核心概念，包括基础语法、面向对象编程、封装、继承、多态性、模板、异常处理、STL以及C++11和后续版本的新特性。通过从基础语法到内存管理的详细介绍，引导读者掌握C++编程技能，并通过实践项目和学习最新标准来提升编程水平。1.C++语言概述与历
  • JavaScript 通过逗号将字符串拆分为数组 贾宝玉单臂擒方腊 javascript前端开发语言
    本文展示了如何在JavaScript中通过逗号将字符串拆分为数组。为此，我们可以使用split()方法此方法将指定的String划分为子字符串的有序列表，将这些子字符串保存到一个数组中并返回该数组。它根据separator;划分字符串它可以是singlespace,comma,colon或任何其他模式。这意味着当在提供的字符串中找到split()时，该方法在每个点拆分一个字符串separator，
  • FFmpeg--解码：mp4文件解码为音频aac和视频h264 八月的雨季997 ffmpegaac
    mp4文件解封装：视频文件（mp4）–解封装—音频流（aac），视频流(h264)流程code命令行参数：input.mp4out.h264out.aac#include#include"libavutil/log.h"#include"libavformat/avformat.h"#defineERROR_STRING_SIZE1024#defineADTS_HEADER_LEN7;intadt
  • 从 React 看前端 UI 代码范式革命 哔哩哔哩技术 前端react.jsui
    前言本来打算写的主题是“我为什么讨厌ReactHooksAPI“，展开聊聊“小甜甜”是如何变成“牛夫人”的，没想到越写越严肃：）React是两次前端范式革命的引领者，至今仍有繁荣的社区和旺盛的创造力；React多次天才又激进的创新，一些想法被借鉴改良、一些引发广泛质疑，大部分是被认同和接受的；可以说React以一个框架之力，推动了整个前端领域的发展。范式是一种公认的模型或模式。本文从React出发
  • vue2前端使用图片展现视频,无法销毁请求 贾宝玉单臂擒方腊 前端音视频
    实现思路，使用canvas绘制图像，然后使用动画帧刷新页面exportdefault{props:{info:{type:Object,default:()=>({url:'',index:''}),},},data(){return{currentImage:null,isFullScreen:false,canvas:null,ctx:null,canvasStyle:{height:'100
  • Linux内核调度子系统之big.little架构 Surest linux内核
    1.armbig.little架构 传统的arm多核系统一般都是对称性质的所以可以常见CPU的架构为双核A9四核A7等。随着移动设备高速发展，arm开始推出了非对称式的cpu架构。例如：双核A53和双核A72混合封装到SOC上，这样的形式一般称为big.little架构。第一个在商业上使用这个架构的CPU是三星samsungexynos5410，这款芯片用在了三星SamsungGalaxys4这款
  • 【CTF比赛Web题目快速探测】 D-river securityweb安全安全
    CTF比赛Web题目快速探测一、快速信息收集1.基础信息扫描2.工具自动化辅助二、快速漏洞探测1.高频漏洞靶向测试2.前端相关漏洞三、工具链组合利用1.BurpSuite自动化2.专用工具链3.编码/解码辅助四、常见CTFWeb题快速索引表五、速攻思维导图六、总结在CTF比赛中快速攻克Web题目的核心是“高效信息收集+靶向性漏洞探测”，需结合手动测试与工具链快速定位漏洞类型。以下是一套实战优化流程
  • threejs:射线拾取封装 粉末的沉淀 javascript开发语言前端
    射线拾取封装代码：import*asTHREEfrom'three';//点击事件//1.坐标转化(鼠标单击的屏幕坐标转标准设备坐标)//2.射线计算(通过鼠标单击位置+相机参数计算射线值)//3.射线交叉计算//ObjectsArr是用来做射线拾取的对象数组，一个二维数组exportfunctionrayChoose(event,width,height,camera,ObjectsArr){/
  • 前端vue用jsmind写思维导图 Tan-玛卡巴卡 前端vue.jsjavascript
    1、下载依赖npm安装npminstall--savejsmindyarn安装yarnjsmind版本:"jsmind":"^0.4.6",2、完整代码：查看节点删除节点-->放大缩小展开：主题：名称：{{obj.topic?obj.topic:'-'}}部门：{{obj.orgName?obj.orgName:'-'}}描述：{{obj.jobType?obj.jobType:'-'}}状态：正
  • Android 蓝牙工具类封装：支持经典蓝牙与 BLE，兼容高版本权限 tangweiguo03051987 androidandroidgitee
    为了优化经典蓝牙（ClassicBluetooth）和低功耗蓝牙（BluetoothLowEnergy,BLE）的操作，我们可以将功能封装到一个工具类中，支持扫描、连接、通信，并兼容高版本Android的动态权限申请。以下是完整的工具类实现。工具类功能经典蓝牙：扫描设备。连接设备。发送和接收数据。BLE蓝牙：扫描设备。连接设备。发送和接收数据（通过GATT特征值）。权限管理：动态申请权限（包括AC
  • 使用 Spring Boot 实现前后端分离的海康威视 SDK 视频监控 William Dawson springboot
    使用SpringBoot实现前后端分离的海康威视SDK视频监控系统，可以分为以下几个步骤：1.系统架构设计前端：使用Vue.js、React或Angular等前端框架实现用户界面。后端：使用SpringBoot提供RESTfulAPI，负责与海康威视SDK交互。通信：前后端通过HTTP/WebSocket进行通信。视频流：通过海康威视SDK获取视频流，并使用RTSP/RTMP/HLS等协议推送到前
  • JavaScript逆向爬虫教程-------基础篇之JavaScript混淆原理 zru_9602 热门话题javascript爬虫开发语言
    目录一、常量的混淆原理1.1对象属性的两种访问方式1.2十六进制字符串1.3Unicode字符串1.4字符串的ASCII码混淆1.5字符串常量加密1.6数值常量加密二、增加JS逆向者的工作量2.1数组混淆2.2数组乱序2.3花指令2.4jsfuck三、代码执行流程的防护原理3.1流程平坦化3.2逗号表达式混淆四、其他代码防护方案4.1eval加密4.2内存爆破4.3检测代码是否格式化一、常量的混淆
  • npm 常用指令指南 风干牛肉巴旦木 npm
    以下是一些常用的NPM（NodePackageManager）指令，它们在前端开发中非常实用：#NPM常用指令大全##包管理###安装依赖​```bashnpminstall安装package.json中列出的所有依赖。安装开发依赖npminstall--save-dev安装并添加到devDependencies。安装特定版本的包npminstall@安装指定版本的包。全局安装包npminstal
  • Javascript监听回车键和取消回车键提交 思想永无止境 Web前端javascript回车键回车事件
    添加回车事件：document.onkeydown=function(event){vare=event||window.event||arguments.callee.caller.arguments[0];if(e&&e.keyCode==13){$("save_btn").click();}};取消回车键提交
  • 使用setimmediate实现可伸缩执行的脚本 load_life html5javascript浏览器functionchromeperformanceie
    看过我对JavaScript性能优化相关的讨论的同学们一定很了解我的一个癖好，就是将一大段的script分解成多个块来执行。通过使用setTimeout()，你可以去改变特定代码执行的时间，从而做到让UI现场执行已经在队列里的任务。比如，你可以通过这样的方式把要执行的代码在50ms后加到UI线程队列里：setTimeout(function(){//dosomething},50)那么，在50ms
  • 工程化与框架系列（22）--前端性能优化（中） 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端性能优化状态模式
    前端性能优化（运行）引言运行时性能直接影响用户交互体验和应用流畅度。本文将深入探讨前端运行时性能优化的各种策略和技术，包括渲染优化、内存管理、计算优化等关键主题，帮助开发者构建高性能的Web应用。运行时性能概述运行时性能优化主要关注以下方面：渲染性能：减少重排重绘，优化动画效果内存管理：防止内存泄漏，优化内存使用计算优化：提升JavaScript执行效率事件处理：优化事件监听和响应异步操作：合理使
  • Vue.js 开发入门指南 2401_89793006 热门话题vue.jsflutter前端
    Vue.js开发入门指南Vue.js是一款流行的前端框架，它轻量、高效且易于上手，非常适合构建交互式Web应用。本文将介绍Vue.js的基础概念，并带你实现一个简单的Vue应用。1.Vue.js简介Vue.js是一个渐进式JavaScript框架，核心库专注于视图层，并且易于与其他库或现有项目集成。它的主要特点包括：双向数据绑定：数据和视图保持同步。组件化开发：方便代码复用，提高开发效率。虚拟DO
  • npm、Yarn 与 pnpm：选择最适合你的包管理工具 奶凶的小熊崽 前端npmnpm前端node.js
    在前端项目中，npm、pnpm和yarn都是包管理工具，主要用于管理JavaScript依赖。它们的核心功能类似，但在性能、依赖管理方式、磁盘空间占用等方面有所不同。以下是它们的详细对比，以及在项目中的选择建议。一、三者的基本介绍1️⃣npm（NodePackageManager）官方默认包管理器，随Node.js一起安装（无需额外安装）。版本：npmv1-v4（较早版本）：安装速度较慢，存在幽灵
  • VSCode 配置优化指南：打造高效的 uni-app、Vue2/3、JS/TS 开发环境 奶凶的小熊崽 vscodevscodeuni-appjavascripttypescriptvue
    VSCode配置优化指南，适用于uni-app、Vue2、Vue3、JavaScript、TypeScript开发，包括插件推荐、设置优化、代码片段、调试配置等，确保你的开发体验更加流畅高效。1.安装VSCode如果你还未安装VSCode，可前往VSCode官网下载最新版并安装。2.安装推荐插件(1)Vue相关插件✅VueLanguageFeatures(Volar)（Vue3推荐）✅Vetur（
  • 深入解析 Vue3 核心架构与实战范式：从响应式原理到 Composition API 设计哲学 嘉图明 架构前端框架
    引言：框架演进的必然选择在2020年发布的Vue3并非简单的版本迭代，而是对前端工程化痛点的系统性解决方案。本文将深入剖析其架构设计，结合TypeScript类型系统和ChromeDevTools性能分析工具，揭示Vue3如何通过底层重构实现开发体验与运行效率的双重突破。一、响应式系统的量子跃迁：Proxy的颠覆性设计1.1从Object.defineProperty到Proxy的范式转移//Vu
  • FFMpeg av_packet_ref 引起软件crash问题 ihmhm12345 ffmpeg
    av_packet_ref引起软件crash问题ffmpeg在多线程编程中,相信大家必然会用到av_packet_ref来解决大量复制内存的问题,这里有个坑,多线程中,每个线程应该去管理自己的AVPacket,不要跨线程管理/释放AVPacket…如果有遇到类似问题的,希望能解决大家的疑惑我项目中的做法:解封装线程取出AVPacket发送到解码线程同时也发送到录像线程我之前的做法是解码线程使用解封
  • JavaScript ES6 - 函数扩展 黑木令 ES6语法解析JavaScriptjavascript前端es6开发语言
    本章节的主要内容是:ES6函数扩展一:函数扩展1.函数新增特性:1.参数默认值2.rest参数3.扩展运算符4.箭头函数5.this绑定6.尾调用如图所示:1.ES6函数参数默认值/**1.函数参数默认值1.ES6设置默认值,直接写在参数定义的后面。2.细节知识点:1.ES6参数变量是默认声明的,所以在函数体中不能用let/const再次声明,否则会报错。2.ES6默认值不是传值,而是每次都重新计
  • 【前端知识】Web Components开发框架quarkC介绍 问道飞鱼 前端开发技术前端javascript开发语言webcomponents
    文章目录概述**QuarkC简介****核心特性****QuarkC的使用方法****1.安装QuarkC****2.创建一个简单的QuarkC组件****3.使用组件****QuarkC的优势****1.更低的学习成本****2.更好的开发体验****3.跨框架兼容性****4.性能优化****5.社区支持与生态****6.开放性和灵活性****QuarkC的适用场景****总结**构建复杂We
  • 开发PDF转Word软件 shuaige_shiwoa DeepSeek专栏pdfwordpythonbashdocker
    开发PDF转Word软件可以遵循以下步骤进行快速实现，以下是分阶段技术方案：一、核心技术选型PDF解析库（快速读取内容）PyMuPDF(fitz)：Python库，提取文本/图片/元数据速度最快（性能比pdfplumber高10倍）pdf2docx：专用于PDF转Word的Python库（基于PyMuPDF封装，支持表格和样式保留）OCR引擎（应对扫描件PDF）Tesseract-OCR+pyte
  • hasOwnProperty是什么？【JavaScript方法】 幸运小圣 JavaScriptjavascript开发语言
    hasOwnPropertyhasOwnProperty是什么？用于判断一个对象是否包含特定的自身属性。它只会返回对象自身具有的属性，而不会返回从原型链上继承的属性。obj.hasOwnProperty(prop)obj是需要检查的对象。prop是需要检查是否存在的属性名（字符串）。返回值:如果对象obj具有名为prop的自身属性，则返回true。否则返回false。constobj={name:
  • 容器云服务是什么？
    容器云是一种以容器技术为核心的云计算服务形态，其核心目标是通过标准化封装应用及其依赖环境，实现跨平台快速部署和高效管理。容器技术将应用程序与所需的运行库、配置等资源打包为轻量化的独立单元（容器），确保应用在不同计算环境中保持行为一致性。容器云与传统云计算依赖虚拟机技术不同，虚拟机需要为每个应用创建独立的操作系统环境，资源消耗较大且启动较慢，而容器云共享宿主机操作系统内核，资源占用更少、启动速度更快
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他