- 博客(42)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 重学Vue组件keep-alive
重学Vue组件<keep-alive>一、学习目标keep-alive是怎样实现缓存的简单了解 activeed ， deactived 钩子函数二、概念直译：“存活”、 “缓存” 、“保持状态” 、“持久化”官方：使用 keep-alive 包裹动态组件时，会 缓存 不活动的组件实例，而不是销毁它们<!-- 基本 --><keep-alive include="test"> <test></test> <de
2021-09-16 16:34:23
202
原创 Vue3.0响应式原理分析
vue-next响应式原理在Vue2.0中是使用Object.defineProperty中的setter和getter对数据对象拦截，内部使用了很多递归或遍历实现对对象和数组的监测，较消耗内存。Vue3.0响应式原理核心： Proxy-based change detection 基于Proxy实现的数据变化监测。Proxy 代理器 和 ReflectProxy 可以理解成，在...
2019-11-18 12:40:58
371
原创 Vue核心思想-数据驱动的实现分析
数据驱动数据驱动是Vue的核心思想之一，指视图由数据驱动生成，通过修改数据来实现了对视图的修改，而非直接操作DOM。DOM变成了数据的映射，我们把重点放在了数据的逻辑处理上，提高了开发效率。VirtualDOM就是一个js对象去描述一个DOM节点，在Vue中是用VNode这个class去描述。Vue的挂载过程挂载的目标就是把模板和数据渲染成为最终的DOM。主要是分为 render ...
2019-11-17 08:26:21
444
原创 Vue Router中Matcher的初始化分析
MatchercreateMatcher()的初始化了解相关的几个概念1、Location类型对url的结构化描述。比如url = “/main?p1=1&p2=2222&p3=3333”，它的path就是“ /main” ， query 是{ p1:1, p2:222, p3:333 }declare type Location = { _normalized?...
2019-11-14 17:54:09
12390
原创 Vuex中modules的初始化过程分析
modules作用Store作为一个数据“仓库”，存储数据，若应用变得复杂要处理的数据过多，全部放到一个state下就很麻烦。modules就是将store拆分成众多具有完整结构的“子仓库“，每个module也可以添加子module，从而形成一个树状结构的对象。方便管理数据。最外层的module可以理解为根 rootModulemodules的初始化关键点this._module...
2019-11-14 12:08:21
1439
原创 Vuex中辅助函数mapxxx的实现分析
1、辅助函数的作用Vuex安装阶段，store实例往每一个组件上混入beforeCreate钩子函数，添加一个指向它的 $store 实例。这样我们可以在组件中通过 $store 访问store的任何属性和方法。但是当一个组件需要获取多个状态时，将这些都声明出来会重复和冗余，同样getter、mutation和action也这样的问题。于是Vuex提供了一系列mapxxx辅助函数来帮我们实现在...
2019-11-13 17:52:35
381
原创 Vuex中内置Logger插件的源码分析
1、使用Logger插件import createLogger from 'vuex/dist/logger'const store = new Vuex.Store({ plugins: [createLogger()]})2、基本实现一、在Store的构造器中定义了 this._subscribers = [] ，提供subscribe 方法收集订阅者，之后在commit m...
2019-11-13 16:33:46
821
原创 cnode-webapp项目搭建 (pwa学习一)
一、概述lavas是百度出品的基于 Vue.js 的 PWA 解决方案。使用lavas解决方案对 cnode社区webapp项目hybridApp版进行重构,搭建一个PWA应用。使用cnodeJs社区 提供的api获取数据。架构：lavas + vant-ui项目地址：cnode-webapp预览二、安装lavascnpm install lavas -g三、使用lavas脚手架...
2019-09-20 12:29:48
221
原创 模仿QQ音乐wap端
Net Musichttps://github.com/ITch8/NetMusic模仿QQ音乐wap端实践中来学习Vue技术栈开发效果图效果图开发模块化开发技术栈Vue + VueRouter + vuex + webpack + stylus + VueLazyloadviews首页推荐歌手列表歌曲排行榜搜索页面歌手详情页电台详情页排行榜详情页音乐播放器...
2019-03-30 20:04:59
715
转载 websocket原理
Websocket是一种在单个TCP连接上进行全双工通讯的协议，双工（duplex）是指两台通讯设备之间，允许有双向的资料传输。在Websocket协议中，客户端和服务端只需要做一个握手的动作，就能形成一条通道，两者之间可以进行数据互相传送。 WebSocket和传统的HTTP交互方式的区别如下图：WebSocket的结论如下：基于TCP/IP协议实现 是一种全双向的通信, 具有底层socke
2017-12-08 18:15:09
473
转载 Hbuider hybrid app 开发之获取手机电量
1.目标：获取手机电量 2.实现方式：native.js实现 3.说明：原文。Android//注意，安卓需要配置下manifest.json文件，打开后，进入模块权限配置，在右侧的Android权限设置里勾选上android.permission.BATTERY_STATSvar main = plus.android.runtimeMainActivity();var Intent =
2016-11-04 14:17:18
1412
1
原创 Hbuider hybrid app 开发之上传图片
目标：获取手机本地图片，并上传到服务器端。通过拍照和选择相册两种方式获取本地图片。 说明：注意plus对象的使用，查看官方文档，学好基础最重要。官方文档 其他说明：以下代码展示的是最基本的图片上传，复杂操作可参考图片上传；服务器代码demo参考服务器端获取本地图片方法实现plus.nativeUI.actionSheet({cancel:"取消",buttons:[{title:"拍照上传"
2016-11-02 10:21:44
3218
原创 Hbuider hybrid app开发细节积累
1. 搜索框的属性的设置。要虚拟键盘显示“搜索”二字，需满足以下两个条件：（1）设置input属性 type=‘search’（2）input需在form表单中。html代码<form action=""> <div class="mui-input-row mui-search"> <input id="search" type="search" class="mui
2016-09-28 16:24:29
5924
2
原创 Hbuider hybrid app开发之地图位置信息操作方法
/** * 位置工具 * */var watchId = null;/** * @description 监听位置变化信息 * */ function watchPosition(){ if (watchId) { return; } watchId = plus.geolocation.watchPosition(function(p){
2016-07-22 11:48:14
1861
原创 Hbuider hybrid app开发之地图操作方法
var map = null;var zoom = 13;//缩放值function creatMap(data,ws){//创建地图---data：一些地图设置参数 如图标、中心点经纬度 if (!ws) {return}; wo = ws.opener(); map = new plus.maps.Map("map"); if(!data){
2016-07-22 11:44:42
5044
1
原创 Hbuider hybrid app开发之js常用方法
(function(w, _, $, u) { _.plusReady(function() { plus.webview.currentWebview().setStyle({ softinputMode: "adjustResize" }); }); w.openView = function(url,extras,
2016-07-22 11:36:58
1577
原创 CSS 样式修改 积累
背景色渐变.gradient { background: #BCE8F1; background: -moz-linear-gradient(top, #BCE8F1 0%, #3684F9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #BCE8F1),
2016-01-13 10:47:30
1377
原创 CSS3学习记录四（动画-变形）
1.变形–旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。HTML代码：<div class="wrapper"> <div></div></div>CSS代码： .wrapper {
2015-12-28 14:27:00
529
原创 CSS3-学习记录三（选择器）
1.:checked选择器 在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。 在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。 而“:checked”表示的是选中状态。2.::selection选择器 伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。 注意：1
2015-12-25 16:30:23
407
原创 css3--学习记录二（选择器）
一、属性选择器 1. 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：如下: <style> a[class^=column]{ color:red;
2015-12-22 15:15:36
498
原创 CSS3-学习记录一
1.阴影 box-shadow（一）box-shadow是向盒子添加阴影。支持添加一个或者多个。box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];为元素设置内阴影：示例代码：.box_shadow{ box-shadow:4px 2px 6px #333333 inset; }添加多个阴影：以上的语法的介绍，就这么简单，如果添
2015-12-21 17:25:25
529
原创 CSS-布局模型
一.流动模型：Flow1.首先它是网页默认的布局方式，有两个基本的特征： I.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 II.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像
2015-12-20 22:42:14
349
转载 js跨域问题
1.什么是跨域？**跨域**： 简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。**同源策略**：同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源**是指，域名，协议，端口相同**。同源策略阻止
2015-12-16 15:12:42
318
原创 Hbuider hybrid app开发之检查网络等js方法
1.检查网络状态，提示用户检查网络，android端可进入系统设置页面。/* * 检查网络 * */function checkNet() {//检查网络var network = plus.networkinfo.getCurrentType();if (network == 1) { btnArray = ["设置", "退出"]; mui.confirm('网络异常
2015-12-10 10:14:06
4015
转载 Hbuider制作app升级包的简单办法 (升级官方提供的案例)
源文档：http://ask.dcloud.net.cn/question/11795 http://ask.dcloud.net.cn/article/199一、生成移动App资源升级包 5+应用可使用以下方式进行升级 - 整包升级：适用于大版本更新，新增5+模块时必须使用此类更新方法 - 应用资源升级：适用于小版本更新
2015-12-09 13:02:01
14760
4
原创 对html文件中dom元素设置监听遇到的问题
1.使用builder提供的mui框架制作app，对dom元素使用onclick单击监听是无效的。使用 tap 代替click。 2.在使用.on()方法实现批量元素的事件绑定时： .on( event , selector , handler ) event Type: String 需监听的事件名称，例如：’tap’
2015-11-26 21:55:57
1321
原创 js实现按钮重新发送验证码倒计时效果
//倒计时 var wait = 60; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.textContent = "再次获取验证码"; wait = 60; } else {
2015-11-25 16:27:16
2534
原创 Hbuider hybrid app开发---被预加载的页面无法在mui.init中去成功预加载其他页面的问题
问题描述： 在XXX项目中，诊所列表页面预加载诊所详情页面，之后成功打开诊所详情页面；在诊所详情页面上，存在医生列表，业务需要在该页面上实现预加载医生详情页面。 最初在诊所详情页使用该方法： （通过mui.init方法中的preloadPages参数进行配置） <script type="text/javascript" charset="utf-8">
2015-11-25 11:48:09
4464
2
原创 html5 plus 拍照并显示
1.点击拍照按钮、获取图片路径并显示到页面上mui.plusReady(function() { document.getElementById("takePic").addEventListener('tap', function() { takePhoto(); });});function takePhoto() { // 获取设备默认的摄像头对象
2015-11-24 17:28:45
5565
转载 Hbuilder app几种打开页面的方式
初始化时创建子页面直接打开新页面预加载新页面示例1.初始化时创建子页面mui.init({ subpages: [{ url: your - subpage - url, //子页面HTML地址，支持本地地址和网络地址 id: your - subpage - id, //子页面标志 styles: { top:
2015-11-23 14:35:49
11655
1
转载 Hbuilder–app 开发 之 MUI个别细节
Hbuilder–app 开发 之 MUI个别细节1.和上拉加载，下拉刷新配套的加载子页面mui.init({ subpages : [qiao.h.normalPage('list')] });要想实现上拉加载和下拉刷新，必须使用子页面的方式，需要在init中设置。 2.手势事件和默认事件 长按事件，后退事件，菜单事件，最好在i
2015-11-23 11:21:26
2516
转载 Java回调机制解析
模块之间总是存在这一定的接口，从调用方式上看，可以分为三类：同步调用、回调和异步调用。同步调用是一种阻塞式调用，也是我们在写程序中经常使用的；回调是一种双向的调用模式，也就是说，被调用的接口被调用时也会调用对方的接口，这句话可能有点绕，等文章后面举例说明；异步调用是一种类似消息或事件的机制，解决了同步阻塞的问题，举例来讲：A通知B后，他们各走各的路，互不影响，不用像同步调用那样，A通知B后，非得等
2015-06-26 17:33:20
440
原创 Eclipse下创建maven项目时出现Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp:R
Eclipse+ maven工程在maven成功解压，并配置好环境变量的情况下。1.出现的问题Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp:RELEASE from any of the configured repositories.Could not resolve
2015-02-03 10:20:13
4701
1
原创 jsp 自定义标签- *.tld 文件的创建方法之一
在新建一个标签类之后需要配置到 *.tld文件中。在Eclipse中无法直接新建一个tld 文件，而必须通过 New ----> XML ----> XML File ----> 输入test.tld ----> Create XML file from a DTD file ----> Select XML Catalog entry ----> -//Sun Microsystems,
2015-01-13 15:13:29
750
原创 jsp-api.jar文件 与tomcat中同名包冲突出现 java.lang.NullPointerException
type Exception reportmessage java.lang.NullPointerExceptiondescription The server encountered an internal error that prevented it from fulfilling this request.exception org.apache.jasper.Jaspe
2015-01-13 11:50:25
2574
原创 java中字节流和字符流的总结
java对文件的操作是以流的方式进行的，流是java内存中一段有序数据序列。1.按照流的流向方向分为，输入流和输出流，方向的参照物为程序。2.按照流的处理单位又分为字节流和字符流，字节流读取的最小的单位为字节（1byte）；字符流读取的最小单位为字符(1char = 2byte)，占2个字节。3.按照功能流分为节点流和处理流。java对文件的读取是采用节点流，FileOutputStr
2015-01-06 21:43:08
739
原创 处理Eclipse中 EE项目名称出现红叉错误问题
一、.导入一个名为20150105的web项目 1.其JRE System Library 与环境本身不一致 所以出现红色感叹号2.导入项目本身 编译级别为1.7 但原本项目指定了一个1.8的 所以出现了红叉把java 编译级别改了就行了
2015-01-05 11:46:15
640
原创 jsp开发 --异常处理页面
在项目中遇到异常，一般都是自定义一个公共的异常处理页面 error.jsp 来实现统一的异常处理。步骤：1.首先创建一个error.jsp页面 isErrorPage的属性一定是 true2.然后再web.xml配置文件中注册该页面 如： java.lang.exception /error.jsp
2014-11-24 18:33:15
564
原创 Sevlet过滤器
Servlet过滤器可以当作一个只需要在web.xml文件中中配置就可以灵活使用的，可以重用的模块化组件，能够对jsp，Html，Servlet文件进行过滤。实现这个过滤器需要以下步骤：1.实现Filter接口 javax.servlet.Filter2.重写3个方法 初始化方法：表示过滤器初始化时的动作 public void init(Filte
2014-11-24 18:31:22
454
转载 关于Android R文件的消失问题
其实Android自己维护这一个 public final class R类主要是跟新资源文件，这个R.java无需我们自己去修改，如果你不了解千万不要去修改它，它定义的每个资源值都是唯一的，不会和系统冲突。这个文件由ADT插件自动更新，当你编辑过Res文件后保存，这个类就会自动更新。R.java里面一般有attr、drawable、id、raw、layout、string以及xml等
2014-11-23 16:36:20
512
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人