2016年11月_descire

原创 JavaScript进阶--图片懒加载

懒加载技术图片对于网络加载的负担相比较其他资源是非常大的，而且整个网页的图片并不是所有的多是第一时间呈现给用户。懒加载就是其中一种解决方案（本质上是延迟加载）。懒加载原理设置img标签的src属性为一张占位图。设置img标签自定义属性data-src为真是图片的url。页面加载完成后，根据你设定的时机替换img标签的src。效果图: 获取页面所有的img。 var imgNode =

2016-11-30 20:33:35 252

原创再不用ES6就Out了--函数的新特性

函数默认值默认值这要是针对参数传入为undefined的值。ES6之前的写法: function add(x, y) { x = x || 1; y = y || 1; return x + y; } console.log(add()); // 2进入ES6的你:function add(x = 1, y = x) { return x + y;}cons

2016-11-29 18:43:04 276

原创再不用ES6就Out了--Object中新增的几个方法

Object.is(a, b) 讲到这个方法之前，首先要再谈到一下==和===的区别 (如果你还在代码中写== -_-!) ==: 在比较的时候会自动转换类型，才去比较。 ===: 唯一的缺点就是NaN不等于自身,+0和-0相等。而ES6增加了Object.is(a, b)这个方法： console.log(+0 === -0); //true console.log(NaN

2016-11-28 18:54:44 4326

原创再不用ES6就Out了--es6变量声明

ES6的变量声明方式保留了var和function。新增加了let、const、class和import。而且,let、const、class声明的全局变量再也不会和全局对象的属性挂钩了。let ------------ let ------------ 1、let只在所在的代码块中有效 for (var i = 0; i < 10; i++) {} console

2016-11-24 20:10:57 3789

原创 JS基础--事件（1）

事件首先明确IE中是冒泡型事件处理，而标准浏览器中使用的是捕获冒泡型事件处理。HTML标签属性 <button type="button" name="button" onclick="alert('1');">确定</button> 属性为on+事件名称，属性值为JavaScript字符串。这种方式虽然没有什么兼容性的问题，但是不满足结构与行为分离的思想。而且当你事件处理比较

2016-11-23 19:42:32 266

原创 JS版设计模式--Facade

外观模式(Facade)外观模式主要是定义一个高层接口，使复杂的子系统更加容易使用。例子比如我们在浏览器中限制a标签的默认行为。这时候我们就得考虑IE浏览器与标准浏览器的兼容问题。 (虽然这是个简单的例子，但是能够说明问题) var link = document.getElementById('link'); link.onclick = function (

2016-11-22 19:33:00 232

原创自学Node--回调地狱

最近比较郁闷，和朋友聊着聊着就聊到了掉头发的事件(-_-!),程序员还是要好好保护自己啊，下面进入正题：从文件读写的例子讲起刚学习Node的同学，多会敲一个读取文件的代码： fs.readFile(path.join(__dirname,'/db.json'), 'utf-8', function (err, data) { if (err) { console.log('

2016-11-18 19:34:20 418

原创自学Node--RESTful初识

RESTful API对于不同客户端，只提供一套服务的接口， REST是最好的选择。分清几个概念 REST: Resource Representational State Transfer Resource: 资源 Representational: 表现形式JSON、XML、JPEG。 State Transfer: 状态变换通过HTTP动词实现（GET、POST、P

2016-11-17 19:05:04 220

原创 JS版设计模式

策略模式(Stragegy)策略模式：定义一系列的算法，并且把它们封装起来，而且他们可以相互替换。实现方法这里我举个在项目中遇到的问题，比如说要验证一个对象中的属性的值是否合法，一开始我是通过不停的else if，现在想想，真的有点蠢了。 var validator = { //验证的方法 methods: {}, //配置数据 config: {}, //

2016-11-15 18:57:44 192

原创 JS版设计模式--Decorator

装饰者模式(Decorator) 优点： 1、扩展功能，相对于继承增加了更多的灵活性。 2、通过使用不得装饰器，以及它们的排列组合，创造出更多的可能性。第一种实现方式 ---------------------- 构造器静态属性 + 继承 ---------------------- function Coder() { this.skills = ['r

2016-11-10 18:40:35 279

原创 JS版设计模式--Iterator

迭代模式(Iterator) var Iterator = function () { var data = [1,2,3,4,5], index = 0, length = data.length; return { hasNext: function () { return index < length;

2016-11-09 21:03:56 326

原创 JS版设计模式--Factory

工厂模式(Factory) 工厂模式一般分为3种：简单工厂、工厂方法和抽象工厂。很少能用到抽象工厂，除非是大型项目（我也没有用过，这里就不讨论了^_^）概念大家可以百度一下，今天我要给大家介绍的是工厂方法模式实现这里我们通过一个生产汽车的车间为例： //车间 function CarMaker(){}; //车的基本功能 CarMaker.prototype.confi

2016-11-08 20:23:15 333

原创 JS干货--拷贝与继承

浅拷贝与深拷贝 ------------- 浅拷贝 ------------- var obj = { name: 'name' } var a = obj; a.name = 'new name'; console.log(a.name); // 'new name' console.log(obj.name); // 'new name' 这里就是

2016-11-07 19:45:26 535

原创 JS干货--命名空间与链式编程

命名空间(namespace) 相信会Java的同学，对于命名空间并不会陌生。我们来看看JavaScript中如何实现命名空间：简单的的实现: var MYAPP = {};//显然这样不是很优雅（^_^）换成这样: if(typeof MYAPP === "undefined") { var MYAPP = {}; } or: var MYAPP = M

2016-11-03 18:40:42 1158

原创 JS干货--Function

函数的声明方式 ------------------ 1、采用new关键字 ------------------ var add = new Function('a, b','return a + b;'); 好像没人会这么写，各种不爽。 ----------------- 2、函数声明 ----------------- function add(a, b)

2016-11-02 19:58:27 287

原创 JS干货--对象字面量

Why? 一把在JS中声明对象，大家多会这么写var a = {}; 很少有人这么写：var a = new Object(); 这是为什么呢? 1、首先{}这叫做对象字面量，new Object()则是使用构造器函数。 2、明显的对象字面量的声明方式比构造器函数更加方便。 3、new关键字缺失造成的问题。所以在JS中建议以对象字面量的声明方式优先。下面我们先说说构造器函数

2016-11-01 19:18:10 1369

原创 JS干货--几个容易忽视的知识点

JS中的全局变量 ---------------- 隐式声明全局变量 ---------------- 在JavaScript中全局变量会变成全局对象(浏览器中为window)的属性一下两种方式会隐式的成为全局变量: 1、no var function add(a, b) { //result变成全局变量 result = a + b; ret

2016-11-01 19:17:44 340

descire