秋天1014童话-CSDN博客

原创 jquery的deferred对象

var wait = function(dtd){　　　　var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象　　　　var tasks = function(){　　　　　　alert("执行完毕！");　　　　　　dtd.resolve(new Date()); // 执行完成后，返回当前时间　　　　};　　　　setTimeout(tasks

2017-08-05 13:59:45 289

原创鼠标与按键事件触发顺序

事件触发顺序：之前研究过input文本框的事件触发顺序，今天突然想起来，就做个总结。<input type="text" name="" id="txt"> <script> var txt = document.querySelector('#txt'); txt.onmousedown = function(){ console.log('onmoused

2017-08-05 11:56:15 2211

原创不错的链接--积累ing

http2：http://www.jianshu.com/p/52d86558ca57 https://segmentfault.com/a/1190000009280206安全：http://www.jianshu.com/p/0e9a0d460f64 js防http劫持与Xss：http://url.cn/5ZLbRIS内存泄漏、垃圾回收：http://blog

2017-07-21 18:26:29 375

原创哇塞，不错的js--前端中的小算法

颜色字符串转换将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff 1. rgb 中每个 , 后面的空格数量不固定 2. 十六进制表达式使用六位小写字母 3. 如果输入不符合 rgb 格式，返回原始输入示例1 输入: ‘rgb(255, 255, 255)’ 输出: #fffffffunction r

2017-07-15 21:12:07 508

原创 jQuery源码解析--jQuery.noConflict() 函数详解

作用： jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。一般情况下，在jQuery库中，变量$是变量jQuery的别名，它们之间是等价的，例如jQuery("p")和$("p")是等价的。由于变量$只有一个字符，并且特点鲜明，因此我们更加习惯使用$来操作jQuery库。使用场景：问题：不过，其他JS库也可能使用变量$来进

2017-07-14 15:31:58 464

原创 jQuery源码剖析--jQuery入口函数-init实现

通过$工厂，最终到达了init构造函数，所有实例的初始化过程都在这里实现，所以把这里称之为入口函数。jQuery入口函数-init实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <a class="a">1</

2017-07-13 17:50:49 536

原创 jQuery源码剖析-框架结构简述

事件对象的属性（1） event.type 作用：获取事件类型。（2） event.preventDefault()；作用：取消默认事件。（3） event.stopPropagation() 作用：取消冒泡。（4） event.target 作用：获取到触发事件的元素。IE使用event.srcElement （5） event.relatedTarget 标准 DO

2017-07-13 16:08:04 409

原创简洁的JS代码--几点建议-积累ing

1. 常量$elem.on('keydown', function(e) { if (e.keyCode == 27) { //... }});27到底代表什么？代表ESC键。你可以在后边加上注释。不过，在这里我建议你使用一个常量名来代替，比如：KEY_ESC = 27。这样更加直观易懂！2.标识符(identifiers)我们经常需要获取某个元素(评论、博客、用户、等等)的标识符

2017-07-13 11:52:56 291

原创 jQuery.on() 函数深入解析

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外，还可以额外传递给事件处理函数一些所需的数据。基本介绍从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。 on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是

2017-07-13 10:57:55 504

原创 jQuery.ready()函数仿写，与window.onload的区别

window.onload和jquery的入口函数的区别： js的window.onload是等所有资源（css，js，图片之类的文件）加载完成后，才执行。 jquery的入口函数是在html文档准备就绪（dom树加载完成后），去执行。 window.onload 事件会有覆盖现象，jquery进行了封装，不会覆盖jquery的入口函数写法： $(document).ready(f

2017-07-13 09:47:46 552

1.浅复制VS深复制本文中的复制也可以称为拷贝，在本文中认为复制和拷贝是相同的意思。另外，本文只讨论js中复杂数据类型的复制问题（Object,Array等），不讨论基本数据类型（null,undefined,string,number和boolean），这些类型的值本身就存储在栈内存中(string类型的实际值还是存储在堆内存中的，但是js把string当做基本类型来处理 )，不存在引用值的情况。

2017-07-12 10:02:44 399

原创 IE下bug

IE6下不能定义1px高度的容器（1）触发的条件—定义一个div,将容器的高度设置成1px （2）编码得到的结果—在IE6浏览器中，容器的高度不是1px 而是18px （3）出现问题的原因—是因为IE6浏览器下默认的行高（4）解决的方法—添加属性 line-height:1px overflow:hidden; （可有可无的属性 zoom:1;）关于IE6双倍边距bug解决

2017-07-11 21:43:07 444

原创 css-href与src的区别

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：<link href="style.css" rel="stylesheet" />浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。 src是source的缩写，src的内

2017-07-11 20:51:37 882

转载转-Vue双向绑定的原理

Vue双向绑定的原理一篇很不错的文章：Vue.js双向绑定的实现原理原文：(http://blog.csdn.net/creabine/article/details/59201837)主要的知识点： 1.Vue双向绑定原理（一）文档片段DocumentFragment 2.Vue双向绑定原理（二）访问器属性defineProperty() 2.设计模式：观察者（发布/订阅）模式;大致思路：

2017-06-21 20:24:15 836 1

原创 vue源码解析之--数据双向绑定

在短时间内迅速使用vue构建了两个demo，一个eleme外卖平台webapp，还有一个是新闻网站。除了练习项目，也阅读了很多文章，收获颇多，成长很快。总结一下： vue简单，轻量，易上手，API简单，模板也符合web编程习惯。 vue是MVVM的一个很好实践，核心思想是数据驱动和组件化。数据驱动指的是，model改变，驱动view自动更新。支持自动计算属性和依赖追踪的模板表达式。

2017-06-21 18:39:20 613

原创 vue-自定义指令-拖拽

主要思想：获取拖拽的dom元素，在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置： var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop;再通过document.onmousemove事件计算dom元素左上角相对视口的距离：var l=ev.clientX-disX;var t=

2017-06-19 12:42:59 9373

原创 vue+localStorage+收藏+解析url参数实例解析

以商家收藏这一功能为例： 1. 首先App.vue中根据url 设置好商家的id<script>import {urlParse} from './common/js/util.js'import Header from './components/header/Header.vue'const err_OK = 0;export default{ data(){ return

2017-06-17 13:03:07 4450

原创 vue-格式化时间戳+格式化编程思想

首先，数据库中往往存储的是时间的毫秒形式，这样在页面上可以操控显示时间的格式。 1. 页面中: <div class="time">{{rating.rateTime | formatDate}}</div> 这里formatDate时一个过滤器 2. 在页面js中定义这个过滤器：import {formatDate} from '../../common/js/date.js' expo

2017-06-16 16:12:19 20753

原创 stylus使用再升级

1、一些使用技巧常常在一些很常见的场景中使用，比如插值，常在做浏览器兼容性处理时使用。还是要做一些总结。 stylus中文版参考文档：http://www.zhangxinxu.com/jq/stylus/selectors.php 基本使用方法： https://segmentfault.com/a/1190000002712872#articleHeader15

2017-06-09 10:13:28 538

原创 css sticky footer布局+流式布局

css sticky footer布局参考地址：张鑫旭老师-css sticky footer布局结合项目具体场景给出介绍：点击信息，弹出浮层，显示详细信息。浮层最下面有个关闭按钮，一直处在底部，当内容未撑开一页大小时，关闭按钮处在页面最底端。当内容撑开超出一页的大小时，底部内容向下推送。方法一：min-height+ padding-bottom + margin-top布局核心框架：核心

2017-06-06 10:35:35 2728

原创移动1像素的问题

问题：一般在移动端，由于dpr（设备像素比）不为1，在PC端显示1像素的边框，在移动端其实显示为2px。解决这个问题，主要思想是：使用媒体查询，根据dpr的大小，对边框进行缩放（scaleY）。详细代码如下所示： App.vue:<template> <div id="app"> <div class="tab border-1px">  <

2017-06-06 10:11:31 3342

原创 vue-star评星组件开发

star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护 Star.vue：<template> <div class="star" :class="starSize"> <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>

2017-06-06 10:00:36 5736 2

原创 npm 安装配置等

一、目录问题 1、如果是npm instal -g，则是安装在全局的地方，所有node项目都可以使用这个module，安装路径可以通过npm config get prefix查看。二、安装问题

2017-05-19 13:15:40 361

原创 vue+百度下拉框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .gray { background-color: gray; } #box ul li { curso

2017-05-16 09:19:40 1335

原创 vue生命周期

vue生命周期: 钩子函数:created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档中 √ beforeDestroy -> 销毁之前 destroyed -> 销毁之后图解：

2017-05-09 22:22:32 358

原创 bootstrap+vue=动态添加删除用户数据

首先使用bootstrap进行页面布局，使用vue进行数据绑定，可实现添加、删除、全部删除。全部删除、“暂无数据”根据有无数据动态显示隐藏，这是vue的机制，做起来很方便。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styles

2017-05-08 21:45:52 2213

原创 ie8升级到ie11

1 、首先windows检查更新，最好全都更新，因为ie11对其他项也有些依赖。更新完，重启，ie8自动升为ie11。 2、解决：ie11无法显示网页，但网络没有问题。使用360人工服务-网页打不开，但qq没有问题选项，自动修复。点个赞。 3、解决F12无法使用：方法一： 1、打开控制面板，点击程序，然后再点击”打开或关闭Windows功能”； 2、在功能列表中取消勾选“Interne

2017-05-06 10:27:22 27269 1

原创判断一个对象是否为空

由判断一个对象是否有属性（即{}），引发的一系列思考： 1. 首先要想判断一个对象是否为null，很简单，使用if(obj)或者obj==null 直接判断即可。 2. 判断一个对象是否函数属性：方法一：使用for in 和hasOwnProperty 判断，是否含有属性。和喵大婶探讨，得到方法二：对象使用JSON.stringify转为字符串，判断长度是否大于2var obj = {

2017-04-20 17:46:43 3306

原创正则表达式剖析-案例

一直都是在用正则表达式，没有好好的汇总过。正好，遇到很多小算法，可以作为案例补充。正则表达式的定义：正则表达式是由普通字符和特殊字符(也叫元字符或限定符)组成的文字模板。元字符：. 匹配除换行符（\n\r）以外的任意字符\d 匹配数字, 等价于字符组[0-9]\w 匹配字母, 数字, 下划线或汉字\s 匹配任意的空白符(包括制表符,空格,换行等)\b 匹配单词开始或结束的位置^

2017-03-19 12:45:15 613

原创函数调用模式4种方式详解

函数调用模式：函数模式特征:就是一个简单的函数调用，函数名前面没有任何的引导内容function foo(){}var func = function(){}foo();func();(function(){})();this在函数模式中的含义：this在函数中表示全

2017-03-15 22:17:55 5444 1

原创 js变量声明提升

cache缓存作用：存储常用数据，提供使用，提升性能原理：使用对象，以键值对形式存储；使用数组存储键，键有顺序，超出缓存容量，则删除最早进入缓存的一个（即数组第一个）；使用闭包封装函数 function createCache() { var keys = []; function cache( key, value ) { // 使用(key + "

2017-03-15 21:06:51 639

原创 js-基本数据类型-你不知道的趣味题

趣味1：原生js实现字符串转为数组，反转数组/*写个js函数func(str)，传参str为一个字符串，实现把这个字符串语句中的单词（空格隔开的）次序逆序。比如把 I am a coder变成 coder a am I，不允许使用reverse，join，substr，split*/ var str = "I am a coder"; console.log(getStr(str)

2017-03-07 14:53:17 1459

原创原型链-柯里化-记忆缓存

1、使用原生js实现–原型链使用 (10).add(10).reduce(2).add(10) //28Number.prototype.add = function(num) { return this + num; } Number.prototype.reduce = function(num) { return this - num;

2017-03-03 16:34:57 541

原创 function闭包、定时器剖析

一、function小知识点：明确闭包，js解析机制，变量声明提升（如希望见到详细例题，可参考有趣味的js），函数的作用，作用域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>function</title> <style> </style> </head><b

2017-03-03 11:09:03 2574

原创包含块

前端技术研究一：包含块给一个div设置它的宽度为100px，然后再设置它的padding-top为20%。问：现在这个div有多高？.inner{ position: absolute; width: 100px; padding-top: 20%;}.mid{ width: 200px;}.wrap{ position:

2017-03-03 10:24:39 2022 1

原创 artTemplate模板的使用

artTemplate一、注意：原生语法与简洁语法不能同时使用，而且对应引入的js文件也不一样，要注意这个问题！避免不必要的错误！二、使用使用有两种方式： 1、

2017-03-03 09:05:20 476

原创单行文本和多行文本--文字溢出

单行文本和多行文本–文字溢出：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本换行</title> <style> .text{ width: 200px; border: 1px solid red;

2017-02-20 19:11:23 1775

原创使用css3图形描绘

css描绘各种图形：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 边框</title> <style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0;

2017-02-20 18:00:33 974

原创 jquery设置css样式的多种方法

设置css样式的多种方法，jquery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head><body> <ul> <li>兄弟多个1</li> <li

2017-02-07 13:44:49 836

原创旋转木马-轮播

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-01-17 15:59:35 664