良 逸
良 逸

vue3: 2.如何利用 effectScope 自己实现一个青铜版pinia 一 getters篇

vue3: 如何利用 effectScope 自己实现一个青铜版pinia - getters篇

上一篇 我们实现了状态管理仓库的 state, pinia和vuex中都有计算属性getters, 接下来我们就来实现计算对象 getters

我们都知道getters具有计算属性，依赖于其他state和 getter 值进行计算新的值
如何在store中实现这个效果，vue3中有一个cumputed api可以让我们使用

上代码：
依然是创建一个store对象，store新增一个getters对象
我们写getters的时候是一个函数，函数的返回值才是最终使用的数据
那么我们可以在useStore 第一次执行的时候利用 computed 将getters 里面的所有函数执行并返回一个新的getters对象，该对象也是具有响应式的
得到新的getters对象后我们将getters对象合并到store.state 对象上
组件中使用getters上的属性时可以直接通过 store.state[gettersNmae] 访问

const store = {
  state: {
    val: 0
  },
  getters: {
    computedVal (state) {
      return state.val + 1
      // 或者直接通过this访问
      // 为何可以通过this访问，请查看getters合并到state的操作
      // 原理就是利用call函数将this对象指向了store.state 对象
      // return this.val + 1
    },
    computedVal2 (state) {
      // 直接访问 计算属性 computedVal
      return this.computedVal + 1
    }
  },
  useStore () {
    const setUp = () => {
      if (!Vue.isReactive(this.state)) {
        // 以下的操作只需要执行一次
        // 因为执行setup做响应式依赖收集的时候会在每个组件执行，访问的是同一个state，该state 对象的代理实现只需要第一次就够了
        this.state = Vue.reactive(this.state)
        const _this = this
        // 将this.getters里面的函数取出，存到 getters 这个对象里面的值变为具有computed 计算属性的一个对象
        const getters = Object.keys(_this.getters || {}).reduce(function (conmputedGetters, name) {
          // 利用computed 计算this.getters里面的值， 并记录下来
          conmputedGetters[name] = Vue.computed(() => {
            return _this.getters[name].call(_this.state, _this.state)
          })
          return conmputedGetters
        }, {})
        // 合并 getters对象 到 this.state
        Object.assign(this.state, getters)
      }
    }
    const scope = Vue.effectScope()
    scope.run(setUp)
    return this.state
  }
}

然后我们创建两个子组件并使用这个store的getters

<body>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.min.js"
    integrity="sha512-rCO3ZZnxh9j/Y725Iq2Cqr2lc9fi83zVeN3PFTUosktylZsCFjD13PDbKrzKjKO/idjM4KlMQC52AsoGFTAe6A=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  >script>
  <div id="app">div>
  <script>
    // 实现一个getters
    const store = {
      state: {
        val: 0
      },
      getters: {
        computedVal (state) {
          return state.val + 1
          // 或者直接通过this访问
          // 为何可以通过this访问，请查看getters合并到state的操作
          // 原理就是利用call函数将this对象指向了store.state 对象
          // return this.val + 1
        },
        computedVal2 (state) {
          // 直接访问 计算属性 computedVal
          return this.computedVal + 1
        }
      },
      useStore () {
        const setUp = () => {
          if (!Vue.isReactive(this.state)) {
            // 以下的操作只需要执行一次
            // 因为执行setup做响应式依赖收集的时候会在每个组件执行，访问的是同一个state，该state 对象的代理实现只需要第一次就够了
            this.state = Vue.reactive(this.state)
            const _this = this
            // 将this.getters里面的函数取出，存到 getters 这个对象里面的值变为具有computed 计算属性的一个对象
            const getters = Object.keys(_this.getters || {}).reduce(function (conmputedGetters, name) {
              // 利用computed 计算this.getters里面的值， 并记录下来
              conmputedGetters[name] = Vue.computed(() => {
                return _this.getters[name].call(_this.state, _this.state)
              })
              return conmputedGetters
            }, {})
            // 合并 getters对象 到 this.state
            Object.assign(this.state, getters)
          }
        }
        const scope = Vue.effectScope()
        scope.run(() => {
          // 执行setup函数，收集响应式依赖
          return setUp()
        })
        return this.state
      }
    }
    // 子组件1
    const childrenOne = Vue.defineComponent({
      name: 'children-one',
      setup () {
        // 为什么要执行useStore,因为要通过 useStore 内的setup 函数为该组件提供响应式的依赖搜集
        // storeA 已经是一个包含getters的最基本的状态管理对象了
        // 不过我们一般不建议直接修改store的值，后续会提供actions去帮助大家更改state的值
        const storeA = store.useStore()
        const add = () => {
          storeA.val += 1
        }
        return {
          add,
          storeA
        }
      },
      template: `
        

          
children-one

          
          

          计算属性 computedVal: {{storeA.computedVal}}
          

          计算属性 computedVa2l: {{storeA.computedVal2}}
        

      `
    })
    // 子组件2
    const childrenTwo = Vue.defineComponent({
      name: 'children-two',
      setup () {
        const storeB = store.useStore()
        const remove = () => {
          storeB.val -= 1
        }
        return {
          remove,
          storeB
        }
      },
      template: `
        

          
children-two

          
          

          计算属性 computedVal: {{storeB.computedVal}}
          

          计算属性 computedVa2l: {{storeB.computedVal2}}
          

        

      `
    })
    
    const app = Vue.createApp({
      name: 'app',
      components: {
        'children-one': childrenOne,
        'children-two': childrenTwo,
      },
      template: `
        

          
          
        

      `
    })
    app.mount('#app')
  script>
body>

我们来看下效果：

这样一个我们就实现计算属性 getters

但是实际应用中并不推荐我们直接更改store.state的值
包括vuex中在mutions之外更改state的值也会警告
况且pinia中组件里面gettes属性的读取都是通过store.state对象直接读取的
在开发过程中 store.state.val = xxx 这样更改状态是非常不可控的
如果getters的computedVal值被这样赋值 store.state.computedVal = xxx，他将会失去计算属性和响应式

所以我们还需要一个能够修改状态的actions，这就是我在下一篇讲要讲的内容了

你可能感兴趣的:(vue,pinia,vue.js,前端,javascript)

  • 一文掌握Selenium的详细使用 数据知道 2025年爬虫和逆向教程selenium测试工具爬虫数据采集
    文章目录1.安装Selenium1.1安装Selenium库1.2下载浏览器驱动2.基础用法2.1启动浏览器2.2查找元素2.3操作元素3.高级功能3.1等待机制3.2处理弹窗3.3执行JavaScript3.4切换窗口或iframe3.5处理Cookies3.6截图3.7处理下拉菜单4.浏览器选项4.1无头模式（Headless）4.2禁用图片加载4.3设置代理5.常见应用场景5.1自动化登录5
  • canvas保存图片 初晨未凉 javascript前端开发语言
    需求：上面有几个按钮，其中有一个切换是图片用v-if会导致图片加载慢实现方法：一进来就加载，通过监听元素显示，用于控制canvas的宽高，从而达到隐藏的效果组件dowolad.vue保存二维码exportdefault{props:['show'],data(){return{show:true,canvasId:'myCanvas',imagePath:'',canvaseAttr:{width
  • Vue3 中如何实现响应式系统中的依赖收集和更新队列的解耦？ 程序员黄同学 前端开发JavaScriptJava面试题前端javascriptvue.js
    一、问题解析：为什么需要解耦？在响应式系统中，依赖收集（追踪数据与视图的关联关系）和更新队列（批量处理数据变化带来的副作用）是两个核心但职责不同的模块。Vue3通过以下设计实现解耦：依赖收集阶段：在数据读取时建立响应式对象->副作用函数的映射关系更新触发阶段：数据修改时通过调度器控制副作用的执行策略队列机制：将同步的多次修改合并为单次更新操作这种解耦带来的好处：更好的性能（批量更新减少重复计算）更
  • 将Vue工程打包为Electron：vue-cli-plugin-electron-builder 超频化石鱼 ElectronVueElectronVuebuilderelectron-vue
    介绍vue-cli-plugin-electron-builder插件的作用是将一个Vue工程打包为Electron程序。官网:https://nklayman.github.io/vue-cli-plugin-electron-builder/与electron-vue对比作用目标作用方式更新维护electron-vueelectron-vue工程编译工程中的Vue代码不及时vue-cli-pl
  • uniCloud云开发笔记一 萧寂173 uniapp笔记
    文章目录云空间配置创建云空间创建数据库项目连接云空间云函数创建和使用云数据库操作云函数通过传统方式操作数据库查查询全部数据查询数据总条数分页查询正序倒序查询查询字段过滤where查询正则表达式模糊搜索增单个新增批量新增改单个修改批量修改字段是数组或对象的修改更新操作符覆盖性修改(不会保留其他字段,修改时传什么字段这个数据就是什么)删单个删除条件删除(批量删除)云函数的上传和下载前端项目托管配置域名
  • skywalking前端_SkyWalking 智能迷宫 skywalking前端
    Skywalking(简称SW)是分布式系统的应用程序性能监视(APM)工具，专为微服务、云原生和容器架构而设计，提供分布式追踪、服务网格遥测分析、度量聚合和可视化一体化解决方案。通过探针自动收集所需的指标，并进行分布式追踪，具有无代码嵌入，支持众多中间件，agent种类全面，性能消耗低等优点。下载在github的Skywalking项目中下载最新版安装包官网地址解压部署tar-zxvfapach
  • HTML之JavaScript DOM编程获取元素的方式 录大大i 前端HTMLJavaScriptjavascripthtml前端
    HTML之JavaScriptDOM编程获取元素的方式1.获得documentDOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取varaaa=document.getElementById("username")//根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个varbbb=document.getElement
  • python object对象 weixin_34306676 pythonjavascriptViewUI
    动态语言的对象属性既然都是动态语言，自然python和熟知的JavaScript很像，建一个空对象用来存放所有的数据,看看js：vardata={};data.name='CooMark';data.age=30;但是在python中这样却不行，说好的动态属性呢？data=object()data.name='CooMark'#AttributeError:'object'objecthasnoa
  • 浅析vue项目优化 欧阳呀 vue项目优化Vue2.0vuevue项目优化Vue2.0
    vue用了半年多了，一路踩坑过来，也算是收获不少。不错呢，踩坑的文章很多，我就不写了，主要来写一写怎么去优化vue项目注意:适用于vue-cli初始化、webpack打包的单页应用。组件化组件化(也叫模块化)是前端的一个新的趋势，vue的核心之一也是组件化。项目里公共的地方都要组件化出来，少写很多代码(弹窗，表格，提示等等)。路由管理路由也是vue的重点，主要是涉及到参数传递，一般用这两种，par
  • 免费Web online IDEs me = "深情男二" Webweb
    协作开发&教学ReplitReplit支持多种编程语言，包括Python、JavaScript、Ruby、C++等，适用于各种编程任务。Glitch:Thefriendlycommunitywhereeveryonebuildstheweb快速开发调试CodePenJSFiddleJSBin-CollaborativeJavaScriptDebuggingLiveweave完整项目开发&框架支持C
  • 【SpringBoot】——如何在Spring Boot中使用ThreadLocal来存储和获取用户详情信息以及实体类参数验证 Y小夜 Springbootspringboot后端java
    个人主页：【Y小夜】作者简介：一位双非学校的大二学生，编程爱好者，专注于基础和实战分享，欢迎私信咨询！入门专栏：【MySQL，Java基础，Rust】热门专栏：【Python，Javaweb，Vue框架】感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️目录ThreadLocal如何在SpringBoot中使用ThreadLocal来存储和获取用户详情信息创建用户详情类使用拦截器或过滤器
  • vue iview 实现搜索 组件 hamburgerDaddy1 原创vue
    0">搜索历史-->清空{{item.name}}exportdefault{name:'citicSearch',data(){return{search_key:'',searchHistory:[],isRecord:false//搜索历史框显示}},methods:{//清空历史记录clearHistory(){localStorage.removeItem('citicSearchRec
  • 前端知识点个人实践 fan510988896 个人实践(前端)前端javascript
    前端知识点最佳实践前端一些记录js相乘小数点问题场景解决方案table值获取问题背景：需要遍历table，获取每行数据解决方案jquery的一些实践自己看吧前端一些记录js相乘小数点问题场景在js相乘中，会发现有很多小数点解决方案首先确定相乘精确位数，然后再末尾去零handleCutZero(result.toFixed(size)functionhandleCutZero(num){//拷贝一份
  • 基于SpringBoot+mybatisplus+vueJS的高校选课系统设计和实现 华子w908925859 springbootvue.js后端
    博主介绍：硕士研究生，专注于信息化技术领域开发与管理，会使用java、标准c/c++等开发语言，以及毕业项目实战✌从事基于javaBS架构、CS架构、c/c++编程工作近16年，拥有近12年的管理工作经验，拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经验。先后担任过技术总监、部门经理、项目经理、开发组长、java高级工程师及c++工程师等职位，在工业互联网、国家标识解析体系、物联网、
  • springboot毕设项目自驾旅游网站的设计与实现gah85（java+VUE+Mybatis+Maven+Mysql） 计算机程序设计源哥 javaspringboot旅游
    springboot毕设项目自驾旅游网站的设计与实现gah85（java+VUE+Mybatis+Maven+Mysql）项目运行环境配置：Jdk1.8+Tomcat8.5+Mysql+HBuilderX（Webstorm也行）+Eclispe（IntelliJIDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot+mybatis+Maven+Vue等等组成，
  • 用JavaScript在React中实现Word文档和Markdown互转
    在现代Web开发的世界里，React作为构建用户界面的领先库，经常需要处理各种类型的数据转换和展示任务。将Word文档与Markdown文件相互转换的能力不仅能够增强用户体验，还能极大地提高内容管理的效率。这种互转功能对于那些需要频繁更新内容或协作编辑的平台尤为重要，比如博客、技术文档网站或是在线教育平台。通过直接在React应用中实现这一功能，开发者可以为用户提供更加无缝的编辑体验，使得无论是习
  • 【现代前端静态资源打包与缓存管理指南（3万字警告）】 Gazer_S 前端缓存
    现代前端静态资源打包与缓存管理指南一、从「缓存失控」到「精准更新」的认知跃迁1.1缓存问题的本质矛盾用户侧痛点：浏览器缓存加速页面加载vs开发者诉求：代码更新后用户即时生效经典报错场景：#更新后用户看到的诡异错误UncaughtTypeError:(intermediatevalue).sayHelloisnotafunction1.2缓存控制技术图谱控制维度技术方案生效层级文件指纹Hash/Ve
  • 【深入浅出：Core-JS Legacy 的降级兼容指南】 Gazer_S javascript前端
    深入浅出：Core-JSLegacy的降级兼容指南️背景与核心概念为什么需要Polyfill？随着ECMAScript标准的快速迭代（ES6/ES2015+），现代浏览器对新特性的支持存在碎片化问题。旧版浏览器（如IE11、iOS9等）无法识别Promise、Array.prototype.includes等新API。Core-JS应运而生，它是一个模块化的JavaScript标准库，提供ES5+
  • 业务线接入前端异常监控sentry weixin_33711647
    1.前端异常处理的框架对比是否开源收费语言监控范围sentry是自己搭建服务器（免费）价格英文Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue......fundebug否收费（708一年，本地版：12万一年）中文Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue、微信小程序等等...
  • CSS3 圆角：实现与优化指南 froginwe11 开发语言
    CSS3圆角：实现与优化指南随着网页设计的发展，CSS3圆角已经成为了现代网页设计中不可或缺的元素之一。本文将详细讲解CSS3圆角的基本用法、实现方式以及优化技巧，帮助您在网页设计中更好地运用这一功能。一、CSS3圆角基本用法1.1基本概念CSS3圆角指的是网页元素边角的弯曲程度，通过修改元素的边框属性来实现。在CSS3之前，实现圆角主要依赖于图像处理或JavaScript。1.2选择器CSS3圆
  • 微信小程序授权登录源码 小莉爱编程 uniapp微信小程序
    应广大前端程序员要求，源码附上了这里是授权的页面@import"../assets/sass/setting";.authorization{position:relative;.box{position:absolute;top:50%;
  • Node.js快速总结 一蓑烟雨，一任平生 jsjavascriptnode.js
    理解Node.js●是一个基于ChromeV8引擎的JavaScript运行时。●非阻塞、事件驱动、异步I/O，适合高并发场景。✅核心概念●事件循环(EventLoop):Node.js的异步机制。●模块系统:使用require()引入模块，module.exports导出模块。●文件系统(fs):处理文件读写。●HTTP模块:构建Web服务器。创建HTTP服务器consthttp=require
  • 【前端开发】能不能用Vue+Bootstrap进行项目开发？有什么需求场景需要用到的地方 爱上大树的小猪 vue.jsbootstrap前端
    简介：Vue.jsVue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。它允许开发者创建高效的、交互式的单页面应用（SPA）。Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的应用提供强大的功能支持。Vue通过组件化的方式让代码更加模块化、可重用和维护。BootstrapBootstrap是一个开源的CSS框架，旨在简化网页和Web应用的前
  • 短剧源码搭建部署短剧小程序测试报告 南阳迈特网络科技 短剧源码短剧小程序短剧系统系统架构小程序php
    短剧小程序测试报告1.概述今天对一款短剧小程序进行了全面测试，整体体验非常优秀。该小程序在功能设计、用户体验、后台管理以及商业模式等方面都表现出色。以下是详细的测试反馈：感兴趣的可以点我参考一起讨论一下2.前端体验2.1格式布局优点：界面设计简洁美观，色彩搭配舒适，符合短剧类应用的用户群体审美。布局合理，导航清晰，用户可以轻松找到所需功能。响应式设计良好，在不同尺寸的设备上都能保持良好的显示效果。
  • 前端解决跨域问题的三种方法 web13638179351 前端html面试前端nginx服务器
    一、cors后端程序员提供的解决跨域访问的方法，和前端程序员没有关系，定义后端程序代码让所有的前端程序都可以访问后端的数据，后端程序告诉服务器这个后端程序的数据任何前端请求都可以访问，服务器就不再执行跨域访问拦截数据的操作。因为博主目前主攻前端对后端并不熟悉，因此这种方法暂不详细解答。二、服务器代理proxy2.1步骤（1）修改Nginx或者Apache服务器文件，目前博主使用的是Nginx代理（
  • nodejs 的 npm install ， npm run 问题 dev webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序 倾旎 nodejsvue
    nodejs的npminstall，npmrun问题devwebpack-dev-server’不是内部或外部命令，也不是可运行的程序1.安装脚手架安装脚手架命令：npminstall-globalvue-cli2.升级脚手架有时候需要把整个脚手架升级一下，这个用到命令npminstall--globalvue-cli，这个命令会把整个脚手架升级一下，但是我发现使用上面npm-check命令可以把
  • JSON的序列化和反序列化 -黑大帅 jsonlinux数据库
    一、什么是JSONJSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，因其简单、易读、易写而被广泛采用。它通过键值对和数组的方式表示数据，能够高效地在前后端之间传输数据，并且大多数编程语言都支持JSON格式。JSON主要用于前后端数据交换、配置文件存储和API设计等场景，使得数据处理变得直观和一致。二、序列化序列化就是将对象转换为JSON格式的字符串。在pyth
  • 前端开发中的最佳实践与技巧 lina_mua javascriptvue.jshtml前端es6node.js
    1.引言1.1前端开发的重要性在当今的互联网时代，前端开发已经成为构建用户友好、高效、安全的Web应用程序的关键。前端不仅仅是用户与应用程序交互的界面，它还直接影响用户体验、性能和安全性。1.2本文的目标本文旨在分享前端开发中的最佳实践与技巧，帮助开发者提高代码质量、优化性能、增强安全性，并掌握最新的前端技术趋势。2.HTML最佳实践2.1语义化标签的使用语义化HTML不仅有助于SEO，还能提高代
  • 前端开发岗模拟面试题套卷A答案及解析（一）技术面部分 向贤 前端开发前端数据库javascript面试
    前端开发岗模拟面试题套卷A答案及解析（一）技术面部分（一）技术面一、JavaScript核心技术（ES6+）1-1、实现防抖函数functiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);//清除已有定时器timer=setTimeout(()=>{fn.apply(this,args);
  • Pinia Sunshinedada flutter
    官网：https://pinia.vuejs.org/zh/introduction.htmlPinia和VuexPinia和Vuex都是Vue.js状态管理库，但它们在一些方面有所不同。Pinia是一个轻量级的状态管理库，它专注于提供一个简单的API来管理应用程序的状态。相比之下，Vuex是一个更完整的状态管理库，它提供了更多的功能，比如模块化、插件和严格模式等。Pinia是基于Vue3的Com
  • 设计模式介绍 tntxia 设计模式
    设计模式来源于土木工程师 克里斯托弗 亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。 亚历山大与萨拉-石川佳纯和穆雷 西乐弗斯坦合作
  • android高级组件使用(一) 百合不是茶 androidRatingBarSpinner
    1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。 使用AutoCompleteTex
  • [网络与通讯]路由器市场大有潜力可挖掘 comsci 网络
              如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题.....        这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入  &nbs
  • 自写简单Redis内存统计shell 商人shang Linux shell统计Redis内存
    #!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem
  • 单例模式(饿汉 vs懒汉) oloz 单例模式
    package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《 懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva
  • springMvc json支持 杨白白 json springmvc
    1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() {
  • android播放，掃描添加本地音頻文件 小桔子
            最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，
  • oracle常用命令 aichenglong oracledba常用命令
    1 创建临时表空间 create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m  autoextend on  next 50m maxsize 20480m  extent management local
  • 25个Eclipse插件 AILIKES eclipse插件
    提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了
  • Spring MVC拦截器+注解方式实现防止表单重复提交 baalwolf spring mvc
    原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。   1.新建注解：   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  • 《Javascript高级程序设计(第3版)》闭包理解 bijian1013 JavaScript
    “闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》         看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f
  • AngularJS Module类的方法 bijian1013 JavaScriptAngularJSModule
            AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。 一.Main方法在哪里         如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所
  • [Maven学习笔记七]Maven插件和目标 bit1129 maven插件
    插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标   使用插件和目标使得我们可以干预
  • 【Hadoop八】Yarn的资源调度策略 bit1129 hadoop
    1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度   2. 多用户资源共享的调度
  • Nginx使用Linux内存加速静态文件访问 ronin47
    Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。 先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下：
  • 关于Unity3D中的Shader的知识 brotherlamp unityunity资料unity教程unity视频unity自学
    首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S
  • CopyOnWriteArrayList vs ArrayList bylijinnan java
    package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO
  • 内存中栈和堆的区别 chicony 内存
    1、内存分配方面：     堆：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收 。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。     栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中
  • 回答一位网友对Scala的提问 chenchao051 scalamap
    本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。 问题 写道 对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢    先回答一点，在实际使用中，Scala毫无疑问就是这么简单。
  • mysql 取每组前几条记录 daizj mysql分组最大值最小值每组三条记录
    一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a  WHERE 3> (SELECT COUNT(*) FROM  tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE
  • HTTP深入浅出 http请求 dcj3sjt126com http
      HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We
  • 判断MySQL记录是否存在方法比较 dcj3sjt126com mysql
    把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。 　　我这里总结了判断记录是否存在的常用方法： 　　sql语句： select   count ( * )  from  tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。
  • 对HTML XML的一点认识 e200702084 htmlxml
    感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 Node 层次
  • jquery分页插件 genaiwei jqueryWeb前端分页插件
    //jquery页码控件// 创建一个闭包    (function($) {      // 插件的定义      $.fn.pageTool = function(options) {        var totalPa
  • Mybatis与Ibatis对照入门于学习 Josh_Persistence mybatisibatis区别联系
    一、为什么使用IBatis/Mybatis         对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、
  • C中怎样合理决定使用那种整数类型？ 秋风扫落叶 c数据类型
    如果需要大数值(大于32767或小于32767), 使用long 型。 否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。 除此之外, 就使用 int 型。 如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。 但是, 要注意在表达式中混用有符号和无符号值的情况。    &nbs
  • maven问题 zhb8015 maven问题
      问题1： Eclipse 中 新建maven项目 无法添加src/main/java 问题    eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。     按照maven目录结构，添加src/main/ja
  • (二)androidpn-server tomcat版源码解析之--push消息处理 spjich javaandrodipn推送
    在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。 先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc
  • 用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题 中华好儿孙 JavaScriptAjaxWeb上传文件FormData
    var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca
  • mybatis常用jdbcType数据类型 ysj5125094 mybatismapperjdbcType
      MyBatis 通过包含的jdbcType 类型 BIT         FLOAT      CHAR          
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他