辣可乐少加冰
辣可乐少加冰

vue-响应式原理和双向数据的分析

vue响应式原理
vue-响应式原理和双向数据的分析_第1张图片

  • 了解object.defineProperty 实现响应式
  • 清楚 observe/watcher/dep 具体指的是什么
  • 了解 发布订阅模式 以及其解决的具体问题
  • 在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x 和 vue3.x使用的方式，他们分别
    是：
  1. 对象属性拦截 (vue2.x) Object.defineProperty
  2. 对象整体代理 (vue3.x) Proxy

提示：以下是本篇文章正文内容，下面案例可供参考

vue-响应式是什么?

  • Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下
    Vue 响应式系统的底层的细节。

vue-响应式如何实现的？

数据响应式：数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了频繁的DOM操作，提高开发效率，这与Jquery不一样，Jquery是频繁的操作Dom

对双向数据绑定的理解

数据改变，视图改变，视图改变，数据也随之改变( 通过这句话，我们可以看到在双向绑定中是包含了数据响应式的内容)

​ 我们可以使用v-model 在表单元素上创建双向数据绑定

数据驱动是Vue最独特的特性之一

​
开发过程中仅仅需要关注数据本身，不需要关心数据是如何渲染到视图中的。主流的MVVM框架都已经实现了数据响应式与双向绑定，所以可以将数据绑定到DOM上。

在vue.js中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。

对数据驱动的理解：

那么vuejs是如何实现这种数据驱动的呢？

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通
Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用
Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让
Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定
将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析
{ {}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化
—>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

对vue-双向数据的分析？/v-model 双向数据绑定的原理

代码如下（示例）：


  <script>
    // Object 大小写 value 书写
    let data = {
     
      name: '李白',
      age: 18
    }

    Object.keys(data).forEach(key => {
     
      defineReactiveProperty(data, key, data[key])
    })

    function defineReactiveProperty(data, key, value) {
     
      Object.defineProperty(data, key, {
     
        // get获取
        get() {
     
          return value
        },
        // set 赋值
        set(newVaue) {
     
          if (newVaue === value) {
     
            return
          }
          value = newVaue
          compine()
        }
      })
    }
    compine()
  </script>
</body>

</html>

 
 function compine () {
     
  // 通过document.querySelect('#app').childNodes 获取app下所有的子元素
  const nodes = document.querySelector('#app').childNodes
  // 输出一下这个值 当前这个值是一个层级嵌套的数组我们通过foreach 
  // console.log(nodes)

  nodes.forEach(item => {
     
    // 再输出一下item html:49 ​ 是一个input 输入框
    // console.log(item)
    // 筛选出当前是标签的 ,因为nodes这个输出会将空格以‘text’ nodeType为3，而标签nodetype是1，if判断筛选出是标签的
   if (item.nodeType === 1){
     
     const attrs = item.attributes
      // console.log(attrs)  {0: type, 1: v-model, type: type, v-model: v-model, length: 2} 返回了一个是数组
    Array.from(attrs).forEach( arr => {
     
        // console.log(arr) //  texgt= 'text' v-mode: 'name' ，筛选出这个v-model
        if (arr.nodeName === 'v-model'){
     
            item.value = data[arr.nodeValue]
            item.addEventListener('input',e => {
     
              console.log(e.target.value)
              //  
              data[arr.nodeValue] = e.target.value
            })
        }
      })
   }
  })
}

//发布 阅读者模式优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p v-text="name"  v-model="name"></p>
    <p v-text="age"></p>
    <p v-text= 'name'></p>
    </div>

    <script>
       let data = {
     
      name:'李白',
      age: 18
    }

    Object.keys(data).forEach(key => {
     
      defineReactiveProperty(data, key , data[key]) 
    })

    function defineReactiveProperty(data, key, value) {
     
      console.log()
      Object.defineProperty(data,key, {
     
        get() {
     
          return value
        },
        set(newValue) {
     
          if(value === newValue){
     
            return
          }
          value = newValue
          // compile()  当属性发生变化时，通过找到对应的函数列表,不调用compile（） 而是使用dep中的trigger（key）
          dep.trigger(key)
        }
      })
    }

    function compile() {
     
      let app = document.querySelector('#app')
        // 1.通过document.querySelect('#app').childNodes 获取app下所有的子元素
      const nodes = app.childNodes
      console.log(nodes)
      nodes.forEach(node => {
     
          // 输出一下这个值 当前这个值是一个层级嵌套的数组我们通过foreach 
          
           // 筛选出当前是标签的 ,因为nodes这个输出会将空格以‘text’ nodeType为3，而标签nodetype是1，if判断筛选出是标签的
        if(node.nodeType == 1) {
     
          const attrs = node.attributes
             // console.log(attrs)  {0: type, 1: v-model, type: type, v-model: v-model, length: 2} 返回了一个是数组
          Array.from(attrs).forEach(item => {
     
            //  text= 'text' v-mode: 'name' ，筛选出这个v-model
            const nodeName = item.nodeName
            const dataProp = item.nodeValue
            
            if(nodeName === 'v-text'){
     
               console.log(`更新了${
     nodeName}指令，需要更新的属性为${
     dataProp}`);
               // 页面一加载就显示data数据
              node.innerHTML = data[dataProp]

           // 第三步：使用发布订阅实现收集更新函数和触发更新函数的对象
              dep.collect(dataProp, () => {
     
                node.innerText = data[dataProp]
              })
            }
          })
        }
      })
    }
  
    //dep 指的就是使用发布订阅实现的收集更新函数和触发更新函数的对象

     const dep = {
     
       map: Object.create(null),  // {} 他输出的就是一个{} 空对象
       // 收集
      
       collect(dataProp,updateFn) {
     
         //第一次写法  this.map[dataProp] = updateFn collect向map属性添加东西，会覆盖掉之前获取的所以当，更改时只会触发00
        
         // 改造 生成两个不同的函数，不会覆盖
         if(!this.map[dataProp]){
     
          
           this.map[dataProp] = []
         }
         this.map[dataProp].push(updateFn)
       },
       // 触发
       trigger(dataProp) {
     
         // 第一次写法 this.map[dataProp]() 
        this.map[dataProp].forEach(fn => {
     
          fn()
        })
       }

     }
    compile()
    </script>
</body>
</html>

总结

vue-响应式原理和双向数据的分析_第2张图片

  • 数据响应式的实现无非是对象属性拦截，我们使用 Object.defineProperty 来实现，在vue3中使
    用 Proxy 对象代理方案进行了优化

  • 面试宝典上提到的几个专业名词
    observe 对象指的是把数据处理成响应式的对象
    watcher 指的其实就是数据变化之后的更新函数 (vue中的watcher有两种，一种是用来更新视图
    的watcher，一种是通过watch配置项声明的watcher)
    dep 指的就是使用发布订阅实现的收集更新函数和触发更新函数的对象

  • 指令实现的核心无非是通过模板编译找到标识然后把数据绑上去，等到数据变化之后再重新放一次

  • 发布订阅模式的本质是解决一对多的问题，在vue中实现数据变化之后的精准更新

你可能感兴趣的:(JavaScript,vue)

  • Vue项目构建与启动中的版本依赖问题及解决方案 码农阿豪@新空间 包罗万象vue.js前端javascript
    个人名片作者简介：java领域优质创作者个人主页：码农阿豪工作室：新空间代码工作室（提供各种软件服务)个人邮箱：[2435024119@qq.com]个人微信：15279484656个人导航网站：www.forff.top座右铭：总有人要赢。为什么不能是我呢？专栏导航：码农阿豪系列专栏导航面试专栏：收集了java相关高频面试题，面试实战总结️Spring5系列专栏：整理了Spring5重要知识点与
  • Vue Amazing UI插件推荐 前端熊猫 vue.js前端插件推荐
    以下是针对VueAmazingUI的综合分析和技术选型建议，结合其技术特性、适用场景及与主流库的对比：一、核心优势解析技术栈轻量高效Vue3+Vite原生支持：充分发挥Vue3的CompositionAPI和Vite的极速构建能力，开发体验流畅。TreeShaking优化：按需引入组件时，最终打包体积显著减小（对比ElementPlus减少约30%），适合对性能敏感的项目。完整的TypeScrip
  • 如何使用Promise进行异步处理？ 几何心凉 前端小常识前端
    文章目录1.引言2.Promise基本概念3.创建Promise4.使用Promise处理异步操作4.1链式调用4.2错误处理4.3并发处理5.实际应用案例6.总结1.引言在JavaScript中，异步操作是非常常见的，如网络请求、文件操作、定时任务等。传统的回调函数虽然可以解决异步问题，但容易造成回调地狱，代码难以维护。Promise是一种用于管理异步操作的解决方案，它使得异步代码变得更易读、易
  • 在Vue中如何高效管理组件状态？ 几何心凉 前端小常识vue.js前端javascript
    在Vue中如何高效管理组件状态？文章目录在Vue中如何高效管理组件状态？1.引言2.局部状态管理2.1组件内部的data2.2计算属性与Watcher3.父子组件状态传递3.1通过Props与$emit3.2双向绑定（v-model）4.全局状态管理4.1使用Vuex4.2使用Pinia5.组合式API中的响应式状态管理6.最佳实践7.总结1.引言在现代前端开发中，随着应用复杂度的不断提升，组件状
  • JavaScript实现RSA加密和解密 mysouil 算法javascriptjavascript
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、RSA概述二、JavaScript实现RSA加密和解密1.安装node-forge库2.方法封装3.实现三、总结前言在JavaScript中，可以使用RSA算法实现数据的加密和解密。下载链接：https://download.csdn.net/download/weixin_48839391/89744087一、RSA
  • 前端面试：原型和原型链 啃火龙果的兔子 原型模式
    什么是原型对象每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型对象，每一个对象都会从原型"继承"属性。函数的原型和对象的原型每个函数都有一个prototype属性，该属性指向函数的原型每个对象都有一个__proto__属性，该属性指向对象的原型什么是原型链当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去
  • 面试之《前端常见的设计模式》 只会写Bug的程序员 面试笔记面试前端设计模式react
    前端开发中运用多种设计模式可以提高代码的可维护性、可扩展性和可复用性。以下是一些常见的前端设计模式：创建型模式1.单例模式定义：确保一个类只有一个实例，并提供一个全局访问点。应用场景：在前端中，像全局状态管理对象、数据库连接对象等通常使用单例模式。例如，在React项目中使用Redux管理全局状态，Redux的store就是一个单例，整个应用只有一个store实例。示例代码（JavaScript）
  • http 服务器概念详细介绍 还是鼠鼠 node.jsnode.jswebjavascript前端vscodehttp
    目录Node.jsHTTP服务器概念详细介绍1.http模块概述2.创建HTTP服务器3.示例代码服务器端代码（JavaScript）4.代码解析5.运行服务器6.运行结果7.进一步扩展8.总结在Node.js中，http模块是一个非常重要的核心模块，它允许我们创建HTTP服务器，并能处理客户端发起的HTTP请求。通过这个模块，我们可以构建一个能够接收、处理并返回响应的Web服务器。下面将详细介绍
  • Claude 3.7 全解析：AI 代码助手的巅峰之作？
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读最近AI领域的新模型层出不穷，Claude3.7的发布无疑是最受瞩目的事件之一。从Claude3.5的成功，到如今对抗OpenAIO3Mini和DeepSeekR1的挑战，这款新一代AI是否真的能超越前辈，成为最强的AI代码助手？在深入研究和亲身体验后，这篇文章将完整解析Claude3.7的新特性、性能表现
  • 面试之《原型与原型链》 只会写Bug的程序员 笔记面试面试前端
    在JavaScript中，原型（Prototype）和原型链（PrototypeChain）是实现对象继承和属性共享的核心机制。以下是详细介绍：一、原型（Prototype）基本概念每个函数（包括构造函数）都有一个prototype属性，指向一个对象，称为原型对象。当使用new调用构造函数创建实例时，实例内部会有一个隐藏属性__proto__（ES6规范中称为[[Prototype]]），指向构造
  • Vue组件通信 星星不打輰 vue.jsjavascript前端
    Vue组件通信Vue组件放在components目录：1、组件是对于HTML标签的扩展2、以.vue结尾的文件都是叫做组件APP.vue叫做根组件TODO:组件的文件名字的首字母大写组件的引入importXxxfrom'./components/Xxx.vue'App.vue:importSwiper1from'./components/Swiper.vue'exportdefault{compo
  • RuoYi-Cloud-Plus 发布 1.8.0 新增 sms4j 短信融合 「已注销」 java
    更新日志重大更新[重大更新]新增sms4j短信融合框架整合(支持数十种短信厂商接入、发送限制、负载均衡等功能)[不兼容更新]移除原短信功能(建议使用新sms4j功能)[重要迁移]迁移vue3前端到主仓库统一维护依赖升级updatespringboot2.7.11=>2.7.13updatespring-cloud2021.0.7=>2021.0.8updatesatoken1.34.0=>1.35
  • 在Vue 3中，如何创建一个异步组件？ JJCTO袁龙 Vuevue.js前端javascript
    在Vue3中，如何创建一个异步组件？在现代前端开发中，组件的重用性和异步加载是提升用户体验和优化性能的关键因素。在Vue3中，创建异步组件变得更为便利。本文将探讨如何在Vue3中使用setup语法糖来创建异步组件，并通过示例代码来深入理解这一特性。什么是异步组件？异步组件是一种在需要时才被加载的组件，而不是在应用启动时一次性加载所有组件。这种做法有助于减小初始加载的包大小，从而提升加载速度和响应性
  • 《Python全栈开发》第1课：认识全栈开发与Web工作原理 程序员没睡醒 Python全栈python前端开发语言
    课程目标理解全栈开发的核心概念了解网站运行的底层原理建立全栈知识体系框架完成第一个网页实践一、什么是全栈开发？（用餐厅比喻）1.1餐厅后厨vs餐厅前厅顾客服务员点单厨师做菜传菜员送餐1.2对应到Web开发：餐厅角色Web开发对应关键技术服务员前端开发HTML/CSS/JavaScript厨师后端开发Python/Java/PHP传菜员数据库MySQL/MongoDB店长全栈工程师掌握所有环节二、网
  • Vue.js 基础入门：从零开始构建你的第一个 Vue 应用 vvilkim vuevue.js前端javascript
    Vue.js是一个轻量级、易上手的渐进式JavaScript框架，广泛用于构建现代化的用户界面。无论你是前端新手还是有一定经验的开发者，Vue.js都能帮助你快速构建高效、可维护的Web应用。本文将带你从零开始学习Vue.js的基础知识，并完成一个简单的Vue应用。1.什么是Vue.js？Vue.js是一个用于构建用户界面的渐进式框架。它的核心库专注于视图层，易于与其他库或现有项目集成。Vue的主
  • Vue2-状态管理Vuex介绍与使用 来一杯龙舌兰 前端#Vue2Vue2Vuex状态管理前端共享
    文章目录VueX介绍什么情况下应该使用Vuex？VueX状态管理简单状态管理最简单的StoreState在Vue组件中获得Vuex状态对象展开运算符组件仍然保有局部状态Getter通过属性访问通过方法访问Mutation提交载荷（Payload）对象风格的提交方式使用常量替代Mutation事件类型Mutation必须是同步函数在组件中提交MutationAction分发Action在组件中分发A
  • vue2 - 实现elementUI表格组件table动态添加或删除行功能，表格列表动态新增/插入/删除表格行，可编辑单元格/点击修改表格内数据并更新数据列表（支持接口懒加载、表格分页、复杂嵌套表格） 街尾杂货店& 前端组件与功能(开箱即用)elementuivueTable动态表格table动态新增删除编辑动态增加一行并能编辑内容数据行内编辑功能并且校验是否为空懒加载数据表格分页怎么办
    效果图在vue2+elementui开发中，详细实现el-table实现表格动态增加/删除/编辑表格行/编辑单元格数据等，并且带必填或其他校验规则(如果为空则提示)，vue2elementUI表格动态操作插入新行或点击编辑数据，统一保存或删除行后更新表格列表数据，一旦表格列表发生改变后，确保表格分页情况下或表格children父子级嵌套行表格正确更新数据，提供示例源码！提供详细示例代码，新手小白复
  • Django + Vue解决跨域问题 mzf19980423 前端PythonWEB开发vuedjangoAxiosjava
    最近用Django做后端服务器，Vue做前端，遇到了一个跨域问题，在此纪录一下：前端：封装了一下Axios:request.js如下：//加载进度条//导入importNProgressfrom'nprogress'import'nprogress/nprogress.css'importaxiosfrom"axios";//请求相关的方法//初始化axios对象varinstance=axios
  • Google Chrome 60版本的全新特性与优势 xinwuji312
    本文还有配套的精品资源，点击获取简介：Chrome60是GoogleChrome浏览器的一个重大更新，它在2017年推出，为用户和开发者提供了多项改进。新版浏览器通过升级V8JavaScript引擎，增强WebAssembly支持，改进CSSGrid布局，更新ServiceWorker，增强安全性，改进开发者工具，增加新的WebAPI，优化性能，增强隐私控制以及支持64位架构，从而提升浏览体验和开
  • 国产系统中Firefox ESR52.3.0低版本火狐浏览器vue2项目打包后兼容问题总结 tianxin8901 vuefirefoxvue
    问题一：浏览器报错提示如下：FailedtoresolveasynccomponentReason:SyntaxError:invalidpropertyid问题分析：根据报错的指向的文件，一步一步分析，发现问题所在是beforeCreate生命周期中引用的组件过于深。我的文件从父到子文件，依次是gatewary.vue-->pagehome.vue->gatelayout.vue->module
  • Next.js 开发者必看：最受欢迎的 UI 组件库
    大家好，我是长林啊！一个爱好JavaScript、Go、Rust的全栈开发者；致力于终生学习和技术分享。本文首发在我的微信公众号【长林啊】，欢迎大家关注、分享、点赞！在之前，我也写过一篇《打造高效React应用：CSS方案深度解析》，里面介绍到内联样式、CSS类、CSSModules和CSS-in-JS技术，在Next.js中也同样是适用，如果有不熟悉的，可以到公众号「长林啊」中去看！我们这里就不
  • 自定义表单开发过程及思路笔记 Zyred 自定义表单自定义表单数据库java
    前言：由于公司项目中有一个自定义表单的需求，而本人却无类似开发经验，在朋友和同事的努力下，依然没有找到最佳的解决方案，后来自己根据自己对业务的了解和别人的思路借鉴，最终设计出了现在这款自定义表单的逻辑。项目环境：kingbaseV8(人大金仓数据库)，Mybatis-Plusv3.4.2，spring-boot-2.2.5.RELEASE在本文中，主要阐述结合VUEJS动态表格的数据结构进行设计接
  • DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14基础固定表头示例 宝码香车 #DeepSeek前端vue.jsjavascriptecmascriptDeepSeek
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14基础固定表头示例页面效果指令输入think组件代码使用示例：实现说明：注意事项：代码测试测试代码正常跑通，附其他基本代码编写路由src\rou
  • Chrome 插件开发：技术解析与应用实例 阿吉的呓语 java开发知识chrome
    引言Chrome插件，又称为扩展，为用户提供了自定义和增强浏览器功能的能力，从而改善用户体验并提升工作效率。本文将详尽介绍Chrome插件的开发基础，探讨所需的技术栈，并通过具体应用场景展示其实际应用和潜力。一、Chrome插件的基本概念什么是Chrome插件Chrome插件是一种浏览器扩展，允许开发者使用Web技术如HTML、CSS和JavaScript为Chrome浏览器添加额外的功能。它可以
  • JavaScript中的Observer模式：设计模式与最佳实践 乐闻x 前端知识图谱javascript观察者模式设计模式
    前言在现代软件开发中，Observer模式（观察者模式）是一种重要的设计模式，能够有效地管理对象之间的依赖关系。它允许一个对象在状态发生变化时通知其他依赖于它的对象，这种一对多的依赖关系在事件驱动编程、数据绑定以及状态管理等领域非常常见。本文将详细探讨JavaScript中几种常见的Observer实现方式，并通过具体实例展示其使用方法，帮助开发者在实际项目中更好地应用这一模式。什么是Observ
  • 前端开发中的实用场景：提升开发效率与用户体验 lina_mua 前端vue.jshtmljavascript
    1.引言1.1前端开发的多样性前端开发不仅仅是编写HTML、CSS和JavaScript，还涉及用户体验、性能优化、数据可视化等多个方面。掌握实用场景的开发技巧，可以显著提升开发效率和用户体验。1.2本文的目标本文旨在总结前端开发中的实用场景，并提供相应的解决方案和最佳实践，帮助开发者更好地应对实际开发中的挑战。2.表单处理与验证2.1动态表单生成场景：根据用户输入或配置动态生成表单字段。解决方案
  • JavaScript 异步编程：从基础到实践 lina_mua javascript开发语言ecmascript
    1.引言1.1异步编程的重要性在现代前端开发中，异步编程是不可避免的。无论是网络请求、定时任务，还是用户交互，异步操作都无处不在。掌握异步编程的技巧，是编写高效、可维护前端代码的关键。1.2本文的目标本文旨在深入探讨JavaScript中的异步编程，从基础概念到实际应用，帮助开发者更好地理解和使用异步编程模式。2.JavaScript异步基础2.1同步vs异步同步：程序按顺序执行，必须等待当前操作
  • 【数据可视化】【1】手把手教你使用d3.js绘制折线图 Sonny叔 数据可视化javascript开发语言数据可视化前端
    d3.js可视化1.概要2.确定数据3.添加画布3.1创建svg标签3.2给画布添加属性4.设置比例尺5.绘制轴线5.1添加group标签5.2在group添加轴线6.绘制曲线7.添加图表标题8.绘制图表9.完整代码1.概要本文主要使用的时d3.js作为绘制折线图的JavaScript库，其官方网站为d3js.org。这里引用了官方的两句话来介绍d3.js：TheJavaScriptlibrary
  • Jquery源码分析 W_wjl1900 前端学习jquery源码
    转载地址原作者博客/*!*jQueryJavaScriptLibraryv1.10.2*http://jquery.com/**IncludesSizzle.js*http://sizzlejs.com/**Copyright2005,2013jQueryFoundation,Inc.andothercontributors*ReleasedundertheMITlicense*http://jq
  • Chrome插件开发 Min_nna ai分析chrome插件开发chrome
    介绍Chrome插件，也称为扩展程序（Extensions），是用于增强浏览器功能的轻量级应用程序。它们可以添加新的功能或修改现有的网页内容，为用户提供更加个性化的浏览体验。以下是开发Chrome插件的一些基本概念和步骤：了解Chrome插件：Chrome插件是由HTML、CSS、JavaScript等Web技术构建的，并且通常会包含一个manifest.json文件来定义其基本信息和所需权限。准
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他