WEB前端 on 庞玉栋个人博客

正则测试器-RegExTester_JavaScript

Thu, 29 Nov 2018 10:40:19 +0800

JavaScript容错的优雅地降级功能

Mon, 25 Jun 2018 19:32:47 +0800

探测到错误时禁用组件是一回事。处理出错的组件并将其从UI中优雅地移除是另一回事。即使我们努力保持组件之间松耦合，但涉及到DOM时，这项工作会变得很有难度。例如，我们是否真的可以在不影响周边元素的情况下移除出错组件的DOM元素呢，或者这样做是否会更好——将元素保留在原处，只是将它们隐藏并禁用所有的JavaScript处理函数？

我们采取的实现方式取决于我们在构建什么，即应用的本质。有的应用采用合理的方式组合组件和布局页面，使得添加和移除功能甚为方便。不要以为视觉设计只是一块可以从系统中随意拆除的皮肤，不会带来任何后果。理论上说，它应该独立于系统的其他部分，但实际上，这种思想是不可行的。页面元素的布局对扩展是有影响的，例如，当组件出错时，我们是否能够在不影响系统其他部分的情况下，将他们禁用或修复。

我们可将处理出错组件的过程比喻成关机，因为这通常涉及一系列的操作——以便优雅降级。功能很少整体失效，通常是某个组件失效，导致功能不正常。例如，路由器出错并导致某个功能失效。此时，除了关闭失效的路由处理器，我们还需要关闭该功能涉及的一系列其他组件，将它们从UI中移除，并提示错误信息。我们应为任何功能考虑和测试这种关机流程。我们要保护的不是功能本身，而是移除功能后系统的剩余部分。

深圳职业学院图书馆

Wed, 06 Dec 2017 18:12:54 +0800

演示：点击

下载：点击

格力地产网站

Thu, 30 Nov 2017 14:42:35 +0800

演示：点击

下载：点击

传智博客学院

Thu, 23 Nov 2017 15:19:54 +0800

演示

下载

Web前端知识体系精简

Sun, 05 Nov 2017 19:28:29 +0800

Web前端技术由html、CSS和JavaScript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。

JAVASCRIPT 篇

0、基础语法

Javascript基础语法包括：变量定义、数据类型、循环、选择、内置对象等。

数据类型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基础类型,null和undefined是JS中的两个特殊类型,object是引用类型。

Javascript可以通过typeof来判断基础数据类型，但不能够准确判断引用类型, 因此需要用到另外一个方法，那就是Object的toString,

JS常用的内置对象有Date、Array、JSON,RegExp等。一般来讲，Date和Array用的最频繁，JSON可以对对象和数组进行序列化和反序列化，还有一个作用就是实现对象的深拷贝。

RegExp即正则表达式，是处理字符串的利器。

1、函数原型链

Javascript虽然没有继承概念，但Javascript在函数Function对象中建立了原型对象prototype，并以Function对象为主线，从上至下，在内部构建了一条原型链。

简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到Object对象为止，如果都没有找到该属性才会返回undefined。

因此我们经常会利用函数的原型机制来实现JS继承。

2、函数作用域

函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。

3、函数指针 this

this 存在于函数中，它指向的是该函数在运行时被调用的那个对象。在实际项目中，遇到this的坑比较多，因此需要对this作深入的理解。

Function对象还提供了call、apply和bind等方法来改变函数的this指向，其中call和apply主动执行函数，bind一般在事件回调中使用，而call和apply的区别只是参数的传

递方式不同。

4、构造函数 new

JS中的函数即可以是构造函数又可以当作普通函数来调用，当使用new来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。

普通函数的创建有：显式声明、匿名定义、new Function() 等三种方式。

当通过new来创建一个新对象时，JS底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。

5、闭包

图片特效代码

Mon, 31 Jul 2017 15:41:23 +0800

点击浏览：点这里

点击下载：点这里

表白页面制作

Sat, 29 Jul 2017 19:12:02 +0800

演示地址：点这里

下载地址：点这里

文字搬运工代码

Sat, 29 Jul 2017 19:01:42 +0800

演示地址：点这里

下载地址：点这里

前端

HTML5 网页内容

CSS3 样式美化

JS/Jquery 特效、验证等

前端开发工具

webstorm10

sublime

记事本

思路：

（1）判断左侧是否输入内容，如果没有输入内容，则提示

（2）超链接点击后，显示内容的总个数<span id="all">

（3）超链接点击后，移动左侧内容到右侧，改变当前数字<span id="current">

（3-1）如何移动内容

自动循环做下面两个事：setInterval(事情，80)

获取左侧内容，移动左侧内容的第一个内容

更新左侧内容

（4）完善细节

（4-1）超链接链接后，橘黄色变浅，文字移动完毕后，超链接恢复橘黄色

（4-2）进度条显示，并动态效果

新闻导航设计

Sat, 29 Jul 2017 18:50:26 +0800

演示地址：点这里

下载素材：点这里