爱凤凤-CSDN博客

原创浅析前端渲染与后端渲染

前端渲染与后端渲染本质上可以理解为：浏览器渲染与服务器渲染备注：以下纯属本人个人的一些总结与看法，如有异同，欢迎大家指教；渲染的本质：字符串的拼接，将数据渲染进固定格式的html代码中，形成最终的html显示在用户页面上。对比： 1.前端渲染（数据传回前端显示）---- 填优点：不占用服务器运算资源（解析模板）

2017-08-04 15:40:58 3081

原创 jquery中的$("#id")与document.getElementById("id")的区别

开始用的是jquery框架，操作DOM。但是并没有仔细研究和原生js之间的区别是什么？今天就对这个进行可分析。如有补充，欢迎大家指教，已完善的更好！jquery ： $("IDname or ClassName")js ： Document.getElementsByClassName('className')1. 比较alert的区别： alert(jq_box) ...

2018-11-10 12:21:52 1106

原创 css学习笔记 -position-sticky(粘性固定)

情景说明：好多情况下，遇到某些菜单或者筛选的选项需要固定在页面的固定位置，通常情况下，需要监听scroll事件，才能实现。看到网易新闻移动端首页和饿了么的首页发现一个新的属性，position:sticky,实现的。代码量精简了不少。写了个简单的实例实现，觉得阔以实现。亲测可用设备兼容：（按照下面的写法即可）position: sticky;position: -web...

2018-11-08 14:51:57 1064

原创移动端（微信环境）进行console的数据打印，模拟Chrome控制台

开发移动端或者是微信端的项目时，经常会遇到各种各样的问题，需要一个能在移动设备上模拟控制台的工具。Vconsole就能做到这一点。GIT的项目地址：https://github.com/Tencent/vConsole/blob/dev/README_CN.md（包含使用教程）项目使用：1. 直接引用CDN的js文件 1. head里面引用script地址：<script s...

2018-10-31 12:38:42 1871 1

1. Fiddler 简介Fiddler 专用抓包工具，工作在应用层，只能对HTTP协议（包含HTTPS协议）进行抓取。Fiddler 功能丰富，体积小巧，支持HTTP断点调试，且是一款免费的软件。Fiddler 是用 C# 编写的HTTP协议调试代理工具，它以代理服务器的方式监听你的电脑和互联网之间的http通讯。运行Fiddler后，就会在本地电脑打开8888端口，网络数据流通过Fiddler...

2018-05-15 21:00:05 1365

原创 vue+vuecli+webpack，中mock数据.json数据

最新的Vue2.0中，build文件夹下没有了dev-server.js文件夹，被替换成了webpack-dev-conf.js文件因此只需要在这个文件夹下进行配置就行第一步：webpack-dev-conf.js文件，该位置填写如下代码第二步：找到devServer，写入如下代码第三步：npm run dev,在浏览器中输入地址即可第四步：本地请求数据的接口，实例通过的是vue-reso...

2018-05-15 14:34:05 1344

原创 ES6环境搭建

ES6环境搭建： 1.在线转换地址：http://google.github.io/traceur-compiler/demo/repl.html# 2.配置方法： 1.初始化项目: npm init -y 2.全局安装babel-cli: cnpm install -g babel-cli ps：安装cnpm：npm...

2018-04-10 16:10:49 186

转载如何居中一个元素（正常、绝对定位、浮动元素）

题目点评这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。可以先把水平居中各种情况说清楚，然后在把垂直居中说清楚。（一）元素水平居中的方式1）行级元素水平居中对齐（父元素设置 text-align:center）

2017-11-27 14:03:58 336

转载常见的HTTP状态码(HTTP Status Code)说明

作为一个互联网开发人员对于一些服务器返回的HTTP状态的意思都必须是了如指掌的，只有将这些状态码一一弄清楚，工作中遇到的各种问题才能够处理的得心应手。好了，下面就让我们来了解一下比较常见的HTTP状态码吧！2开头（请求成功）表示成功处理了请求的状态代码。200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。 201 （已创建）请求成功并

2017-11-21 10:00:03 404

转载 node.js (感觉很好，虽转载一留后用)

关于node.jsNode.js 是服务器端的 JavaScript 运行环境，它具有无阻塞(non-blocking)和事件驱动(event-driven)等的特色，Node.js 采用V8引擎，同样，Node.js实现了类似 Apache 和 nginx 的web服务，让你可以通过它来搭建基于 JavaScript的Web App。Node.js采用C++语言编写而成，是一个跨平台的J

2017-09-29 13:36:11 966

转载 Node.js模块导出exports 和 module.exports 的区别

每一个node.js执行文件，都自动创建一个module对象，同时，module对象会创建一个叫exports的属性，初始化的值是 {} module.exports = {};1exports和module.exports指向同一块内存，但require()返回的是module.exports而不是exports。var str = "difference"exports.a

2017-09-23 15:58:12 330

转载 Node.js Express 框架学习

转载：http://javascript.ruanyifeng.com/nodejs/express.html#toc0感觉很牛的样子，不过觉得对初学者没太大用，里面很多例子用的api都没有详细的说明。为了学习备份，所以拷贝过来。Express框架来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录概述运行原理底层：ht

2017-09-23 08:50:40 437

转载前端框架Vue、angular、React的优点和缺点

学习web前端开发中，会有很多的框架，那么目前流行的框架有哪些呢？一、Vue.js：其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。 Vue.js的特性如下：　　 1.轻量级的框架　　 2.

2017-09-06 16:51:18 1066

转载 IntelliJ IDEA 2016注册方法和注册码

ntelliJ IDEA号称当前Java开发效率最高的IDE工具。IntelliJ IDEA有两个版本：社区版(Community)和旗舰版(Ultimate)。社区版时免费的、开源的，但功能较少，旗舰版提供了较多的功能，是收费的，可以试用30天。 IntelliJ IDEA官网：https://www.jetbrains.com下面来说一下IntelliJ IDEA旗舰版注册方法

2017-09-06 10:13:32 2934

转载 gulp-rev：项目部署缓存解决方案

引言：　　前端工程化部署比较重要考虑的一个问题是缓存，可以参考《变态的静态资源缓存与更新》。　　使用gulp-rev解决的就是《变态的静态资源缓存与更新》提出的问题。rev会做什么：　　根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。替换html里静态资源的路径为带有md5

2017-08-19 15:08:21 536

转载变态的静态资源缓存与更新

这是一个非常有趣的非主流前端领域，这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题，入行到现在一直在学习和实践中。在我的印象中，facebook是这个领域的鼻祖，有兴趣、有梯子的同学可以去看看facebook的页面源代码，体会一下什么叫工程化。接下来，我想从原理展开讲述，多图，较长，希望能有耐心看完。让我们返璞归真，从原始的前端开发讲起。上图是

2017-08-19 15:07:03 370

原创 gulp详细手册

gulp简介 gulp 用自动化构建工具增强你的工作流程！特点： 1.易于应用：通过代码优于配置的策略，让简单任务简单，复杂任务可管理。 2.构建快速：利用node.js流的威力，可以快速构建项目并减少频繁的IO操作。 3.插件高质 4.易

2017-08-16 16:49:32 554

原创 Browser-sync浏览器同步测试工具

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动

2017-08-16 09:02:37 563

转载 10个免费的顶级跨浏览器测试工具

1.BrowseraBrowsera 可以测试和报告在您的网站上的跨浏览器布局的差异和脚本错误。Browsera不同于其他跨浏览器测试服务。其他服务，如Litmus，Browsershots，BrowserLab，以及 SuperPreview，它们仅仅截取每一个特定的页面，你必须具体再分析才行。2.BrowserStackBrowserStack提供实时的，基于W

2017-08-09 17:32:53 516

原创 jsonp跨域请求,常见的集中书写方式,及优缺点比较

简介符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函数，这个函数允许客户端的Javascript发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后的驱动力量，他们都利用Ajax来聚合不同来源的信息。理解同源策略的限制

2017-08-09 08:32:30 960 1

转载 bootstrap的icheck插件使用

由于我们在项目开发时会经常用到单选框和复选框，并且众所周知其样式不易修改，它们的原有样式不能满足我们项目美观所需，所以这个时候icheck插件就能帮到我们不少呢，下来我就来说说icheck插件的使用：iCheck特色：1、在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括桌面和移动设备2、支持触摸设备 — iOS、Android、BlackBerry、W

2017-08-07 15:51:45 692

原创去除火狐浏览器点击连接时出现虚线边框

firefox浏览器点击链接时会自动在元素周围添加一个虚线边框，它是通过添加outline属性来实现的去除的方法：a{ outline:none; } 或者缩小范围 a:focus{ outline:none; }

2017-08-04 13:22:55 1533

转载彻底理解js中this的指向

彻底理解js中this的指向，不必硬背。　　首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），...

2017-08-01 13:26:33 294

转载真正的中国天气api接口xml，json

我只想说现在网上那几个api完全坑爹有木有？？？官方的申请不来有木有，还有收费有木有？？咱这种菜鸟只能用免费的了！！！！http://m.weather.com.cn/data/101110101.html大坑有木有？？反应慢不说了，还老不更新！！想贴段代码的，现在又打不开了（貌似3月4号以后没更新过）====================

2017-08-01 11:12:30 705

原创 ECMAScript 6 常用特性整理

ECMAScript 6 常用特性整理说明看了阮一峰老师的 ECMAScript 6 入门,决定将之前一直使用到的 ES6 重新整理一遍。1. let 和 const用法类似 var 用来声明变量，但是声明的变量只在命令所在的代码块中有效不存在变量提升暂时性死区, 在变量用 let 声明前的代码中只要使用到变量，就会报错

2017-07-28 10:15:02 605

转载 ECMAScript 6 十大特性

转自：http://www.oschina.net/news/71566/es6-developers-will-have-to-know 感谢分享！！！ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。本文主要针对ES6做一个简要介绍。主要译自：《Top 10 ES6

2017-07-28 08:26:13 635

转载 jquery select change下拉框选项变化判断选中值

[html] view plain copyth class="formTitle"> 是否转出： th> td class="formValue" colspan="3"> select id="IsTurnOut" class="txtselect required" datacol="yes" err="是否转出" ch

2017-07-27 14:18:00 6067

转载浅谈前端与SEO

转载地址：http://uxc.360.cn/archives/984.htmlSEO（Search Engine Optimization），就是传说中的搜索引擎优化，是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为。我认为这是一门说来简单，但操作起来复杂的技术，只可意会，不可言传。作为一名前端工程师，不需要精通SEO，但必须要

2017-07-19 15:51:45 430

原创 HTTP和HTTPS区别

1.http和https连接方式不同，端口也不一样，前者是80.后者是443. 2.http连接简单，无状态；https协议是SSL+HTTP协议构建的可以进行加密的传输，身份认证的网络协议，比http安全 3.http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。 4.https协议需要得到ca申请证书。一般免费的很少，需要交费。

2017-07-19 15:38:23 291

原创新浪web前端面试经验

通过新浪的官网了解了他们的招聘信息，先把网上的电子简历给公司进行了发送，而且他们也询问了一下实习的时间（大部分公司的实习时间都是3个月以上），当基本情况了解以后，他们就让我等通知。大概一周以后他们让我去北京新浪总部大厦进行面试，预约的时间是下午四点，去了之后进行一对一面试，因为我面试的是实习生，所以可能没有进行笔试，他们公司还是挺好的，像简历这些基本上不用自己带，他们公司都已经打印好

2017-07-19 15:27:10 2986

原创 JavaScript算法阶乘1

方法1：函数递归方法2：for循环方法3：while循环

2017-06-11 15:50:55 457

原创 JavaScript-函数篇-003(JavaScript中的匿名函数)

在开源的JavaScript框架中能看到很多这样语法结构 (function(){ ...... } )()比如我最近看的jQuery，及chediter。刚开始的时候我看到这样的结果有点奇怪，它是怎么执行的，并且这是什么样的语法结构，最近偶尔看闭包的时候，才发现原来这是JavaScript中的匿名函数（看到这个有点汗

2017-06-07 20:14:53 412

原创 JavaScript-函数篇-002(Javascript构造函数)

github地址：https://github.com/liYinFeng2/javaScript/edit/master/JavaScript%E5%88%86%E7%B1%BB/%E5%87%BD%E6%95%B0%E7%AF%87/001_Javascript%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0.txt构造函数注意事项：(1).默认函数首字

2017-06-07 20:13:48 350

原创 JavaScript-函数篇-001(Javascript变参函数)

我们平时在做前端开发涉及到一些Javascript时，可能会遇到参数不固定的Javascript函数，如：exp(a)、 exp(a,b)，需要说明的是函数名相同，但传入的参数不同，那么我们可能会这样想：定义两个函数，一个只含一个函数，而另一个有两个函数，gitHub地址：https://github.com/liYinFeng2/javaScript/blob/master/

2017-06-07 20:11:42 1083

转载图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 3 张图和 1 张表格，轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。一、测试代码如下：[html] view plain copy> html lang="zh-cn"> head> meta charset="u

2017-06-07 20:07:46 628

转载详解CSS的z-index属性（带图片解析）

有时候我们会使用CSS中的z-index属性来使某些块状元素更有层次感。如下图：可以通过z-index实现鼠标居于文字后面，使得网页更有层次感实现上面效果的代码如下：[html] view plain copyspan style="font-size:24px;">html> head> style

2017-05-19 20:24:18 1114

转载学JS必看-JavaScript数据结构深度剖析

JavaScript以其强大灵活的特点，被广泛运用于各种类型的网站上。一直以来都没怎么好好学JS，只是略懂皮毛，看这篇文章时有读《PHP圣经》的感觉，作者深入浅出、生动形象地用各种实例给我们分析了JavaScript的数据结构，让人有一种豁然开朗的感觉。全文如下：编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生

2017-05-17 18:11:05 339

转载 JavaScript中的函数的两种定义方式和函数变量赋值

Insert title here /*I总结： 1.函数名可以做变量使用，可以赋值，可以传值 2.函数名当参数，传递给另一个函数 */ //==================js中函数的两种定义方式和函数变量赋值================ //在javascript中定义一个函数就可以理解成定义了一个变量 //js中的变量时弱类型的哦。 //----

2017-05-17 17:59:06 527

原创 JavaScript思维导图

JavaScript（1）---- 变量篇

2017-05-15 19:15:11 351

转载 CSS布局：水平居中

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。common.css View Code 目标元素宽度固定时　　　　　　　　　　　　　　　　　　　　　　　　　　　　1. displa

2017-05-10 09:08:10 406