由于之前在参加面试或者笔试的过程中经常会被问到HTML5存储的内容，包括它们之间的区别、特征和应用范围，所以看到一篇介绍不错的文章，把里面的个人觉得适合我的内容按照自己的理解总结如下。方便以后忘记了进行备查。原文链接：HTML5 5大存储方式总结

在接受不确定输入内容（如第三方站点消息，URL参数，用户创建的文本批注等）时，在使用前对数据进行验证并且在展示时进行适当的编码是必不可少的，否则，可能会有恶意用户对网站进行攻击，轻者只是传递不规范的数据，严重的可能攻击服务器，扰乱网站正常运行，如，注入SQL脚本清除服务器上所有数据等。

文章已经发布在个人博客，不断进行更新欢迎收藏订阅，或者提出批评意见。 有一些方法函数可能并不经常使用，但是遇到特定场景需要的时候却想不起来，所以需要把平时碰到的这些方法和函数进行备案，在需要的时候可以查询。 字符串反转 Todos 复选表单 动态选项，用 v-for 渲染 指令实例属性 对象字面量 MVVM 数据绑定 利...

HTML5 使用FileReader实现前端图片预览 获取到页面中所有的checkbox怎么做？(不使用第三方框架) JavaScript模版引擎小实例 Javascript 实现JS函数重载 JS跨浏览器绑定事件函数 JS单体模式 使用prototype属性定义的对象方法 闭包实现结果缓存 闭包实现封装 闭包实现类和继承 如何判断某变量是否为数组数据类型？ Javascri...

JS常用方法函数 字符串长度截取 惰性求值 闭包 基本包装类型(包装对象) 对象遍历（最佳方法） 数组遍历（内置方法） 怎么判断一个object是否是数组(array)？ 加法操作表 排序方法 前缀规范 道格拉斯的object方法（等同于object.create方法） 1. 字符串长度截取 {代码...} 2. 惰性求值 {代码...} 3. 闭包 {代码...} 4. 惰...

由于之前在参加面试或者笔试的过程中经常会被问到HTML5存储的内容，包括它们之间的区别、特征和应用范围，所以看到一篇介绍不错的文章，把里面的个人觉得适合我的内容按照自己的理解总结如下。方便以后忘记了进行备查。 原文链接：HTML5 5大存储方式总结

学习Javascript的8张思维导图 这里的图有时候会挂掉，所以贴上站点的大图，阅读体验更佳。语雀：学习Javascript的8张思维导图站点：前端开发文档 1. javascript变量 2. javascript运算符 3. javascript数组 4. javascript流程语句 5. javascript字符串函数 6. javascript函数基础 7. javascript基础DOM操作 8. javascrip...

HTML5 8个新的响应式HTML5 CSS3网站模版 50+ 个免费的响应式 HTML5 网站模版 CSS3 10 个由纯 CSS 实现的动画角色 Web 开发中 20 个很有用的 CSS 库 CSS 工具、框架、库合集(1-26) CSS 工具、框架、库合集(27-54) CSS3实现18种Loading效果 8 个为图片添加 Hover 效果的 CSS 库 8 个 Awesome CSS 过滤库 & 工具 JavaSc...

前端网站 WEB前端开发 - 专注前端开发，关注用户体验 - 专注前端开发，关注用户体验 WEB资源网 | 最新鲜的WEB程序员技术文档及相关资源 Web 技术文档 | MDN 设计达人 前端外刊评论 w3cplus_引领web前沿，打造前端精品教程 文章列表 程序师 码农网-程序员编程资料和编程经验分享平台 大前端工具集 Js Tips - A JavaScript...

H5系列10种优化页面加载速度的方法随笔分类 - HTML5HTML5中40个最重要的技术点常用meta整理网页性能管理详解HTML5 离线缓存-manifest简介JS系列编写高性能JavaScript有趣的JavaScript原生数组函数JavaScript数据访问性能优化方案JavaScript实现的9大排序算法javascript 一怪——arguments 对象JavaScript常用方法函数收集...

状态代码（也称作错误代码），指为服务器所接收每个请求（网页点击）分配的 3 位数代码。多数有效网页点击都有状态代码 200（"正常"）。"网页未找到"错误会生产 404 错误。某些常见的代码以粗体显示。

这些关于前端优化、模块化的内容，我向来是不会去记的，因为在实际项目中碰到需要性能优化，很自然就会去查找这方面的解决方案。或者说要在编写程序的过程中就要考虑到这些准则。就好像学校里的行为准则从来不去记，也不影响日常生活，主要是本来就有很好的生活习惯，很自然地契合了准则要求。也就是说，在平时的开发过...

页面布局解决方案 居中布局 水平居中 子元素相对于父元素居中且子元素宽度可变。 除了另外声明，HTML结构为以下内容： {代码...} inline-block + text-align {代码...} 优点 兼容性好（甚至可以兼容 IE6 和 IE7） table + margin {代码...} NOTE: display: table 在表现上类似 block 元素，但是宽度为内容宽度。 优点 不...

React 组件 一个 React 应用就是构建在React组件之上的。 组件有两个核心概念： props state 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。 注意：组件生成的 HTML 结构只能有一个单一的根节点。 props props 就是组件的属性，由外部通过 JSX 属性传入设置，一旦初始设置完成，就可...

Webpack 是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

MDL容器组件 参考代码 1. 单行页脚/Mini footer MDL的单行页脚/Mini footer组件以单行水平方式组织所有的信息： 单行页脚同样采用flexbox布局，将整行分割为左右两种区域，并以空格填充剩余的行空间： {代码...} left-section总是向左边对齐，而right-section总是向右边对齐。 单行页脚内可以放置多个left-section或righ...

MDL布局组件 参考代码 1. 布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器，可以自动适应不同的浏览器、 屏幕尺寸和设备。 布局/Layout组件需要按特定的HTML结构进行声明： {代码...} 需要指出的是，在一个布局声明中，header等子元素不一定全部使用，比如你可以不要侧栏菜单： {代码...} 布局组件简化...

在iso7之前，Apple采用的是拟真化设计语言，期望通过模拟现实世界的物体，给用户身临其境的感觉。自metro和ios7开始的扁平化设计语言则相反，它着意去掉冗余的装饰效果（比如透视、纹理、渐变等等能做出3D效果的元素），让“信息”本身重新作为核心被凸显出来。

我们先定义购物车(cart)集合的Schema属性，包含：uId(用户ID)、cId(商品ID)、cName(商品名称)、cPrice(商品价格)、cImgSrc(商品展示图片路径)、cQuantity(商品数量)、cStatus(商品结算状态，默认为false)，参考如下：

前面我们已经实现了注册功能，用户可以成功注册，接着我们就开始让用户登录了，此节我们就实现用户的登录功能，并且登录成功后跳转商品页面查看商品。

1、项目启动 简单启动 首先，新建一个项目工程目录，然后在目录下创建启动文件app.js。 这里会用到Express框架来实现相关功能，所以，需要先安装它。 在启动文件添加如下内容，来测试Express框架是否引用成功。 {代码...} 浏览器查看结果显示"Hello World!"，如收到响应信息则表明我们项目的第一步已经成功搞定。 2、创...

1、用户注册模块的设计与实现 注册模块功能设计介绍 功能：本模块主要用于新用户注册，用户通过表单提供用户名和密码信息，系统根据用户提供的注册信息对用户进行具体操作。 输入操作：用户名、密码、确认密码。 对应处理： 输入注册信息：在页面提供的表单处输入用户的用户名和密码信息，点击“注册”按钮提交表单数据信...

MongoDB是一个开源的NoSQL数据库，相比MySQL那样的关系型数据库，它更显得轻巧、灵活， 非常适合在数据规模很大、事务性不强的场合下使用。同时它也是一个对象数据库，没有表、行等概念，也没有固定的模式和结构，所有的数据以文档的形式存储，数据格式就是JSON。

1、功能介绍 用户可以完成注册、登录，登录后对商品进行浏览。 登录之后，用户可以对相关商品进行选购并添加到购物车。 用户可以对购物车里面的商品进行增加、减少、删除操作。 用户可对购物车商品进行结算操作。 2、技术选型 本项目涉及使用到NodeJS、Express框架、MongoDB数据库、Mongoose对象模型库，详细介绍如下： ...

现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客服端的浏览器，这种方式有一个很大的弊端，就是会占用很多的带宽。

1、原型链继承 {代码...} 2、借用构造函数（类式继承） {代码...} 3、组合继承 {代码...} 4、原型式继承 {代码...} 5、寄生组合式继承 {代码...}

深度克隆 {代码...} 数组去重-方法一 {代码...} 数组去重-方法二 {代码...} 数组去重-方法三 {代码...} 1、给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含【被删除的重复条目的新数组】 {代码...} var a = [1,4,5,2,9]; 下面求a中最大值正确的是 {代码...} 为 Array ...

请填充代码，使mySort()能使传入的参数按照从小到大的顺序显示出来。 {代码...} 冒泡排序 {代码...} 快速排序 {代码...} 插入排序 {代码...} 二分查找-递归方法 {代码...} 二分查找-非递归方法 {代码...}

闭包，获取一个局部作用域里变量的访问权限，涉及到作用域栈、执行上下文、垃圾回收机制、内存驻留以及性能问题，闭包切断作用域栈产生的垃圾回收事件，实现变量的内存驻留。主要应用场景在需要累积效应、重复循环事件、前后事件相关等。因而，为避免产生严重的性能问题，在完成事件任务后要把闭包置为null，释放内存。

1、兼容所有浏览器显示半透明效果的方法 {代码...} {代码...} 2、_height,_width的作用 使用_height解决float的div不闭合的问题，可以将_height属性去掉就可以达到效果。 {代码...} {代码...} 3、使用min-height min-width解决div，或者span的固定高度问题 有时候我们需要设定某个元素固定高度，但是在firefox或者opera...

实现三栏布局，中间自适应（margin负值法） {代码...} {代码...} 首尾高度固定、中间自适应的DIV布局（兼容IE6） {代码...} {代码...} flex-box布局 {代码...} {代码...} 粘连 Footer 置于底部-方法一 {代码...} {代码...} {代码...} 粘连 Footer 置于底部-方法二 {代码...} {代码...} {代码...}

1.居中一个浮动元素，父元素和子元素同时左浮动，然后父元素相对左移动50%，子元素相对右移动50%，或者子元素相对左移动-50% {代码...} {代码...} 2.垂直水平居中 {代码...} {代码...} 3.图片水平垂直居中tabel_cell {代码...} {代码...} 4.图片水平垂直居中span {代码...} {代码...} 5.水平垂直居中（适用于父级元素只...

load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载play() 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放pause() 暂停处于播放状态的音频、视频文件