WindrunnerMax
WindrunnerMax

MVVM模式的理解

MVVM模式的理解

MVVM全称Model-View-ViewModel是基于MVC和MVP体系结构模式的改进，MVVM就是MVC模式中的View的状态和行为抽象化，将视图UI和业务逻辑分开，更清楚地将用户界面UI的开发与应用程序中业务逻辑和行为的开发区分开来。

描述

MVVM模式简化了界面与业务的依赖，有助于将图形用户界面的开发与业务逻辑或数据模型的开发分离开来。在MVVM中的ViewModel作为绑定器将视图层UI与数据层Model链接起来，在Model更新时，ViewModel通过绑定器将数据更新到View，在View触发指令时，会通过ViewModel传递消息到Model，ViewModel像是一个黑盒，在开发过程中只需要关注于呈现UI的视图层以及抽象模型的数据层Model，而不需要过多关注ViewModel是如何传递的数据以及消息。

组成

Model

  • 以面向对象来对对事物进行抽象的结果，是代表真实状态内容的领域模型。
  • 也可以将Model称为数据层，其作为数据中心仅关注数据本身，不关注任何行为。

View

  • View是用户在屏幕上看到的结构、布局和外观，即视图UI。
  • 当Model进行更新的时候，ViewModel会通过数据绑定更新到View。

ViewModel

  • ViewModel是暴露公共属性和命令的视图的抽象。
  • ViewModel中的绑定器在视图和数据绑定器之间进行通信。
  • 在Model更新时，ViewModel通过绑定器将数据更新到View，在View触发指令时，会通过ViewModel传递消息到Model。

优点

  • 低耦合: 视图View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  • 可重用性: 可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发: 开发人员可以专注于业务逻辑和数据的开发Model，设计人员可以专注于页面设计。
  • 可测试: 界面素来是比较难于测试的，测试行为可以通过ViewModel来进行。

不足

  • 对于过大的项目，数据绑定需要花费更多的内存。
  • 数据绑定使得Bug较难被调试，当界面异常，可能是View的代码有问题，也可能是Model的代码有问题，数据绑定使得一个位置的Bug可能被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。

实例

下面是参照Vue实现的简单的数据绑定实例。


<html>
<head>
    <title>数据绑定title>
head>
<body>
    <div id="app">
        <div>{{msg}}div>
        <div>{{date}}div>
        <button onclick="update()">updatebutton>
    div> 
body>
<script type="text/javascript">

///////////////////////////////////////////////////////////////////////////////
    var Mvvm = function(config) {
        this.$el = config.el;
        this.__root = document.querySelector(this.$el);
        this.__originHTML = this.__root.innerHTML;

        function __dep(){
            this.subscribers = [];
            this.addSub = function(watcher){
                if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
            }
            this.notifyAll = function(){
                this.subscribers.forEach( watcher => watcher.update());
            }
        }


        function __observe(obj){
            for(let item in obj){
                let dep = new __dep();
                let value = obj[item];
                if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
                Object.defineProperty(obj, item, {
                    configurable: true,
                    enumerable: true,
                    get: function reactiveGetter() {
                        if(__dep.target) dep.addSub(__dep.target);
                        return value;
                    },
                    set: function reactiveSetter(newVal) {
                        if (value === newVal) return value;
                        value = newVal;
                        dep.notifyAll();
                    }
                });
            }
            return obj;
        }

        this.$data = __observe(config.data);

        function __proxy (target) {
            for(let item in target){
                Object.defineProperty(this, item, {
                    configurable: true,
                    enumerable: true,
                    get: function proxyGetter() {
                        return this.$data[item];
                    },
                    set: function proxySetter(newVal) {
                        this.$data[item] = newVal;
                    }
                });
            }
        }

        __proxy.call(this, config.data);

        function __watcher(fn){
            this.update = function(){
                fn();
            }

            this.activeRun = function(){
                __dep.target = this;
                fn();
                __dep.target = null;
            }
            this.activeRun();
        }

        new __watcher(() => {
            console.log(this.msg, this.date);
        })

        new __watcher(() => {
            var html = String(this.__originHTML||'').replace(/"/g,'\\"').replace(/\s+|\r|\t|\n/g, ' ')
            .replace(/\{\{(.)*?\}\}/g, function(value){ 
                return  value.replace("{{",'"+(').replace("}}",')+"');
            })
            html = `var targetHTML = "${html}";return targetHTML;`;
            var parsedHTML = new Function(...Object.keys(this.$data), html)(...Object.values(this.$data));
            this.__root.innerHTML = parsedHTML;
        })

    }

///////////////////////////////////////////////////////////////////////////////

    var vm = new Mvvm({
        el: "#app",
        data: {
            msg: "1",
            date: new Date(),
            obj: {
                a: 1,
                b: 11
            }
        }
    })

    function update(){
        vm.msg = "updated";
    }

///////////////////////////////////////////////////////////////////////////////
script>
html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/38296857
https://baike.baidu.com/item/MVVM/96310
https://www.liaoxuefeng.com/wiki/1022910821149312/1108898947791072

你可能感兴趣的:(Vue,vue,javascript,设计模式)

  • 开发经验及方法导读 盒子君~ #算法机器人系统架构
    文章目录前言一、搭建工程开发环境专题三方库的调用方法二、代码程序设计专题1、C++开发知识树的阶段2、程序设计Kiss原则3、数据结构与语法规范4、CPP代码检查工具5、架构模式设计层（设计模式）6、代码重构7、代码设计模式--如何提高代码的运行效率、可读性、可维护性、健壮性？8、【C++RAII机制】将资源用类进行封装起来，做到资源创建即完成初始化，使用完资源即自动销毁9、源代码封装成库Lib的
  • [@vuecompiler-sfc] defineProps is a compiler macro and no longer needs to be imported m0_67403143 前端htmlvue.jsjavascript前端
    VueVite项目启动后，控制台报错:[@vue/compiler-sfc]definePropsisacompilermacroandnolongerneedstobeimported.具体报错提示如：终端使用npmrundev启动项目$npmrundev>[email protected]>vitePre-bundlingdependencies:vue(thiswillberunon
  • 【2024年华为OD机试】(C/D卷,200分)- 5G网络建设 （JavaScript&Java & Python&C/C++） 妄北y 算法汇集笔记总结(保姆级)华为odc语言5Gpythonjavascriptjava网络
    一、问题描述题目描述现需要在某城市进行5G网络建设，已经选取N个地点设置5G基站，编号固定为1到N。接下来需要各个基站之间使用光纤进行连接以确保基站能互联互通。不同基站之间假设光纤的成本各不相同，且有些节点之间已经存在光纤相连。请你设计算法，计算出能联通这些基站的最小成本是多少。注意：基站的联通具有传递性，比如基站A与基站B架设了光纤，基站B与基站C也架设了光纤，则基站A与基站C视为可以互相联通。
  • 第七篇：vue3 计算属性：computed 小画家~ 前端vue.jsjavascript前端
    v-model="firstName".//v-model.就是双向绑定的意思//通过v-model进行绑定姓：名：全称：!!!!!import{ref}from'vue'//这里数据的双向绑定,通过ref实现数据响应letfirstName=ref("zhan")letlastName=ref("san")计算属性——只读取，不修改//计算属性——只读取，不修改/*letfullName=com
  • 第六篇 vue3 【toRefs 与 toRef】 小画家~ vue.js前端javascript
    import{ref,reactive,toRefs,toRef}from'vue'//数据letperson=reactive({name:'张三',age:18,gender:'男'})作用：将一个响应式对象中的每一个属性，转换为ref对象。备注：toRefs与toRef功能一致，但toRefs可以批量转换。let{name,gender}=toRefs(person)//取出一批数据的值//
  • JS中const有没有变量提升 lvbb66 javascript前端开发语言
    在JavaScript中，const关键字用于声明一个只读的常量，其值在初始化后不能被重新赋值。关于变量提升（Hoisting），它是JavaScript中一个重要的概念，指的是无论变量或函数声明在何处，它们都会被“提升”到其所在作用域的最顶部。但是，这个规则不完全适用于const和let声明的变量。变量提升（Hoisting）的传统理解在ES6之前，JavaScript只有var关键字用于声明变
  • 第五篇 vue3 ref 与 reactive 对比 小画家~ 前端vue.js
    ref若需要自动加载.value,那么就要在底部菜单中设置选项选择vue勾选：AutoInsert:DotValueAuto-completeRefvaluewith`.value`.注意点：ref不能写越过value.必须要在valeu前面进行定义通过reactive来修改整体名称的值letcarad=reactive({brand:"小汽车",price:"1888"})//通过reactiv
  • 搭建vue3+ts+vite+pinia框架 光吃，不胖 vue.jstypescriptsass前端前端框架
    目录一、搭建准备二、安装vite并创建vue项目1、安装vite2、新建vue项目3.配置vite4、解决报错①、找不到模块“./App.vue”。你的意思是要将"moduleResolution"选项设置为"node"，还是要将别名添加到"paths"选项中?②、allowImportingTsExtensions报错③、找不到模块“./App.vue”或其相应的类型声明。④、找不到模块“pat
  • vue3大屏适配方案 技术需要沉淀gogo 大屏适配方案前端vue.jstypescript
    1、下载插件vue3-scale-boxnpminstallvue3-scale-box2、引入即可importScaleBoxfrom"vue3-scale-box";importmain1from"@/components/main.vue";
  • 用python、JavaScript (Node.js)、JAVA等多种语言的实例代码演示教你如何获取股票数据（实时数据、历史数据、CDMA、KDJ等指标数据配有股票数据API接口说明文档详解参数说明 Eumenides_max pythonjavascriptnode.js股票API接口股票数据接口
    近一两年来，股票量化分析逐渐受到广泛关注。而作为这一领域的初学者，首先需要面对的挑战就是如何获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息，这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的核心任务是从这些数据中挖掘出有价值的信息，为我们的投资策略提供有力的支持。在寻找数据的过程中，我尝试了多种途径，包括自编网易股票页面爬虫、申万行业数据爬虫，以及同花
  • 【前端三剑客实现3D相册~爱她，就为她做一个3D相册吧！！！】 烂然星陈 前端动态集前端3dhtml5css3javascript
    爱她，就为她做一个3D相册吧！！！创建一个3D相册盒子效果的HTML页面引言一、技术栈二、页面结构三、样式设计四、JavaScript逻辑五、总结完整源码获取，私信了解更多！！！创建一个3D相册盒子效果的HTML页面引言在网页设计中，3D效果总能吸引用户的注意力，提升用户体验。本文介绍如何使用HTML、CSS和JavaScript创建一个3D相册盒子效果。这个效果不仅包含了3D旋转和缩放动画，还结
  • 在 Vue 3 中，如何处理和优化大型组件的性能？ JJCTO袁龙 Vuevue.js前端javascript
    在Vue3中，如何处理和优化大型组件的性能？在现代开发中，使用Vue3创建复杂和大型应用程序变得越来越普遍。这些大型组件往往包含了复杂的逻辑和大量的DOM元素，因此性能优化成为了一个不可忽视的话题。在本文中，我们将探讨如何在Vue3中处理和优化大型组件的性能，确保你的应用在拥有良好用户体验的同时，依旧高效流畅。一、理解Vue3的响应式系统在谈论优化大型组件之前，有必要先理解Vue3如何处理响应式数
  • vue 的 MVVM 原理 沧海一声笑·rush 前端
    文章目录一.过程1.1指令解析器1.2检测目前几种主要的mvc的结构，都是实现了单向的数据绑定。双向的数据绑定无非就是添加了change事件，然后来动态的更改model和view,发布者订阅者模式数据劫持获取文档碎片节点。将文档文档碎片节点放到页面中，减少页面的回流和重绘。一.过程实现指令解析器Compile数据监听器Observe实现一个watcher去更新视图实现一个proxy1.1指令解析器
  • Vue 3 中的 fragment 是什么？它为什么被引入？ JJCTO袁龙 Vuevue.js前端javascript
    Vue3中的Fragment：全新特性与应用场景在前端开发中，我们自主决定如何组织和展示数据。对于频繁与DOM打交道的开发者而言，如何高效、灵活地进行渲染显得尤为重要。Vue.js作为一款备受欢迎的渐进式JavaScript框架，持续为开发者提供各种性能优化和特性增强。在Vue3中，Fragment功能的引入为开发者们提供了更多选择与便利。本文将重点讨论Vue3中的Fragment的含义、特性，以
  • 如何优雅的使用策略模式 悲伤荷包蛋hb 策略模式bash开发语言后端java
    最近这段时间，想给大家分享一下设计模式的一些用法以及在项目中怎么运用。设计模式是软件设计中常见问题的典型解决方案。它们就像能根据需求进行调整的预制蓝图，可用于解决代码中反复出现的设计问题。今天就拿其中一个问题来分析，使用策略模式来解决问题，没有了解过策略模式或者长时间不用已经忘了策略模式的小伙伴先来简单了解一下策略模式吧。什么是策略模式？策略模式是一种行为型模式，它将对象和行为分开，将行为定义为一
  • 五、React(环境配置和ES6语法糖） 老帅比阿 web前端开发javascriptreact.js前端
    文章目录一、React是什么？二、React能用来做什么？三、配置环境四、ES6语法糖总结一、React是什么？React是一个开源JavaScript库，用于专门为单页应用程序构建用户界面。它用于处理Web和移动应用程序的视图层，允许我们创建可重用的UI组件。二、React能用来做什么？React非常灵活。你学会了React，你就可以在各种各样的平台上使用它来构建高质量的用户界面。React是一
  • vue中MVVM实现原理 danniyedan httpshtmlc++
    往页面中添加数据，从传统的dom操作，改变成数据层操作。不需要关注dom层操作，专注于操作数据，数据是什么，页面就显示什么。最常用的是用vue-cli脚手架的方式来创建一个项目。它是以一种单文件组件的方式，即为.vue文件，它里面包含了模板、业务逻辑和样式。响应式数据绑定,当数据(model层)发生改变,它会自动更新视图(view),内部实现原理是利用Es5中的Object.definedProp
  • vue mvvm 原理 LikY03321 vue.js学习前端
    一.什么是mvvmMVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。要实现一个mvvm的库，我们首先要理解清楚其实现的整体思路。先看看下图的流程：1.实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要绑定好更新函数；2.实现Obse
  • C++实现设计模式---组合模式 (Composite) 计算机小混子 设计模式c++设计模式组合模式
    组合模式(Composite)组合模式是一种结构型设计模式，它将对象组合成树形结构以表示“部分-整体”的层次结构。组合模式使客户端对单个对象和组合对象的使用具有一致性。意图将对象组合成树形结构，以表示“部分-整体”的层次结构。使得客户端可以以一致的方式处理单个对象和对象的组合。使用场景需要表示部分与整体的层次结构：如文件系统、组织架构等。客户端需要以一致的方式处理单个对象和组合对象：统一处理方式简
  • C++设计模式 - 装饰器（Decorator） 吃米饭 设计模式设计模式c++装饰器模式
    单一职责模式:在软件组件的设计中，如果责任划分的不清晰，使用继承得到的结果往往是随着需求的变化，子类急剧膨胀，同时充斥着重复代码，这时候的关键是划清责任。典型模式DecoratorBridgeDecorator动机（Motivation）在某些情况下我们可能会“过度地使用继承来扩展对象的功能”，由于继承为类型引入的静态特质，使得这种扩展方式缺乏灵活性；并且随着子类的增多（扩展功能的增多），各种子类
  • TypeScript语言的软件工程 编程小筑 包罗万象golang开发语言后端
    TypeScript语言的软件工程实践引言在现代软件工程中，编程语言的选择对项目的成功至关重要。近年来，JavaScript凭借其在Web开发中的广泛应用取得了巨大成功。然而，随着Web应用程序的复杂性不断增加，开发者渐渐发现纯JavaScript在可维护性、类型安全性和开发效率方面的不足。为了解决这些问题，TypeScript应运而生。TypeScript是一种由微软开发的开源语言，它在Java
  • Vue的MVVM架构是什么？请解释其工作原理 JJCTO袁龙 Vuevue.js架构前端
    Vue的MVVM架构是什么？请解释其工作原理在现代Web应用开发中，Vue.js作为一个渐进式框架，因其简洁且灵活的特性受到广泛欢迎。Vue的核心思想是MVVM（Model-View-ViewModel）架构，这一模式使得数据和视图能够保持同步。下面我们将深入探讨Vue的MVVM架构是什么，以及其工作原理，帮助开发者更好地理解Vue的设计理念。MVVM架构的基本概念MVVM是“Model-View
  • C++实现设计模式---装饰器模式 (Decorator) 计算机小混子 设计模式c++设计模式装饰器模式
    装饰器模式(Decorator)装饰器模式是一种结构型设计模式，它允许动态地将责任附加到对象上，既可以在运行时给一个对象添加功能，又不会影响其他对象的功能。意图动态地扩展对象的功能。避免创建过多的子类，通过装饰器来“包装”对象，添加新功能。保持类的单一职责和开放封闭原则。使用场景系统需要动态地添加功能给对象：如UI框架中的组件装饰，能动态增加功能（如窗口的滚动条、边框等）。不希望通过继承来扩展对象
  • 搭建直播网站技术层面准备全流程 sanx18 java
    搭建直播网站涉及多个环节，包括前期的规划、技术选型、开发、部署。以下是搭建直播网站的完整流程：1.技术选型服务器端语言与框架：后端-选择如Java(SpringBoot)、或Go。数据库：用户和直播信息-MySQL/PostgreSQL。快速读写-Redis（用于弹幕、热度计数等）。文件存储-阿里云OSS、腾讯云COS或本地存储。2.前端框架：PC端-React、Vue.js。移动端-ReactN
  • 【设计模式】——装饰器模式（Decorator Pattern） J^T 设计模式C/C++设计模式装饰器模式c++系统架构
    目录引言一、装饰器模式的基本概念核心思想装饰器模式的架构UML图应用场景二、装饰器模式的优点与缺点优点缺点三、C++实现装饰器模式1.定义抽象组件2.实现具体组件3.定义装饰器基类4.实现具体装饰器5.客户端使用四、总结引言在软件开发中，设计模式是解决常见问题的最佳实践。装饰器模式（DecoratorPattern），又称为包装器模式（WrapperPattern），是一种结构型设计模式，它允许在
  • vue基础代码第一篇 东锋1.3 vue.jsjavascriptvue.js前端
    1创建一个基本的Vue应用import { createApp } from 'vue';import App from './App.vue';createApp(App).mount('#app');2在Vue组件中使用数据绑定  {{ message }}import { defineComponent } from 'vue';export default defineComponent(
  • IOS APP上架被拒 4.3(a) - Design - Spam，成功 星辰文宇 iosiosuni-app
    目录一、被拒原因二、百度方法三、尝试uniapp打包iosapk，混淆代码1、JavaScript-obfuscator插件（我没有使用）编辑2、HbuliderXuniapp混淆（做了）3、IpaGuard混淆工具四、上传ipa文件1、先处理失败的App2、上传ipa文件一、被拒原因翻译一下：我们注意到，您的应用程序与终止的苹果开发者计划帐户之前提交的应用程序共享类似的二进制、元数据和/或概念。
  • 我的软件架构师——Java 职位面试经历。 小蜗牛慢慢爬行 java面试开发语言职场和发展后端springbootspring
    最近，我参加了一家领先的服务型公司的软件架构师（Java）职位的面试。我在这里分享了一些面试官问我的问题。我只列出了与Java相关的问题，因为本文主要关注Java。面试官问我有关AWS、Docker、Kubernetes、Kafka、ElasticSearch、SQL/NoSQL和设计模式的问题。ClassNotFoundException和NoClassDefFoundError有什么区别？当您
  • 小白也能懂的Vite + React组件开发完全指南 前端
    学习前端开发，你可能会听说过很多工具和框架，其中Vite和React无疑是炙手可热的明星。Vite凭借其闪电般的速度和优秀的开发体验，迅速成为了许多开发者的首选构建工具；而React，作为目前最流行的JavaScript库之一，以其组件化、声明式编程的特性，简化了复杂的Web应用开发。这篇教程将带你快速掌握AI写代码工具Vite和React组件开发的核心技能，让你从小白也能轻松入门，独立完成简单的
  • C++设计模式——Decorator装饰器模式 程序员与背包客_CoderZ C/C++设计模式c++设计模式装饰器模式开发语言c语言linux
    一，装饰器模式简介装饰器模式是一种结构型设计模式，它允许在不改变现有对象的情况下，动态地将功能添加到对象中。装饰器模式是通过创建具有新行为的对象来实现的，这些对象将原始对象进行了包装。装饰器模式遵循开放/关闭原则，允许开发者在不修改现有代码的情况下添加新的装饰器。日常开发中常用的装饰器属于类装饰器，通过继承父类来实现。二，装饰器模式的结构1.抽象组件(Component)：被装饰的对象，声明了对外
  • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
    一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
  • java编程思想--复用类 百合不是茶 java继承代理组合final类
          复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
  • [开源与生态系统]国产CPU的生态系统 comsci cpu
          计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
  • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
    jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
  • 页面上调用 QQ oloz qq
    <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
  • 一些问题 文强chu 问题
    1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
  • 生活没有安全感 小桔子 生活孤独安全感
           圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
  • php 基础语法 aichenglong php 基本语法
    1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
  • mybatis tools 配置详解 AILIKES mybatis
    MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
  • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
    继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
  • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
    <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
  • TDD实践（一） bijian1013 java敏捷TDD
    一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
  • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
    什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
  • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
    1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
  • tfs restful api 加auth 2.0认计 ronin47
    　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
  • jdk环境变量配置 byalias javajdk
    进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
  • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
    package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
  • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
    1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
  • c++运算符重载 CrazyMizzz C++
    一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
  • hive DDL语法汇总 daizj hive修改列DDL修改表
    hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
  • jbox使用说明 dcj3sjt126com Web
    参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
  • UISegmentedControl 开发笔记 dcj3sjt126com
      //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
  • Slick生成表映射文件 ekian scala
    Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
  • ES-TEST gengzg test
    package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
  • 为何外键不再推荐使用 hugh.wang mysqlDB
    表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
  • 领域驱动设计 julyflame VODAO设计模式DTOpo
    概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
  • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
           单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
  • logback zhb8015 loglogback
    一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
  • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
    作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
  • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
    互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他