阿泽不会飞
阿泽不会飞

Vite知识体系｜ 青训营

内容大纲

  1. 浅谈构建工具
  2. Vite概要介绍
  3. vite 上手实战
  4. Vite整体架构
  5. vite进阶路线
  6. 前端基本概要

为什么需要构建工具？

前端工程的痛点

  • 模块化
    • ESM、CommonJS、UMD
  • 资源编译
    • 高级语法的编译
  • 产物质量
    • 代码体积、代码性能
  • 开发效率
    • 热更新

Vite知识体系｜ 青训营_第1张图片

前端构建工具的意义

Vite知识体系｜ 青训营_第2张图片

Vite是什么? Why

Vite预览

定位:新一代前端构建工具
两大组成部分:

  1. No-bundle开发服务，源文件无需打包
  2. 生产环境基于Rollup 的 Bundler

核心特征:

  1. 高性能,dev启动速度和热更新速度非常快!
  2. 简单易用，开发者体验好

当下问题

Vite知识体系｜ 青训营_第3张图片

基于原生ESM的开发服务优势

  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存

内置的Web 构建能力

Vite 开箱即用的功能等价于

webpack
webpack-dev-server
css-loader
style-loader
less-loader
sass-loader
postcss-loader
file-loader
MiniCssExtractPlugin
HTMLWebpackPlugin

Vite知识体系｜ 青训营_第4张图片

Vite上手实战与架构解析

项目初始化

初始化

Vite知识体系｜ 青训营_第5张图片

使用Sass/Scss & CSS Modules

Vite知识体系｜ 青训营_第6张图片
Vite知识体系｜ 青训营_第7张图片

使用静态资源

Vite知识体系｜ 青训营_第8张图片
除了常见的图片格式, Vite 也内置了对于JSON、Worker、WASM资源的加载支持
https://cn.vitejs.dev/guide/features.html#static-assets

使用HMR

无需额外配置，自动开启

生产环境Tree Shaking

优化原理:

  1. 基于ESM的import/export语句依赖关系，与运行时状态无关
  2. 在构建阶段将未使用到的代码进行删除

Tree Shaking在 Vite中无需配置，默认开启!

Vite 给你最直观的印象如何?

  • 响应迅速
  • 开箱即用

Vite 整体架构

Vite知识体系｜ 青训营_第9张图片

关键技术:依赖预打包

为什么要进行预打包?

  1. 避免node_modules过多的文件请求
  2. 将CommonJS格式转换为ESM格式

实现原理？

  1. 服务启动前扫描代码中用到的依赖
  2. 用Esbuild对依赖代码进行预打包
  3. 改写import语句，指定依赖为预构建产物路径

关键技术:单文件编译

Vite知识体系｜ 青训营_第10张图片
用Esbuild 编译TS/JSX

  • 优势:编译速度提升10-100 x
  • 局限性:
    • 不支持类型检查
    • 不支持语法降级到ES5

关键技术:代码压缩

Vite知识体系｜ 青训营_第11张图片
Esbuild 作为默认压缩工具，替换传统的Terser.Uglify.js 等压缩工具

关键技术:插件机制

Vite知识体系｜ 青训营_第12张图片

Vite进阶路线

深入双引擎

Esbuild

esbuild - An extremely fast bundler for the web

Rollup

Rollup

推荐学习顺序:

  • 先了解基本使用,动手尝试各项常用配置;
  • 然后学习其插件开发。

插件开发

为什么需要插件机制?

  • 抽离核心逻辑
  • 易于拓展

Vite知识体系｜ 青训营_第13张图片

插件示例

Vite知识体系｜ 青训营_第14张图片

参考文档

Vite插件开发文档
复杂度较低的插件: json加载插件
复杂度中等的插件:Esbuild接入插件
复杂度较高的插件:官方React插件

先看文档,过一遍插件钩子的功能，然后多学习其它插件的实现，掌握套路

代码分割(拆包)

Vite知识体系｜ 青训营_第15张图片
https://cn.vitejs.dev/config/build-options.html#build-rollupoptions
https://rollupjs.org/configuration-options/#output-manualchunks

JS编译工具(Babel)

Vite知识体系｜ 青训营_第16张图片
What is Babel? · Babel
babel插件手册
babel-handbook/translations/zh-Hans/plugin-handbook.md at master · jamiebuilds/babel-handbook

语法安全降级

Vite知识体系｜ 青训营_第17张图片
Vite知识体系｜ 青训营_第18张图片
Vite知识体系｜ 青训营_第19张图片
https://babeljs.io/docs/babel-preset-env
https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

服务端渲染(SSR)

Vite知识体系｜ 青训营_第20张图片
https://cn.vitejs.dev/guide/ssr.html
https://github.com/vitejs/vite/tree/main/playground/ssr-react
https://juejin.cn/book/7050063811973218341/section/7066612265536978981

vite 社区生态

Vite知识体系｜ 青训营_第21张图片
https://github.com/vitejs/awesome-vite

你可能感兴趣的:(设计模式,前端)

  • POM 模式自动化测试 那片海还在吗 testpython
    POM模式自动化测试一、PageObjectModel（POM）登陆案例1.POM概述PageObjectModel（页面对象模型）是一种设计模式，将页面元素和操作封装成对象，使测试代码和页面元素的定位及操作分离，提高了测试代码的可维护性和可复用性。在典型的POM实现中，通常包含四层对象：基础页面对象、具体页面对象、测试用例对象和测试数据对象。2.登陆案例实现2.1目录结构project/│├──
  • 深度优先和广度优先【栈、堆前端举例】 幸运小圣 JavaScript前端算法数据结构
    深度优先和广度优先：深度优先搜索（DFS）和广度优先搜索（BFS）是两种用于图和树遍历的算法，它们各自有不同的应用场景和特点。深度优先DFS：‌深度优先搜索（DFS）‌的核心思想是“深入探索，直至无路可走，然后再回溯”。它从起始节点开始，沿着一条路径一直遍历到最后一个节点，然后回溯到上一个节点继续遍历其他路径。DFS适合用于查找目标节点在深度较大的情况下，可以节省存储空间，但可能导致无限循环。DF
  • 【学习笔记】Kubernetes 还没入门的大菜狗 笔记
    一、概览Kubernetes提供了一个抽象层，是用户可以在屋里或虚拟环境中部署容器化应用，提供以容器为中心的基础架构。Kubernetes的控制平面和工作节点都有什么组建？分别有什么作用？1.1Kubernetes控制平面和工作节点的组件及其作用控制平面组件控制平面组件负责管理集群的全局决策（如调度），以及检测和响应集群事件。kube-apiserverKubernetesAPI的前端，所有组件通
  • 深度学习-【完整代码+数据集】逻辑回归预测乳腺癌检测案例 编程千纸鹤 人工智能学习专栏深度学习逻辑回归人工智能癌症预测
    作者主页：编程千纸鹤作者简介：Java、前端、Python开发多年，做过高程，项目经理，架构师主要内容：Java项目开发、Python项目开发、大学数据和AI项目开发、单片机项目设计、面试技术整理、最新技术分享收藏点赞不迷路关注作者有好处文末获得源码机器学习分为：有监督学习：数据带有标签无监督学习：数据没有标签，根据属性聚类在机器学习有监督学习中大致可以分为两大任务，一种是回归任务，一种是分类任务
  • 基于web在线餐饮网站的设计与实现——蛋糕甜品店铺(HTML+CSS+JavaScript) html网页制作 网页设计前端javascripthtmldreamweaver网页设计web网页设计期末课程大作业
    ‍静态网站的编写主要是用HTMLDIV+CSSJS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。精彩专栏推荐❤
  • 如何在简历中巧妙展现你的兴趣爱好 贵州数擎科技有限公司 面试跳槽
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：智简未来、晓智元宇宙、数字孪生引擎在简历中展
  • 使用 Three.js 转换 GLSL 粒子效果着色器 贵州数擎科技有限公司 javascript着色器开发语言
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：AI简历、元宇宙、数字孪生在这篇博客中，我们
  • php 与 html 的混合编程 hjjdebug #php
    所谓混合编程,实际上是php文件输出html内容的过程,看起来像html文件包含php语句,但实际上是php文件输出html内容.结合一个小例子,体会一下php是如何把非php语句原样输出或不输出的.cat3.php,有如下代码显示.注意:文件后缀必须是.php文件,不能是.html文件,因为php文件可以输出html内容,而html文件却不能包含php语言,这是因为html是firefox等前端
  • 面试之《前端开发者如何优化页面的加载时间？》 只会写Bug的程序员 面试面试前端
    前端开发者可以从多个方面入手优化页面的加载时间，以下是一些常见且有效的方法：优化资源加载压缩资源文件：对HTML、CSS、JavaScript文件进行压缩，去除不必要的空格、注释等，减小文件体积，加快下载速度。例如使用uglify-js压缩JavaScript文件，cssnano压缩CSS文件。优化图片：对图片进行压缩处理，降低图片的分辨率、色彩深度或采用更高效的图片格式（如WebP）。同时，根据
  • 计算机复试面试题总结 m0_67400972 面试学习路线阿里巴巴android前端后端
    时隔两年，重新完善一下以前写的东西：更新！！！！1.c++，408，设计模式，编程技巧，开源框架（适合cpp后端开发）2.数据结构与算法面试题3.c++与STL面试题4.计算机网络面试题面试问题之编程语言1。C++的特点是什么？封装，继承，多态。支持面向对象和面向过程的开发。2.C++的异常处理机制？抛出异常和捕捉异常进行处理。（实际开发）3.c和c++，java的区别c是纯过程，c++是对象加过
  • 从Hello Vue到构建未来：探索渐进式框架的无限可能 skyksksksksks 综合个人杂记vue.js前端开发语言前端框架
    一、当代码遇见人性：Vue的诞生故事2013年某个深夜，谷歌前员工尤雨溪在键盘前陷入沉思。当时的前端框架要么像Angular般庞大复杂，要么如React般需要哲学思考。他想创造一种更"人性化"的工具——就像用铅笔素描般自然，却能画出数字油画般精致的作品。于是，Vue.js这个融合东方设计美学的框架悄然诞生。这个轻量级的框架最初只有运行时库，却像一粒精心培育的种子。尤雨溪将"渐进式"理念注入DNA：
  • 计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档 双双科技 java数据库开发语言
    计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：htt
  • 前端杂学录（七） 真的不想学习啦 前端前端html5javascriptcss
    1.响应式布局方案1.媒体查询特点媒体查询是CSS的一部分，可以根据设备的特性（如宽度、高度、分辨率等）应用不同的样式。示例body{font-size:16px;}@media(max-width:768px){body{font-size:14px;}}@media(max-width:480px){body{font-size:12px;}}2.弹性布局（Flexbox）特点Flexbox是
  • Vue.js 实战：开发动态日历式待办事项管理页面」 「从零开始：用 Vue2 实现一个直观的任务日程管理系统」 「前端新手项目：基于 Vue.js 的待办事项与日程管理页面」 「Vue.js 教程： 南北极之间 web前端特效源码前端vue.jscss网页设计javascript日历待办事项
    效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：2351598671@qq.com完整代码
  • 【Cherry Studio】是什么？怎样使用？ 南北极之间 学习
    CherryStudio：可视化前端开发工具详解1.CherryStudio是什么？CherryStudio是一款可视化前端开发工具，它的核心理念是：可视化编程：抛弃或减少手写代码，通过拖拽、配置等可视化方式构建用户界面。组件化开发：将页面拆分成独立的、可复用的组件，提高开发效率和代码质量。所见即所得：实时预览设计效果，方便调整和优化。简单来说，CherryStudio就像一个前端开发的“乐高积木
  • Webpack、Vite区别知多少？ m0_74824044 面试学习路线阿里巴巴webpack前端node.js
    前端的项目打包，我们常用的构建工具有Webpack和Vite，那么Webpack和Vite是两种不同的前端构建工具,那么你们又是否了解它们的区别呢？我们在做项目时要如何选择呢？一、工具定义1、Webpack：是一个强大的静态模块打包工具，它可以将各种类型的文件，如JavaScript、CSS、图片等，作为模块进行打包，并生成最终的静态资源文件。Webpack使用各种loader和plugin来处理
  • 前端或者后端通常用到数组使用方式 Mrzheng168 前端
    第一个是:Array.from()将具有length属性或者可迭代的对象转化为数组Array.from('abcdef')//返回值['a1','b1','c1','d1','e1','f1']Array.from(newMap([['b1',1],['a1',2]]))Array.from(newSet([1,2,3]))第二个是:Array.reduce()遍历数组,将函数的返回值,存储到累加
  • 深入剖析 Vue 的响应式原理：构建高效 Web 应用的基石 东锋1.3 vue.jsvue.js前端javascript
    深入剖析Vue的响应式原理：构建高效Web应用的基石在前端开发的广阔天地里，Vue.js凭借其简洁易用的特性和强大的功能，成为众多开发者的心头好。其中，响应式原理作为Vue的核心亮点之一，让数据与视图之间实现了高效的自动同步，极大地提升了开发体验和应用性能。今天，就让我们深入探究Vue响应式原理背后的奥秘。一、什么是响应式编程在前端领域，响应式编程是一种编程范式，它赋予程序对数据变化做出自动反应的
  • 深入理解 Vue 的异步更新机制：原理、应用与最佳实践 东锋1.3 vue.jsvue.js前端javascript
    深入理解Vue的异步更新机制：原理、应用与最佳实践在前端开发领域，Vue.js凭借其简洁易用、性能卓越的特点，成为众多开发者构建用户界面的首选框架。其中，异步更新机制作为Vue的核心特性之一，对提升应用性能和优化开发体验起着至关重要的作用。本文将深入探讨Vue的异步更新机制，从其基础概念、工作原理，到实际应用中的注意事项与最佳实践，全方位剖析这一特性。Vue的响应式系统：异步更新的基石在深入了解异
  • java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw 练练科技 数据库javamybatis
    java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址
  • java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw 你眼里的星星 javamysql宠物
    java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lwjava毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址
  • 太强了！测试 Claude 3.7 Sonnet 模型前端代码能力提示词及Claude Code 系统提示词 技术程序猿华锋 AIGC资讯前端人工智能
    Claude3.7Sonnet测试模型的前端代码能力提示词；CreateasingleHTMLfilecontainingCSSandJavaScripttogenerateananimatedweathercard.Thecardshouldvisuallyrepresentthefollowingweatherconditionswithdistinctanimations:Wind:(e.g
  • ThreeJS入门（036）：THREE.RawShaderMaterial 知识详解，示例代码 还是大剑师兰特 #ThreeJS中文API全解大剑师threejs教程threejs示例
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第036篇入门文章文章目录构造函数常用属性示例使用统一变量使用宏定义使用扩展使
  • 【Java】@JsonFormat和@DateTimeFormat注解区别 Alkaid: SpringBootJavajava
    注解@JsonFormat主要是后端到前端的时间格式的转换注解@DateTimeFormat主要是前端到后端的时间格式的转换
  • electron 的原理，使用场景，简单用法 学会了没 electronjavascript前端
    一、核心原理架构组成Chromium渲染引擎：负责界面渲染，每个窗口都是一个独立的Chromium实例。Node.js运行时：提供对系统底层API的访问（如文件系统、网络等）。主进程与渲染进程：主进程：应用程序的入口，管理窗口生命周期和原生API（如菜单、对话框）。渲染进程：每个窗口对应一个渲染进程，运行前端代码，通过preload脚本安全地桥接Node.js功能。进程间通信（IPC）ipcMai
  • Maven+SSM+SpringBoot+Mybatis-Plus 五月茶 mavenspringbootmybatis
    SSM技术栈：spring6、springmvc、mybatis、springboot3、mybatis-plus、druid；前端:node、npm、vue快速掌握：全新SSM+SpringBoot+MyBatis-Plus实战精讲
  • 【商城系统部署到上线】 启山智软 商城 源码 小程序微信小程序java
    商城系统开发是一个复杂的过程，涉及多种技能。以下是一些关键技能：一、前端开发技能HTML/CSS页面结构搭建：HTML用于构建网页的基本结构，如头部、导航栏、商品展示区、购物车等各个功能区域的框架。开发者要熟练掌握各种HTML标签，以创建语义化和结构化良好的页面。样式设计与美化：CSS能够控制网页的布局、字体、颜色、背景等外观效果。通过CSS，可以使页面更加美观、易用，并且适应不同的屏幕尺寸（响应
  • 什么是Restful风格以及它的四种具体实现形式 咕噜咕噜超。 Springrestfuljava后端
    一、背景在之前我们进行项目开发时，我们一般不注重区分前端向后端请求数据的方式，不管你前端传过来的是get请求还是post请求，即不管是哪一种请求，我们都可以用@RequestMapping注解来处理。但是如果在进行项目开发时，组里老大规定我们必须明确处理我们前端到底是哪一种请求，是get还是post?是put还是delete？那这时候其实我们就要以restful风格来处理我们的前端请求了。即res
  • 【脑洞小剧场】零帧起手创业小公司之 前端程序员入职 Foyo Designer 技术职场小剧前端产品经理改行学it经验分享程序人生
    产品UI为爱发电，老板远程指点江山，后端一来“粪”外感慨，前路漫漫共修远兮~点击此处查看脑洞小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12896948&sharerefer=PC&sharesource=FoyoD
  • 跨平台开发--Weex 前端_学习之路 跨平台开发前端框架
    Weex是一款由阿里巴巴开源的跨平台移动开发框架，本篇从其定义、特点、应用场景等方面进行介绍：定义与背景Weex允许开发者使用JavaScript、HTML和CSS等前端技术来构建跨平台的原生移动应用，它将前端开发的便利性与原生应用的性能优势相结合。Weex最初由阿里巴巴团队开发，旨在解决移动应用开发中多平台适配的问题，提高开发效率，降低开发成本。特点跨平台性：Weex最大的特点就是能够实现一次编
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他