欧阳呀
欧阳呀

原生js实现响应式，数据驱动

响应式编程与数据驱动概览

什么是响应式编程：

响应式编程：(Reactive Programming 或称反应式编程)是一种流行的编程方法，编写代码是基于对变化的反应。

响应式编程的优点：

执行的代码和执行的线程是分开的。这种方式在服务端的架构里面有很大的意义，只保留一个线程处理程序进程层面的代码，跟Node.js很相似。如果这个线程被阻塞的话，那整个服务器就不会再处理其他请求了。因此，在JavaScript中，每个调用在一开始的时候就是异步执行，在任何情况下都可以通过响应式的API或者其他有用的抽象方式，来解决回调地狱的问题。

数据驱动

数据驱动：是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。相比较传统的前端开发，如 jQuery 前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，所有的逻辑都是对数据的修改，而不用触碰 DOM，这样代码也利于维护。

原生js实现响应式，数据驱动

实现原理及思路

利用发布订阅模式，建立一个订阅器模型，写一个劫持方法，加上观察者模式，利用 js 的Object.defineProperty方法，劫持当前数据，观察到数据发生了变化之后，使用set去改变数据，被订阅的视图相对应的去改变。

第一步：建立订阅器模型

// 订阅器模型
var Dep = {
    clientList: {},
    listen: function (key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn);
    },
    trigger: function () {
        var key = Array.prototype.shift.call(arguments),
            fns = this.clientList[key];
        if (!fns || fns.length === 0) {
            return false;
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments);
        }
    }
};

建立劫持方法

// 劫持方法
var dataHijack = function ({ data, tag, datakey, selector }) {
    var value = '',
        el = document.querySelector(selector);
    // 数据劫持
    Object.defineProperty(data, datakey, {
        get: function () {
            console.log('我获取到值了');
            return value;
        },
        set: function (newValue) {
            console.log('我设置值了');
            value = newValue;
            Dep.trigger(tag, newValue);
        }
    });
    // 绑定观察者
    Dep.listen(tag, function (text) {
        el.innerHTML = text;
    });
}

调用

<!DOCTYPE html>
<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>demo</title>
</head>

<body>
    <div id="app">
        订阅视图-1：<span class="box-1"></span>
        订阅视图-2：<span class="box-2"></span>
    </div>
    <script src="index.js"></script>
    <script>
        // 数据
        var dataObj = {};
        // 数据劫持
        dataHijack({
            data: dataObj,
            tag: 'view-1',
            datakey: 'one',
            selector: '.box-1'
        });
        dataHijack({
            data: dataObj,
            tag: 'view-2',
            datakey: 'two',
            selector: '.box-2'
        });
        // 初始化赋值
        dataObj.one = 'one';
        dataObj.two = 'two';
    </script>
</body>

</html>

响应式效果展示

操作说明

蓝色框是取值，红色框是设置值。
直接在控制台修改，html里面的视图会得到响应发生变化
这就是响应式与数据驱动的魅力。

最后效果

原生js实现响应式，数据驱动_第1张图片

欢迎大家评论转发，转发请注明出处。

你可能感兴趣的:(vue,js,响应式设计)

  • 【JavaScript】11-JS高阶技巧 beibeibeiooo JavaScript【已完结】javascript前端ecmascriptes6
    本文介绍JS中的一些高阶技巧。目录1.深浅拷贝1.1浅拷贝1.2深拷贝1.2.1通过递归实现1.2.2lodash/cloneDeep1.2.3JSON.stringify()2.异常处理2.1throw抛异常2.2try/catch捕获异常2.3debugger3.处理this3.1this指向3.1.1普通函数this3.1.2箭头函数的this3.2改变this3.2.1call方法改变3.
  • vue使用el-select下拉框匹配不到值的优化方案，el-select显示，当选择框的选项无法与选择框的value值匹配时，不显示value值的处理办法 Kingsaj 项目实操vue.jselementuijavascript
    问题描述：新建表单数据，下拉框选项一般从接口获取的数据列表，比如后期某个数据关停了，这条数据就会被删除，导致我们取不到这条数据。就会出现el-select下拉框匹配不到值的情况。所以我们要处理这种情况的。复现步骤：数据字典新增一条【数据项】新添加一条工单数据绑定这个新增的【数据项】，提交保存操作。保存成功后，删除数据字典新增的【数据项】。然后点击当前新添加的工单数据编辑，操作，查看工单数据字典这一
  • el-select多选选择器（在懒加载的基础上） 重磅：实现模糊搜索+多选+未加载数据的正确回显！！ SerendipityM javascript前端开发语言vue.jshtml5
    项目需求：由于表单中的一个el-select中的数据过多，下拉框用户体验不好，因此需要做成有懒加载且分页的下拉框。后又因为该功能需要多选，并且打开表单要能够正确回显。这些需求加起来，导致问题变得复杂起来。我在网上也看了许多文章，没有找到好的解决方案。因此我将自己的记录下来，还望各位指点！！！（本项目请求后端需要传id，page，size，name）(name的格式为JSON形式的[id:1,nam
  • VUE中的组件加载方式 catino vue.js前端javascript
    加载方式有哪些，及如何进行选择常规的静态引入是在组件初始化时就加载所有依赖的组件，而懒加载则是等到组件需要被渲染的时候才加载。对于大型应用，可能会有很多组件，如果一开始都加载，可能会影响首屏加载时间。如果某些组件在首屏不需要，比如弹窗或者标签页里的内容，那么懒加载会更好，减少初始加载时间，实现时使用动态导入和异步组件，同时注意处理加载状态和错误处理。。反之，如果组件在页面初始化时就必须显示，那么静
  • 微信小程序 uni-app解决旧页面缓存问题 catino 微信小程序微信小程序uni-app前端
    微信小程序在迭代版本后，若未清除原有缓存，显示的还是旧版，加入下述代码可解决这个问题在common.js文件中加入mpUpdate(){constupdateManager=wx.getUpdateManager()//小程序版本更新管理器updateManager.onCheckForUpdate(function(res){//请求完新版本信息的回调})updateManager.onUpda
  • uni-app 设置页面导航条颜色 catino uni-app
    下述两种方法中颜色限制为十六进制颜色。1.pages.json页面路由中，用style设置每一个页面的导航栏背景颜色如：{"pages":[{"path":"pages/index/index","style":{"navigationBarTitleText":"首页",//设置页面标题文字"enablePullDownRefresh":true//开启下拉刷新"navigationBarBac
  • 【大语言模型_5】xinference部署embedding模型和rerank模型 没枕头我咋睡觉 大语言模型语言模型embedding人工智能
    一、安装xinferencepipinstallxinference二、启动xinference./xinference-local--host=0.0.0.0--port=5544三、注册本地模型1、注册embedding模型curl-XPOST"http://localhost:5544/v1/models"\-H"Content-Type:application/json"\-d'{"mod
  • 探索Astra DB与LangChain的集成：从向量存储到对话历史 eahba 数据库langchainpython
    技术背景介绍AstraDB是DataStax推出的一款无服务器的向量数据库，基于ApacheCassandra®构建，并通过易于使用的JSONAPI提供服务。AstraDB的独特之处在于其强大的向量存储能力，这在处理自然语言处理任务时尤为突出。LangChain与AstraDB的集成为开发者提供了强大的工具链，从数据存储到语义缓存，再到自查询检索，帮助简化复杂的数据操作。核心原理解析LangCha
  • vue中根据html动态渲染内容 今天吃了嘛o vue.jshtmljavascript
    需求：根据数据中的html，因为我是在做填空，所以是需要将html中的_____替换成input，由于具体需求我使用的是元素contenteditable代替的可编辑的inputhtml部分js部分//这个是为了保证输入的时候光标保持在最后constmoveCursorToEnd=(element:HTMLElement)=>{constrange=document.createRange();c
  • uniapp特有生命周期钩子 浪裡遊 uniappuni-appvue.js前端
    生命周期钩子在UniApp中，页面的生命周期与Vue的生命周期钩子紧密相关，并且针对小程序平台，UniApp还扩展了一些额外的生命周期钩子。以下是重要的页面生命周期钩子及其简要说明：基础的Vue生命周期钩子beforeCreate在实例初始化之后，数据观测(dataobserver)和event/watcher事件配置之前被调用。created实例已经创建完成之后被调用。此时已完成数据观测，属性和
  • cesium 文字避让 花归去 cesiumjavascript前端vue.js
    token记得换成您自己的！！！申请cesium的token官网【Cesium:ThePlatformfor3DGeospatial】>import*asCesiumfrom'cesium';import{onMounted,reactive,ref,computed,nextTick}from'vue';//地图实例letviewer:any;constshowText=()=>{viewer.
  • 一篇文带你了解Go 1.24最新版本有趣的变化 磐基Stack专业服务团队 golangspring后端
    #作者：曹付江文章目录前言1.语言特性更新1.1泛型类型别名：你的代码终于不再「绕口」了！2.工具链更新2.1引入tool指令，goget终于知道哪些是工具了2.2构建缓存优化，gorun变聪明了，不再瞎忙活2.3JSON输出改进，gobuild-json：构建日志终于能「看懂」了3.性能优化3.1运行时性能提升3.2cgo优化，cgo更快了，调用C代码更流畅3.3WebAssembly(Wasm
  • emit作用 肉肉不吃 肉 vue.jsjavascript前端
    emit是Vue3中用于子组件向父组件传递事件和数据的机制。它允许子组件触发一个自定义事件，父组件可以监听这个事件并执行相应的逻辑。emit的作用子组件向父组件通信：子组件通过emit触发一个自定义事件，父组件监听这个事件并执行相应的逻辑。传递数据：子组件可以通过emit向父组件传递数据，父组件可以在事件处理函数中接收这些数据。解耦组件逻辑：子组件不需要知道父组件的具体实现，只需要触发事件，父组件
  • 探究Three.js中模型移动与旋转的交互逻辑 Front_Yue 3D技术实践指南javascriptthree.js3d
    前言Three.js作为一个功能强大的JavaScript3D库，极大地简化了在网页上创建和展示3D图形的过程。它在游戏开发、产品展示、虚拟现实等众多领域都被广泛应用。通过Three.js，开发者能够轻松创建出复杂的三维场景和交互性强的3D应用，为用户带来沉浸式的体验。一、模型移动的交互逻辑实现（一）键盘控制模型移动利用键盘事件来控制模型在三维空间中的位置移动，是一种常见且便捷的交互方式。以下为具
  • 从零开始：使用原生JS打造简易飞机大战游戏 西域情歌
    本文还有配套的精品资源，点击获取简介：在本教程中，我们将探讨如何利用原生JavaScript的特性，包括事件处理、DOM操作、定时器和音频处理，来构建一个基础的“飞机大战”游戏。该游戏的核心元素包括玩家飞机、敌机、子弹和碰撞检测，它们通过HTML和CSS展现在页面上。通过编写JavaScript脚本，我们实现游戏对象的创建与状态管理，响应用户的键盘和点击事件，更新游戏内容，并通过定时器维护游戏循环
  • selectpicker.js 下拉框多选控件的属性和方法 草木红 #JavaScriptjsjqueryjavascriptbootstrap
    中文网：https://www.bootstrapselect.cn/index.htmgithub：https://github.com/snapappointments/bootstrap-select需要用到的js和css（按顺序引用）：bootstrap.min.cssbootstrap-select.cssjquery.min.jsbootstrap.min.jsbootstrap-se
  • 微信小程序：用户拒绝小程序获取当前位置后的处理办法 草木红 #小程序小程序微信小程序
    【1】问题描述：小程序在调用wx.getLocation()获取用地理位置时，如果用户选择拒绝授权，代码会直接抛出错误。如果再次调用wx.getLocation()时，就不会在弹窗询问用户是否允许授权。导致用户想要重新允许获取地理位置时，没有途径。【2】前提准备：小程序已经申请过wx.getLocation()：获取当前的地理位置的服务权限在小程序的根目录下的app.json中配置required
  • 使用Three.js渲染器创建炫酷3D场景 Front_Yue 3D技术实践指南javascriptthree.js3d
    引言在当今数字化的时代，3D图形技术正以其独特的魅力在各个领域掀起波澜。从影视制作到游戏开发，从虚拟现实到网页交互，3D场景以其强烈的视觉冲击力和沉浸式的体验，成为了吸引用户、传达信息的重要手段。而Three.js，作为一款功能强大且广受欢迎的JavaScript3D库，为我们提供了便捷、高效的途径来创建令人炫目的3D场景。本文将深入探讨使用Three.js渲染器创建炫酷3D场景的方方面面，带领读
  • asp.net mvc mysql 开源项目_【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解... weixin_39805732 asp.netmvcmysql开源项目
    SugarSite一个前端支持移动端的企业网站，目前只支持了简单功能，后续还会加上论坛等。源码GIT地址：技术介绍Layui个人而言不喜欢引用一堆东西，越简洁越好，layui正好能够满足我的这种需求，它是一款轻量级UI，JS部分都是采用模块化设计(AMD)，对移动端支持比较不错。唯一不足是目前支持的组件有些少，需要有一定前端扩展能力的人才可以顺心使用。用法：例如我想用form.js和uploda.
  • 微信小程序中使用wx.getLocation获取实时经纬度，并使用经纬度获取当前定位信息 學习？學个屁 微信小程序小程序前端javascript
    需在微信公众平台申请wx.getLocation接口，否则上线不可使用，申请需将图片/录屏资料准备齐全，需有配送/打车类的含地图实时绘制路线的功能通过率才大，其他简单文字展示信息不易通过。官方文档：位置/wx.getLocation；需在app.json文件内进行声明："requiredPrivateInfos":["getLocation","chooseLocation","chooseAdd
  • Node.js 定时任务详解：从基础到高级调度策略 红衣大叔 nodejs帮助文档javascript交互
    在Node.js中处理定时任务有多种方式，可以根据任务的需求选择不同的实现方法。以下是一些常见的用于执行定时任务的技术和库，以及它们的使用场景和示例代码。1.使用setTimeout和setInterval这是最基本的定时任务实现方式，适用于简单的、不需要持久化或复杂调度的任务。示例：使用setTimeout//在5秒后执行一次任务setTimeout(()=>{console.log('This
  • ip2region与express最佳实践 红衣大叔 nodejs帮助文档express
    在使用ip2region进行IP地址定位并与Express框架集成时，最佳实践主要集中在如何高效地初始化Searcher实例、处理并发请求以及优化查询性能等方面。以下是一个基于ip2region和Express的示例项目结构和代码实现，帮助你快速上手。1.项目结构my-express-app/│├──node_modules/├──public/├──routes/│└──ip.js├──view
  • 【致100位技术同路人：代码无边界，GIS×编程的双向奔赴！】 喆星时瑜 留言感谢你们的关注
    今天在地理信息科学的坐标系里标记了一个闪亮锚点——我的CSDN粉丝破百啦！✨破百节点亮起的不只是GISer，还有无数程序员伙伴的坐标！感谢你们的关注，是你们的每一次的让这些文章有了生命力，每一次的都化作我深夜调试的动力。作为穿梭在GIS与通用编程之间的开发者，我始终相信：空间算法是经纬度的代码诗，而工程思维是让地理智能落地的坐标系。未来会继续用PostGIS的严谨写空间索引，用React/Vue的
  • ruoyi 小程序使用笔记 万变不离其宗_8 笔记小程序笔记
    1.上传图片页面jsimportuploadfrom'@/utils/upload.js'methods:{upload(){constconfig={filePath:this.$refs.imageUploadRetire.files[0].path,url:'/api/common/file/upload'}upload(config).then(res=>{this.form.retire
  • Apache Tomcat默认文件漏洞 m0_67401606 javatomcatapacheservlet后端
    ApacheTomcat默认文件漏洞一、概要漏洞描述：默认错误页面，默认索引页面，示例JSP和/或示例servlet安装在远程ApacheTomcat服务器上。应删除这些文件，因为它们可能有助于攻击者发现有关远程Tomcat安装或主机本身的信息。漏洞风险：中修复建议：删除默认索引页并删除示例JSP和servlet。按照Tomcat或OWASP说明更换或修改默认错误页面。二、解决办法1、直接删除do
  • 2025年渗透测试面试题总结-某四字大厂实习面试复盘 一面 二面 三面（题目+回答） 独行soc 2025年渗透测试面试指南面试职场和发展安全web安全红蓝攻防python
    网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录一面1.数组和链表各自的优势和原因2.操作系统层面解析和进程3.线程和进程通信方式及数据安全问题4.线程和多进程的选用场景及原因5.SQL注入绕WAF方式6.FUZZ绕WAF的payload长度通常是多少7.不查资料直接写IPv4正则regex8.Fastjson反序
  • npm 命令使用文档 喆星时瑜 安装部署前端npm前端node.js
    目录简介安装与配置基础命令依赖管理版本控制脚本管理包发布高级命令配置管理最佳实践常见问题1.简介npm(NodePackageManager)是Node.js的官方包管理工具，提供：130万+开源包的注册表访问依赖解析与版本管理项目脚本自动化私有包管理能力完整的包生命周期管理2.安装与配置2.1安装Node.js#通过官方安装包https://nodejs.org#验证安装node-vnpm-v2
  • 免费界面库 python_一个非常简单好用的Python图形界面库(PysimpleGUI) 不妧 免费界面库python
    前一阵，我在为朋友编写一个源代码监控程序的时候，发现了一个Python领域非常简单好用的图形界面库。说起图形界面库，你可能会想到TkInter、PyQt、PyGUI等流行的图形界面库，我也曾经尝试使用，一个很直观的感受就是，这太难用了。就去网上搜搜，看看有没有一些demo，拿来改改，结果很少有，当时我就放弃了这些图形库的学习，转而使用了vue+flask的形式以浏览器网页作为程序界面，因为我会这个
  • 50个常见的python毕业设计/课程设计（源码+文档） 冷琴1996 Python系统设计python课程设计开发语言
    计算机课程设计/毕业设计指南，为计算机相关专业毕业生提供源码、数据库安装、远程调试等相关服务，提供功能讲解视频。下面是50个基于python/django/vue的毕业设计/课程设计。1.网上商城系统这是一个基于python+vue开发的商城网站，平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。整个平台包括前台和后台两个部分。前台功能包括：首页、商品
  • 基于ASP.NET Core的JsonApiDotNetCore框架详解与实践 MCPlayer542
    本文还有配套的精品资源，点击获取简介：JsonApiDotNetCore是一个用于.NETCoreASP.NETCore应用程序的JSONAPI框架，它简化了JSONAPI的构建过程，特别是排序、过滤和分页等常见功能。这个框架支持JSONAPI规范，旨在减少开发者编写重复样板代码的工作量，利用.NETCore的依赖注入特性提供高度的可扩展性。开发者可以通过自定义服务和组件来扩展业务逻辑，并实现版本
  • 解线性方程组 qiuwanchi
    package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
  • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
    在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
  • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
    Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
  • java面试题 Array_06 java面试
    java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
  • 网站加速 oloz 网站加速
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
  • 正确书写单例模式 随意而生 java 设计模式 单例
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
  • 单例模式 香水浓 java
    懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
  • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
  • mysql中查询生日提醒的日期相关的sql baalwolf mysql
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
  • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
    问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
  • Javascript Promise bijian1013 JavaScriptPromise
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
  • 【Java命令三】jstack bit1129 jstack
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
  • jboss 5.1启停脚本　动静分离部署 ronin47
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
  • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
      在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
  • 三色旗算法 bylijinnan java算法
    import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
  • 警告:No configuration found for the specified action: \'s chiangfai configuration
    1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
  • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
  • select into outfile access deny问题 daizj mysqltxt导出数据到文件
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
  • 美国电影超短200句 dcj3sjt126com 电影
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
  • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
  • Maven的settings.xml配置 geeksun settings.xml
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
  • ubuntu的init与系统服务设置 hongtoushizi ubuntu
    转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
  • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
  • php位运算符注意事项 home198979 位运算PHP&
    $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
  • Linux shell数组建立和使用技巧 pda158 linux
    1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
  • hotspot源码(JDK7) ol_beta javaHotSpotjvm
    源码结构图，方便理解：   ├─agent                            Serviceab
  • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
    基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他