hayleyxia-CSDN博客

原创从0开始使用webpack4构建静态网站（二） - 开始使用

webpack用来编译javascript模块，安装成功以后就可以通过cli或者api与webpack交互。基本设置：首先创建一个目录，初始化npm，然后本地安装webpack，webpack-cli（可以在命令行执行webpack的工具）mkdir webpack-demo && cd webpack-demonpm init -ynpm install webpack we...

2018-05-29 21:38:09 1521

原创从0开始使用webpack4构建静态网站（一） - webpack4及安装

webpack4更新了太多东西，具体可以查询 webpack4更新日志，下面介绍一些主要特性：1. webpack4更快，速度提升98%！ps：还没有实现多进程和缓存功能，所以理论上性能还有更大的提升空间2. Mode，零配置及默认值我们为 webpack 新增了一个 mode 配置项。Mode 有两个值：development 或者是 production，默认值是 production。Mod...

2018-05-29 20:37:35 1820

原创腾讯云 - 云服务器搭建node环境

腾讯云云服务器CVM7天免费体验，首先登陆，认证，然后创建一个云主机申请云主机操作系统是centos。1. iTerm登陆主机ssh root@ip2. 安装nodeNode的安装需要依赖很多，如gcc等，首先我们需要将这些安装成功，用rpm命令查看下，果然我们并没有gcc等，所以要用yum进行安装：yum -y install gcc gcc-c++ kernel-devel将依赖安装后，我们就...

2018-03-26 17:08:57 2019

原创简单的node文件上传下载及中文乱码问题解决

1. 基于MEAN的技术栈，使用restful风格的接口2. 在前端代码中放置文件上传按钮和处理表单数据<div class="upload-file btn btn-sm btn-primary mb-2"> <span><i class="fa fa-upload"></i> Upload</span> &lt

2018-03-15 16:26:23 5805

原创富文本编辑器UMeditor在backbone中的使用

UMeditor,简称UM,是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式，以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧，贴吧每天几亿的pv是对UM各种指标的最好测试平台。当然随着代码的减少，UM的功能对于UE来说

2015-08-27 19:45:33 1323

翻译 gulp常用插件之gulp-rev-collector(给资源文件加时间戳)

https://www.npmjs.com/package/gulp-rev-collector 这个插件就是从manifests中获取静态资源版本数据, 该数据由不同的流产生, 并且替换html中的链接.安装: $ npm install --save gulp-rev-collector使用: 我们可以使用gulp-rev来产生一些无法使用cache的静态资源, 并且为它们生成manife

2015-07-20 16:10:21 20525 2

翻译 jQuery中常用事件

1 $.proxy 接收一个函数参数,并返回一个有特定上下文的新函数 jQuery.proxy( function, context ) jQuery.proxy( function, context [, additionalArguments ] ) 参数类型说明 function function 上下文将要被改变的一个函数 context plainO

2015-07-08 17:53:12 614

翻译 jQuery Event对象

jQuery的事件系统是根据W3C标准的事件对象规范化而来的, 事件对象传递给事件处理器, 大多数原始事件的属性被拷贝并规范化到新的事件对象中. 1. jQuery.Event.Constructor jQuery.Event的Constructor在调用trigger的时候使用, 新的操作符是可选的. Example://Create a new jQuery.Event object wi

2015-07-08 10:40:19 1826 1

转载撰写合格的REST API

原文链接:http://mp.weixin.qq.com/s?__biz=MzA3NDM0ODQwMw==&mid=208060670&idx=1&sn=ce67b8896985e8448137052b338093e0两周前因为公司一次裁人，好几个人的活都被按在了我头上，这其中的一大部分是一系列REST API，撰写者号称基本完成，我测试了一下，发现尽管从功能的角度来说，这些API实现

2015-07-04 14:55:29 375

原创 js中会用到的键盘码

Question: Are the keyCode values of keydown/keyup events standardized across browsers?Answer: No, unfortunately, not all key codes are standardized. For example, the minus key has different key code

2015-07-03 20:21:50 428

转载 span与a元素的键盘聚焦性以及键盘点击性研究

众所周知和不为所知的我们平时涉及到点击交互事件的时候, 都是使用a元素或者button元素(注意a元素要有href链接), 原因是可以相应键盘focus效果以及回车和空格触发点击事件. 但是有些特殊情况比如span元素, 我们可以通过一定的设置让其支持键盘的可访问性.span元素的处理和测试要让一个普通的span元素达到一个含button元素的键盘可访问性，我们需要如下处理：-首先绑定

2015-07-03 19:59:41 489

原创解决等高列的方法

https://css-tricks.com/fluid-width-equal-height-columns/常用方法 1. css3属性 -webkit-linear-gradient 2. 伪类before after 3. table 4. display:table; table-cell 5. one true layout method<div id="one-true" c

2015-06-26 16:55:19 839

原创 window.close()提示 "Scripts may close only the windows that were opened by it"

由于在脚本中使用了 window.close(), 当前非弹出窗口在最新版本的chrome和firefox里总是不能关闭，而在 IE中是可以关闭的。在console中弹出提示”Scripts may close only the windows that were opened by it”

2015-06-26 15:26:21 6735

转载 CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

http://blog.csdn.net/freshlover/article/details/17143341 首先，Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见。关于浏览器对opacity属性的兼容性请继续往下看.

2015-06-26 14:52:58 2507

转载 bootstrap源码阅读之事件命名空间

事件的名称取决于事件命名空间,该事件可以简单的移除和触发.比如,"click.myPlugin.simple" 为特定的点击时间定义了myPlugin和和simple的命名空间, 点击处理器就可以移除点击绑定通过.off("click.myPlugin") or .off("click.simple")而不必影响其他事件.命名空间跟css和classes类似,就是他们是没有等级的,只匹

2015-05-14 15:27:20 1230

转载 bootstrap源码阅读之Contructor

下面一起来给各位同学介绍一下关于js 中bootstrap中 $.fn.Aa.Constructor = Aa，希望例子能帮助到各位同学哦。在bootstrap js源码中，在插件最后经常看到代码如下复制代码$.fn.Aa.Constructor = Aa这样一句。这里注意，Constructor 是大写的C，而不是

2015-05-14 15:24:02 348

翻译 reactJS之react-route

1. 使用react-router用嵌套的来定义视图的层级,当Route激活时提供React的元素来处理这些RouteReact Router会根据URL来匹配最深层级的Route, 然后激活嵌套在UI里面的该Route的整个分支你只需简单使用组件来渲染激活的子Routervar App = React.createClass({ render: function () {

2015-05-05 15:13:30 2299

转载 css最佳实践

1. 样式分离实际上，CSS有几十种不同的属性，撇开一些不定参数（例如宽度，高度，颜色值）的样式，CSS的基础构成也是非常有限的，例如下面截取的的一小段CSS库样式（命名仅供参考）：总结这一节的核心观点，其实不难理解，就是“构成的基本元素越是独立，越是最简，其组合的可能性，元素的利用率越是高！”，CSS样式越是分离，其样式的利用率和覆盖率就越高，CSS代码就越精简！万物守恒，C

2015-04-23 16:00:36 889

转载 css架构

http://blog.jobbole.com/31147/1. 良好的css架构可预测可重用可扩展可维护2. 一些不好的写法某一元素大部分是一样的,只有一个页面不同,应该为此页面找出不同点,然后写一个新规则去处理基于父组件来修改组件123456789

2015-04-20 20:40:53 446

转载编写高效的 CSS 选择器

1. css选择器CSS选择器具有高效的继承性，引用Steve Souders的话， CSS选择器效率从高到低的排序如下：ID选择器比如#header类选择器比如.promo元素选择器比如 div兄弟选择器比如 h2 + p子选择器比如 li > ul后代选择器比如 ul a 7. 通用选择器比如 *属性选择器比如 type = “text”伪类/伪元素选择器

2015-04-20 17:06:36 362

转载大小不固定的图片,多行文字水平垂直居中

http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7

2015-04-20 15:33:05 650

转载 css之line height的理解与应用

line-height是两条基线之间的距离,由lineheight撑开的,而不是文字,还有就是有一个居中的作用; height div的高度是由一个个line boxes的高度堆积而成的.1. 单行文字的垂直一般设置line-height就好了2. 多行文字的垂直这个比较复杂,应用场景,高度固定,里面单行或者多行,且大小不一,方法之一是借助line-height

2015-04-20 15:13:27 431

转载 margin的重叠与防治

1、水平边距永远不会重合。2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：a、全部都为正值，取最大者；b、不全是正值，则都取绝对值，然后用正值减去最大值；c、没有正值，则都取绝对值，然后用0减去最大值。注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。3、相邻的盒模型中，如果其中的一个是浮动的（float

2015-04-20 11:50:31 1496

转载 css之vertical-align的理解与认识

一. 简介1. vertical-align 数值,比如 -2, 相比于基线向下便宜2px,一般用来修复单选框/复选框和12像素文字大小不对齐的问题.2. 百分比此标签继承的line-height,但ie6和ie7会出现问题3. top middle baseline bottom 可以比对英语的4条线来理解4. 只有一个元素属于inline或者inline-block,时才会起

2015-04-20 10:08:37 862

转载 css之float的深入理解

1. 浮动分栏和列表排列都可以用其他css属性替换,但文字环绕图片是没有办法的,而这里就是浮动应该出现的地方.浮动的意义就是让文字环绕图片而已.2. 浮动的本质包裹与破坏浮动的包裹性(包裹是让标签占据的空间水平收缩)包裹可以用inline-block来实现,一种按钮的实现方式,外层居左,里层居右,背景图片可以很长,这样只显示一部分.如下.btn1{display:inl

2015-04-18 18:35:09 471

转载 css中的糟粕

1. 标准盒模型box-sizing2. font缩写要少用,因为一旦定义,如果没写全,就会有继承的问题正确的顺序是：font:是否斜体字体粗细字体大小/行高字体样式例子：font: italic bold 12px/18px Arial, Helvetica, sans-serif ;当然最常用的是下面的写法：font: bold 12p

2015-04-18 16:42:17 320

转载前端性能优化

1. 最最基本的CSS顶部, JS底部YUI compressor/GzipCDN 有必要的CSS SpriteAjax可缓存2. css渲染,重绘及回流尽量避免.a.b {} .list a等一些复杂选择器,提高整站整体css渲染避免某些expression表达式,避免ie6的alphaimageloader的png透明滤镜适当定高,避免动态刷新时页面的移

2015-04-17 16:20:33 324

转载 css 架构汇总

1. 网页布局http://www.zhangxinxu.com/wordpress/2010/01/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E6%80%9D%E6%83%B3%E6%B5%85%E8%AE%AE-%E6%B7%98%E5%AE%9D%E6%96%B0%E7%89%88%E9%A6%96%E9%A1%B5%E4%B8%BA%E5%AE%9E%E

2015-04-13 14:46:32 13374

原创 IE7兼容性问

1. 背景颜色background: rgba(255,255,255,1);+background: #ffffff!important;这样的hack没有起作用，为啥呢。。。

2015-04-10 11:41:10 311

转载向中级程序员转变的10个建议

向中级程序员转变的10个建议http://blog.jobbole.com/8732/1. 学习另一门语言我建议用这门语言的风格去做一个适合该语言的项目。真正学会了另一门语言之后，我敢保证你的程序员水平一定会突飞猛进。2. 学习先进的搜索技术、手段和及策略3. 帮助别人4. 有耐心，常练习5. 对教条拒之门外6. 深入学习一点先进理念

2013-06-07 16:50:04 365

转载阅读优秀代码是提高开发人员修为的一种捷径

阅读优秀代码是提高开发人员修为的一种捷径http://blog.jobbole.com/471/编写代码和写作没什么不同，如果你都没有阅读过任何卓越的代码，你为什么期望自己能写出像样的代码呢？你显然不应该那样。对于程序员来说，阅读卓越代码就如同作家阅读优秀书籍一样重要你不能只靠长时间盯着代码来阅读代码，你要理解它并化为己用。这里有一些我喜欢用的技巧，虽然这不是一份详尽的列表，但

2013-06-07 16:18:24 435

基于DOM 的Web 信息提取

当前,W eb 已经成为人们获取信息的主要渠道之一. 然而, 用于表达W eb 页面信息的HTML 语言存在着与生俱来的缺点. HTML 的“标记”只是告诉浏览器软件如何显示所定义的信息, 却不包含任何语义. 因此由HTML 语言所表述的W eb 页面经过浏览器分析后只适合人们浏览, 不适合作为一种数据交换的方式由机器处理. 该文以文档对象模型DOM 为基础, 把所要提取的信息在DOM 层次结构中的路径作为信息抽取的“坐标”, 并以这个基本原理为基础设计了一种归纳学习算法来半自动地生成提取规则, 然后根据提取规则生成Java 类. 生成的Ja2va 类可以作为W eb 数据源包装器组成的重要构件.

2010-03-01

模板化网页主题信息的提取方法

为了消除网页噪音, 有效地提取基于模板的网页主题信息, 提出了一种新的信息提取方法。该方法采用机器自动学习方式生成网页集的模板; 以网页链接关系中的锚点文本作为提取目标对模板进行标记, 生成对应模板的提取规则; 依据模板的提取规则对网页主题信息进行提取。对国内2 588 个新闻网页进行了检测。实验结果表明, 该方法可以快速、有效地提取模板生成的网页集主题信息, 准确率达99. 5%。将该方法应用于搜索引擎系统(木棉检索) 中, 与原来的检索系统相比较, 索引文件的大小减少约50% , 检索的速度和精确度也得到提高。