JS框架 jQuerydojozeptojqMobi(appframework) CSS框架 bootstrapuikitAmaze UIpureRatchetFramework7 PC上的UI框架 extjsjquery UIjquery easyUIjquery miniuidwzYUI淘宝kissy淘宝SUIKendo UI蚂蚁金服出品的antd 移动UI框架 muiino... 阅读全文

前言这个问题无论是实际项目还是面试都是经常碰到的，所以非常有必要总结一下。 下面分别从几个大的方面去分析一下前端性能优化，有些优化其实效果并不一定非常明显，但还是有必要知道。 减少HTTP请求尽可能减少加载一个页面需要引用的资源个数，因为每一次HTTP请求都是客户端与服务端的一次重连，都是一笔不小的开销，可以采取的措施包括： 使用精灵图CSS Sprites，又叫雪碧图，将页面中多个小图合并... 阅读全文

前言某年某月的某一天，突然发现博客服务器上上传的图片都比较大，一些很小的截图都有几百kb，本来服务器带宽就慢，不优化一下说不过去。 问题细述特别说明：本文代码因为只是用于我自己后台写markdown上传图片，运行环境只考虑PC，所以没有考虑任何兼容性，推荐Chrome下使用。 以下面一张图片为例： 原始图片为85kb，jpg格式的，上传之后就变成png格式了，而且变成了560kb！实在是... 阅读全文

原文发表于：20160423 兼容性较好的方法先看一个例子： var event = document.createEvent("CustomEvent");event.initCustomEvent("myevent", true, true, {a:1, b:2});document.addEventListener("myevent", function(e){ console.l... 阅读全文

原文发表于：20160316 问题描述使用jQuery修改一个div的宽度时，发现$($0).width('10rem')总是修改成不正确的值，然后使用$($0).css('width', '10rem')时却能正确，简单得查阅了下jQuery文档，发现文档里面对$.fn.width的描述是： val为空时是取得第一个匹配元素当前计算的宽度值（px），val不为空时是设置宽度，可以是字符串... 阅读全文

前言我的 http://liuxianan.com 这个域名年初(2016年1月8日)就备案好了，一直太懒没把经过记录下来，今天下班的时候下大雨回不去，正好把这个补上，由于时间过去太久，有些地方不太记得了。 关于备案的一些基础知识何为备案备案就是把你网站主办人的资料、网站的资料到工信部去登记下，主要还是为了管控。备案貌似只有中国才有，国外不知道有木有，有待查证。 一定要备案么不一定，很多国外节... 阅读全文

前言本文开发环境为Windows，目标平台为Android，react-native版本为0.35.0。 环境搭建注意，本文不是按照官网的教程来的，官网说必须安装什么Chocolatey，我懒得鸟它。 安装前请准备以下环境： jdk（必须1.8或更高版本）node.js & npmpython2（注意不支持python3，我的是2.7）android sdk（并且已经配置好相关环境变量）... 阅读全文

Promise用法介绍ES6中内置了Promise，非ES6下也有很多第三方实现。Promise是JS中异步编程的一种解决方案，主要是为了解决异步回调深渊。 我喜欢偷懒，懒得介绍杂七杂八等等，直接上代码。 最基本用法先来看个例子： // 用setTimeout模拟简单的ajax，num传参来人为模拟成功或者失败，大于10表示成功function ajax(num) { return n... 阅读全文

题目已知有如下一个数组，要求实现一个去重方法： var arr = ['aa', 'bb', 'cc', '', 1, 0, '1', 1, 'bb', null, undefined, null]; 既然是面试题，肯定要考虑兼容性和效率。 几种实现第一种实现这是最容易想到的方法： function unique1(array){ var result = []; for(va... 阅读全文

前言网上关于JS实现汉字和拼音互转的文章很多，但是比较杂乱，都是互相抄来抄去，而且有的不支持多音字，有的不支持声调，有的字典文件太大，还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字典文件，无法根据实际需要满足需求。 综上，我精心整理并修改了网上几种常见的字典文件并简单封装了一下可以直接拿来用的工具库。 这篇文章差不多一个月前就写好了大部分了，但是就差拼音输入法这一块一直没... 阅读全文

区别二者的作用都是在指定this值和参数的情况下调用某个函数，它们 唯一区别 就是参数指定的形式不一样，call接收的是参数列表，apply接收的是数组。 语法： fn.call(thisArg[, arg1[, arg2[, ...]]]);fn.apply(thisArg[, argsArray]); call和apply老是分不清，如何记忆呢？可以这样记：apply比call单词长，参... 阅读全文

正则表达式语法基本符号 .：匹配除换行符\n之外的任何单个字符。^：匹配字符串的开头。$：匹配字符串的结尾。：匹配前面的子表达式零次或多次。（如a匹配零个或多个a）+：匹配前面的子表达式一次或多次。（如a+匹配一个或多个a）?：匹配前面的子表达式零次或一次。（如a?匹配零个或一个a） 字符类 [abc]：匹配方括号内的任意一个字符。（如[abc]匹配a、b或c）[^abc]：匹配任何... 阅读全文

先来看个例子假设现有一个方法test，它接受一个参数str，现在我有3个现成的参数，我需要根据它们生成3个定制的无参方法： function test(str){console.log(str);}var params = ['aaa', 'bbb', 'ccc'];var functions = [];for(var i=0; i<params.length; i++){ func... 阅读全文

原文：https://my.oschina.net/u/1454562/blog/205010觉得写得不错，就转载过来了。 如果要把HTML元素的事件与某个函数绑定起来，可以有下面三种方法，以最常见的“点击”事件为例。 方法一： 直接在对应的HTML元素标签上绑定函数 <button id='submit' onclick='onClickFn()'>Click Me!<... 阅读全文

前言曾几何时，项目中有碰到视频比例拉伸的需求，但是发现这个看似再普通不过的一个需求，找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸，但是里面的视频还是保持原始比例，怎么调都没用： 因为当我横向拉伸时： 当我纵向拉伸时： 2016-09-21 11:15:40 更新： 感谢 @RileyRen 提醒，原来还有ob... 阅读全文

作用box-shadow用来给元素添加一个或者多个阴影。 语法box-shadow: offsetX offsetY blur size color inset;其中： offsetX 表示水平偏移距离，允许负值offsetY 表示垂直偏移距离，允许负值blur 表示模糊值，不写默认0size 表示阴影大小，不写默认0color 表示阴影颜色inset 表示内容阴影，可选 以上6个属... 阅读全文

缘由最近在弄仿w3school的在线代码提交功能：http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide 发现自己在做的时候，当提交的代码包含script时浏览器总数提示如下错误： The XSS Auditor refused to execute a script in ‘http://localhost:8080/base/blog/pr... 阅读全文

过程百度统计、CNZZ等是统计详细访问记录，如果你只需要了解总访客数，建议使用这个网站提供的服务，虽然这个网站界面和体验真不是一般的丑，但是速度还是可以的。 过程非常简单，首先访问：http://amazingcounters.com/ 第一步点击中间的创建： 第二步然后从众多样式中选一个你喜欢的，继续下一步： 第三步填好一些信息，如果你没有登录这一步会让你登录，其中最重要的是Si... 阅读全文

介绍 官网：https://nodejs.org文档：https://nodejs.org/en/docs/下载：https://nodejs.org/en/download/ 主要分2种版本，LTS版和Current版，前者表示长效版、稳定版（大概是Long Time Support的意思吧），后者则表示最新版，一般看个人需要下载，我习惯下载最新版。 特别说明：由于node.js发展实... 阅读全文

前言网上绝大多是图片懒加载插件都是针对img的src的，但是很多时候图片是以背景图的形式存在的，因为这种方式可以很容易实现图片不变形但是又保证宽高度固定，所以只能自己写一个。 这里只是简单的实现，没有考虑横向滚动、div滚动等等情况，但相信已经满足大部分情况了。 代码直接上代码，标题说11行，真有点吹了，哈哈，其实是去掉了大括号之后还剩11行，一共有15行： /** * 图片懒加载插件，与绝... 阅读全文