baizaozao的博客

原创 vue开发（九）vue数据双向绑定原理

原理数据劫持 + 订阅者发布者数据劫持Object.defineProperty: 控制一个对象属性的一些特有操作，比如读写权、是否可以枚举过程首先，需要利用Object.defineProperty，将要观察的对象，转化成getter/setter，以便拦截对象赋值与取值操作，称之为Observer；需要将DOM解析，提取其中的指令与占位符，并赋与不同的操作，称之为Comp...

原创 vue小知识点（二） vue中$set的使用场景

场景1:对象是引用类型，当同一个组件被多次引用，它们的data都指向同一个内存地址，换句话说，所有组件共享一组data如何不共享数据将data设置为一个函数，该函数会返回一个初始数据对象，用function return 其实就相当于申明了新的变量，相互独立 data () { return { items: ['a', 'b', ...

原创 vue小知识点（一） vue中的data为什么是函数，不是对象

如果是对象会导致对象是引用类型，当同一个组件被多次引用，它们的data都指向同一个内存地址，换句话说，所有组件共享一组data如何不共享数据将data设置为一个函数，该函数会返回一个初始数据对象，用function return 其实就相当于申明了新的变量，相互独立 data () { return { items: ['a', '...

原创 【Node】node获取代码的svn版本号

思路通过调用命令行工具，利用svn info得到所有的svn信息，然后提取版本号异步获取 ： node-cmd包信息会作为回调函数的参数被返回（cbDataSvn）var async = require('async');var cmd = require('node-cmd');cmd.get('svn info', function (err, cbDataSvn, s...

原创 【Node】node获取并修改package.json中的版本号

读取package.json文件// 读取package.json文件，缓存内容var fs = require('fs');var cbDataPackage = getPackageJson()function getPackageJson() { console.log('----------------------1.开始读取package.json') var _p...

原创 4月我又知道了啥

1. <area>,<map>,<img> 元素实现图片热点<img src="mm1.jpg" alt="美女" usemap="#MM"><map id="MM" name="MM"> <area shape="rect&qu

原创 5月我又知道了啥

1. 移动端开发的屏幕适配px2remflexible2. 图片压缩软件isee 可以无限制压缩图片tinypng 尽可能无失真的压缩图片，不可以无限制压缩3. 复制文本clipboardjs插件如果要复制文本样式，则使用<div class="jo-quote"> <span id="jo-cn-quote"&

原创 2018第二季度工作总结-遇到的困难和解决

2018第二季度工作总结-遇到的困难和解决遇到的困难和解决办法1. xslt生成html的url动态填充二维码2. 浏览器页面父子元素滚动事件不互相干扰的办法3.工作步骤4. webpack打包xslt5. 显示器分辨率调整后显示“输入超出范围”遇到的困难和解决办法1. xslt生成html的url动态填充二维码描述：xslt转化xml文件为html后，需要在页面生成一个二维码，该二维码的...

原创 CSS常见问题及解决（五） position定位中的absolute

参考资料：https://www.jianshu.com/p/a3da5e27d22b两个结论absolute不一定要与relative同时出现当没有设置父元素或者某个祖先元素为relative时，absolute的 left，right，top，bottom属性是相对于body而言的当设置父元素或者爷爷元素，为relative时，absolute的 left，right，...

原创 2018第一季度工作总结-遇到的困难和解决

遇到的困难和解决办法1. 两个组件之间数据同步描述：篇章加工和整书加工都是对篇章的处理，区别是角度不同，一个是从篇章的角度，一个是从整书的角度原来做法：两个组件的数据互相独立，自己操作自己的，自己管理自己的定时器问题：每当其中一个tab对篇章进行过操作，篇章的状态就会发生变化，在被操作的这个tab页里面，是没有问题的，可以定时发请求，更新数据；但是要保证两个页面数据同步就难了解...

原创 jQuery常用插件（四）不使用flash，点击按钮将内容复制到剪切板

clipboard.jshttps://github.com/zenorocha/clipboard.js

原创 Javascript小知识点（七）：数据类型赋值，浅拷贝，深拷贝（数组值传递还是引用传递）

https://www.cnblogs.com/yuyifan/p/6204365.html 这篇文章极介绍的特别好，有关赋值，浅拷贝，深拷贝三者的差别https://juejin.im/post/59ac1c4ef265da248e75892b

原创 CSS常见问题及解决（六） 行内元素设置

行内元素<a>等配置width和height都不起作用margin和padding左右有效果，上下没有效果

原创 Javascript小知识点（六）：数组去重的一个新方法

利用set内部值不重复的原理和es6三个点的语法function quchong(array) { return [...new Set(array)]}var arr = [1,2,2,3,3,4,4,5,5]console.log(quchong(arr))https://www.cnblogs.com/yuyifan/p/6204365.html

原创 vue开发（八） 组件之间的数据和方法传输

1、传递方法1.1 父组件调用子组件方法 利用ref获取到全局下的子组件，然后直接用该值调用子组件方法 - 子组件需要有ref属性值 - 父组件中 this.$refs.ref.function调用1.2 子组件调用父组件方法1.2.1 有参数 利用emit的广播性质，向外发送父组件中要被调用的方法名和参数 - 子组件中，this.$emit('childMethod',

原创 前端成长的能力与知识概念

原创 Javascript小知识点（五）：移动端控制点击别的地方，隐藏页面弹框

在PC端实现思路是这样的为document添加点击事件判断点击的参数 event.target中是否包含该弹框相关的div如果包含，则不作任何操作如果不包含，则直接设置该div隐藏代码如下 //当下拉框失去焦点时，关闭 $('body').click(function (e) { // 触发该事件的直接元素 var type = e.targ

原创 2017第四季度工作总结-积累

1. 每天上班前想想今天要干什么、准备怎么干，下班后再想想干得怎么样，还有没有什么遗漏的（其实花不了几分钟）；2. 工作繁忙、任务繁重时不要慌，学会拆分任务，先捡重要的、紧急的干；3. 工作清闲时，想想后边要干的工作或可能遇到的任务，有些事可以提前做（其实就是眼里有活）；4. 重要的事情，或工作繁忙时新受领的任务及时记录下来，这点尤其对粗心大意的人来讲非常受用；5. 刚到一个部门，不要急于表现自己...

原创 jQuery常用插件（三）隐藏滚动条，但是要让内容区可滚动

插件名jquery.nicescroll.min.js使用先引入js然后配置$("#jo-body").niceScroll({cursorborder:"",cursorcolor:"rgba(0,0,0,0)",boxzoom:true});遇到的问题 如果页面有好几部分都需要单独控制滚动，可能会导致来回切换滚动区时，滚动不够灵敏参考文章： - 这篇文章

原创 jQuery常用插件（二）二维码显示

为什么要用二维码原因多了去了，移动端和PC端但凡都支持，就免不了响应式，但凡有响应式，就少不了PC到移动端的页面跳转，二维码是最方便的“传递”工具二维码显示方式 二维码内部无非就是黑色白色的小格子组成的图片，里面包含最有用的信息就是 uri||text - 静态图片，img放上去就是一个静态的二维码，任尔扫来扫去，我就这么一张图片，一个地址。那么这个img从哪来呢？太多了，网上随便一找，都

原创 jQuery常用插件（一）当文字内容太多超出显示区时，用三个点代替显示

来自大神张鑫旭写的一个插件wordLimit.js使用先引入js然后$(“.jo-f-title-en”).wordLimit(temp)temp可有可无，表示字节数，超过该字节时候用三个点代替显示；如果没有的话，默认按照显示区宽度单行截取字符参考文章： - 这篇文章中还有两个类似插件介绍，其中有链接地址，使用方式类似张鑫旭的文章

原创 CSS垂直居中

由简单到复杂 1. flex布局 非常简单，flex布局真的太好用啦 .parent { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } .parent .child {

原创 响应式布局实现步骤

题外话这两天公司要做一个静态页面展示的优化，主要是要能够被集成在别的项目页面内，本来以为只是一个简单的html页面展示，没想到最后越做越复杂，就顺势把所有代码做了一次整理，领导要求支持尺寸最小为800px，我想了想，要不直接给干到300px好了 因为领导总说要大胆创新，要敢想敢做，之前工作中的自己太束手束脚，这回也潇洒一把，三天时间，从对响应式一点不知，到现在自己设计页面，自己布局，做出来可以支持

原创 CSS编码规范

class名以‘-’对单词进行分割，最好不要出现大写字母多个选择器之间最好换行，每个选择器各占一行不要将样式写为单行0后面不要添加单位推荐的css书写顺序，提升浏览器渲染dom的性能，避免重复来回渲染 定位盒模型其他颜色字体a的样式书写顺序a:link -> a:visited -> a:hover -> a:active

原创 每月闲话（一）12月

svn1、打开webstorm的settings2、找到Directories3、将要忽略的文件夹标记为Exclude（选中文件夹，点击上面菜单Exclude即可）4、确认git找到.gitignore文件，在其中添加要忽略的文件或文件夹即可、 图片不方便上传，待补充

原创 WebStorm常见问题（二）如何设置svn（git）忽略文件

svn1、打开webstorm的settings2、找到Directories3、将要忽略的文件夹标记为Exclude（选中文件夹，点击上面菜单Exclude即可）4、确认git找到.gitignore文件，在其中添加要忽略的文件或文件夹即可.DS_Storenode_modules/dist/npm-debug.log*yarn-d

原创 WebStorm使用问题（一） git管理项目后，目录上文件全部显示为红色

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

原创 前端技能栈

htmlcssjs （高程、犀牛）jquery （源码）bootstrapechartes6（class、块作用域、箭头函数）xmlxsltelement-uivue（数据绑定、组件、计算属性） （vuex、vue-router、==axios==）tokenwebpack （热加载、==多环境打包==）mockjs

原创 Token原理

权限验证 通过token获取用户的role,动态根据用户的role算出其相应有权限的路由，通过router.addRoutes动态挂载路由。登录 当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个user_info的接口来获

原创 HTML不常见的知识

blockquote：在这个标签内部的元素显示的时候都会向后缩进一个单位长度（通常是4个空格的长度，有时候定义的不同的话也会出现别的可能）。 http://www.w3school.com.cn/tiy/t.asp?f=html_blockquote<ins> <del> 文本插入和删除标签 http://www.w3school.com.cn/tiy/t.asp?f=html_delins

原创 NodeJS学习（三） npm打包

在npm官网注册账户，记住username，password，email新建一个项目，生成package.json文件npm init关联npm用户信息，提示输入刚刚注册的三个信息npm adduser发布包npm publish 如果上传成功会提示D:\code\publishbaiyu>npm publish+ publishbaiyu@1.0.0否则上传失败 这个时候去h

原创 NodeJS学习（四） package.json版本更新问题

问题想更新某一个包时， 输入 不起作用npm update element-ui --save原因 package.json中这个包的版本号有前缀（~或^） 波浪符号（~）： 会更新到中间的那位数字中最新的版本。 ~1.15.2，匹配1.15.x的最新版本 如果出了一个新的版本为1.16.0，则不会自动升级。 波浪符号是曾经npm安装时候的默认符号，现在已

原创 XSLT常见问题（四）XSLT中select和match的匹配原则

非常重要：只要是select或match，其节点关系跨模板后都是可以继承的什么时候用 select当需要选取节点或者节点属性进行匹配，或者获取属性值，变量值的时候1、节点（模板调用）<xsl:apply-templates select="fpage | lpage" mode="content"/>2、满足某个条件的节点（模板的定义中，for-each等）<xsl:template matc

原创 XSLT常见问题（三）XSLT中attribute的使用

什么时候用 在进行标签转化的时候，避免不了要为标签添加属性及属性值用在哪儿 必须放在节点或者标签内部，在xslt文档的根部是不可以放的，模板直接嵌套也是不允许的，只能放在某个xml或者html（取决于要转化成的文档类型）节点内部定义 <Object> <xsl:attribute name="Type">

原创 XSLT常见问题（二）XSLT中变量的使用（variable）

什么时候用 要临时存储某个节点内容或者节点属性值的时候用在哪儿 xslt的根节点下面可以定义全局变量，在任意的template中都可以使用定义 1、值为节点内容<xsl:variable name="local-language" select="./article/p"/> name：变量名称select： 变量值 注：其中的select属性为可选，值可以在标签内部嵌套

原创 XSLT常见问题（一）转化后如何输出文件头

输出文件头标签为<xsl:output> 参数很多，常用的有 doctype-public：可选。规定 DTD 中要使用的公共标识符。即输出中 DOCTYPE 声明的 PUBLIC 属性的值。 doctype-system：可选。规定 DTD 中要使用的系统标识符。即输出中 DOCTYPE 声明的 SYSTEM 属性的值。 method:可选。定义输出的格式。默认是 X

原创 前端冷知识（四）：文件上传、线程、ajax

短路运算符||由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。 随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行 也就是说，

原创 前端冷知识（三）：Chrome调试

1、谷歌浏览器调试窗口，很多调试的js代码都是被压缩过的，格式很乱 有一个超好用的功能，format代码 2、在source窗口搜索文件 ctrl+p

转载 前端冷知识（二）：对象

不要使用new Number()、new Boolean()、new String()创建包装对象；用parseInt()或parseFloat()来转换任意类型到number；用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}typeof操作符可以判断

转载 前端冷知识（一）12种不宜使用的Javascript语法

== Javascript有两组相等运算符，一组是==和!=，另一组是===和!==。前者只比较值的相等，后者除了值以外，还比较类型是否相同。 请尽量不要使用前一组，永远只使用===和!==。因为==默认会进行类型转换，规则十分难记。如果你不相信的话，请回答下面五个判断式的值是true还是false： 　　false == ‘false’ 　　false == undefined 　　fa