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

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,封装)

  • ASP.NET Core通过Websocket建立简单聊天室
    什么是websocket？传统的HTTP协议是一个请求-响应协议，也即是由浏览器主动向服务器发起请求，随后服务器才能进行响应这个请求，再把数据发送给浏览器。也就是说，浏览器不主动发起请求，服务器是不能主动发送数据给浏览器的，很明显，这并不能满足实时聊天的需求。满足这个需求的解法总体来说有三种：轮询、长连接、Comet轮询：轮询是指浏览器通过JavaScript启动一个定时器，然后以固定的间隔给服务
  • 【C#程序设计】教学讲义——第二章：简单C#程序设计 刘一哥GIS 《GIS程序设计》C#程序设计谭浩强面向对象类
    教学目录2.1面向对象的概念2.2建立简单的应用程序2.3窗体和Label控件2.4文本框-属性2.5按钮控件本章小结2.1面向对象的概念2.1.1对象和类1.对象对象是客观世界中对象的模型化。对象是有着特殊数据（属性）与操作（行为）的实体，对象的操作（行为）称为方法。程序中的对象是模型化了的客观世界的对象，它是代码和数据的封装体，用数据表示属性，用代码（过程或函数）表示方法。一个程序对象的属性用
  • JAVA springboot Access-Control-Allow-Origin 墨着染霜华 javaspringbootspring
    response.setHeader("Access-Control-Allow-Origin","https:/your-domain.com");意思是：只有来自https:/your-domain.com的前端页面（即请求的来源Origin是这个域名），才能通过浏览器发起跨域请求访问这个接口区分大小写&完全匹配这个设置是完全匹配的，也就是说：https://epos.whbswdt.com
  • Java web%10 好学且牛逼的马 java前端AI编程
    %10新路线Javawebai笔记阶段时长内容Web前端基础2天HTML、CSS、JS、Vue3、AjaxWeb后端基础4天Maven、HTTP协议、SpringIOC、DI、MySQL、JDBC、MybatisWeb后端实战6天Tlias案例（基于案例讲解web开发的核心知识）Web后端进阶2天SpringAOP、SpringBoot原理、自定义Starter、Maven高级前端web实战4天V
  • JavaScript 数组操作大全 csdn_HPL JavaScriptjavascript前端开发语言
    JavaScript提供了丰富的数组操作方法，可以分为以下几类：创建数组//字面量方式constarr1=[1,2,3];//构造函数方式constarr2=newArray(1,2,3);//创建指定长度的空数组constarr3=newArray(5);//创建长度为5的空数组//Array.of()-解决构造函数参数歧义问题constarr4=Array.of(5);//[5],而不是长度为
  • 浅谈Qt和C++的关系 Terrarily qt5qtc++
    Qt和C++Qt是QML和JavaScript的C++扩展功能工具包，并且Qt是由C++开发的，所以C++贯穿了整个Qt的项目。我会着重从c++的角度来介绍Qt。从C++的角度分析Qt，然后你会发现Qt通过内省数据的机制实现了许多现代语言的特性。这个是通过Qt的基础类QObject来实现的。Qt使用源对象信息实现了信号和槽的回调绑定。每个信号都能绑定任意数量的槽函数或者其他的信号。当一个信号弄一个
  • C++学习笔记.2 Lowjin_ C++c++学习笔记
    类和对象封装语法：class关键字{访问权限属性行为}#includeusingnamespacestd;constdoublepi=3.14;//设计一个圆类classcircle{//访问权限//公共权限public://属性intr;//行为doublec(){return2*pi*r;}};intmain(){//通过圆类创建具体的圆（对象）circlec1;c1.r=10;cout#in
  • 鸿蒙关系型数据库实战：高效数据存储与管理 数据库harmonyos
    在鸿蒙应用开发中，关系型数据库（RDB）是结构化数据存储的核心方案。通过深度实践，其基于SQLite的轻量级实现不仅性能出色，更提供了强大的事务支持和类型安全。以下是关键经验总结：三大核心优势：SQL兼容：完整支持SQL92标准语法线程安全：内置多线程读写锁机制加密存储：支持AES-256加密敏感数据关系型数据库实战封装及使用：在Utils目录下新建一个RdbUtils文件//./src/main
  • Maven Javadoc 插件使用详解 BillKu mavenchromejava
    MavenJavadoc插件使用详解maven-javadoc-plugin是Maven项目中用于生成JavaAPI文档的标准插件，它封装了JDK的javadoc工具，提供了更便捷的配置和集成方式。一、基本使用1.快速生成Javadoc在项目根目录执行以下命令：bash复制下载mvnjavadoc:javadoc生成的文档位于：target/site/apidocs/index.html2.完整生
  • 【Golang】用gorm实现分页的功能 在成都搬砖的鸭鸭 Golanggolang开发语言后端1024程序员节
    目录1、背景2、go库下载3、初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体定义【3】封装分页方法【4】封装获取数据库连接方法【5】查询列表接口【6】启动http服务【7】调用获取列表接口5、总结1、背景在提供列表接口时一般要用到分页，对于存储在某些数据库中的数据进行分页起来非常的方便，下文给出一个通过gorm进行分页并通过http返回数据的例
  • ts学习笔记 瑾清在努力 学习笔记javascripttypescript
    1.介绍ts是js的超集，他融合了其他语言的优势，将js带到了一个新的高度js,es,ts的关系：ECMAScript是JavaScript的标准，TypeScript是JavaScript的超集2.为什么使用ts？1.发现问题js---运行后报错ts---运行之前可检查出错误（静态类型检查）2.非异常故障错别字，未调用函数，基本逻辑错误constuser={name:'小明'，age:26}us
  • （转载）20个JavaScript重点知识点（11）this机制 lzhdim javascript前端vue.js开发语言ecmascript
    this是JavaScript中最容易让人困惑的概念之一。它的指向取决于函数的调用方式而非定义位置，且在不同场景下表现不同。一、this的本质this是一个动态绑定的执行上下文对象，指向当前函数运行时的“所有者”。它的值在函数被调用时确定，而非定义时。理解this的关键在于分析函数是如何被调用的。二、绑定规则1.默认绑定(独立函数调用)当函数作为独立函数调用时(非方法、构造函数等)，非严格模式下t
  • 解密TCP/IP模型：网络通信的全景指南 Honey\ 服务器网络运维信息与通信网络协议tcp/ip智能路由器
    一、网络参考模型OSI参考模型TCP/IP参考模型应用层（数据）：为应用程序提供网络服务传输层（段）：建立端到端的连接网络层（包）：IP寻址和路由选择数据链路层（帧）：将数据封装成帧，提供点到点、点到多点的连接物理层（比特）：定义接口规格上层依赖下层提供服务。对等通信：发送方通过哪一层什么协议发送的数据报文，接收方也同样再哪一层及协议处理数据报文。二、TCP/IP每一层详解（1）应用层作用：为应用
  • JS学习日记（jQuery库） 红中马喽 javascript学习jquery笔记开发语言
    前言今天先更新jQuery库的介绍，它是一个用来帮助快速开发的工具介绍jQuery是一个快速，小型且功能丰富的JavaScript库，jQuery设计宗旨是“writeless，domore”，即倡导写更少的代码，做更多的事，它封装JavaScript常用的功能代码，提供一种简便的方式进行使用，大大提高了开发效率，jQuery目前支持的浏览器包括Chrome，edge，firefox，ie9+,S
  • DAO模式 红中马喽 java数据库开发语言笔记学习后端设计模式
    前言DAO（DataAccessObject）模式是一种常用的设计模式，主要用于将数据访问逻辑与业务逻辑分离。它提供了一种抽象层，使得应用程序可以与不同的数据源（如数据库、文件系统等）进行交互，而无需了解底层数据存储的细节。DAO模式的核心思想是将数据访问操作封装在独立的类中，从而提高代码的可维护性、可扩展性和可重用性。如何使用DAO模式1.首先导入这个包（有需要的可以私聊我）然后添加配置文件，为
  • Flutter (Retrofit + Dio) - 3 - Retrofit方式使用dio 梨花炖海棠 flutterflutter
    建议先将Flutter官方文档过一遍，本系列教程FlutterSDK>=3.10.0考虑篇幅长度，这里将分成几片文章创建实体类封装dioRetrofit方式使用dio一、创建基础请求APIlib/api/douyin.dartimport'package:dio/dio.dart';import'package:lhdht_flutter_app/model/request/douyin_user
  • Flutter 中封装 Dio 网络请求的详细步骤 Larry_zhang双栖 flutter
    在Flutter中，通过封装Dio网络请求，可以将请求、响应处理和错误处理的逻辑集中在一起，减少代码重复并提升代码的可维护性。我们将在RequestClient类中创建一个通用的请求方法，支持GET和POST请求，并结合EasyLoading和Lottie动画，实现更好的用户体验。步骤1：创建RequestConfig基础配置类首先定义请求的基本配置。RequestConfig类负责存放API的b
  • Flutter-Dio二次封装 2401_89733773 flutterwindows
    //data值需要经过工厂转换为我们传进来的类型data:EntityFactory.generateOBJ(json[“data”]),);}}BaseListEntity：classBaseListEntity{intcode;Stringmessage;Listdata;BaseListEntity({this.code,this.message,this.data});factoryBas
  • 使用 TinyVue 组件库搭建前端项目的实操体验 Echo_Wish 前端前端
    引言在本次活动中，我选择了使用OpenTiny提供的TinyVue组件库来搭建一个前端项目。通过这次实践，我不仅深入了解了TinyVue组件库的核心优势，还体验到了其在跨框架、跨版本开发中的便捷性。本文将分享我的实操过程和使用感受。项目搭建过程环境准备首先，我按照官方文档的指引，完成了开发环境的准备工作。包括安装Node.js、VueCLI以及TinyVue组件库。#安装VueCLInpminst
  • 直播分享|TinyVue 组件库主题适配原理与实战 OpenTiny社区 Vue.js前端开源OpenTinyVue
    在前端开发过程中，不同的项目可能需要不同的设计风格。而了解组件库的主题适配功能，也可以帮助开发者轻松定制独特的主题风格，从而满足各种设计需求。因此6月27日晚19点，体验技术团队TinyVue项目成员岑灌铭老师将为大家带来以《TinyVue组件库主题适配原理与实战》为主题的分享，届时将与大家共同探讨主题适配的内容概述及方案详解。直播详情直播主题TinyVue组件库主题适配原理与实战直播亮点一、主题
  • 设计一个监控摄像头物联网IOT（webRTC、音视频、文件存储） Amarantine、沐风倩✨ 物联网IOT物联网javahtml5webrtc音视频视频编解码七牛云存储
    前言：设计一个完整的监控摄像头物联网IoT平台涉及视频直播和点播、WebRTC和文件存储模块，可以分为以下几个主要部分：摄像头设备、服务端处理、Web前端、视频流存储和回放。以下是结合这些技术的一个具体完整流程设计，涵盖了各个组件的相互关系、数据流动及关键技术点。1.系统组成监控摄像头：摄像头设备负责采集实时视频流并进行编码（如H.264或VP8）。Java服务端：服务端基于SpringBoot等
  • 鸿蒙开发之埋点方案：高效追踪用户行为 niu某某 移动开发鸿蒙开发HarmonyOSharmonyos鸿蒙开发移动开发组件化模块化ArkUI
    往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）✒️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✒️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✒️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✒️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✒️记录一场鸿蒙开发岗位面试经历~✒️持续更新中……概述埋点是指将信息采集程序和原本的功能代码结合起来，针对特定用户行为收集、处理和发送一些
  • Spring Boot 项目分层架构详解 damnItHUA 后端springboot架构后端
    在现代SpringBoot项目中，Controller、Service、Mapper和Entity四层架构能够有效提升代码可维护性、可测试性与团队协作效率。下面以“商品管理（Product）”为例，系统梳理这四层的职责分工与协作关系。一、Controller层作为Springboot应用程序的入口点，Controller层主要负责接收来自前端或其他系统的HTTP请求，校验输入参数，将业务委托给Se
  • Google Guava Cache高效本地缓存 boonya 架构师Guava高效缓存策略
    目录GuavaCache使用需求和场景需求场景缓存设置缓存的并发级别缓存的初始容量设置设置最大存储缓存清除策略基于存活时间的清除策略基于容量的清除策略基于权重的清除策略显式清除基于引用的清除策略数据内存加载CacheLoadingCacheGuavaCache使用需求和场景GuavaCache是GoogleFuava中的一个内存缓存模块，用于将数据缓存到JVM内存中。需求提供了get、put封装操
  • 使用CSS @layer控制样式优先级的新方式 海派程序猿 css前端
    CSS@layer：拯救你的样式优先级，告别“!important”的焦虑各位前端同僚们，你们有没有经历过这样的噩梦？深夜，正当你准备结束一天的工作，舒舒服服地躺在床上刷手机时，测试突然甩来一个bug：一个看起来简单的样式问题，却怎么改都改不过来！你瞪大了眼睛，一行一行地检查CSS，发现优先级简直乱成了一锅粥。仿佛无数个小恶魔在你代码里跳舞，疯狂地嘲笑你的努力。最后，你无奈地祭出了“!import
  • 从台式电脑硬件架构看前后端分离开发模式 程序猿全栈の董 电脑硬件架构状态模式
    在软件开发领域，前后端分离早已成为主流架构设计理念。它将系统的业务逻辑处理与用户界面展示解耦，提升开发效率与系统可维护性。有趣的是，我们日常生活中常见的台式电脑硬件架构，竟与这一理念有着异曲同工之妙。今天，就让我们从台式电脑的硬件组成出发，深入探讨其与前后端分离开发模式的内在联系。文章目录一、台式电脑硬件架构与前后端的类比1.1主机：后端的硬件化身1.2显示屏：前端的硬件呈现二、二者分离模式的共同
  • 前端 E2E 测试实践：打造稳定 Web 应用的利器！ 朱公子的Note 编程语言前端端到端E2E测试
    在现代Web开发中，端到端（E2E）测试就像为应用程序配备了一面“照妖镜”，它模拟真实用户的操作流程，从用户点击到获得反馈的每一步都进行验证。想象一下，你刚刚完成了一个完美的登录功能，结果用户反馈“点了登录按钮没有反应”——这种“我以为OK其实不行”的问题，正是E2E测试要解决的。E2E测试并不止于前端界面，它涵盖了前端、后端及数据库等所有环节，确保每个节点都能正常工作。历史经验也提醒我们其重要性
  • 微信小程序 实现导航守卫 麦兜的明天 前端小程序
    小程序中是不支持路由拦截的，需要开发者自行封装路由拦截的功能，实践有许多的实现思路，下面我采用的是封装组件的方式实现。比方说一个小程序项目只有一两个页面是不需要登录就可以访问的，其他页面都是需要登录之后才能访问的，那我就用封装一些逻辑来检测用户是否是登录状态，如果不是则重定向到登录页，等用户完成登录后再跳转到用户本来要访问的页面。主要实现原理：通过本地存储的token来判断用户的登录状态，在小程序
  • 钉钉小程序开发的技术选型 脑袋大大的 钉钉生态创业者专栏钉钉小程序
    作为一名专注于前端技术发展的技术博主，今天我将分享一下在进行钉钉小程序开发时关于技术选型的一些思考和经验。本文旨在探讨uni-app、Taro等跨平台框架与原生开发框架之间的优缺点，并最终推荐一个我认为最适合当前需求的技术栈组合。着急想知道答案的可以直接滑到最后看小编觉得好的解决方案吧！多端开发框架vs原生开发框架uni-appuni-app是一个基于Vue.js的跨平台开发框架，它允许开发者通过
  • 钉钉小程序开发实战：打造一个简约风格的登录页面 脑袋大大的 钉钉生态创业者专栏钉钉小程序
    在上一篇文章中，我们已经介绍了如何搭建钉钉小程序的基础环境，并完成了项目的初始化配置。本文将继续深入，手把手带你实现一个简约风格的登录页面，这是大多数企业级应用不可或缺的一部分。钉钉小程序基于前端Web技术栈，采用类似于Vue的模板语法和组件化结构，非常适合快速构建轻量级企业内部应用。登录页虽然看似简单，但却是用户与系统交互的第一步，良好的体验和简洁的设计往往能给用户留下深刻印象。本章节直接上干货
  • 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其他