范特西是只猫
范特西是只猫

007：vue实现与iframe实现页面数据通信

首页先搭建一个html页面和vue页面，在vue页面中，嵌入我们需要的iframe页面

文章目录

  • 1. 搭建 html 页面和 vue 页面
  • 2. 实现 `iframe` 向 `vue` 页面通信
  • 3. 在实现 `vue` 向 `iframe` 页面通信

1. 搭建 html 页面和 vue 页面

暂定为 iframeDemo.html 和 vueDemo.vue 页面
007：vue实现与iframe实现页面数据通信_第1张图片

  1. 编写 iframeDemo.html 页面（完整代码）
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .box {
            width: 100%;
            height: 200px;
            border: 2px solid #000;
            box-sizing: border-box;
        }
    style>
head>

<body>
    <div class="box">
        <button id="sendBtn">我是iframe页面按钮button>
    div>
body>

html>

<script type="text/javascript">
    // iframe页面点击发送按钮，传递事件给vue
    document.getElementById("sendBtn").addEventListener("click", () => {
        window.parent.postMessage({
            data: {
                code: "success",
                test: "我是点击iframe页面按钮后过来的数据"
            }
        }, '*');
    });

    // 监听vue页面传来的message事件
    window.addEventListener("message", (event) => {
        const data = event.data
        if (data.code === 'success') {
          alert(data.test)
        }
    }, false);
script>
  1. 编写 vueDemo.vue 页面（完整代码），嵌入 iframeDemo.html 在实现两个页面的互相数据通信
<template>
  <div class="home">
    <div class="body">
      <iframe src="/iframeDemo.html" ref="iframe" frameborder="0" width="100%" height="4  00px" />
      <el-button @click="btnClick">我是vue页面按钮el-button>
    div>
  div>
template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      // 给iframe发送事件
      btnClick() {
        this.iframeWin.postMessage(
          {
            code: 'success',
            test: '我是点击vue页面按钮后过来的数据!',
          },
          '*'
        )
      },
    },
    mounted() {
      // 监听iframe页面点击按钮触发事件
      window.addEventListener('message', (event) => {
        const data = event.data.data
        if (data.code === 'success') {
          alert(data.test)
        }
      })
      this.iframeWin = this.$refs.iframe.contentWindow
    },
  }
script>

<style scoped lang="scss">
  .home {
    .body {
      width: 890px;
      height: 100%;
      border: #ff3366 solid 10px;
      box-sizing: border-box;
      box-sizing: border-box;
      padding: 20px;
    }
  }
style>

2. 实现 iframe 向 vue 页面通信

  1. 点击iframe页面，通过 window.parent.postMessage 传递数据到vue页面
  2. vue页面，通过 window.addEventListener('message') 去接收iframe传递过来的数据
  1. 实现效果如下（点击iframe页面的按钮事件，在vue页面中监听并弹窗提示）

007：vue实现与iframe实现页面数据通信_第2张图片

  1. 在 iframeDemo.html 中新建按钮的点击事件
<button id="sendBtn">我是iframe页面按钮button>

<script type="text/javascript">
     // iframe页面点击发送按钮，传递事件给vue
     document.getElementById("sendBtn").addEventListener("click", ()=> {
        window.parent.postMessage({
            data: {
            code:"success",
            test:"我是点击iframe页面按钮后过来的数据"
            }
        }, '*');
    });
</script>
  1. 在 vueDemo.vue 页面的 mounted 中监听iframe页面传过来的 message 事件
mounted() {
  // 监听iframe页面点击按钮触发事件
  window.addEventListener('message', (event) => {
    const data = event.data.data
    if (data.code === 'success') {
      alert(data.test)
    }
  })
},

3. 在实现 vue 向 iframe 页面通信

  1. 点击vue页面，通过 postMessage 传递数据到iframe页面
  2. iframe页面，通过 window.addEventListener('message') 去接收vue传递过来的数据
  1. 实现效果如下（点击vue页面的按钮事件，在iframe页面中监听并弹窗提示）

007：vue实现与iframe实现页面数据通信_第3张图片

  1. 在 vueDemo.html 中新建按钮的点击事件
<el-button @click="btnClick">我是vue页面按钮el-button>

methods: {
  // vue页面点击发送按钮，传递事件给vue
  btnClick() {
    this.iframeWin.postMessage(
      {
        code: 'success',
        test: '我是点击vue页面按钮后过来的数据',
      },
      '*'
    )
  },
},
  1. 在 iframeDemo.vue 页面的 mounted 中监听iframe页面传过来的 message 事件
// 监听vue页面传来的message事件
window.addEventListener("message", (event) => {
    const data = event.data
    if (data.code === 'success') {
      alert(data.test)
    }
}, false);

你可能感兴趣的:(#,vue2/vue3,常用示例专栏,vue.js,javascript,前端,iframe,数据通信)

  • Python中的深拷贝详解 嵌入式之禅 pythonwindows服务器Python
    深拷贝是Python中一个重要的概念，它用于创建一个对象的完全独立副本，包括所有嵌套对象和其内容。在本文中，我们将详细介绍深拷贝的概念、用法和实际示例。在Python中，深拷贝是通过copy模块中的deepcopy函数实现的。该函数可以创建一个与原始对象完全独立的副本，其中包含所有嵌套对象及其内容。与深拷贝相对的是浅拷贝，浅拷贝只复制对象的引用，而不是对象本身。下面是一个简单的示例，演示了深拷贝和
  • Python淘宝电脑销售数据爬虫可视化分析大屏全屏系统 开题报告 字节全栈_Jwy python爬虫flutter
    博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD
  • 重磅|粉丝福利|专栏1.8|配电网|分布式能源的选址与定容系列 Ps.729 分布式能源
    在苍穹之下飘逸时间的纺织机编织一年的篇章晨曦拂面，鸟语花香迎接黎明的曙光繁星坠落，夜色绵长盛装星空的宁静岁月如歌，时光飞逝2024留下足迹，2025将开启新篇章让我们心怀希望，展开美丽的画卷2025年，愿我们梦想绽放，心灵自由舒展以下全部资源文章末尾下载专栏1.8配电网、分布式能源的选址与定容系列【遗传算法、粒子群、改进遗传算法】基于智能算法的电力系统电网最优规划方案的研究（Matlab代码实现）
  • 常用的数据可视化工具 python游乐园 可视化信息可视化
    商业智能（BI）工具Tableau：全球知名度很高的数据可视化工具。操作界面简洁易懂，支持多人协作。可以通过软件、网页、移动设备随时浏览已生成的图表。能够连接30多个数据源类型，混合数据源，还支持与R集成。PowerBI：由微软开发，可很好地集成微软的Office办公软件。支持自由导入多种数据，如文件、文件夹和数据库。有免费的基本版本，提供软件、网页、手机应用等多种查看数据的方式，具有实时馈送数据
  • formValidator3.5：高效表单验证插件的使用指南 BOBO爱吃菠萝
    本文还有配套的精品资源，点击获取简介：formValidator3.5是由猫冬开发的表单验证插件，它简化了表单数据验证流程，确保了数据的有效性和安全性，同时提升了用户体验。文章将全面介绍该插件的核心特性、使用方法、API文档、示例应用以及如何集成到ASP.NETWeb应用程序中。formValidator3.5提供的灵活性、易用性、丰富的验证规则、自定义错误提示和事件处理，使得开发者可以轻松应对各
  • 前端必知必会-Vue 指令 编程岁月 前端必知必会vue.js前端javascript
    文章目录Vue指令不同的Vue指令总结Vue指令Vue指令是带有v-的特殊HTML属性，可以为HTML标记提供额外的功能。Vue指令连接到Vue实例以创建动态和响应式用户界面。使用Vue，与传统的JavaScript方法相比，创建响应式页面要轻松精简，而且所需的代码很少。不同的Vue指令指令详细信息v-bind将HTML标记中的属性连接到Vue实例内的数据变量。v-if根据条件创建HTML标记。指
  • 剖根问底：Java 不能实现真正泛型的原因是什么？ 沉默王二 Java进阶之路Java程序员进阶之路java编程语言
    大家好，我是二哥呀！今天我来给大家讲一下，Java不能实现真正泛型的原因是什么？本文已同步至GitHub《教妹学Java》专栏，风趣幽默，通俗易懂，对Java初学者亲切友善，么么哒，内容包括Java语法、Java集合框架、Java并发编程、Java虚拟机等核心知识点，欢迎star。GitHub开源地址：https://github.com/itwanger/jmx-javaCodeChina：ht
  • DynamicPlanning动态规划学习笔记 kxwsspz2001 笔记动态规划算法
    动态规划动态规划的特点是求解决策过程最优化的过程。适用于求解将过程分成若干个互相联系的阶段，在它的每一阶段都需要作出决策，从而使整个过程达到最好的活动效果。各阶段决策依赖于当前面临的状态，又影响以后的发展。当各个阶段决策确定后，就组成一个决策序列。我们可以从决策序列中找到最优解LeetCode53给定一个整数数组nums，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。示例
  • 深入剖析多叉树、红黑树与 B + 树：数据结构的异同与应用场景 109702008 人工智能编程数据结构算法人工智能
    在计算机科学领域，数据结构是组织、存储和管理数据的重要工具，直接影响着算法的效率和系统的性能。多叉树、红黑树和B+树作为常用的数据结构，在不同的应用场景中发挥着关键作用。理解它们的特点、优势和适用场景，对于开发者设计高效的算法和系统至关重要。一、多叉树：灵活的层次结构表示多叉树是一种每个节点可以拥有多个子节点的树形数据结构，是树结构的一种广义形式。它的节点度数（子节点数量）没有严格限制，这种灵活性
  • 重磅|粉丝福利|专栏1.5| 状态估计|非侵入式负荷系列 稷下科研社 matlab
    在苍穹之下飘逸时间的纺织机编织一年的篇章晨曦拂面，鸟语花香迎接黎明的曙光繁星坠落，夜色绵长盛装星空的宁静岁月如歌，时光飞逝2024留下足迹，2025将开启新篇章让我们心怀希望，展开美丽的画卷2025年，愿我们梦想绽放，心灵自由舒展所有资源文章末尾下载专栏1.5状态估计、非侵入式负荷系列【状态估计】基于随机方法优化PMU优化配置（Matlab代码实现）【状态估计】基于PMU的多回路配电系统状态估计（
  • 更改mac图标适配Mac Big Sur圆角图标 潇洒哥GG Macmacos经验分享
    更改mac图标适配MacBigSur圆角图标1.安装脚本2.脚本已经下载好了，怎么运行将图标转换成圆角呢？3.如果替换的图标不理想，怎么办？4.如果觉得替换的图标不好看，想还原回去怎么办？5.`iconsur`的基本使用就说到这儿吧，下面列出一些常用的初衷：自从mac更新到MacBigSur之后，图标开始有了圆角，为了让所有的app看着能和谐一下，找到了一个自动将app变为圆角的脚本1.安装脚本安
  • 题目：利用条件运算符的嵌套来完成此题：学习成绩〉=90分的同学用A表示，60-89分之间的用B表示， 60分以下的用C表示。 晚夜微雨问海棠呀 算法数据结构
    要使用条件运算符（三元运算符）来完成这个题目，可以按照以下步骤进行：使用嵌套的条件运算符来判断成绩范围。根据成绩范围输出相应的等级。以下是一个用C++实现的示例代码：#includechargetGrade(intscore){return(score>=90)?'A':(score>=60)?'B':'C';}intmain(){intscore;std::cout>score;chargrad
  • 代码审计学习路线 白帽子技术分享 python网络安全代码审计
    学习代码审计分以下四部分一.编程语言1.前端语言html/javascript/dom元素使用，主要是为了挖掘xss漏洞，jquery主要写一些涉及到CSRF脚本使用的或者DOM型XSS，JSON劫持等2.后端语言基础语法要知道，例如变量类型,常量,数组(python是列表,元组,字典)，对象,类的调用,引用等，MVC设计模式要清楚,因为大部分目标程序都是基于MVC写的，包括不限于php，pyth
  • 安全见闻（3） Bulestar_xx 泷羽sec学习笔记安全网络windows
    摘要脚本程序主要讨论的是安全性问题。脚本语言因其源代码可见、可复制性高而具有脚本性质。常见的脚本语言包括：-Lua-PHP-Go-Python-JavaScript脚本语言可以编写病毒和木马，例如Python可以编写木马，PHP可以编写一句话木马。编写脚本病毒需要了解脚本语言基础和病毒构成。宏病毒（macro）可以通过工具如metasploit生成，并植入Office文件中，如Word和PPT。宏
  • 用Python写一个ai agent采集，分析，预测工厂生产计划 朗韶智光 python人工智能
    为了实现一个AI代理，我们需要使用Python的一些库，如pandas，numpy和scikit-learn。以下是一个简化的工厂生产计划采集、分析和预测的示例。首先，我们需要安装所需的库：```bashpipinstallpandasnumpyscikit-learn```然后，我们可以编写一个简单的AI代理，如下所示：```pythonimportpandasaspdimportnumpyas
  • 七种实现左侧固定，右侧自适应两栏布局的方法 css
    总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。关于最终的效果，可以查看这里常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是，利用CSS中的新
  • 刷题前必学！时间复杂度和空间复杂度！用JavaScript学数据结构与算法
    ‍JavaScript算法与数据结构-HowieCong务必要熟悉JavaScript使用再来学！一、时间复杂度（1）下面代码，一共执行了几次？functiontraverse(arr){//最没有悬念的是函数里面的第一行代码，只会被执行1次varlen=arr.length//1.i的初始化语句，只有一次，只会被执行1次//2.iO(n)=1T(n)=3n^2+5n+3=>O(n)=n^2（4）
  • 前端——vue代码结构 Alisazxy 前端
    默认代码结构README.md---项目说明文件package.json---定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。package-lock.json---会自动为npm修改node_modules树或任何操作而生成package.jsonLICENSE---开源协议index.html---项目默认首页模板.postcssrc.js---是对pos
  • 简述Apache Airflow：分布式工作流调度与管理利器 心上之秋 apache分布式
    目录什么是ApacheAirflow?核心概念与架构DAGOperatorsTasksExecutorsAirflow的安装与配置环境要求安装步骤Airflow示例项目简单任务调度使用PythonOperator实现数据处理任务集成外部工具：MySQL和S3Airflow的高级功能自定义Operators使用Sensors实现动态依赖分布式调度Airflow的优缺点总结什么是ApacheAirfl
  • 使用支持向量机（SVM）进行股票市场预测 m0_57781768 支持向量机算法机器学习
    使用支持向量机（SVM）进行股票市场预测引言股票市场预测是金融领域的一个热门话题，也是一个充满挑战的研究领域。通过准确的市场预测，投资者可以做出更明智的决策，从而获得更高的回报。支持向量机（SVM）作为一种强大的机器学习算法，已被广泛应用于各种分类和回归问题。本文将详细介绍如何使用C++和支持向量机进行股票市场预测，并提供完整的代码示例。支持向量机简介支持向量机（SVM）是一种监督学习算法，最初用
  • 【Java】已解决java.lang.ClassNotFoundException异常 屿小夏 java开发语言
    个人简介：某不知名博主，致力于全栈领域的优质博客分享|用最优质的内容带来最舒适的阅读体验！文末获取免费IT学习资料！文末获取更多信息精彩专栏推荐订阅收藏专栏系列直达链接相关介绍书籍分享点我跳转书籍作为获取知识的重要途径，对于IT从业者来说更是不可或缺的资源。不定期更新IT图书，并在评论区抽取随机粉丝，书籍免费包邮到家AI前沿点我跳转探讨人工智能技术领域的最新发展和创新，涵盖机器学习、深度学习、自然
  • 【Python】一文教你快速遍历文件夹下所有文件 鸽芷咕 python开发语言
    鸽芷咕：个人主页个人专栏:《C++干货基地》《粉丝福利》⛺️生活的理想，就是为了理想的生活!博主简介博主致力于嵌入式、Python、人工智能、C/C++领域和各种前沿技术的优质博客分享，用最优质的内容带来最舒适的阅读体验！在博客领域获得C/C++领域优质、CSDN年度征文第一、掘金2023年人气作者、华为云享专家、支付宝开放社区优质博主等头衔。个人社区&个人社群加入点击即可介绍加入链接个人社群社群
  • STM32面向对象编程架构示例 杭劲钰Majestic
    STM32面向对象编程架构示例【下载地址】STM32面向对象编程架构示例本仓库提供了一个STM32面向对象编程架构的完整工程示例，该示例是我自己在STM32项目中常用的编程架构。对于许多初学STM32编程的同学来说，常常会遇到多任务调度、全局变量处理、编程规范等方面的问题，导致代码混乱且难以维护。本示例旨在帮助初学者更好地理解和应用面向对象编程思想，提升代码的可读性和可维护性项目地址:https:
  • Cesium实战专栏03.实体信息获取方式 xt3d jsgiswebgl
    前言很多时候我们需要在点击实体的时候，显示实体的某些属性信息，比如监控点位，在点击监控的时候显示监控的名称、ip、状态等信息。要显示实体的信息，首先在创建实体的时候将信息设置到实体的属性上面，点击实体的时候拿到设置的信息进行展示。有两种方式获取点击的实体。1.注册场景鼠标点数事件，通过鼠标点拾取实体对象。2.监听viewer对象的实体选中改变事件，获取选中的实体对象。效果图关键代码//获取实体信息
  • Linux服务器CPU性能,服务器cpu硬件性能测试 六间仓库的仓老师 Linux服务器CPU性能
    相关资源下载Cpu-Z是一款家喻户晓的CPU检测软件，是检测CPU使用程度最高的一款软件,除了使用Intel或AMD自己的检测软件之外，我们平时使用最多的此类软件就数它了。它支持的CPU种类相当全面，软件的启动速度及检测速度都很快。另外，它还能检测主板和内存的相关信息，其中就有我们常用的内存双通道检测功能。当然，对于CPU的鉴别我们还是最好使用原厂软件。使用这个软件可以查看CPU的信息。软件使用十
  • Webpack 模块加载、动态引入机制源码解读 AIGC小陈 正则表达式javascript开发语言react.js前端
    今天的文章简单探讨一下Vue和React的不同。本人Vue2和React都用过，但不熟悉Vue3，没用它做过项目。其实我对这两大框架也没有认真钻研过它们的细节，也就是工作上用它们写一些简单业务，或偶尔看看相关的博客文章，但还是有一些浅显的认识的，写下来记录一下。Vue和React都是用于构建UI界面的流行框架。它们的哲学也有很多相似的地方，我们可以认为这些特性是流行前端框架的一个趋势。它们是：组件
  • pnpm 执行 itell_me 前端-bugvuenode.js
    执行pnpm失败，报错信息如下：PSD:\code\vue3-hello>pnpmpnpm:无法加载文件D:\soft\node-v16.14.2\pnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Policies。所在位置行:1字符:1+pnpm+~~~~
  • 探索前端可观察性：如何使用Telemetry提高用户体验 桂月二二 前端ux
    随着前端应用变得日益复杂，可观察性（Observability）在前端开发中的重要性正逐步显现。通过实现Telemetry（遥测）功能，开发者能够收集、分析应用的运行数据，从而更好地了解用户行为、定位问题，并持续优化用户体验。什么是Telemetry？**Telemetry（遥测）**是指通过自动化手段远程采集系统或应用运行时的状态数据和行为信息。这些数据通常包括性能指标、错误日志、用户交互事件等
  • npm启动前端项目时报错（vue) error:0308010C:digital envelope routines::unsupported 华如锦 开发本地环境配置jsjava前端npmvue.jsnode.jsjava
    vue启动项目时，npmrunserve报下面的错：error:0308010C:digitalenveloperoutines::unsupportedatnewHash(node:internal/crypto/hash:67:19)atObject.createHash(node:crypto:133:10)atFSReqCallback.readFileAfterClose[asoncom
  • Hadoop的基础操作_hadoop常用操作 字节全栈_kYu hadoopeclipse大数据
    ####下载文件语法：hadoopfs-gethadoopfs-copyToLocal示例：将user/text.txt文件下载到本地/usr/local/下-copyToLocal：复制到本地[root@master~]#hadoopfs-copyToLocal/user/text.txt/usr/local/[root@master~]#cd/usr/local/[root@masterloc
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他