去除Linux文件的^M字符

命令行输入

1
dos2unix filename

JavaScript中如何实现深复制

  • 2018-6-21

浅复制只复制一层对象的属性,修改新的对象的属性也会影响原来的对象。

JavaScript中最常见的赋值操作就是浅复制。

深复制则递归复制了原有对象所有层级,修改新的对象不会影响原来的对象。

可以通过下面的方法实现深复制:

1
newObj = JSON.parse(JSON.stringify(originObj))

jQuery插件的编写和使用

  • 2018-6-20

一、背景知识

编写插件的目的是给已有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提供开发效率。

jQuery 的插件一共分为 3 种类型

  1. 封装对象方法的插件(最常见的一种插件)
  2. 封装全局函数的插件
  3. 选择器插件

二、编写插件

1. 编写插件应在闭包中进行

1
2
3
4
(function($) {
//此处将$作为匿名函数的形参
/* 这里放置插件的代码 */
})(jQuery); //这里将jQuery作为实参传递给匿名函数

2. jQuery 插件的机制

(1) jQuery提供的两个方法

jQuery 提供两个用于扩展 jQuery 功能的方法,jQuery.fn.extend()方法和jQuery.extend()方法。

  • jQuery.fn.extend() 用于拓展 jQuery 第一类插件,即封装对象方法的插件
  • jQuery.extend() 用于拓展 jQuery 后两类插件,即封装全局函数的插件和选择器插件。

这两个方法都接受一个参数,类型为Object,Object对象的"名/值对"分别代表"函数或方法名/函数主体"。

(2) jQuery.extend()方法

jQuery.extend()方法除了可以用于拓展 jQuery 对象之外,还有一个很强大的功能,就是用于拓展已有的 Object 对象。

1
jQuery.extend(target, obj1, obj2, ..., objn)

合并 settings 对象和 options 对象,修改并返回 settings 对象

1
2
3
4
var settings  = { validate: false, limit: 5 , name: 'foo' }
var options = { validate: true, name: 'bar' }
var newOptions = jQuery.extend(settings, options)
// 结果: newOptions = { validate: true, limit: 5, name: 'bar' }

因此,jQuery.extend()方法经常被用于设置插件方法的一系列默认参数:

1
2
3
4
5
6
7
8
9
function foo(options) {
options = jQuery.extend({
name: 'bar',
length: 5,
dataType: 'xml' /* 默认参数 */
}, options) /* options为传递的传递的参数 */
}
// 用户调用 foo()方法的时候,在传递的参数options对象中设置了相应的值
// 那么就使用设置的值,否则使用默认值

3. 编写封装对象方法的插件

  • 编写设置和获取颜色的插件
  • 待实现功能:
  1. 设置匹配元素的颜色
  2. 获取匹配的第一个元素的颜色

(1) 代码模板

1
2
3
4
5
6
7
8
9
(function($){
$.fn.extend({
color(value) {
// 这里编写插件代码
}
})
})(jQuery)
// 这里给这个方法提供一个参数value, 如果调用方法的时候传递了value这个参数, 那么就是用这个
// 值来设置字体颜色; 否则就是获取匹配元素字体颜色的值

时间复杂度的计算

算法的时间复杂度等于该算法中所有语句频度之和的同数量阶。

例1 设n为3的倍数,请仔细阅读以下算法,分析其时间复杂度。

1
2
3
4
5
6
7
8
9
10
11
void Fun(int n)
{
int i,j,x,y;
for(i=1;i<=n;i++)
if(3*i<=n)
for(j=3*i;j<=n;j++)
{
x++;
y=3*x+2;
}
}

注意本题重点是分析时间复杂度,不能直接给出答案O(),下面给出分析过程:

所有语句频度之和为 故该算法的时间复杂度为O().

iframe中引用外部元素以及在外部引用iframe内部元素

  1. 在外部引用iframe内部元素
1
2
var iframe = document.getElementById('iframeName')
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document
  1. 在iframe中引用外部元素
1
var outerDoc = parent.document

注意:以上适用于同域名同端口下的相互调用,不支持跨域请求。

windows美化踩坑

  1. windows主题路径位置

    1
    C:\Windows\Resources\Themes
  2. Resource Hacker替换资源文件需要同名

3. diffTool.exe

diffTool可用于比较两个.msstyles文件的不同,从而可以为主题制作者借鉴其它主题中的闪光点。

diffTool比较后会输出一个different.txt文件,这个文件可读性比较差。

搬瓦工ssh连接不上的原因

原因是搬瓦工服务器的ssh默认端口不是22。

使用git cz取代传统的git commit

  • 2018-5-26

算了,直接盗官方的图吧 看完是不是很心动呢? 什么! 你竟然没看懂什么意思...那我还是建议你先把git学会了再看我这篇教程吧...

推荐学习一个git的网址:git教程by廖雪峰

简而言之,git commit 就是你在做一次修改后类似于写一个备注,现在安装了commitizen后,你可以使用git cz取代git commit,每次提交的时候可以选择本次commit的类型,这样commit的文本会更具有可读性。

commitizen官方repocommit就是基于commitizen构建的:

是不是很有逼格!所以就赶紧安装使用吧~

最后,附上commitizengithub地址:commitizen

最后的最后(特别重要),附上我的踩坑记录:

注意,在Windows环境下这段命令是不能正常运行的:

Windows没有home路径,所有必须要走Windows的特色主义道路啦~

解决方案:

Step1 打开资源管理器,在地址栏输入

1
C:\Users\%username%

回车,进入当前用户文件夹根目录

Step2 新建一个.czrc文件

文件内容为

1
{ "path": "cz-conventional-changelog" }

然后保存即可

其它步骤按照官方教程走即可...

H5全屏api

  • 2018-5-20

1
2
3
4
5
6
7
8
9
10
function requestFullScreen(element) {
var de = document.querySelector(element) || document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}

自定义vue-cli模板

环境配置

1.使手机支持实时预览

修改config/index.js下的localhost0.0.0.0,即可支持手机预览

必备插件

1.安装stylus-loader

① npm安装stylus-loader

1
npm i stylus stylus-loader --save-dev

② 修改.vue组件样式标签

1
2
3
<style lang='stylus'>
...
</style>

2.导入normalize.css

① npm安装normalize.css

1
npm i normalize.css

② 在main.js中全局导入normalize.css

1
import 'normalize.css'

3.使用模板

删除node_modules文件夹后,将项目文件夹放在一个template文件夹下