- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 javascript拾荒
document.defaultView：一般情况下，在google浏览器开发者工具的console面板下运行document.defaultView === window，这个是会返回true的。首先，我们得知道defaultView这个属性到底是什么意思呢？查下MDN：在浏览器中，返回与当前document所关联的window对象，如果没有则返回null，而且是一个只读属性。前面说的一般情况...
2019-10-14 16:59:01
169
原创 图片上传预览的几种方式，了解下？
图片上传预览场景基本处处可见，朋友圈发动态配图，身份验证及头像更新，莫过如斯。原由最近在研究twitter PC网站的时候，在个人中心的主页，设置个人的背景图的时候，发现twitter有个非常好的设计，那就是用户在更改背景墙图片的时候，它根本不是先上传图片，而是在本地预览及编辑图片，待用户点击保存后，才上传图片，可以说是非常省流量的啦。然后，我在玩知乎的时候貌似它是先上传，然后预览的，为啥...
2019-05-16 18:35:32
1010
原创 subscribe？亦或 async
Angular也是基于组件式设计的。在angular组件中，对于state异步数据的更新一般有两种方式。使用subscribe方法在组件实例中监听数据observable数据；使用async pipe来监听observable流；在用angular开发angular版本cn node开源社区的时候，我基本上是使用subscribe方法来监听httpClient发出的接口请求，后来了解到a...
2019-01-08 13:45:22
875
翻译 一步一步实现自定义angular pipe
angular尽管内置许多的pipe，比如date、async、currency等。尽管拿来即用，但是远不能满足于业务的一些需求，所以需要实现自定义的一些pipe。自定义pipe（AngularJS中的filter概念）就是允许让我们去创建一个纯函数接收一些参数实际上去做一些形式上的转换。下面让我们做一些进一步的了解。angular的自定义pipe最基础的自定义pipe就是接收一个v...
2019-01-07 10:32:13
2066
6
原创 angular-cli设置proxy
前后端分离的开发模式已经是很普及的开发模式。术业有专攻，让专业的人做专业的事情才是最好的安排及资源分配。当然，前端开发中最常见的是如何处理与后端接口API联调的过程中忽略跨域的问题。随着node.js的流行及社区热度的持续高涨，前端的开发体验可谓也是天翻地覆，沧海桑田。工程化一词以前与前端沾不上别的也进入了前端人的技术范畴之内。前期的grunt、gulp及如今webpack、Rollup等相...
2019-01-05 10:22:31
2121
转载 dns-prefetch、prerender、prefetch的理解
前端优化选项DNS预获取DNS prefetch，即DNS预获取。前端优化中与DNS有关的两点：一个是减少DNS的请求次数，另一个是进行DNS预获取。 DNS预获取可以加快页面渲染速度，无需用户点击链接就能在后台解析，所以能减少用户的等待时间，提升用户体验； 默认情况下，浏览器会对当前页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，并且缓存结果，这就是隐...
2018-07-09 18:35:47
2329
原创 vue学习笔记（一）
近来，由于团队开发基于vue的倾斜，原本一直致力于在开发团队中推广AngularJS也因新同事的加入（基于vue技术栈），我也开始对vue做一定的学习及研究。 接下来的日子，我会持续更新自己对于vue的学习及在平时开发中遇到的问题在这里做一定的笔记。 个人觉得如果能对angularJS轻车驾熟，对vue上手应该也是很快的，毕竟两款MVVM框架在我整体看来有太多的相似了，当然其核心的思想及理念不是一
2017-10-23 22:44:06
286
原创 Javascript事件与鼠标坐标的属性
在平常的的开发中，多多少少会遇到与鼠标坐标相关的一些需求。比如：在移动端的手势判定、PC端的摇拽拖动的窗体事件等。那么你们是否都了解与之相关的Javascript的Event事件属性呢？ 如当我们在点击事件的时候，弹出当前的坐标多少？首先我们要弄明白event.pageX、event.clientX及event.screenX之外，还要弄明白其属性的一些浏览器兼容性问题；在这之前，我们还
2017-09-08 23:07:36
320
原创 underscore中的类型判断
underscore的类型判断类型判断是一个必要的js工具，在实际工作中是必要用到的。那么，如果正确的判断一个对象的类型是很有必要的。当然，这里正确的判断主要是一些浏览器的兼容性问题； 在underscore中，它把基本类型如Object、Array等的原型用一个变量存储，以便快速访问；在类型判断中，underscore主要涉及到：_.isEmpty()_.isElement()_.isAr
2017-08-09 23:11:22
706
原创 void 0 与 undefined
void 0 是什么意思？在一些高逼格的代码里经常看到void 0，如果还不熟悉赶快看看MDN; 简单的讲法就是void关键字会执行后面相关的运算但是始终返回undefined，运行下面的例子： var a = void 0; console.log(a); // undefined为啥要使用void 0？undefined本来就不是JS语法的保留关键字，所以会存在被覆盖的可能，它只
2017-08-09 22:22:33
603
原创 一行代码求数组的最大值与最小值
在平时的工作及任务中，常会有求数组中的最大值与最小值。现在给出求出数组最大最小值的最便捷方法。 var ArrayMax = function(array) { return Math.max.apply(null, array); }, ArrayMin = function(array) { return Ma
2017-07-26 21:38:47
746
原创 angular最佳实践
1、$scope： 在controller之中，write-only（只写 ） ; 在template中，read-only（只读） ; 2、用ng-bind代替 {{ expr }}，bg-bind代替表达式； 3、ng-cloak 防止闪烁，通过在头部样式声明 [ng-cloak] { display: none; } 4、ng-repeat中，如果数据有唯一标识id，用track b
2017-04-11 11:20:01
506
原创 Javascript高级编程读书笔记一
parseInt与parseFloat方法的区别 parseInt方法是将参数转为number类型的整数类型，支持二进制、十进制、八进制、十六进制的转化，默认为十进制； parseFloat默认是将参数转为十进制的浮点型数值；parseInt、parseFloat方法都是将参数转化为Number类型数据。对于String类型、Boolean类型、Object类型的参数，转化也会有不同。如果是
2017-04-11 11:17:43
259
原创 webpack 配置总结
entry入口文件配置：配置entry入口配置有三种写法，每一个入口称为chunk。 字符串： entry: ‘./index/index.js’: 配置模块会被解析为模块，并在启动时加载。chunk名默认为mian，具体打包文件名视output配置而定。数组： entry: [‘./src/mod1.js’, […,], [./src/index.js]]:所有的模块在启动时按照配置顺序
2016-12-11 09:47:10
5129
原创 谈谈Angular指令bindToController的使用（1.4版本后支持）
命名空间、代码的一致性及合适的设计模式在软件工程中是很重要的环节，Angular的出现解决了许多前端工程师所要面临的问题。在此分享下通过在指令中使用bindToController属性来使DOM控制更加专一，保持代码的一致性，同时在controller继承一些数据或构建的时候有更好的设计1、使用ControllerAs 使用bindToController时建议使用controllerAs语法糖配
2016-12-10 17:59:02
2451
原创 javascript框架设计-种子模块一
种子模块种子模块是框架设计中的核心部分，也是框架最先执行的一部分，所以要极具扩展性、稳定性及常用性。常见框架的种子模块至少具有类型拓展、数组化、类型判定、简单事件的绑定与卸载、无冲突处理、模块加载及domReady功能。1、无冲突处理参考jQuery源码，原理：利用临时变量将同命名变量或不同版本同框架(如jQuery版本很多)保存下来，然后使用函数处理控制权。//jQuery noConflict源
2016-07-04 23:04:32
271
原创 jQuery中的noConflict机制
一直以来，自己对jQuery的源码研究是中断而又重新再继续，发现自己缺乏好的习惯和坚持，以后对这方面能力还是要多加培养。现在来谈下对jQuery对于多个版本的jquery和同时引用$引起的冲突的处理。其实，对于jQueryAPI比较熟悉的jser应该比较熟悉$.noConflict()。现在让我们看下这个方法的源码：var _jQuery = window.jQuery, //版本冲突 _$
2016-07-03 10:04:32
317
原创 基于rem的响应式布局
rem的布局新见解其实，在写这篇博客之前，我建议大家可以参看这篇文章从网易与淘宝的font-size思考前端设计稿与工作流，我在仔细消化这篇文章后做了一个自己的看法和理解，欢迎交流。像素单位的选择em的没落em的计算与继承：em是基于父元素而来计算的，比如div的parent节点font-size为1.2em，如果我们此时再对div做一个font-size的设置为1.2em，如果1em=12px，那
2016-07-02 11:05:32
1842
原创 移动开发小记-01
1、 iphone第三方输入法不能监听到keyup, keypress, keydown事件：昨天在工作中遇到的一个小坑，我们在用jQuery绑定一个input框的keyup事件的时候，遇到iphone手机不能监听到的状况，后来仔细排查，发现不能监听到的都是iphone安装了第三方输入法。于是，我们个中百度，stackoverflow之，辗转查询，发现iphone的第三方输入法的问题，在此我们也测试
2016-06-29 11:51:20
512
转载 jQuery事件详解
原生js事件分析1.1、事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。1.2、事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。1.3、事件起泡：从目标元素开始，往顶层元素传播。途
2016-06-27 12:59:59
656
原创 一个订阅发布者模式
常见的订阅发布者模式的编写(function(window) { function Subscribe() { this.events = {}; }; Subscribe.prototype.subscribe = function(eventName, fn) { (!this.events[eventName]) && (this.eve
2016-06-15 14:28:21
499
原创 angular中$emit与$broadcast详解
angularjs 中 broadcast与broadcast 与 emit $on的处理思想对于Angular的controll之间的通信方式，我们可以常见有有几种方式，如可以通过rootScope，还有通过rootScope，还有通过scope的作用域，当然还有一种个人觉得很好的通信方式就是broadcast,broadcast,emit,$on来监听；broadcast方式与broadc
2016-05-28 01:08:04
9364
1
原创 Angular手动启动应用
Angular App应用的启动方式自动启动手动启动的原理及注意1、angular的启动是默认检测dom元素是否ng-app属性，如果有ng-app属性，则立即执行angular.bootstrap()函数自行启动应用，不会去检测下一个ng-app。 2、我们可以通过angular.bootstrap()函数来手动启动应用。 例子：自启动应用 <div ng-app>
2016-05-25 11:58:00
2511
1
原创 异步编程Promise的简单实现
promise模式-那么多中异步编程的方式，为什么选择promise, 因为前面几种方式不够灵活，用起来不够痛快，不优雅。为了降低异步编程的复杂性，所以promise。promise的核心是有一个promise对象，这个对象有一个重要的then()方法, 它用于指定回调函数，如：f1().then(f2); promise模式在任何时刻都有三种状态：已完成（resolved），未完成（unfulf
2015-07-31 10:14:42
1866
原创 一款很漂亮的CSS3登录界面
一款很漂亮的CSS3登录界面-随着高级浏览器的出现，对css3的支持也很不错了，下面我展现自己用CSS3做的一款登陆界面。 -效果如图 -代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>一款很漂亮的CSS3登录界面</title> <style type="text/
2015-07-29 13:19:54
35628
16
原创 Backone初探——学生信息管理
Backone初探——学生信息管理-下面是我做的给一个简单的学生信息管理，可以增加学生，删除学生，总体感觉用Backbone思路是最重要的，也就是MVC思想。具体的backboneAPI 可以查看这里：backbone中文API -下面是整个APP页面功能的展示 页面代码-ps:记得自己引用jquery,underscore,backbone的 js库。<html> <head lang
2015-07-24 16:46:22
858
原创 Javascript正则表达式学习
其实，正则还是要靠自己多写，这样才能记住那些复杂的规则，推荐MDN的基础篇及正美的博客，希望对你有帮助：列表内容这里写链接内容
2015-05-14 21:30:32
351
原创 获取时间函数
在Web前端开发中，与Date对象打交道算是很平凡的了，可以说是家常便饭了，所以日期对象是很常用的。这里，菜鸟写了个函数，把后台传过来的时间戳按规定的格式显示出来。其实很简单的，我们可以通过(Date(new Date())).toString()一句就可以得到一个格林威治时间格式字符串。 /** * @Descript: used to format Date like YYYY:MM:DD
2015-05-11 21:36:02
1313
1
原创 js回到顶部
今晚，我自己写了一个很简单的回到的顶部的js，同时也希望自己能在原生JS上面有发展，与大家共勉！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript backToTop</title></head><body> <div style="width:100%;heig
2015-05-06 23:26:06
359
原创 jQuery.load()的使用
在写jQuery.load()方法之前，先讲一些题外话吧！广州的四月天，有如家里的五月份天气了！难得的是今夜下来一场小雨，让空气中带有一丝凉意。细细想来，工作也快一年了，感觉自己成长了不少，这个成长是建立在一年前。看了许多blog，一些博主在大学就很有建树，还没毕业就已经拿到了BAT或知名IT企业的offer letter,看完心中感慨颇多。现在回想起来，大学四年里我究竟学了多少，用井底之蛙来相容
2015-04-29 23:32:19
514
原创 javascript基础复习
javascript基础复习1、如何判断一个变量是否为数组 有两种方法： （1）if(value instanceof Array) (2) if(Array.isArray(value)) 注意：第二种方法是ECMAScript5新增的方法：支持IE9+,FF4+; 2、数组的方法： Array.push()；
2015-03-16 22:17:53
491
原创 Require.js初探（一）
AMD 简介 前端开发在近一两年发展的非常快，JavaScript 作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一些前端开发中的共性问题，但是实现又不尽相同。在这个背景下，CommonJS 社区诞生了，为了让前端框架发展的更加成熟，CommonJS 鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD（Asynchronous M
2015-02-11 11:45:04
485
原创 javascript的事件机制
首先，让我们来看一幅图，这样便让我们更加理解JS的事件机制，如图：首先，让我们来举个例子，在两个同心圆中，当我们来点圆心的时候，其实我们点的是两个圆的圆心，那我们如何来区分我们点击是哪个圆的圆心呢？那么联系我们Web里面，在界面上，当我们来点击某个元素的时候，我们又是怎么区分的呢？其实早在IE4与Netscope浏览器之争的时候，他们提出来了两个方案，得到两个完全不同事件概
2015-01-30 13:04:27
519
原创 JS拖拽元素实现
再附上JS，然后我再讲下原理：function getByClassName(className,parent) { var oParent = parent ? document.getElementById(parent) : document, eles = [], elements = oParent.getElementsByTagName('*'); for(v
2015-01-29 00:18:07
661
原创 CSS3的box-sizing属性详解
随着浏览器对HTML5及CSS3的支持，在移动端及自适应页面中CSS3.0发挥着很大优势；下面我来给大家讲下CSS3.0的属性之一——box-sizing； 首先我们来讲下盒模型，具体对于CSS2熟悉的话，很清楚的知道CSS中盒模型的概念，在此我不再详续，实在不了解去参看w3cschool吧；CSS3的box-sizing属性有两个取值：border-bo
2015-01-27 22:30:46
2604
原创 DOM学习
//Node 类型 Node typeNode.ELEMENT_NODE(1); //元素节点Node.ATTRIBUTE_NODE(2); //属性节点Node.TEXT_NODE(3); //文本节点Node.CDATA_SECTION_NODE(4);Node.ENTITY_REFERENCE_NODE(5);Node.ENTITY_NODE(6);Node.PROC
2014-12-29 22:22:26
463
转载 Web前端开发规范
Web前端开发规范一、前端开发规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.二、基本准则符合web标准, 语义化html标签；结构、表现、行为三者相互分离, 兼容性优良；页面
2014-09-25 09:25:43
527
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人