Neil-
Neil-

vue数据劫持

原理

vue2.x是基于Object.defineProperty实现双向数据绑定的；该函数可以在获取属性值或者设置属性值的时候监听属性的get和set事件，并进行相关的操作；当然，这些具体的操作就需要通过发布订阅者模式作为补充；

Vue 3.0是基于ES6 Proxy重写了其核心逻辑，代替了原来的Object.defineProperty；优势是：

  1. 劫持整个对象并返回一个新对象，而不是像Object.defineProperty需要循环遍历整个对象属性；
  2. 支持监听数组变化；
  3. 支持更加丰富的数据劫持操作；

如模板解析时每遇到一个属性，就为该属性添加一个发布订阅，从而能够进行双向数据绑定；

  1. 乞丐版

    function observe(obj) {
	if (!obj || typeof obj !== 'object') {	// 处理类型为null/undefined/非对象
		return;
	}
	Object.keys(obj).forEach(key => {	// 遍历子属性并进行属性监听；
		defineReactive(obj, key, obj[key]);
	})
}	

function defineReactive(obj, key, value){
	observe(value);	// 递归子属性
	Object.defineProperty(obj, key, {
		configurable: true,
		enumerable: true,
		get() {
			console.log('get value: ', value);
			return value;
		},
		set(newVal) {
			console.log('set value: ', newVal);
			value = newVal
		}
	})
}

var data = {name: 'vue'}
observe(data);
data.name;			// get value: fn
data.name = 'fn';	// set value:  fn
data.name;			// get value: fn

  2. 为属性添加发布订阅模式
    vue数据劫持_第1张图片

    class Dep {
	constructor(){
		this.subs = [];
	}
	// 添加订阅者
	add(sub) {
		// sub 是watcher的实例, 每次解析到模板中的属性时，就通过watcher为属性添加订阅并更新视图；
		this.subs.push(sub);
	}
	// 通知变化
	notify() {
		this.subs.forEach(sub => {
			sub.update();
		})
	}
}
// 通过静态属性设置Dep的目标对象
Dep.target = null;

class Watcher {
	constructor(obj, key, cb) {
		Dep.target = this;	// 设置Dep通知变化的目标对象
		this.cb = cb;
		this.obj = obj;		// 待监听对象
		this.key = key;
		this.value = obj[key];	// 手动触发属性的get事件
		Dep.target = null;	// 每次为属性添加一个watcher之后解除Dep与Watcher的关联；
	}
	// 接受变化并更新视图
	update() {
		// get new value
		this.value = this.obj[this.key];
		// update view
		this.cb(this.value);
	}
}

    测试

    // Watcher的cb函数
function update(value) {
    document.querySelector('div').innerText = value
}

var data= {name: 'vue'};
observe(data);				

new Watcher(data, 'name', update);		// 模拟解析属性name的操作

  3. 升级版
    上边一小节中， 我们已经通过watcher模拟解析到属性时的操作；但是这个行为是我们手动操作的，并没有与observe建立关系让其自动订阅与通知；本节实现此功能；

    function observe(obj) {
    if (!obj || typeof obj !== 'object') {	// 处理类型为null/undefined/非对象
        return;
    }
    Object.keys(obj).forEach(key => {	// 遍历子属性并进行属性监听；
        defineReactive(obj, key, obj[key]);
    })
}

function defineReactive(obj, key, value) {
    observe(value);	// 递归子属性
    let dep = new Dep();
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        get() {
            console.log('get value: ', value);
            if (Dep.target) {
                dep.addSub(Dep.target);     // Dep.target是watcher实例，即订阅者sub
            }
            return value;
        },
        set(newVal) {
            console.log('set value: ', newVal);
            value = newVal;
            // 调用watcher的update方法更新视图
            dep.notify();
        }
    })
}

class Dep {
    constructor() {
        this.subs = [];
    }
    // 添加订阅者
    addSub(sub) {
        // 订阅者sub 是watcher的实例, 每次解析到模板中的属性时，就通过watcher为属性添加订阅并更新视图；
        this.subs.push(sub);
    }
    // 通知变化
    notify() {
        this.subs.forEach(sub => {
            sub.update();
        })
    }
}
// 通过静态属性设置Dep的目标对象， 建立Dep与Watcher的关系
Dep.target = null;

class Watcher {
    constructor(obj, key, cb) {
        Dep.target = this;	// 设置Dep通知变化的目标对象
        this.cb = cb;
        this.obj = obj;		// 待监听对象
        this.key = key;
        this.value = obj[key];  // 手动触发属性的get事件
        Dep.target = null;	// 每次为属性添加一个watcher之后解除Dep与Watcher的关联；
    }
    // 接受变化并更新视图
    update() {
        // get new value
        this.value = this.obj[this.key];
        // update view
        this.cb(this.value);
    }
}

  4. 完整demo
    参见github

    
<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>Vue数据劫持title>
	<style>
		.collapse {
			color: lightskyblue;
		}
		#show {
			font-size: 30px;
			color: greenyellow;
		}
	style>
head>
<body>
	<div class="collapse">
		<label for="input">Your name:  label>
		<input type="text" id="input">
		
    div>
	div>
	<script>
		function observe(obj) {
			if (!obj || typeof obj !== 'object') {	// 处理类型为null/undefined/非对象
				return;
			}
			Object.keys(obj).forEach(key => {	// 遍历子属性并进行属性监听；
				defineReactive(obj, key, obj[key]);
			})
		}

		function defineReactive(obj, key, value) {
			observe(value);	// 递归子属性
			let dep = new Dep();
			Object.defineProperty(obj, key, {
				configurable: true,
				enumerable: true,
				get() {
					console.log('get value: ', value);
					if (Dep.target) {
						dep.addSub(Dep.target);     // Dep.target是watcher实例
					}
					return value;
				},
				set(newVal) {
					console.log('set value: ', newVal);
					value = newVal;
					// 调用watcher的update方法更新视图
					dep.notify();
				}
			})
		}

		class Dep {
			constructor() {
				this.subs = [];
			}
			// 添加订阅者
			addSub(sub) {
				// sub 是watcher的实例, 每次解析到模板中的属性时，就通过watcher为属性添加订阅并更新视图；
				this.subs.push(sub);
			}
			// 通知变化
			notify() {
				this.subs.forEach(sub => {
					sub.update();
				})
			}
		}
		// 通过静态属性设置Dep的目标对象， 建立Dep与Watcher的关系
		Dep.target = null;

		class Watcher {
			constructor(obj, key, cb) {
				Dep.target = this;	// 设置Dep通知变化的目标对象
				this.cb = cb;
				this.obj = obj;		// 待监听对象
				this.key = key;
				this.value = obj[key];  // 手动触发属性的get事件
				Dep.target = null;	// 每次为属性添加一个watcher之后解除Dep与Watcher的关联；
			}
			// 接受变化并更新视图
			update() {
				// get new value
				this.value = this.obj[this.key];
				// update view
				this.cb(this.value);
			}
		}

		function update(value) {
			document.querySelector('#show').innerText = value
		}

		var data = { name: 'vue' };
		observe(data);

		new Watcher(data, 'name', update);

		function handleChange(e) {
			data.name = e.target.value;
		}
		window.onload = function () {
			let input = document.querySelector('#input');
			let show = document.querySelector('#show').innerText = data.name;
			input.addEventListener('change', e => {
				handleChange(e);
			})
		}
	script>
body>
html>

参考文献

  1. 架构通识

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

  • Vue 3 中的 ref 完全指南 m0_74824002 vue.js前端javascript
    Vue3中的ref完全指南Vue3引入了CompositionAPI，其中ref是关键的一部分。ref可以让我们更方便地在组件中定义响应式数据，在模板中使用语法糖时尤为简洁。本文将详细讲解Vue3中ref的概念、用途及常见用法，并通过示例展示如何在实际开发中利用ref提升开发效率。一、什么是refref是Vue3CompositionAPI中定义响应式数据的核心函数。ref可以使基本类型（字符串、
  • vue 拖动、缩放容器组件，支持移动端双指缩放和PC端鼠标滚轮缩放 warmbook 笔记vue.js前端html5
    原理本组件基于CSS的transform实现。移动端监听touch事件（单指移动，双指移动+缩放），PC端监听mouse事件（移动）和滚动事件wheel（缩放），更新transform的translateX/translateY/scale值，从而实现缩放、移动。由于transform不会产生重排，因此不节流也可以有很好的性能，用户体验就像德芙，纵享丝滑！鼠标事件比较好理解，记录鼠标按下时的坐标，
  • Vue指令可拖动元素，兼容PC和移动端 warmbook 笔记
    Vue.directive('movable',{bind(el){letagent=window.navigator.userAgent.toLowerCase(),start,move,end//判断当前是移动端还是PC，移动端监听touch，PC监听mouseif(["android","iphone","symbianos","windowsphone","ipad","ipod"].so
  • Vue＜router-view＞＜/router-view＞学习心得 立志成为架构师 vue.jsjavascripthtml
    今天看到个Vue项目结构中使用到了，于是了解学习了用法。首先来看router下的index.jsexportdefaultnewRouter({mode:'history',routes:[{//首页跳转到/homepagepath:'/',redirect:'/homepage',name:'zhuye'},{//这是homepage页面的说明，说明使用的页面是homepage。其子页面是lis
  • canvas开发动态足迹图 小蒋是个老程序员了 前端javascripthtml
    canvas平时用的不多，但是有些开发场景还真得用它才能实现需求，这不，前段时间有一个这样的足迹图的需求，以下是实现的代码：-->{{historyItem.chatTitle}}{{historyItem.time}}import{onBeforeMount,ref,watch}from'vue'importNavHeaderfrom'@/layouts/Header.vue';//import
  • Vue.js组件开发案例（比较两个数字大小） 我曾经是个程序员 常用代码片段vue.js
    见过不少人、经过不少事、也吃过不少苦，感悟世事无常、人心多变，靠着回忆将往事串珠成链，聊聊感情、谈谈发展，我慢慢写、你一点一点看......实现一个比较2个数字大小的组件，当输入2个数字后，单击“比较”按钮后自动输出比较结果。第1个数字：第2个数字：比较比较结果：{{result}}exportdefault{data(){return{num1:0,num2:0,result:0,};},met
  • jwt相关问题及应用 2501_90243308 hivehadoop数据仓库
    接收方生成签名的时候必须使用跟JWT发送方相同的密钥六，JWT在spa项目中的使用================项目中JwtFilter类packagecom.zking.vue.util;importjava.io.IOException;importjava.util.regex.Matcher;importjava.util.regex.Pattern;importjavax.servle
  • vue 中 常用的 $ weixin_42113341 vue.jsflutter前端
    this.$set(this.formData,'department',currTreeItem)是Vue.js提供的一个方法，用于向响应式对象中添加新的属性，并确保这个新属性是响应式的（即，当该属性发生变化时，视图会自动更新）。让我们详细解析这个方法及其作用。1.this.$set的作用添加响应式属性：在Vue.js中，如果你直接向一个响应式对象添加一个新的属性，这个新属性默认不是响应式的。使
  • React Native 0.77 发布：更强的样式支持与性能优化 前端javascript
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读ReactNative0.77正式发布！此次版本带来了多项重要改进，包括样式功能的增强、Android平台的性能优化以及项目模板的升级。这一版本的核心目标是提升开发效率，同时确保在不同平台上的兼容性。接下来，我们来看看这次更新中的亮点内容。主要更新内容✨全新CSS特性支持：新增对display:contents、boxSizing、
  • vue项目运行报：SassError: expected selector... 落日弥漫的橘_ 前端vue.jswebpackcss
    SassError:expectedselector错误通常由于Sass或SCSS文件中存在语法错误或选择器缺失，导致Sass编译器无法解析。Sass语法语法中误用深度选择器语法导致以上问题。/deep/和::v-deep都是用于Vue单文件组件（.vue文件）中的样式穿透选择器;/deep/在Sass中并不被支持，如果是在Vue单文件组件中，并且需要穿透样式，可以使用::v-deep代替/dee
  • Vue组件的概念与复用 2401_85969651 vue.jsjavascript前端visualstudiocode
    目录一、引言二、为什么使用组件二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的世界里，组件是构建用户界面的基石。它们让我们能够以一种高效、可维护的方式开发复杂的前端应用。无论是初涉Vue的新手，还是有一定经验的开发者，深入理解组件的概念与复用机制，都能极大提升开发效率与代码质量。二、为什么使用组件随着前端应用日益复杂，页面功能愈发繁多，传统的
  • Vue 组件的概念与复用 2401_85969651 vue.js前端javascriptvisualstudiocode
    目录一、引言二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的奇妙天地里，组件宛如熠熠生辉的基石，稳稳撑起用户界面构建的大厦。无论你是刚踏入Vue领域的新手，还是久经沙场的开发者，吃透组件的概念与复用窍门，都如同掌握了一把开启高效开发、优质代码大门的金钥匙，能让你的前端开发之旅畅行无阻。二、什么是Vue组件本质上，Vue组件就是一个被赋予独特魅
  • Vue - watch() 监视属性的使用 来一碗刘肉面 Vuevue.js前端javascript
    在Vue3中，watch()是一个用于观察响应式数据的API，可以用来在数据变化时执行某些操作。它是在Vue的组合式API中使用的主要功能之一，允许在代码中细致地控制数据变化的反应。作用：监视数据的变化特点：Vue3中的watch只能监视以下四种数据：ref定义的数据reactive定义的数据函数返回一个值（getter函数）一个包含上述内容的数组基本语法：watch(source,callbac
  • 【useEffect Hook】在组件中执行副作用操作 风茫 Reactreact.jsuseEffect
    引言useEffect是React中用于处理副作用的Hook，它允许你在函数组件中执行类似于类组件生命周期方法的操作。通过useEffect，你可以在组件挂载、更新和卸载时执行某些操作。常见副作用操作：AJAX请求：获取或提交数据。计时器：设置定时任务。异步操作：处理异步逻辑。更改真实的DOM对象：直接操作DOM元素。本地存储：读取或写入浏览器的本地存储。其它会对外部产生影响的操作：例如订阅事件等
  • springboot+vue项目实战2024第三集修改用户信息 javaspringboot
    1.获取用户信息@GetMapping("/userInfo")//@RequestHeader(name="Authorization")StringtokenpublicResultuserInfo(){//Mapmap=JwtUtil.parseToken(token);Mapmap=ThreadLocalUtil.get();Stringusername=(String)map.get("
  • vscode 前端常用插件安装大全 weixin_42113341 vscode前端ide
    在使用VisualStudioCode(VSCode)进行前端（特别是Vue.js）和Node.js开发时，安装合适的扩展插件可以大大提升开发效率和代码质量。以下是推荐的Vue.js和Node.js开发相关的VSCode插件，涵盖了代码编辑、调试、格式化、版本控制、代码质量等多个方面。您可以根据自己的需求选择安装：1.核心开发插件1.1Vetur功能：为Vue.js提供语法高亮、智能提示、错误检查
  • 詳細講一下RN(React Native)中的列表組件FlatList和SessionList asecretman! reactnativereact.jsjavascript
    1.FlatList基礎使用importReactfrom'react';import{View,Text,FlatList,StyleSheet}from'react-native';exportconstSimpleListDemo:React.FC=()=>{//1.準備數據constdata=[{id:'1',title:'項目1'},{id:'2',title:'項目2'},{id:'3
  • Vue项目中使用Sass实现动态换肤 2401_84447065 vue.jssassrust
    color-warning:#f2a626,color-danger:#ee2e6b,background:#fff,background-content:#f4f7fc,background-color:#eaedf7,),//darkthemedark:(color-primary:#3961f5,color-primary-second:#5e81f7,color-text-primary:
  • 一个上亿用户的电商平台的架构设计 北京小太阳 java算法
    一.总体架构Listitem客户端层(ClientLayer)Web客户端：使用现代前端框架（如React,Angular,Vue.js）开发响应式网页，保证在不同设备上的良好用户体验。移动客户端：开发iOS和Android原生应用，利用平台特性提供优质用户体验。或者使用ReactNative或Flutter等跨平台框架来节省开发成本。2.API层(APILayer)API设计：设计RESTful
  • 【Vue】Part4 接口调用 福安德信息科技 WEB开发vue.jsokhttp前端
    接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程异步模式可以一起执行多个任务JS中常见的异步调用定时任何ajax事件函数promise主要解决异步深层
  • 通过函数创建 ant-design-vue 的 Drawer 组件和 Modal 组件
    原由通常在业务中，写抽屉组件或者弹框组件的时候，都是用visible属性来控制是否显示：OpenModalwithasynclogic{{ModalText}}exportdefault{data(){return{ModalText:'Contentofthemodal',visible:false,confirmLoading:false,};},methods:{showModal(){th
  • springboot+vue项目实战2024
    1.创建项目@SpringBootApplicationpublicclassApp{publicstaticvoidmain(String[]args){SpringApplication.run(App.class,args);}}2.引入依赖4.0.0org.springframework.bootspring-boot-starter-parent3.1.3com.ivan.cnshizh
  • uniapp中使用vant wappp m0_70647189 Web前端经验分享前端前端框架
    .custom-button{.van-button{background-color:blue;border-radius:10px;}}如果你的style样式中存在scoped，我们可以利用vue中的语法，加个/deep/进行样式覆盖，如下所示：/deep/.custom-button{.van-button{background-color:blue;border-radius:10px;}
  • Docker多架构镜像构建踩坑记 一直学下去 docker容器adm64arm64多架构
    背景公司为了做信创项目的亮点，需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行，整个项目通过后端Java，前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建，于是只能手工构建ARM镜像。以下是一些踩坑的记录，希望能帮大家少踩坑构建环境本地电脑DeepinLinux23(Windows的WSL和其他的Linux系统都可以）
  • vue使用pdf.js实现移动端在线PDF文件预览 yujin0213 vuejavascriptvue.js开发语言
    背景产品需求涉及到动态的PDF展示，PDF是由后端去生成的，然后下发给前端在线的cdn地址，H5需要实现在线PDF预览的能力方案H5展示合同PDF，有很多实现方式。但是通过尝试后发现在不同操作系统会存在兼容性问题方案表现iframe的形式iOS：只能展示第一页，多页不能展示Android：弹出下载弹窗PC：正常展示embed标签iOS：只能展示第一页Android：弹出下载弹窗PC：显示不出来vu
  • 微前端架构在前端开发中的实践与挑战 桂月二二 前端架构
    随着单页面应用（SPA）和前端框架如React、Vue、Angular的快速发展，现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时，单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战，微前端架构（MicroFrontends）应运而生，它为前端开发提供了一种新的思路，让大型前端应用能够像后端的微服务架构一样，通过拆分模块来降低复杂度。在这篇文章中，我们将探讨微前端架构的
  • springboot+vue项目实战2024第四集修改文章信息 java后端
    1.添加文章信息@PostMappingpublicResultadd(@RequestBody@ValidatedArticlearticle){articleService.add(article);returnResult.success();}voidadd(Articlearticle);@Overridepublicvoidadd(Articlearticle){article.set
  • web速览 qzhqbb web前端web
    web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的
  • 基于 React hooks + Typescript + Cesium 实现通视分析 jiegiser# webgiscesium通视分析webgis三维可视化typescriptreacthooks
    文章目录效果截图功能介绍实现思路实现步骤核心代码插值计算绘制分析线效果截图先上截图：功能介绍通视分析是指以某一点为观察点，研究某一区域通视情况的地形分析。用户在模型上选取任意两点之间是否可以互相可见的技术方法，主要用于判断任意两点之间能否通视；图层管理（√）dom点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver结合实现属性查询（√）geoserv
  • React+Cesium基础教程（002）：创建基于React和Cesium的加载第三方地图服务及地图叠加 叁拾舞 Ceisumreact.js前端框架Cesium
    文章目录加载第三方地图服务加载OpenStreetMap加载高德地图加载天地图加载矢量地图加载影像地图加载地形图地图叠加加载第三方地图服务在Cesium中，可以加载第三方地图服务（如高德地图、天地图、OpenStreetMap）作为底图。Cesium提供了多种方式来加载瓦片地图，包括ImageryLayer和TileMapServiceImageryProvider等。在Cesium中加载第三方地
  • 关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题 何必如此 jsp超链接文件下载窗口
    生成下载页面是需要选择“录入提交页面”，生成之后默认的下载页面<a>标签超链接为：<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc
  • 【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析 bit1129 cluster
    在分析源代码之前，首先对Standalone Cluster Mode的资源调度有一个基本的认识： 首先，运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下，Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU，这就需要Maste
  • linux上独立安装部署spark daizj linux安装spark1.4部署
    下面讲一下linux上安装spark，以 Standalone Mode 安装   1）首先安装JDK   下载JDK：jdk-7u79-linux-x64.tar.gz  ，版本是1.7以上都行，解压 tar -zxvf jdk-7u79-linux-x64.tar.gz     然后配置 ~/.bashrc&nb
  • Java 字节码之解析一 周凡杨 java字节码javap
        一： Java 字节代码的组织形式   类文件 {     OxCAFEBABE ，小版本号，大版本号，常量池大小，常量池数组，访问控制标记，当前类信息，父类信息，实现的接口个数，实现的接口信息数组，域个数，域信息数组，方法个数，方法信息数组，属性个数，属性信息数组 } &nbs
  • java各种小工具代码 g21121 java
    1.数组转换成List import java.util.Arrays; Arrays.asList(Object[] obj); 2.判断一个String型是否有值 import org.springframework.util.StringUtils; if (StringUtils.hasText(str)) 3.判断一个List是否有值 import org.spring
  • 加快FineReport报表设计的几个心得体会 老A不折腾 finereport
    一、从远程服务器大批量取数进行表样设计时，最好按“列顺序”取一个“空的SQL语句”，这样可提高设计速度。否则每次设计时模板均要从远程读取数据，速度相当慢！！ 二、找一个富文本编辑软件（如NOTEPAD+）编辑SQL语句，这样会很好地检查语法。有时候带参数较多检查语法复杂时，结合FineReport中生成的日志，再找一个第三方数据库访问软件（如PL/SQL）进行数据检索，可以很快定位语法错误。
  • mysql linux启动与停止 墙头上一根草
    如何启动/停止/重启MySQL一、启动方式1、使用 service 启动：service mysqld start2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start3、使用 safe_mysqld 启动：safe_mysqld&二、停止1、使用 service 启动：service mysqld stop2、使用 mysqld 脚本启动：/etc/inin
  • Spring中事务管理浅谈 aijuans spring事务管理
    Spring中事务管理浅谈 By Tony Jiang@2012-1-20 Spring中对事务的声明式管理 拿一个XML举例 [html]  view plain copy print ? <?xml version="1.0" encoding="UTF-8"?>&nb
  • php中隐形字符65279（utf-8的BOM头）问题 alxw4616
    php中隐形字符65279（utf-8的BOM头）问题 今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror.   调试: 1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题. 2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符.        
  • 调用对象是否需要传递对象(初学者一定要注意这个问题) 百合不是茶 对象的传递与调用技巧
        类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看   为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇)   类和对象的基础概念:   JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接
  • JDK1.5 AtomicLong实例 bijian1013 javathreadjava多线程AtomicLong
    JDK1.5 AtomicLong实例 类 AtomicLong 可以用原子方式更新的 long 值。有关原子变量属性的描述，请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中（如以原子方式增加的序列号），并且不能用于替换 Long。但是，此类确实扩展了 Number，允许那些处理基于数字类的工具和实用工具进行统一访问。  
  • 自定义的RPC的Java实现 bijian1013 javarpc
            网上看到纯java实现的RPC，很不错。         RPC的全名Remote Process Call，即远程过程调用。使用RPC，可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例，从中可以看到RPC如何
  • 【RPC框架Hessian一】Hessian RPC Hello World bit1129 Hello world
    什么是Hessian The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p
  • 【Spark九十五】Spark Shell操作Spark SQL bit1129 shell
    在Spark Shell上，通过创建HiveContext可以直接进行Hive操作   1. 操作Hive中已存在的表   [hadoop@hadoop bin]$ ./spark-shell Spark assembly has been built with Hive, including Datanucleus jars on classpath Welcom
  • F5　往header加入客户端的ip ronin47
    when HTTP_RESPONSE {if {[HTTP::is_redirect]}{         HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo
  • java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5, bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/2541117420116135376632/ 写了个java版的 public class GreatestLeftRightDiff { /** * Q61.在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差。 * 求所有数对之差的最大值。例如在数组
  • mongoDB 索引 开窍的石头 mongoDB索引
    在这一节中我们讲讲在mongo中如何创建索引       得到当前查询的索引信息      db.user.find(_id:12).explain();        cursor: basicCoursor 指的是没有索引  &
  • [硬件和系统]迎峰度夏 comsci 系统
      从这几天的气温来看，今年夏天的高温天气可能会维持在一个比较长的时间内    所以，从现在开始准备渡过炎热的夏天。。。。    每间房屋要有一个落地电风扇，一个空调(空调的功率和房间的面积有密切的关系)    坐的，躺的地方要有凉垫，床上要有凉席       电脑的机箱
  • 基于ThinkPHP开发的公司官网 cuiyadll 行业系统
    后端基于ThinkPHP，前端基于jQuery和BootstrapCo.MZ 企业系统 轻量级企业网站管理系统 运行环境:PHP5.3+, MySQL5.0 系统预览 系统下载：http://www.tecmz.com 预览地址：http://co.tecmz.com 各种设备自适应 响应式的网站设计能够对用户产生友好度，并且对于
  • Transaction and redelivery in JMS (JMS的事务和失败消息重发机制) darrenzhu jms事务承认MQacknowledge
    JMS Message Delivery Reliability and Acknowledgement Patterns http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/ Transaction and redelivery in
  • Centos添加硬盘完全教程 dcj3sjt126com linuxcentoshardware
    Linux的硬盘识别: sda        表示第1块SCSI硬盘 hda       表示第1块IDE硬盘 scd0      表示第1个USB光驱 一般使用“fdisk -l”命
  • yii2 restful web服务路由 dcj3sjt126com PHPyii2
    路由 随着资源和控制器类准备，您可以使用URL如 http://localhost/index.php?r=user/create访问资源，类似于你可以用正常的Web应用程序做法。 在实践中，你通常要用美观的URL并采取有优势的HTTP动词。 例如，请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示
  • MongoDB查询(4)——游标和分页[八] eksliang mongodbMongoDB游标MongoDB深分页
    转载请出自出处：http://eksliang.iteye.com/blog/2177567 一、游标         数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制，从shell中定义一个游标非常简单，就是将查询结果分配给一个变量（用var声明的变量就是局部变量），便创建了一个游标，如下所示： > var
  • Activity的四种启动模式和onNewIntent() gundumw100 android
    Android中Activity启动模式详解 　　在Android中每个界面都是一个Activity，切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。 　　Android总Activity的启动模式分为四种： Activity启动模式设置： <acti
  • 攻城狮送女友的CSS3生日蛋糕 ini htmlWebhtml5csscss3
    在线预览：http://keleyi.com/keleyi/phtml/html5/29.htm   代码如下：   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>攻城狮送女友的CSS3生日蛋糕-柯乐义<
  • 读源码学Servlet（1）GenericServlet 源码分析 jzinfo tomcatWebservlet网络应用网络协议
    Servlet API的核心就是javax.servlet.Servlet接口，所有的Servlet 类（抽象的或者自己写的）都必须实现这个接口。在Servlet接口中定义了5个方法，其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。     先看javax.servlet.servlet接口源码：  package
  • JAVA进阶：VO(DTO)与PO(DAO)之间的转换 snoopy7713 javaVOHibernatepo
      PO即 Persistence Object　　VO即 Value Object 　VO和PO的主要区别在于：　　VO是独立的Java Object。　　PO是由Hibernate纳入其实体容器（Entity Map）的对象，它代表了与数据库中某条记录对应的Hibernate实体，PO的变化在事务提交时将反应到实际数据库中。 　实际上，这个VO被用作Data Transfer
  • mongodb group by date 聚合查询日期 统计每天数据（信息量） qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 1 */ { "_id" : ObjectId("557ac1e2153c43c320393d9d"), "msgType" : "text", "sendTime" : ISODate("2015-06-12T11:26:26.000Z")
  • java之18天 常用的类(一) Luob. MathDateSystemRuntimeRundom
    System类 import java.util.Properties; /** * System: * out:标准输出,默认是控制台 * in:标准输入,默认是键盘 * * 描述系统的一些信息 * 获取系统的属性信息:Properties getProperties(); * * * */ public class Sy
  • maven wuai maven
    1、安装maven：解压缩、添加M2_HOME、添加环境变量path 2、创建maven_home文件夹，创建项目mvn_ch01,在其下面建立src、pom.xml，在src下面简历main、test、main下面建立java文件夹 3、编写类，在java文件夹下面依照类的包逐层创建文件夹，将此类放入最后一级文件夹 4、进入mvn_ch01 4.1、mvn compile ,执行后会在
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他