- 博客(47)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 webpack 3中hash、chunkhash和contenthash三者的区别
在使用webpack 3中，文件名的hash值可以有三种hash生成方式，那具体使用哪一种呢？ 1.hash 如果都使用hash的话，所有文件的hash都是一样的，而且每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。output:{ path:path.resolve(__dirname,'./dist'), ...
2018-03-15 23:46:12
5222
1
原创 vue组件之间8种组件通信方式总结
对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的各种方式的总结，总共有四种方式。 1.父子组件之间的消息传递 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。Vue.component('child',{ data(){ return { ...
2018-03-13 22:54:04
41390
5
原创 JavaScript中Promise和setTimeout的区别
最近在看vue源码，发现vue中的nextTick异步更新dom操作是先判断是否支持Promise，如果不支持就判断是否支持MutationObserval,如果也不支持的话，最后才是setTimeout。/** * Defer a task to execute it asynchronously. */var nextTick = (function () { var cal...
2018-03-12 20:16:29
7926
1
原创 Vue 2.3.4源码分析之双向绑定原理
要想实现双向绑定需要做到两点：1.如何监听data对象是否改变；2.对象变化后如何去更新视图 一、如何监听data对象是否改变 在Vue监听data对象是否改变主要通过defineReactive方法来做到的，就是利用Object.defineProperty的get和set方法。如下代码所示：export function defineReactive ( obj: O...
2018-02-26 00:06:52
654
原创 Vue 2.3.4源码分析之视图渲染
最近公司一直使用Vue 2进行前端开发，正好趁最近时间空闲，阅读了一下vue源码。现在我看源码的理解记录如下。这篇博文主要分析视图渲染。Vue 2视图渲染主要使用虚拟DOM实现的，流程如下：1.在$mount方法中，首先判断是否提供了render方法，如果没有就需要解析模板生成一个render方法。Vue$3.prototype.$mount = function ( el, hydrat...
2018-02-25 23:51:02
816
原创 如何更换Ubuntu的源
在Ubuntu中使用apt-get安装软件时有时会报错，这时需要apt-get update来更新索引，但由于默认的ubuntu源是国外的，所以速度慢，那么如何更改Ubuntu的源呢？ 要想更改Ubuntu的源，只需要更改/etc/apt/sources.list文件。 国内有很多源，比如阿里的源：deb http://mirrors.aliyun.com/ubuntu
2017-04-08 00:33:18
1038
原创 JavaScript数组常用方法总结
在JavaScript中，我们需要时常对数组进行操作，现在特将常用方法总结如下： 1.增加数据 在JavaScript为数组增加数据主要分为两种方式。 从数组末尾增加内容：push方法 从数组的前端增加内容：unshift方法 这两种方法的返回值都是数组的长度var arr=[1,2,3];//从末尾增加arr.push(4);co
2017-01-13 00:05:17
1076
原创 type为text的input标签的相关事件对比
在工作中，我们可能时常需要对type为text的input标签绑定事件，但我们是否了解这一些事件的区别？ onchange: 当input的值发生改变时，所触发的，但这个事件的特点是，必须失去焦点才真正的触发。 oninput: 当input的值发生改变时，所触发的，但它不需要失去焦点就可以触发。 onkeydown: 按下键时触发，但这个时候获取input的值还是没
2017-01-12 23:30:30
2219
翻译 为什么使用RxJS
Why RxJS?我们可能会问自己，为什么使用RxJS?不是有Promise吗？没错，Promise对于只期望单值返回的异步请求（比如：XMLHttpRequest）是一个好的解决方案。但Reactive Extensions for JavaScript对Promises, callbacks , Web Workers, Web Sockets进行了统一优化. 一旦我们统一优化这一些概念后，我们
2016-11-17 16:07:45
10039
翻译 RxJS的介绍
RxJS v4.0Reactive Extensions (Rx) 是一个基于事件的异步编程库，它是一种使用可观察序列（observable sequences）和LINQ风格的查询操作 。数据序列（Data sequences）可以是多种类型，比如：来做文件或web service的流，web services requests,系统通知，甚至可以是各种事件。Reactive Ext
2016-11-17 15:52:54
1145
原创 SharePoint之rest api
尽管我们可以使用客户端对象模型进行SharePoint开发，但SharePoint 2013开始，提供了rest api来更方便的开发。 1. ajax请求获得list的数据 比如如果我们想要查询一个list的数据，我们可以这样：$.ajax({ type: "GET", url: _spPageContextInfo.webAbsol
2016-11-16 18:14:27
1503
原创 nginx负载均衡和反向代理跨域
nginx是一个高性能的Http服务器，有两个默认的模块proxy_pass和upstream。proxy_pass可以很方便的进行反向代理，然后配合upstream可以很方便的实现负载均衡。 在nginx的根路径下的conf文件夹下的nginx.conf就是我们需要关注的配置文件。 1. proxy_pass 在server下listen指定了服务器的断开，s...
2016-11-08 00:44:49
5784
转载 构建流式应用—RxJS详解
最近在 Alloyteam Conf 2016 分享了《使用RxJS构建流式前端应用》，会后在线上线下跟大家交流时发现对于 RxJS 的态度呈现出两大类:有用过的都表达了 RxJS 带来的优雅编码体验，未用过的则反馈太难入门。所以，这里将结合自己对 RxJS 理解，通过 RxJS 的实现原理、基础实现及实例来一步步分析，提供 RxJS 较为全面的指引，感受下使用 RxJS 编码是怎样的体验。
2016-11-07 21:56:27
11766
原创 CSS之BFC
Formatting Context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，他决定了子元素将如何定位，以及和其他元素的关系和相互作用。现代浏览器支持四个Formatting Context：Block Formatting Context (简称BFC),Inline Formatting Context (简称IFC),GridLayout Form
2016-11-03 15:49:29
355
原创 Angular 2.0项目结构基本介绍
使用Angular-cli新建项目后，基本可以得到如下目录结构： 1.根模块 其中app.module.ts是该项目的一个根模块，使用@NgModule修饰，表面改Class是一个模块，declarations表示该模块包含的视图类，imports表示该模块需要其他模块导出的类，provider是模块包含的service，bootstrap包含该模块启动时，需要
2016-11-01 15:13:18
2584
2
原创 Angular-cli
如果纯手工搭建Angular 2.0的项目结构，会有点复杂，一般我们需要使用一些脚手架，比如Angular-cli。 1.安装Angular-cli 使用npm安装：npm install angular-cli -g 2.新建一个Angular 2.0的基本项目ng new Project_Name 3.运行Angular 2.0项目cd P
2016-11-01 14:39:37
2694
原创 margin在文档流和浮动中的区别
CSS盒模型中的margin我们是否真的了解？我们是否知道margin在文档流和浮动中的区别？ 要想了解margin的原理，需要先了解一下什么是参考线。关于参考线请参考http://www.planabc.net/2007/03/18/css_attribute_margin/。 知道了参考线之后，我们可以很好的理解如下代码： CSS：.container{ w
2016-10-28 11:59:16
1922
原创 CSS中visibility,opacity和display:none的区别
如何让html的某个元素隐藏，我们一般有三种方式：display:none, opacity:0,visibility:hidden。但这三种方式有何区别？ 1. display:none 该方式让元素隐藏时，隐藏的元素不占空间，隐藏后将改变html原有样式。 2. visibility:hidden 该方式让元素隐藏时，隐藏的元素还是占用原有位置，隐藏
2016-10-24 22:46:27
1873
原创 JavaScript常用设计模式
1.构造器模式 我们都知道JavaScript的对象和function有着千丝万缕的关系，每个对象都可以看成是通过new一个function来创建的。而这个过程就可以看成是构造器模式。var MyObj=function(){ this.name="Scott";}var obj=new MyObj();console.log(obj.name) 2
2016-10-21 14:47:12
1889
原创 JavaScript浅复制和深复制的区别
理解JavaScript浅复制和深复制之前，我们需要先了解js的数据类型：基本数据类型和引用类型。 基本数据类型：undifined, null, Number, String ,Boolean,这一些是存放在栈stack中的。 引用数据类型：Object, Array等，这一些事存放在堆heap中的。 1.浅复制 看如下代码：var myObj1={
2016-10-17 11:57:26
398
原创 CSS的box-sizing和calc()
有如下前端代码： CSS:.out{ width:300px; height:300px;}.in{ width:100%; height:100%; padding-left:10px;} html:<div class="out"> <div class="in"></div></div>...
2016-10-14 17:57:55
803
原创 前端开发之如何兼容IE8等旧IE浏览器
最近一个采用angular的前端项目需要兼容IE8浏览器，为了兼容这旧版本的IE浏览器，花费不少时间，先特将心得记录如下。为了使不兼容HTML5和CSS3新特性的IE等浏览器兼容最新特性，其实已经有人写了一些库。 1. html5shiv html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用
2016-09-08 18:38:13
10745
原创 再次发布修改的workflow后，workflow没有更新
最近使用SharePoint Designer开发workflow时，发现一个郁闷的问题，就是发布修改后的workflow后，workflow并没有更新，现将解决方法记录如下： 如果你使用的是win7系统的话， 1. 关闭SharePoint Designer; 2. 打开如下路径：%SystemDrive%\Users\%user%\AppData\Local\Mi
2016-05-25 20:35:53
880
1
原创 Jquery根据id获取属性的一个奇怪问题
我们都知道html代码需要规范，但有时一些页面不是有我们所能控制的，比如SharePoint的一些页面。其中一些页面的id属性的值包含点号等特殊字符。当我在使用Jquery是发现一些奇怪的现象，特记录如下： 有如下html代码，其中id的值包含点号。 当我们使用如下Jquery语句去获得这个元素对象时，无法获得这个元素对象，返回值是空数组[]。$("#user1.nam
2016-04-22 17:03:30
602
原创 JavaScript数组去重
JavaScript去重，我相信方法很多，但今天记录几种常用的。 1.第一种方式： 我相信很多人很快会想到利用数组的indexOf方法来去重，var arr=[1,2,3,'hello','','1','2'];var removeduplicatedArray=function(arr){ var newArr=[]; for(var i=0;i<arr.len...
2016-04-16 21:08:47
340
原创 服务器断电后，mysql不能启动的解决方案
公司的数据中心由于断电，服务器（服务器是ubuntu系统）重启后，mysql却无法启动，折腾了好久，现将解决方案记录如下： 1.mysql的日志位于ubuntu的/var/lib/mysql下面，我们可以看到ib_logfile0和ib_logfile1两个文件 2.将ib_logfile0和ib_logfile1两个文件删除rm ib_logfile* 3.使
2016-04-12 13:38:56
10977
1
原创 SharePoint之JavaScript客户端对象模型
最近一年以来，断断续续的做SharePoint的项目，主要是使用JavaScript进行开发。由于对SharePoint不是很熟练，导致每次写代码都得去Stack Overflow上去找代码。现将经常使用的相关代码总结如下，以留自己日后参考。 1.list item的创建： function createListItem(listTitle, data, callback) {
2016-04-08 14:29:58
3223
原创 微信公众号开发之如何将本机IP映射成外网域名
最近一个项目需要用到微信公众号的网页授权登录，在研究这个公众号的时候遇到各种困难，现将自己的一些心得总结一下。 我想进行微信公众号开发遇到的第一个困难就是微信公众号必须输入一个外网可以访问的域名，在网上我看到的都是使用ngrok或者花生壳的。但其实没必要这么麻烦。那么如何做呢？ 1.下载QQ浏览器 我想程序员用的浏览器一般都是chrome,IE和火狐等，基本看不上QQ
2016-03-28 17:16:45
19501
原创 前端自动化构建工具gulp使用指南
最近接触到一个前端自动化构建工具gulp,我发现这个东西易学好用，可以很好的处理前端开发的一些问题。我想前端开发经常需要进行css或js文件的合并、压缩、重命名等操作。如果项目文件很大的话，手工操作这一些将不可以想象，而gulp可以很好的处理这一些问题。 gulp是一个基于nodejs命令行的工具，我们可以使用npm安装它:npm install gulp 要想进行前端文件的各
2016-03-18 11:45:12
746
原创 JavaScript原型链
JavaScript是基于原型链的面向对象语言，因此我们有必要好好了解一下原型链，在JavaScript中的所以对象，组成了一个原型树，沿着一个对象我们可以向上遍历，这就形成了一条原型链。 说到原型链，我们有必要了解一下什么是原型以及Function和Object的关系。 1.原型： JavaScript中每个对象都有一个对应的prototype的原型对象，原型主要是
2016-03-16 15:09:51
409
原创 前端跨域问题总结
我想大家在进行JavaScript开发时，经常遇到类似如下的错误： 之前我遇到跨域问题都是在Chrome浏览器中配置 --allow-file-access-from-files即可(http://blog.csdn.net/zhoulu001/article/details/50483245)。但这样做不是解决办法。因此特地总结了一下如何跨域的问题。 跨域基本有如下解
2016-03-16 12:15:07
649
原创 JavaScript的异步开发
最近一个使用JavaScript开发的SharePoint项目，里面需要使用各种JavaScript去操作SharePoint的list,但在开发过程中，我被JavaScript的异步彻底击毁，一直以来，我以为我掌握了JavaScript的异步，但我发现我只掌握了一些皮毛，所以我将我在这个项目中对异步做如下总结。 要实现JavaScript的异步，可以采用如下方法： 1.回调函
2016-03-12 18:47:35
309
原创 JavaScript模块化开发2
前面提到如何使用原生JavaScript实现模块化开发，接下来讲解如何使用一些第三方规范来进行模块化开发。 说到模块化规范，主要分为两种：CommonJS和AMD。 1. CommonJS规范 如果了解NodeJS的话，我们就会知道NodeJS实现了CommonJS规范，来模块化开发的。 使用时就两步：i).定义好模块后，使用exports导出模块；ii).
2016-03-12 18:07:51
454
原创 在ASP.NET中如何输出日志
在ASP.NET中，如何输出日志呢有一个NLog的库可以很方便的实现。只需要三步就可以完成： 1.引入Nlog相关的dll; 2.在项目的配置文件中，进行如下配置： 3
2016-03-03 12:54:45
3490
原创 从两段代码中理解JavaScript的单线程和异步
学习JavaScript需要理解它是单线程的，以及它异步的机制。现在我们从两段代码中来理解。 1. JavaScript代码1：var print=function(){ for(i=0;i<5;i++){ setTimeout(function(){ console.log(i); },1000); } }print(); 这段代码的输出结果是什
2016-02-28 23:26:59
489
原创 JSF的生命周期
JSF的生命周期有6个阶段，其中每一个阶段都是一个阶段类Phase的子类，前5个阶段都有生命周期接口的execute方法实现，第6个阶段有render实现。其中第一个阶段和第六个阶段是必须的，第二个阶段到第五个阶段是可选的。 1.恢复视图阶段： 负责创建或者恢复视图，视图指UIViewRoot对象。到底是创建视图还是恢复视图，是根据postback来决定，如果页面是第一次访问，
2016-01-25 17:21:56
613
原创 JSF和Servlet的区别
JSF是一个面向组件和事件驱动的MVC框架，它和Struts 2不同，它有点和ASP.NET的WebForm开发相似。JSF为我们进行了一些封装，提供了很多组件。比如Ajax,验证，转换等，我们都可以使用相关的组件。但不管怎么样，JSF从本质上讲，依然是Servlet。 1.请求处理的不同 Servet的请求处理流程一般如下：页面将表单提交给后台，后台通过request等变量获
2016-01-25 17:08:21
1821
原创 git的基本用法
Git是目前最流行的分布式版本控制软件，所以我们有必要了解它的基本用法。 我们的本地repository是由Git的三部分组成：工作目录，缓存以及最后的HEAD。add命令是将代码进行缓存，commit命令是将代码提交到HEAD，push命令是将代码放到远程服务器上，具体的命令如下： 1.让某个目录成为git的repository: git init 2.创建和
2016-01-15 16:38:13
312
原创 Chrome浏览器跨域问题
最近在做一个移动web的项目，从git中得到源代码后，在Chrome中运行，出现如下错误：但诡异的是在Firefox中却可以。原来使用Chrome跨域的话需要进行设置。 打开chrome快捷方式的属性，在Target中增加如下语句： --allow-file-access-from-files即可。
2016-01-08 15:42:12
846
原创 JavaScript继承
JavaScript没有java中的extends关键字去实现继承，那么它如何实现自己的继承呢？ 1.prototype方式： JavaScript每个对象都一个prototype属性，这个属性的含义为：返回对象类型原型的引用。var myObject=function(){}myObject.prototype.add=function(i,j){return i+j
2015-12-30 13:43:59
321
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人