- 博客(175)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 CSDN我又回来了
CSDN我又回来了从去年9月份开始第一篇博客，陆陆续续写了一百多篇博客，2月份之后到今日就开始停笔不写，主要是因为正式开始工作，没有以前那么多时间进行学习了。现在公司中有一个小哥哥在陪着我梳理前端的知识点很是感动，加油我的公司生活。
2017-05-30 11:23:16
410
原创 web前端之用JavaScript实现图片剪切效果（一）
web前端之用JavaScript实现图片剪切效果（一）效果图：说明：用CSS实现效果布局CSS实现图片不透明及裁剪效果opacity: 0-1,用来设置透明度clip:rect(top,right,bottomm,left)用来选择选定的区域大小和位置img2用来覆盖img1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.
2017-05-29 11:15:12
3758
原创 web前端之了解node五：Buffer(缓冲区)
web前端之了解node五：Buffer(缓冲区)JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原
2017-02-08 23:36:40
1458
原创 web前端之json排查和格式变换
web前端之json排查和格式变换json排查<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equi
2017-02-08 23:18:26
287
原创 web前端之定时器的使用
web前端之定时器的使用定时器的简单介绍：获取系统时间：定时器的使用1：html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">head>meta http-equiv="Content-Type" content="text/html;charset=UTF-8">title>定时器title
2017-02-03 20:39:38
876
转载 ATOM编辑器快捷键大全
ATOM编辑器快捷键大全文件切换ctrl-shift-s保存所有打开的文件 cmd-shift-o打开目录 ctrl-0焦点移到目录树：目录树下，使用a，m，delete来增加，修改和删除。 cmd-t或cmd-p查找文件 cmd-b在打开的文件之间切换 cmd-shift-b只搜索从上次git commit后修改或者新增的文件。 cmd-\ 显示或隐藏目录树导航（等价于上下左右） c
2017-01-19 22:52:48
304
转载 Eclipse最有用的快捷键
Eclipse最有用的快捷键Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合。通过这些组合可以更加容易的浏览源代码，使得整体的开发效率和质量得到提升。 1. ctrl+shift+r：打开资源这可能是所有快捷键组合中最省时间的了。这组快捷键可以让你打开你的工作区中任何一个文件，而你只需要按下文件名或mask名中的前几个字
2017-01-19 22:47:27
210
原创 web前端之了解node四：事件循环、EventEmitter
web前端之了解node四：事件循环、EventEmitterNode.js 事件循环Node.js 是单进程单线程应用程序，但是通过事件和回调支持并发，所以性能非常高。Node.js 的每一个 API 都是异步的，并作为一个独立线程运行，使用异步函数调用，并处理并发。Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。Node.js 单线程类似进入一个while(true)的事件循
2017-01-11 20:03:40
1085
原创 web前端之了解node三：REPL(交互式解释器)、回调函数
web前端之了解node三：REPL(交互式解释器)、回调函数REPL(交互式解释器)Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，我们可以在终端中输入命令，并接收系统的响应。Node 自带了交互式解释器，可以执行以下任务：读取 - 读取用户输入，解析输入了Javascript 数据结构并存储在内存中。执行 - 执行输入的数据结构打印 - 输
2017-01-11 10:45:26
941
原创 web前端之了解node二：淘宝镜像npm的安装
web前端之了解node二：淘宝镜像npm的安装NPM 使用介绍NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。验证npm： 淘宝 NPM 镜像虽然no
2017-01-10 19:13:05
783
原创 web前端之了解node一：node的介绍及安装配置
web前端之了解node一：node的介绍及安装配置node的介绍简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。Node.js 安装配置
2017-01-10 17:12:45
437
原创 web前端之精通dojo七：DOM工具
web前端之精通dojo七：DOM工具文档:DOM中的”D”: 如果没有document(文档),DOM无从谈起。 对象:DOM中的”O”: 用户定义对象(user-defined object):有程序员自行创建的对象 内建对象(native object):内建在JavaScript语言里的对象,如Array、Math、Date等 宿主对象(host object):由浏览器提供的对象,如windo
2017-01-10 14:35:21
886
原创 web前端之精通dojo六：异步编程
web前端之精通dojo六：异步编程利用Dojo关联用户自定义事件function f(){ console.log("hello word");};function myHandler(){ console.log("Hello from f's handler!");};var handler=dojo.connect("f",myHandler);f
2017-01-09 15:20:16
759
原创 web前端之精通dojo五：利用Dojo进行DOM事件编程
web前端之精通dojo五：利用Dojo进行DOM事件编程如果针对浏览器编程，让它动态地做任何事，就必须将代码与DOM事件关联起来。这时你会发现有两种不同的事件API可用。不干预下风的IE提供了第三种API————同时还附送了内存泄漏问题。通过深入学习这些API，可以了解浏览器间的不兼容性以及各浏览器的特性。事件编程很快就成为了让人头疼的问题。好在，Dojo为我们提供了一个完备的事件编程框架来解决这
2017-01-02 13:28:32
943
原创 web前端之精通dojo四：JavaScript中的语言扩展
web前端之精通dojo四：JavaScript中的语言扩展Dojo提供了一些函数库，不严格地讲，这些函数扩展了JavaScript核心库。这些函数不正对某个特定的问题领域，它们是JavaScript编程的基础。它们也处在Dojo依赖层次结构的最底层利用dojo.hitch实现绑定：把一个对象的方法作为参数传递给另一个函数，dojo.hitch解决了这个把方法与特定上下文绑定的问题
2016-12-30 10:57:11
504
原创 web前端之精通dojo三：载入Dojo
web前端之精通dojo三：载入Dojo参考资料模块化JavaScript：Dojo是通过静态的客户端JavaScript脚本、html支持模板以及css样式表实现的。在服务器端，除了传输一些静态文件的要求以外，不需要任何支持。它也不需要浏览器端的插件或扩展。如果一个JavaScript文件定义了一个Dojo模块对象（即实例化了那个JavaScript对象变量），我们就称这个文件为模块主脚本。当载入
2016-12-28 19:46:58
912
原创 web前端之精通dojo二：连接外部服务
web前端之精通dojo二：连接外部服务前面我们看到了dijit改善用户到浏览器的体验。现在我们将研究的重点放到浏览器这个过程中。Ajax，即异步JavaScript和XML，就是一种浏览器与服务器交互技术，它避免了表单提交和静态界面重绘带来的繁琐、重复的工作，而且它还改善了界面，增强用户体验。Dojo远程脚本：XMLHttpRequest(XHR)是ajax中主要的知识点，下面是其诸多奇怪特点中的
2016-12-28 17:02:10
933
原创 web前端之精通dojo一：创建选项框表单
web前端之精通dojo一：创建web表单Dijit是建立在Dojo上的小部件系统，可以为你担当重任。小部件，又称Dijit组件，适用于HTML和JavaScript语言建立起的用户界面控件。你可以向HTML标签里添加一个简单的dojoType=属性来创建小部件。安装配置详情<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w
2016-12-28 10:10:08
866
原创 web前端之MVC的JavaScript Web富应用开发三：模型和数据
web前端之MVC的JavaScript Web富应用开发三：模型和数据将应用重心从后台迁往前台的一个挑战是数据管理。 传统方式是通过页面请求从数据库获取数据， 用户和页面中的结果进行直接交互。 然而在复杂的 JavaScript 应用中做数据管理是非常困难的。 前端并没有请求 / 响应模型， 也没办法访问服务器端的变量， 甚者，远程取回的数据只是临时的保存在客户端。 尽管这种（ 从后台迁往前台的
2016-12-26 19:21:49
716
原创 web前端之MVC的JavaScript Web富应用开发二：事件和监听
web前端之MVC的JavaScript Web富应用开发二：事件和监听事件是JavaScript应用程序的核心，是所有内容的驱动，它决定了在应用程序产生用户交互的起始时刻。然而在JavaScript诞生之初“ 事件” 的实现并不标准，甚至非常丑陋。在之后的浏览器大战中网景和微软分道扬镳，他们各自实现的事件模型互不兼容。尽管后来W3C对此做了标准化，但IE仍然坚持使用与W3C不兼容的事件模型，直到最
2016-12-26 15:15:05
635
原创 web前端之MVC的JavaScript Web富应用开发一：MVC和类
web前端之MVC的JavaScript Web富应用开发一：MVC和类开篇：本书以 assert() 和 assertEqual() 函数来展示变量的值或者函数调用的结果。 assert() 是一种快捷表述方式， 用来表示一个特定的变量（ revolves to true）。 这在自动化测试中是一种非常常见的模式。 assert() 可以接收两个参数 ： 一个值和一个可选的消息。 如果
2016-12-26 10:18:19
3175
原创 web前端之JavaScript高级程序设计九：JSON
web前端之JavaScript高级程序设计九：JSON关于 JSON，最重要的是要理解它是一种数据格式，不是一种编程语言。虽然具有相同的语法形式，但 JSON 并不从属于 JavaScript。而且，并不是只有 JavaScript 才使用 JSON，毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。语法：JSON 的语法可以表示以下三种类型的值。
2016-12-23 11:19:46
650
原创 web前端之JavaScript高级程序设计八：JavaScript 与 XML
web前端之JavaScript高级程序设计八：JavaScript 与 XML曾几何时， XML 一度成为存储和通过因特网传输结构化数据的标准。透过 XML 的发展，能够清晰地看到 Web 技术发展的轨迹。 DOM 规范的制定，不仅是为了方便在 Web 浏览器中使用XML，也是为了在桌面及服务器应用程序中处理 XML 数据。此前，由于浏览器无法解析 XML 数据，很多开发人员都要动手编写自己的 X
2016-12-22 20:29:46
611
原创 web前端之JavaScript高级程序设计七：表单脚本
web前端之JavaScript高级程序设计七：表单脚本表单的基础知识：在 HTML 中，表单是由form元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。 HTMLFormElement 继承了 HTMLElement，因而与其他 HTML 元素具有相同的默认属性。不过， HTMLFormElement 也有它自己下列独有的属性和方法。 ac
2016-12-22 16:54:34
889
原创 web前端之JavaScript高级程序设计六：事件
JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript 代码）与页面的外观（HTML 和 CSS 代码）之间的松散耦合。<h3>**事件流：**事件流描述的是从页面中接收事件的顺序。但有意思的是，
2016-12-22 10:55:35
2791
4
原创 web前端之JavaScript权威指南：贷款计算器
web前端之JavaScript权威指南：贷款计算器<!DOCTYPE html> <html> <head> <title>JavaScript Loan Calculator</title> <style> .output{font-weight:bold;} #payment{text-decoration:underli
2016-12-20 19:10:40
1833
原创 web前端之JavaScript高级程序设计五：客户端检测
web前端之JavaScript高级程序设计五：客户端检测BOM：BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少事实上的规范导致 BOM 既有意思又有问题，因为浏览器提供商会按照各自的想法随意去扩展它。于是，浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在，很大程度上是由于它们提供了与浏览器的互操作性。 W3C 为了把浏览器中 J
2016-12-17 11:11:50
582
原创 web前端之JavaScript高级程序设计四：函数表达式
web前端之JavaScript高级程序设计四：函数表达式函数表达式是 JavaScript 中的一个既强大又容易令人困惑的特性。定义函数的方式有两种：一种是函数声明，另一种就是函数表达式。
2016-12-16 17:24:44
593
原创 web前端之JavaScript高级程序设计三：面向对象的程序设计
web前端之JavaScript高级程序设计三：面向对象的程序设计面向对象的语言有一个标志，那就是他们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。前面提到过， ECMAScript 中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。每个对象都是基于一个引用类型创建的，也可以是开发人员定义的类型。理解对象：创建自定义对象的最简单方式就是创建一个 Object 的实例va
2016-12-13 20:17:00
769
原创 web前端之JavaScript高级程序设计二：引用类型
web前端之JavaScript高级程序设计二：引用类型引用类型的值（对象）是引用类型的一个实例。引用类型是一种数据结构，用于将数据和功能组织在一起。Object类型：var person1=new Object();person1.name="FZW";person1.age=21;var person2={ name:"FZW" ,age:21};创建Object实例的方
2016-12-13 16:08:42
587
原创 web前端之JavaScript高级程序设计一：变量、作用域
web前端之JavaScript高级程序设计一：变量、作用域和内存问题前面的一部分语法：关键字和保留字： ECMA-262 描述了一组具有特定用途的关键字，这些关键字可用于表示控制语句的开始或结束，或者用于执行特定操作。 break do instanceof typeof case else new var catch finally return void continue for s
2016-12-13 11:00:24
438
原创 web前端之悟透JavaScript四：JavaScript真经（甘露）
web前端之悟透JavaScript四：JavaScript真经（甘露）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
2016-12-12 20:01:12
675
原创 web前端之悟透JavaScript三：JavaScript真经（原型）
web前端之悟透JavaScript三：JavaScript真经（原型）prototype在软件界翻译成“原型”，代表事物的初始形态，也含有模型和样板的意义。JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身也是一个object类型的对象，因此我们也可以为这个prototype对象添加任意的属性和方法。事实上，在构造函数的prototy
2016-12-12 17:08:27
634
原创 web前端之悟透JavaScript二：JavaScript真经（对象）
web前端之悟透JavaScript二：JavaScript真经（对象）任何一个程序都会在一个原始的环境中开始运行，这个原始的环境就被称为全局环境。全局环境中包含了一些预定义元素，这些元素对于我们的程序来说是自然存在的，他们本来就存在着，我们拿来就可以使用了。 在JavaScript里的全局环境就是一个对象，这个对象是JavaScript运行环境的根。对于浏览器中的JavaScript来说，这个根
2016-12-12 15:36:33
805
原创 web前端之悟透JavaScript一：JavaScript真经
数据有惯性，如果没有代码来施加外力，它总是保持自己原来的状态。而代码就像能量，它存在的唯一目的，就是要努力改变数据原来的状态。在代码改变数据的同时，也会因为数据的抗拒而反过来影响或改变代码原有的趋势。任何一个JavaScript的标识、常量、变量和参数都只是undefined、null、boolean、number、string、object、function类型中的一种，也即typeof返回值表明的类型。除
2016-12-12 10:11:21
872
原创 web前端之CSS设计指南四：响应式布局说明
web前端之CSS设计指南四：响应式布局说明响应式设计包含三个重要的方面。 媒体查询：是一种 CSS 语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS 规则； 流式布局：是使用 em 或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放； 弹性图片：是使用相对单位确保图片再大也不会超过其容器。媒体查询： 1.@media规则@media print{ nav
2016-12-09 19:06:38
620
原创 web前端之CSS设计指南三：界面组件（菜单）
web前端之CSS设计指南三：界面组件（菜单）纵向菜单：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta
2016-12-09 17:25:07
572
原创 web前端之CSS设计指南二：页面布局（固定宽度、流动、弹性）
web前端之CSS设计指南二：页面布局（固定宽度、流动、弹性）页面布局有三种基本的实现方案：固定宽度、流动、弹性固定宽度布局的大小不会随着客户调整浏览器窗口的大小而变化，一边是900到1100像素。其中960像素是最为常见的。流动布局的大小会随着用户调整浏览器窗口大小而变化。这种布局能够很好地适应大屏幕，但也同时意味着放弃对页面某些方面的控制，比如随着页面宽度的变化，文本行的长度和页面元素之间的位置
2016-12-09 16:33:12
1136
原创 web前端之CSS设计指南一：定位元素
web前端之CSS设计指南一：定位元素为文档添加样式的三种方法： 行内样式： 行内样式是写在特定HTML标签的style属性里面的，比如：<p style="font-size:12px;font-weight:bold;...">I am fzw</p>嵌入样式： 嵌入的CSS样式是放在HTML文档的head元素中的，比如：<html xmlns="http://www.w3.org/199
2016-12-09 15:33:41
512
原创 web前端之CSS布局的重要性
web前端之CSS布局的重要性如果你只想把所有内容都塞进一栏里，那么不用设置任何布局也是OK的。然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常不适：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。display属性： 对于大多数元素他们的默认值通常是block或inline。一个block元素通常被叫做块状元素（一个块级元素会新开始一行并且尽可能撑满容器）。一个inline元素通常
2016-12-08 19:32:46
969
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人