11月02, 2016

gulp 基础

gulp 一款极其强大的构建工具。示例demo

了解

gulp 可以做的事情很多。

  • 代码分析 (jsHint, jsCs, eslinet, cssLint)

  • 编译(sass,less,es6,prefix,jade等等)

  • 拼接文件(css, js)

  • 压缩 (css, 图片, 雪碧图, 图标SVG)

  • 混淆 (uglify)

  • HTML生成 引用的注入(css,js)

  • 文件重命名

  • md5

  • 测试

  • 删除文件

  • 自动上传,部署cdn

等等。。。

阅读全文 »

10月30, 2016

换了一份工作

又一个多月没有更新博客了,对于我来说坚持做一件事还是比较困难的。唯一庆幸的是能够在前端这个领域一直坚持, 就在这个月初加入了新的团队,进入了疯狂学习和加班的模式。

阅读全文 »

09月09, 2016

回顾javascript中DOM的知识

知识点

  • 如何创建元素(createElement()createTextNode()cloneNode()innerHTML
  • 如何查找元素(.getElementById().getElementsByClassName().getElementsByTagName().querySelector().querySelectorAll()
  • 理解 live objectnon-live object.getElementById().querySelectorAll())的区别
  • 理解 ArrayNodeListHTMLCollection 的区别、缺陷
  • 改变元素文本内容的方法(innerHTML
  • 理解 innerHTMLtextContentinnerTEXTnodeValue 的区别
  • 改变元素结构(.appendChild().insertBefore().replaceChild().removeChild()
  • 如何操作元素的属性(.attributes.hasAttribute().addAttribute().removeAttribute().setAttribute()、点操作)
  • 理解 点操作属性 与 方法操作属性的区别(点操作只能改变标准的html属性)
  • 如何操作元素的 class 属性(.classList.classList.add().classList.remove().classList.toggle().classList.contains().className
  • 注意 classList 的兼容性(ie10以上),点操作的是 className 而不是 class
  • 如何操作元素的 style 属性(node.style.css_attributenode.style.css_attribute = newValue
  • 熟悉常见的节点 node(nodeTypenodeNamenodeValue
  • 如何操作节点、节点的关系(.previousSibling.nextSibling.firstChild.lastChild.parentNode.hasChildNodes().childNodes.children
  • 理解 node.childrennode.childNodes 的区别
  • 理解 dom 的空白节点(whitespace includes space, newline, tab),如果解决(.children.nextElementSibling.previousElementSibling.firstElementChild
  • 尝试封装选择器、事件处理

阅读全文 »

08月08, 2016

js设计模式之适配器模式(Adapter Pattern)

定义

Wikipedia 定义适配器模式:

In software engineering, the adapter pattern is a software design pattern that allows the interface of an existing class to be used from another interface. It is often used to make existing classes work with others without modifying their source code.

适配器模式将一个对象或者类的接口翻译成某个指定的系统可以使用的另外一个接口。

阅读全文 »

08月02, 2016

git的命令入门

本文,以写一个学习 React 的项目(learn-react),学习开源项目的过程。之前都是使用 webstorm 的git界面操作,现在学习命令的方式。

阅读全文 »

07月29, 2016

全面学习javascript中的对象

更好的排版请看:跳转

对象的基础

对象的定义

对象是一组由若干个无序的键值对(key/value)组成的数据集合 ,在 javascript 中所有的数据都可以被视作对象。每一个键值对又可以叫做“成员(members)”。

阅读全文 »

07月15, 2016

自己的前端入门经验

在群里,经常会有同学问到,“怎样才能入门前端?”、“前端学到什么水平才能出去找工作?” 等等,在这里分享下我是怎么自学前端,在工作中成长的。

第一阶段

了解 html, css, javascript

查看 w3c html

查看 w3c css

查看 javascript

了解一张网页是由 html(结构) ,css(样式)、javascript(行为)组成,知道这些语言的基础语法,尝试写一个简单的页面。当时做了自己的第一个小网站,推荐歌曲相关的。

阅读全文 »

06月24, 2016

学习koa2,做微信h5的简单接口

在组内,之前做了一次《规范与效率》的分享,这次因为来了几个新人,对于前后端的流程不是很熟悉,所以尝试学习koa2,用基于koa2做一个demo,给他们讲解下前后端的一个流程。

分享的ppt 《前后端流程》

在线demo 东风小康集卡

介绍

nodejs的一款优雅的web开发框架,可以快速的搭建。

一个Koa应用就是一个对象,包含了一个middleware数组,这些函数负责对HTTP请求进行各种加工,比如生成缓存、指定代理、请求重定向等等。

阅读全文 »