- 博客(156)
- 资源 (7)
- 收藏
- 关注
RSS订阅
原创 （译）网站加速最佳实践——雅虎35条
翻译了一下雅虎35条，这是原文地址。（雅虎的）卓越的性能团队已经确定了一些提升网页速度的最佳实践。该清单包括35条，分为7大类。最小化http请求终端用户响应时间的80%用在前端。这个时间中的大部分都是在下载页面中的所有组件：图片、样式表、脚本、Flash等。减少组件的数量顺带减少了渲染页面所需的http请求的数量。这是页面加速的关键。减少页面中组件数量的一种方法是简化页面的设计。但是，有没有一种方
2017-11-12 22:09:22
812
原创 break的一些知识点
提起break大家肯定都知道，写循环经常会用到break。这里总结一下关于break的一些知识点。1、遍历大量数据记得用break跳出循环什么意思呢？简单一点，当我有一千个不同的乱序的数据数组，我需要遍历一遍，但这个数据可能是第一个元素，也可能是最后一个元素。 对比一下下面两段代码： code 1：var result;for(var i = 0; i 1000; i++)
2018-01-24 01:52:27
692
原创 函数节流与防抖
今天在做项目的时候，遇到了这样一个问题：我现在做的东西和地图相关，地图上有各种标记，鼠标移动到每个标记会有一个浮动框显示此标记的经度、纬度等等各种信息，移出这个标记则浮动框会消失。由于标记太多，移动到特定标记的过程中就会碰到其它标记，导致很多浮动框出现一下然后消失，很影响用户体验。怎么解决呢？防抖！我想你应该能听懂我上面说的意思吧，可以查看百度百科页面中个人中心那一行，快速的在首页、分类等之间滑动，
2017-12-21 00:31:14
408
原创 单体模式
定义单体是一个用来划分命名空间并将一批相关方法和属性组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。 注：单体是一个只能被实例化一次并且可以通过一个众所周知的访问点访问的类。——传统的定义拥有私有成员的单体1、下划线表示在单体对象中使用下划线表示法是一种告诫其他程序员不要直接访问特定成员的简明办法：GiantCorp.DataParser = { //私有方法 _st
2017-12-10 16:25:10
520
原创 vue-todoList-demo with localstorage
徘徊了好久，看了react和vue，听取了面试官的意见，我要开始学vue了：）下面这个是刚学习的一个vue的todolist，和vue官网的那个不一样，这个有localstorage，刷新后还可以用哦！这里下载源码。 视频地址
2017-11-11 22:20:25
280
原创 计算属性
对于复杂逻辑，应当使用计算属性：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="example"> <p>Original message:"{{ msg }}"</p> <p>Computed
2017-11-09 09:17:10
252
原创 缩写
v-bind缩写：<!-- 完整语法 --><a v-bind:href="url">click</a><!-- 缩写 --><a :href="url">click</a>v-on缩写：<!-- 完整语法 --><a v-on:click="doSomething">click</a><!-- 缩写 --><a @click="doSomething">click</a>
2017-11-08 16:23:24
273
原创 v-bind:href
<a v-bind:href="url">...</a> 将该元素的href属性与表达式url的值绑定。<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <a v-bind:href="url">c
2017-11-08 16:07:31
5666
1
原创 v-text和v-html
v-text和{{}}一样v-text不解释标签，v-html解释标签解释html标签可能导致xss攻击，不要使用用户提供的内容插值<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>{{m
2017-11-08 15:33:27
12090
原创 v-once
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>可以改变：{
2017-11-08 15:08:17
2608
原创 组件
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，在 Vue 中注册组件很简单：<html><head> <title></title> <script src="./vue.js"></script></head><body> <div
2017-11-08 14:12:32
240
原创 v-model
该指令能够实现表单输入和应用状态之间的双向绑定：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>{{msg}}</p> <input v-model="msg"> </di
2017-11-08 10:38:29
385
原创 v-on
为了与用户交互，可以用v-on指令绑定一个事件监听器，通过该监听器调用Vue实例中定义的方法：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <p>{{msg}}</p> <butt
2017-11-08 10:33:00
356
原创 v-for
v-for指令可以绑定数组的数据来渲染一个项目列表：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <li v-for="todo in todos"> {{todo.tex
2017-11-08 10:17:59
355
原创 v-if
控制切换一个元素的显示与否：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <span v-if="seen"> 我出现了！ </span> </di
2017-11-08 10:09:41
610
原创 v-bind
<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> <span v-bind:title="msg"> 鼠标悬停几秒查看此处动态绑定的提示信息！ </span>
2017-11-08 09:53:19
377
原创 hello vue!
新建一个hello.html文件，输入以下内容：<html><head> <title></title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"> {{ message }} </div> <script type="text/javas
2017-11-07 21:35:00
247
原创 戏说flex-grow、flex-shrink、flex-basis
flex-basis 设置子元素宽度。如果元素也设置了宽度width，则flex-basis会覆盖width。<!doctype html><html><head> <style type="text/css"> #main { display: flex; border: 1px solid black;
2017-11-05 02:19:28
1144
原创 JavaScript原型——对象关联
检查“类”关系在Java这些面向类的语言中，检查一个实例的继承祖先叫做反射。在JavaScript里面，怎么检查对象的委托关联呢？function Foo() { //...}var a =new Foo();如何通过反射找出a的祖先（委托关联）呢？a instanceof Foo; //true instanceof回答的问题是：在a的整条[[Prototype]]链中是否有指向
2017-10-29 22:10:49
285
原创 JavaScript原型——继承
像Java这样面向类的语言，继承就是子类与母类的关系，动物类下面有猫类、狗类等等，每个类都有自己的特性。但是，JavaScript没有类（至少在ES6之前），采用原型继承：
2017-10-28 21:51:30
199
原创 JavaScript原型——构造函数
没有构造函数，只有对函数的构造调用。构造函数是在类中的知识，很多人以为JavaScript中也有构造函数是因为这样的代码：function Foo() { //...}var a = new Foo();认为Foo是一个类的原因是看到了关键字new，在面向类中的语言中（比如Java）实例化对象的时候也会用到。Foo()的调用方式类似初始化类的时候类的构造函数的调用方式。其实，Foo
2017-10-26 22:25:02
229
原创 JavaScript原型——属性设置和屏蔽
给一个对象设置属性，这是对象的知识点，但是由于涉及到了原型链，就放在原型里了。预备知识Getter和Settergetter和setter都是隐藏函数，getter会在获取属性值时调用，setter会在设置属性值时调用。当你给一个属性定义getter、setter或者两者都有，那这个属性就被定义为"访问描述符"。对于访问描述符，JavaScript会忽略它们的value和writable特性，
2017-10-24 10:08:00
869
原创 JavaScript对象——遍历
JavaScript中的数据结构有四种：数组（也是对象）对象Map（ES6新增）Set（ES6新增）数组和对象大家应该很熟悉了，下面介绍一下Map和Set。Map学过Java的同学应该很清楚（我怎么感觉JavaScript越来越像Java了。。。） 定义一个Map：var map = new Map([["a",1],["b",2]]); //二维数组map.set("c",3)
2017-10-19 22:51:46
226
原创 JavaScript对象——不变性
当我们希望属性或者对象是不可改变的，可以通过多种方法实现，但是，创建的不变都是浅不变性，只会影响目标对象和它的直接属性。对象常量通过writable: false和configurable: false就可以创建一个真正的常量属性（不可修改、重定义、删除）：var obj = {};Object.defineProperty(obj,"a",{ value: 2, writable
2017-10-17 22:45:01
259
原创 JavaScript对象——属性描述符
定义对象有两种方式：var obj = {"a":1,"b":2}或者var obj = new Object();obj.a = 1;obj.b = 2;我们一般都会用第一种方式吧？第二个还要逐个添加呢，太麻烦了。 有没有想过定义一个属性a，难道这个a就是光杆司令，只有一个值吗？ 其实吧，每一个属性都有一群小兵呢，它们叫做属性描述符，就是详细描述这个属性的。看代码：var obj = {"
2017-10-16 22:28:37
384
原创 三种Webpack打包方式
准备工作mkdir webpack_demo && cd webpack_demo #新建文件夹npm init #创建package.json文件npm install --save-dev webpack #安装依赖（非全局安装）mkdir app && mkdir public #新建app和public文件夹cd app && cd.>Greeter.js && cd
2017-10-11 14:44:12
7104
原创 前端代码重构
重构指的是在不改变代码外部行为的情况下进行源代码修改。 重构的目的主要是提高代码的可维护性、可读性和性能。 重构之前需要考虑的是重构后如何才能保证外部行为不改变。重构的过程主要分为如下几个步骤：1、删除无用代码，精简代码修改的过程需要注意，不停地查看函数和变量在上下文的调用关系，以免删错代码。2、前端代码规范化将css代码放到独立的文件中调整代码的层次缩进格式，不同层级按照4个空
2017-10-09 21:31:21
2569
1
原创 零宽断言
看到这个标题是不是虎躯一震，啥玩意啊？别着急，别看这个名词生僻，下面的…更加生僻哈哈哈。 言归正传，不管它叫啥，我们会用就行了。零宽嘛，就是没有宽度，只匹配位置，不匹配内容，是不是想起来了，对的，就是类似于^、$、\b这种。零宽度正预测先行断言（?=exp），断言自身出现的位置的后面能匹配表达式exp。例如，我需要匹配以ing结尾的每个单词。"hello sing dancing".match(/
2017-10-09 12:27:35
341
原创 正则表达式：后向引用
预备知识replace()方法大家一定很熟悉了吧，stringObject.replace(regexp/substr,replacement)w3school里面有一段话相信大家也看过了： 注意：ECMAScript v3 规定，replace() 方法的参数 replacement可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数
2017-10-07 16:42:25
1843
1
原创 颜色字符串转换
题目：将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff。rgb 中每个 , 后面的空格数量不固定十六进制表达式使用六位小写字母如果输入不符合 rgb 格式，返回原始输入 例如： 输入 ：’rgb(255, 255, 255)’ 输出：#ffffff答案：function rgb2hex(sRGB) { if(/^(rgb
2017-09-28 21:19:07
901
原创 CSS浮动
前言：相信很多人都看过浮动，但是却云里雾里的，不怎么理解。今天将我理解的浮动知识整理分享一下。 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动Div属于块级元素，这个应该不用我多说吧，你要是不知道就自刎去吧。。。对于三个并列的div，他们的样子是这样的，不管它们的长
2017-09-24 15:30:45
239
原创 查找数组元素位置
function indexOf(arr, item) { for(var i=0;i<arr.length;i++){ if(arr[i]==item) return i; } return -1;}
2017-08-02 00:36:50
362
转载 凯撒密码
本文转载自： 杨建，转载请注明出处。 凯撒密码是位移变换。位移量可以自己定，比如约定A->B，B->C，。。。，Y->Z，Z->A这种位移为1的规则，也可以为其它。比如我和你之间是通过凯撒密码通信的，我问你：今天吃啥?你说：BQQMF。那我就知道你要吃：APPLE。哦，是苹果，当然我肯定不会和某人做这种约定，幻想自己是特工，意思 一下嘿嘿。你可以做一个表格来对照明文和密文：明文 A B
2017-06-01 23:04:46
423
原创 js ~操作符(字位操作"非")详解
基本概念：这是js中的一元操作符：按位取反。计算规则为：~x = -(x+1);即：~-1 = 0、~1 = -2。 解释：下面我将从计算机组成原理方面详细解释一下，在看懂下面表格之前要有一点基本知识：计算机中的数字是以补码的形式表示的正数的原码、反码、补码都一样，就是它本身负数的反码符号位不变，其余取反；补码为反码加1+0的补码和-0一样（其实不一样，-0的进1被丢弃了）取反的意思每位
2017-05-21 15:02:51
3377
原创 Node.js连接mysql数据库
今天用node.js连接数据库并操作了一下数据表。这个本身很简单，最大的坑就是数据库mysql不是我安装的，密码不对，弄了好久才成功。下面是我从零开始连接数据库mysql： 1、新建一个文件夹，我就在桌面建了一个叫mysqlTest的文件夹。 2、终端cd到该文件夹目录下，输入命令npm init，其实这一步对于我这个demo并没有作用，这个命令主要是在项目中引导创建一个package.json
2017-03-22 23:17:21
3083
原创 Node.js浏览器调试
利用node-inspector调试工具进行调试。 1、执行命令npm install -g node-inspector安装node-inspector。 2、终端cd到需要调试的脚本的路径，执行命令node –debug-brk=5858 script.js,script.js就是你需要调试的某个js文件。 3、执行命令node-inspector启动node-inspector。 注意
2017-03-22 22:39:35
820
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人