zxf13717561643-CSDN博客

原创 Nuxt 项目完结总结

1、状态保存，即localstorage。这里选择了nuxt-vuex-localstorage（^1.3.0）来做store的持久化保存。modules: [ '@nuxtjs/style-resources', '@nuxtjs/axios', [ 'nuxt-vuex-localstorage', { localStorage: ['localStorage'] } ]]...

2021-08-23 19:11:46 872

时隔大半年，公司又想到了nuxt 来做seo优化。害，借着往日的踩坑记录安安稳稳创建了项目，今天配置swiper时又出现了美丽的问题。（时间： 2021年4月8日）正常配置swiper：1：安装vue-awesome-swiper --save （我的版本 4.1.1）npm install vue-awesome-swiper --save2: 安装swiper , 重点来了（截止今日，我安装的最新到了6.5，但是兄弟们，千万不要安装6以上，坑的一批，版本不配套 = =）...

2021-04-08 19:55:46 1002

原创 Nuxt 配置踩坑记录(2)

1、px2rem 到 px2vw今天来测试了昨天新配的 postcss-px2rem-exclude, 发现项目运行时有个令人头大的问题，大概率是因为flexable.js在服务端渲染的原因，尽管文件时配置在 head 里面的，但是fontSize的计算速度使页面载入时会因为计算而有个放大缩小的过程，在手机上尤其明显，在经理了几个小时的挣扎后（期间也试了在一开始隐藏body，在计算出fontsize时显示body，但是这里根本获取不到body的visibility ，也修改不了，定时器也不行），决.

2020-07-10 18:46:53 1027

原创 Nuxt 配置踩坑记录，各种无伤大雅又让人分外恶心的warning

这里只记录踩坑和目前一些nuxt.config.js的配置，详细的nuxt脚手架构建过程不多做叙述：1.Classic mode for store/ is deprecated and will be removed in Nuxt 3.之前store的创建方式，大概都是这样子的，返回的是一个函数， Nuxt3将废弃这种写法，大概是因为 store被nuxt内之后做了封装不报waring的书写方式：2： Nuxt 配置 flexable、 rem、 stylus、全局样式、..

2020-07-08 17:37:30 2804 1

转载 JavaScript 之 ArrayBuffer

JS里的ArrayBuffer还记得某个晚上在做 canvas 像素级操作，发现存储像素的数据格式并不是Array类型，而是ArrayBuffer，心想这是什么鬼？后来查了一些资料，发现自己这半年来的JS是白学了，竟然才知道还有这么个东东。首先，这个 ArrayBuffer 类型化数组，类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式的背景下诞生的。分配内存类型

2020-05-11 11:23:34 1785

转载 Javascript中的数组在内存中是如何保存的？

大家在日常编码中，最长碰到的是数组和对象的操作，各种增删改查，但是你真的了解数组和对象么？数组的最基本概念就不解释了，详情看MDN文档——数组今天我们主要讲一下数组的内存模型。数组的内存模型Javascript的内存分为堆内存和栈内存，数组作为对象，在建立后存储在堆内存中。任何计算机语言内存的分配都要经历三个阶段分配内存对内存进行读、写释放内存（垃圾回收）本文主要针对数组的内存分配进行解释。Javascript中数组有几个不同于其他语言数组的特点数组中可以存放不同的数据结构，可以存

2020-05-11 11:00:21 2307

转载 vue-cli快速构建项目以及引入bootstrap、jq

vue-cli快速构建项目以及引入boostrap、jq各种插件配置vue-cli脚手架工具快速构建项目架构：。。首先默认了有已经安装了node。。。 npm install -g vue-cli 全局安装vue-cli vue init webpack cnm

2018-05-08 15:47:54 1840

转载 webstorm添加*.vue文件支持

vue.js CodeMan 2017年06月14日发布赞 | 1收藏 | 31.5k 次浏览方法1：安装 Vue.js 插件打开 Settings->Plugins 搜索安装css预处理器支持在我写这文章的时间，还没有支持预处理的方案，不过现在已经很简单了。给 style

2018-05-08 10:02:46 4125

原创设计模式学习-（11.桥接模式）

桥接模式: 提取需求的共同点，在这里关键是脱离与this的耦合// 提取共同点 function changeColor( dom ,color ,bg){ dom.style.color = color; dom.style.background = bg; } var spans = document.getElements

2018-03-07 17:09:35 226

原创设计模式学习-（10.装饰者模式）

// 装饰者模式：在不改变原对象的基础上，进行功能扩展// 功能一，改变字体颜色 function changeColor( n ){ $(n).css({ color: "blue" }); return this; } // 功能二，修改背景颜色一般情况我们会在chan

2018-03-07 15:59:14 191

原创设计模式学习-（9. 适配模式，代理模式）

看了书上的适配模式，感觉就是一个处理数据的函数，这个函数可以根据你的需求进行改变，其中适配框架适配的代码看不太懂，不细表。代理模式：看到的只有jsonp 处理的跨域请求，还有用 img的src 和 script 的src 来向跨域服务器发送字段，感觉没什么用在这里也不细表、

2018-03-07 15:45:51 269

原创设计模式学习-（8. 外观模式）

// 将需要的功能写到一个函数里面，调用的时候直接调用// 封装底层方法，类似jqvar Zxf = { g : function ( id ) { return document.getElementById( id ); }, css : function ( id , key , value

2018-03-07 11:26:25 189

原创设计模式学习-（7. 单例模式）

// 命名空间var Zxf = { g : function ( id ) { return document.getElementById( id ); }, css : function ( id , key , value ) { var dom = typeof id ==='string

2018-03-07 10:56:09 148

原创设计模式学习-（6. 原型模式）

原型模式：个人觉得跟继承里面的组合继承没什么区别，需要注意的是：原型模式继承下的对象，他们共享的基类的protytype的原型函数占据的内存空间是一样，所以动一个就动了所有。var SuperClass = function ( arg1 , arg2 ) { this.val1 = arg1; this.arg2 = arg2; };

2018-03-06 18:06:33 142

原创设计模式学习-（5. 建造者模式）

建造者模式：实现的主要是创建一个复合的对象，最后的对象会由好几个基类合并而成。不同于之前的模式，之前的工厂模式都是追求创建的结果，而这里用于合成的几个类则是使用时的重点，以此拼合一个更复合需求的对象。// 创建一位人类 var Human = function ( param ) { // 技能 this.skill = para

2018-03-06 15:54:39 165

原创设计模式学习-（4.抽象工厂模式）

说到抽象工厂，如果有接触过别的语言的话，其他语言大概都有个虚函数和抽象函数，然后继承的自雷重写这个方法。利用js 也可以模拟这种操作。在这里，抽象化创建模式不是一个真实的对象实例，而是一个类簇，制定了类的结构，这也就区别于简单工厂模式创建单一对象，工厂模式创建多类对象。// 抽象工厂方法var VirtualFactory = function ( subType , superType )...

2018-03-06 14:39:04 152

原创设计模式学习-（3.工厂模式）

简单工厂模式：1：创建对象，不同类的实例化进行合并处理// 篮球基类 var Basketball = function () { this.intro = '篮球盛行于美国'; }; Basketball.prototype = { getMember: function () { console.log("每个队...

2018-03-06 11:02:30 134

原创设计模式学习-（2.继承）

自己又复习了一下。详细请看之前的博客，点击这里。关于多态：众所周知，在其他语言例如c，c++，csharp，java等等语言中除了封装，继承，还有一个多态。虽然js没有强调这个，但是还是可以变相的实现这种功能的，很简单，一看就懂。 var objadd = function(){}; objadd.prototype.add = function () { var arg...

2018-03-05 09:31:54 176

原创设计模式学习-（1.封装）

几年前曾经看过一遍设计模式，但是并没有深入学习，现在重新学习一遍。封装：首先要明白，封装一个类，这个类都有哪些部分构成1：构造函数内的，供实例化对象复制用。2：构造函数外的，直接通过点语法添加的，只供该类使用。实例化对象访问不到。（静态公有属性、fan）3：类的原型中的，也就是prototype 生成的方法。实例化对象可以访问的。创建一个类：

2018-03-02 13:51:48 262

转载手机浏览器呼出QQ聊天窗口，微信内置浏览器呼出qq

方法1：这个方法可以在微信内置浏览器里也呼出qq。打开QQ官方的一个网站：QQ推广，网址如下：http://shang.qq.com/v3/index.html1，登录QQ2，进入“推广工具”，如果是新注册的QQ号，第一次登录，会提示“立即免费开通”3，复制代码，修改为自己的QQ号http://wpa.qq.com/msgrd?v=3&uin=此处输入

2018-03-01 09:19:48 7035 2

转载 webpack不是内部命令问题

在帮别人安装webpack的时候遇到了这个问题！！自己没遇到过。。有点慌了在网上百度似乎也没有什么人遇到这样的问题。看到一个帖子虽然错误和我的不一样，但是他提到了他是因为环境变量的设置问题啊，然后我突然觉悟！！这应该也是环境变量的问题啊！于是百度了“安装webpack 修改环境变量”的关键词找到了一篇有用的文章。http://www.cnblogs.com/ChengWuyi/p/50201

2017-11-03 16:46:22 8236

转载 npm安装模块失败，修改Nodejs内置的npm默认配置路径

Nodejs 内置的npm默认会把模块安装在c盘的用户AppData目录下（吐槽一下：不明白为啥现在的软件都喜欢把资源装在这里）C盘这么小，肯定是不行的，下面一步步修改到D盘 1.打开cmd命令行，查看当前配置输入 npm config ls先看一下当前npm的配置环境，由于我已经修改过，所以可以看到修改后的路径

2017-11-03 15:37:57 1226

转载 npm WARN enoent ENOENT: no such file or directory, open 'E:\Program Files\nodejs \package.json' npm

npm WARN saveError ENOENT: no such file or directory, open 'F:\NodeJS\package.json'npm WARN enoent ENOENT: no such file or directory, open 'F:\NodeJS\package.json'npm WARN NodeJS No descriptio

2017-10-26 09:42:59 6047 1

原创替换转化的时间的所有汉字

var t = 1500514159000; t = new Date( t ); t = t.toLocaleString(); console.log( t.replace(/[\u4e00-\u9fa5]/g,"") );

2017-07-20 10:00:43 296

转载 CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？前言webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示

2017-05-18 16:57:47 601

转载 JS判断客户端是否是iOS或者Android

**第一种：通过判断浏览器的userAgent，用正则来判断是否是ios和Android客户端。代码如下：** var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match

2017-04-21 17:26:13 5375

原创 jqgrid 自定义搜索的实现，后台实现

好久没写过博客了。新入职公司比较忙，咳咳，其实是比较懒。最近公司要求做一个后台，于是直接巴拉了bootstrap 的ace折叠菜单改造了下，由于大部分都是数据交互，频繁使用了 ace中包含的 jqgrid ，要做后台的朋友可以去搜索一下ace折叠菜单，挺好用的。jqgrid 的基本构造，翻页什么的虽然我也有做，但是这些东西看看官网的api也就差不多可以了

2017-04-06 11:07:47 8176 2

转载 jqGrid表单编辑配置参数

jqGrid表单编辑jqGrid支持一个浮动的表单用于查看，添加，编辑，删除和查询表格数据，下面为添加记录的效果图　　在你的项目中可以使用模态盒子和行编辑。其中，行编辑只能用于编辑已经存在的行，不能用于查询，删除，添加数据。实际应用中，不推荐同时使用这2中方法，因为选择同一行时这2者存在冲突（在这种情况下，当你选择一行来编辑，点击编辑模态盒子，你将得到模态盒子中的单元格ID，而不是

2017-03-10 16:21:10 16775 2

原创解决ie9以下input 无placeholder问题

1，首先判断浏览器是否支持placeholder属性，如果不支持则使用模拟placeholder　　//判断是否支持placeholder属性　　function isPlaceholer(){　　var input = document.createElement(‘input’);　　return “placeholder” in input;　　}2，引入js 。添加如下代码

2017-03-02 13:28:53 5129

转载关于微信二次分享，标题变链接的解决方法(二)----代码部分

上篇主要介绍了分享的文档，下面这篇直接上代码（代码是用PHP来写的），让大家更容易理解。上篇地址:关于微信二次分享，描述变链接的解决方法(一)----文档说明代码分三部分进行，第一部分是C层（Controller），第二部分是M层(Model)，第三部分是V层(View)1.控制器层WeixinController $data = array(

2017-02-27 11:17:08 3506

转载关于微信二次分享，描述变链接的解决方法(一)----文档说明

前言：最近工作中遇到了使用微信二次分享的时候，标题被截短，描述也变成了链接，图片也没有，运营人员半夜还在嚷嚷，无奈只好硬着头皮去百度，去google，但是悲催的是没有详细的解决方法，最终只能自己去研究，还好最终搞出来了，决定分享一下，帮助需要的人。博文，分两篇，第一篇主要是微信的官方文档说明，第二篇主要是代码部分；一、微信JS-SDK说明文档1.概述微信J

2017-02-27 11:15:37 12637 1

转载 ie7,ie8背景图片background-size无效问题

html>html lang="en">head>meta charset="UTF-8">title>让IE7 IE8支持CSS3 background-size属性演示_doweboktitle>style>html { height: 100%;}body { height: 100%; margin: 0; background: url(image

2017-02-20 16:01:22 4130

原创 js 函数内部私有变量的访问方式

// 全局静态私有变量访问(function(){ var name = "李四"; // 私有变量 function show(){ return "is a good man"; } Person = function( n ) { // 全局静态私有变量构造函数，可传参初始化，也可以

2016-12-20 15:01:18 4946

转载 js 静态私有变量

特权方法：有权访问私有变量和私有函数的公有方法。在私有作用域中定义私有变量或函数，可以创建特权方法，如下：示例1(function(){ //私有变量和私有函数 var privateVariable = 10; function privateFunction(){ return false; } /

2016-12-20 14:21:15 642

转载 PhotoSwipe简介

官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。为谁而用让移动站点的相册体验和原生App一样的设计师和开发者。绝佳特性PhotoSwipe提供给用户一个熟悉又直观的相册交互界面。官方网站http://www

2016-12-19 11:36:13 1080 1

转载我所知道的几种display:table-cell的应用

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1187一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE

2016-12-12 17:15:57 740

转载有关display:block、display:table-cell在IE、谷歌的兼容性问题

对所有的块元素都没有意义，块元素的dispaly属性默认值为block，没必要再显式定义——除非你之前对块元素的display属性重新定义过。===========================多罗嗦一句：display：block；比较常用于这两个标签——因为这两个标签非块元素，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会

2016-12-12 17:02:39 6833 1

转载使用@media实现IE hack的方法

网页制作Webjx文章简介：众所周知，有些时候为了实现IE下的某些效果与现代浏览器一致，我们不得不使用一些hack手段来实现目的。比如说使用“\0”，“\”和“\9”来仅让IE某些版本识别，而对于现代浏览器来说，他会直接无视这些代码。今天我想为大家介绍的是使用@media实现IE hack的方法.　　随着Responsive设计的流行，Medial Queries可算是越来越让人观注了。他

2016-12-09 16:54:38 647

转载 js操作cookie，实现登录密码保存

网上借鉴了一些朋友的经验，做了一个小例子，js操作cookie，实现登录密码保存。cookie的存放方式是以键值对的方式保存的。通常cookie和session，是web开发中用于存储信息的对象，session存在于服务器的内存中，而cookie则是存在客户端，所以js可以直接操作cookie进行信息的存储和读取。js存放cookie一般的写法，如：document.cookie=

2016-12-09 15:57:23 763

转载 input type date 解决移动端显示placeholder.

网上找的方法苹果可以了安卓显示总有问题.加了段CSS就完美解决了,就是UC有点奇葩以下是我测试的浏览器:微信--OK.QQ浏览器--OK谷歌浏览器--OKUC浏览器(业界奇葩),前面会有空白cssinput[type="date"]:before{ color:#A9A9A9; content:attr(plac

2016-12-09 10:14:50 2701

空空如也

空空如也