- 博客(42)
- 收藏
- 关注
RSS订阅原创 简单拖放
1.将待拖的元素的draggable属性设置为true。2.触发待拖元素的ondragstart属性，即拖动开始时触发事件。3.ev.dataTransfer.setData("type", data);设置拖动数据的类型和值。4.ondragove事件规定被拖动数据能放置到何处。由于元素默认不能拖放进其他元素中，需要在ondragove事件中设置.preventDefault();阻止默认
2017-07-06 15:31:11
200
原创 音视频
html中插入多媒体的标签有H5支持的：audio 音频video 视频-source; 为audio和video定义媒介资源，浏览器加载自己支持的那份embed 嵌入内容ps:W3C强调embed是H5的新标签，但是在以往的页面中都会使用embed标签，查了下资源，object最早是由MS引入用以支持ActiveX，但其他浏览器使用的是embed嵌入多媒体。embed以往虽然不是W3
2017-07-06 15:31:05
313
原创 复习一下canvas(一)
讲真一般企业其实用到canvas的场合应该不是很多，基本的api也不难。今天复习一下：绘制矩形的api：fillstyle="";fillRect(x, y, width, height) 填充strokeRect(x, y, width, height) 边框clearRect(x, y, width, height) 清除绘制路径的api：beginPath()ctx.mo
2017-07-06 15:31:00
234
原创 简单的水平滚动面板
.wrap：{ width:100%;overflow-x:auto;over-flow-y:hidden;white-space:no-wrap;}.item{display:inline-block/flex;}
2017-07-06 15:30:55
383
原创 vue中使用sass
在.vue组件中使用sass，安装了sass-loader后，运行webpack报错说找不到python。一说sass编译需要python2。查询后明白了，vue中使用sass要安装sass-loader和node-sass，sass的编译需要用到node-sass。用淘宝镜像解决方法如下：npm install -g cnpm --registry=https://registry.n
2017-07-06 15:30:50
467
原创 npm run webpack 和直接webpack
好多新手会问一个问题，直接webpack可以运行，npm runwebpack却出错。首先webpack的话是直接运行webpack.config.js里的配置。配置正确的话一般是没问题的。而npm run是运行package.json下scripts标签里的命令，如果scripts里没有添加webpack这个选项，比如："webpack": "webpack --config webp
2017-07-06 15:30:45
1097
原创 关于设计模式，简记
这几天看《Javascript设计模式》。第一个感受是翻译真不怎样。其次受益良多。这里先记下初步的理解，以后慢慢补充、深入。 设计模式本质上是针对某一类特定问题的解决方案，并且这些解决方案经过社区的广泛试验被认为是行之有效的。作者将javascript设计模式划分为三大类：创建型、结构型、行为型。当然书中只是介绍了最常见的那些。 创建型有：Constructor、F
2017-07-06 15:30:40
228
原创 sass简记
虽然内容不多，还是留个笔记吧。css预处理器本身只是添加了编程的特性（就sass而言，主要是变量、嵌套、语句和函数）让写css的过程更像编程，同时大幅提高了样式代码的复用。1.使用sass要先安装ruby，上官网安装。2.gem install sass安装sass。3.写sass文件。主要知识点：1.可以使用变量，$a：xxx，变量名前加$符号.变量有作用域，局部变量于优先于外部的同
2017-07-06 15:30:33
319
原创 vuex笔记
vue本身是组件化开发应用的，但是组件化开发自然会遇到一个问题，组件间有些共享的变量/数据（即state），组件要怎样简练快捷地响应state的更新。vuex本身的意义就是解决这个问题。vuex的方案是，在vue中构建一个用于存储state、定义操作state方法的仓库（即store）。通过在多个（不一定是全部）组件中引用需要的state、调用“操作state的方法”来实现对给共享变量的处理。且由
2017-07-06 15:30:28
469
原创 div自动换行及截断文本
之前在vue上模拟对话框，动态生成的div里内容没有自动换行，找到一个解决办法是css加word-wrap样式：word-wrap：break-word；行末会把单词作为整体切换到下一行；另外还有一个word-break：break-all;把单词截断到下一行。怕忘记，先记在这里。.truncate{width:100px;overflow:hidden;text-overflow
2017-07-06 15:30:23
1739
原创 生成html模板
做个笔记吧。动态生成html是很常见的需求，无论是单纯web页面或app都会有根据给定条件生成DOM结构来表述信息的情况，比如勾选了航线和日期后展示符合条件的邮轮列表。大多数情况下开发者都是直接拿个插件来弄。1.原生dom方法有createElemen t()和createDocumentFragment()方法，生成tag和fragment(存储DOM的容器)，由于页面反复渲染会明显影响性
2017-07-06 15:30:13
685
原创 vue+webpack实现异步组件加载
本来很简单的事情折腾好久。1.vue文档只给出了Vue.component('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的例子，但现在习惯.vue文件写组件，在点击路由获取.vue的时候怎么弄呢？2.webpack的coding-split支持commonjs/amd语法，即有不同的实现。网上查了n多案例乱七八糟的，最后终于弄
2017-07-06 15:30:09
14331
1
原创 填坑
前段时间过完ES6回来vue的进阶部分，真nima多坑。主要关注router、vuex、vue组件vue-cli手脚架+webpack-simple搭建项目：npm install vue-cli -gvue init webpack-simple hello-vue(项目名)cd hello-vuenpm installnpm install vue-router vue-resou
2017-07-06 15:30:00
187
原创 正则
以前听同学说，他正则只学了一些基础，用到复杂的都是网上copy下来用，后来参加工作了发现确实一个项目中用到的复杂正则其实不多，因为自己写一个正则必须理解这个模式的规则，像匹配身份证的regexp，估计没多少人会真的去研究每一位是代表什么/能匹配到哪个数字。今天稍微复习一下。一.创建：直接量创建： var a=/s$/;RegExp构造函数创建：var a= new RegExp("s$")
2017-07-06 15:29:55
204
原创 git 默认文件名大小写不敏感
刚刚用纯js写一个滑动幻灯片，传到github发现一个图片的后缀名大小导致载入URL失败，修改后再上传发现git显示无改动，查了下发现git默认文件名大小写不敏感，可通过git config core.ignorecasefalse修改，由于网友建议不要改动这项，重新上传完成后设置回“true”即可。
2017-07-06 15:29:48
401
原创 关于移动端滑动事件
以前在公司开发webapp的时候，用的是插件swiper，只对touch事件也只是有所了解，今天火狐社区看了下文档，做些笔记。1.touch事件通过手指与屏幕的触点信息为用户与界面的交互提供了便利，根据文档，touch事件的接口是基于一些更底层的支持手势应用的（当然这个就暂时不用管了）。touch事件包含一组touchList，touchList是一组touchpoints（或者称touch
2017-07-06 15:29:44
1852
原创 CMD快速进入某个文件夹--转自CSDNd…
1.cmd /k cdc:\Tornado2.2\host\x86-win32\bin以前没想太多都是用这方法，今天从从机智的网友那里看到另一种方式。2.复制一下文本并保存为reg格式，双击导入注册表。之后右键某个文件夹，就能直接打开该文件路径下的cmd里，赞~Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\folde
2017-07-06 15:29:39
1865
原创 BOM
BOM提供了很多对象来访问浏览器的属性和功能。常用的有window、location、history等；Window：window.moveTo(x,y);window.moveBy(x,y);window.resizeTo(x,y);window.resizeBy(x,y);--------------------以上IE7默认禁用，只对最外层window--------------
2017-07-06 15:29:34
146
原创 模仿块级作用域
块级作用域的意义在于将代码的可访问性限定在某个代码段中，屏蔽对外部的影响。JS中由于没有传统的块级作用域，所以只好用匿名函数来构造闭包来实现。var variable=(function(){})();function(){}外部的括号表明这是一个函数表达式，后面的()表示立即执行。第二个括号的含义不难理解：var Fn=function(){ //定义一个函数 somecod
2017-07-06 15:29:29
255
原创 巩固基础--global对象Math对象
全局的global对象，ECMAScript中没有定义直接访问它的方式，在JS中是作为window对象的一部分实现的。根据规范，所有不从属于其他变量的属性和方法都是global的属性。属性：特殊值undefined、NaN、Infinity，原生引用类型构造函数Object、Array、Function、Date、Error、RegExp、Boolean、String、Number。方法：
2017-07-06 15:29:24
174
原创 简单复习下函数（基于《JS高级程序…
JS中对象总是某种类型的实例。函数是Function类型的实例且和其他对象一样具有属性和方法，今天简要复习一下。1.函数定义，函数声明语法和表达式。但是函数声明语法定义的函数，在JS解析器"在向执行环境加载数据时，会先读取函数声明"(函数声明提升)，而表达式定义的函数在执行到该行时才执行函数。2.没有重载。JS中并不允许直接访问内存中的位置，只是操作内存中对象的引用，因而函数名只是存储着对函
2017-07-06 15:29:19
124
原创 JS对象检测
简单复习：typeof检测基本类型(null返回object)，instanceof检测对象实例（基于原型链）typeofvariable:操作符:字符串(string)、数字(numbel)、布尔值(boolean)或undefined(undefined),null或其他引用类型(object)，函数返回function;variable instanceofconstructor:
2017-07-06 15:29:14
265
原创 复习闭包番外篇
《JS高级程序设计》中特别指明一点，JS中函数参数是按值传递的。对于基本类型参数，函数参数只是简单地复制它的值；对于引用类型参数，函数参数也只是拷贝了一份指向内存中某个位置的副本而已。直接的论据就是当给函数中引用类型参数重新赋值之后，其将不再指向原来的引用类型，对其进行的操作也不不会对原来的引用类型造成影响。 之前提到，闭包给我们提供了访问“受保护数据”的实现。 我
2017-07-06 15:29:09
108
原创 伪元素的妙用（闲着也是闲着）
伪元素其实就是用css基于某个DOM节点创造一个文档中本来没有的元素，它和其他基本元素一样可以有内容和样式并影响到布局，但因为并不真实存在于DOM中，故加了个伪字。记得第一次接触伪元素是学习清除浮动的时候。清除浮动影响最基本的方式是对浮动元素之后的第一个元素加样式：clear：both/left/right；或者看情况在父元素设置overflow：hidden；或者粗暴地在后面加个空元素清除浮
2017-07-06 15:29:02
772
原创 图片垂直居中。。闲着也是闲着
1.：图片加个同级的span（或其他行内元素）并设置span的css：height：100%。display：inline-block；verticle-align：middle；图片自身css：verticle-align：middle；2.利用表格特性：table>table-cell：verticle-align：middle，text-align：center>img。第二种方法也
2017-07-06 15:28:57
123
原创 git常见错误
网友经验：1.fatal: remote origin already exists.删除远程 Git 仓库 $ git remote rm origin重新添加远程 Git 仓库$ git remote add origingit@github.com:Your/Resp.git如果 git remote rm origin 报错，可以手动修改gitconfig文件的内容$ vi.g
2017-07-06 15:28:53
475
原创 微信浏览器取消缓存--调试用
脚本之家看到的，说微信实在上层做的缓存，调试页面加上：<meta http-equiv="Cache-Control" content="no-cache,no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache"/><meta http-equiv="Expires" content="0"/>
2017-07-06 15:28:48
216
原创 github阅览方式打开html
第一种：http://htmlpreview.github.io/?+html所在地址（不推荐）第二种：在github的对应repository页面：1.击setting2.找到Github Pages3.把none改为master branch，保存4.复制此时Github Pages标题边的url5.在repository的README里加入下面代码：[demo](url+"in
2017-07-06 15:28:44
745
转载 Meta标签中的apple-mobile-w…
嗯哼原文地址：Meta标签中的apple-mobile-web-app-capable属性及含义作者：最初的你 这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
2017-07-06 15:28:39
182
原创 复习一下原型链
JS是一门基于原型的语言，JS中的对象，无论是内置的Array、Date、Math、String还是用户自定义的亦或Function，都是对象且究其源基于Ocject。当用构造函数创建一个对象时，对象的实例都有一个指向其原型的prototype，prototype又有一个constructor属性，这个construct属性故名思义（构造器）指向构造函数。prototype--原型可以被添
2017-07-06 15:28:34
211
原创 判断浏览器
function browserRedirect() { varsUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; varbIsIphoneOs = sUserAgent.match(/iphone os/i) == "iph
2017-07-06 15:28:29
132
原创 复习闭包
本来没打算写这篇东西，关于闭包的文章应该已经很多，阮一峰先生的网络日志里也有浅显的解说。不过昨晚和同学吃饭的时候突然问起这个，所以在这里就当作复习一下吧。 闭包本质上是对js函数作用域链的一种利用。（我们抛开ES6，纯就基于ES5的角度来理解） 假设，函数A中定义了函数B，A和B中都有若干变量。 那么，对于B来说，是有一个作用域链的，B----A----包含A的作用域或
2017-07-06 15:28:24
129
原创 webpack基本使用
1.先确认是否安装了nodejs：npm -v2.安装webpack：npm init，创建package.jsnpm install webpack --save-dev或者(npm i webpack -g)3.导航到项目文件夹js打包：./node_modules/.bin/webpack hello.js hello.bundle.js引入css：./node_modu
2017-07-06 15:28:18
278
原创 常用DOM方法
无滚动条时：element.clientHeight 返回元素的可见高度。（contain+padding）element.offsetHeight 返回元素的高度。（包括border、padding）有滚动条时：element.clientHeight 返回元素的可见高度。（contain+padding 减去滚动条）element.offsetHeight
2017-07-06 15:28:14
146
原创 获取视口宽度
function(){ varw=windows.innerWidth //IE9以上现代浏览器|| document.documentElement.clientWidth //兼容IE8||document.body.clientWidth; IE6严格模式var h=windows.innerHeight|| document.documentElement.
2017-07-06 15:28:09
1408
原创 关于git的简单使用
1.github上注册个账号。2.本地安装了git之后，在项目文件夹(选文件夹右键点击git bash)下：3.$ ssh-keygen -t rsa -C"youremail@example.com" *****创建自己的gitSSH Key公钥4.将公钥加进自己账户setting中的ssh key5.初始化本地仓库：git init6.$ git remote add ori
2017-07-06 15:28:04
198
原创 vue基础--computed属性
文档中解释说，虽然模板内可以放js表达式，但“过多的逻辑会让模板过重且难以维护”，所以对于任何复杂逻辑都推荐使用computed（计算属性）。computed其实是vue实例中的一个属性，在这个属性里可以创建一系列的计算函数，这些计算函数返回一个既有属性（变量）的操作结果，比如官方的例子：var vm = new Vue({el: '#example',data: {message:
2017-07-06 15:28:00
289
原创 （吐槽新浪插入源码这么麻烦）vue…
模板，顾名思义就是在呈现数据的时候，预先设置一个“模”，让数据按照这个模打印到页面上，这是动态创建页面元素/数据时的做法。vue使用了基于html语法的模板，按文档展示有下列几种：1.文本插值，Mustache语法（双大括号），在标签内{{message}}，单向的从vue实例的属性（变量）打印到页面上，变量message改变，{{}}内的值也改变。2.插入html，在父元素中使用指令
2017-07-06 15:27:52
261
原创 vue基础--表单浅记
最近两天开始学习vue这个框架，虽然本人算是原生主义，比较喜欢纯js写东西，但优秀的框架总有许多值得学习的地方。技术发展的根本意义，在于让人们更轻松地解决难题，借鉴别人的思想很重要。表单说白了就是接收用户的输入，vue在表单中几乎都用了v-model语法糖实现表单和vue实例中数据 的双向绑定,单纯用的话，只需要记住两点：1.v-model绑定的是vue实例中的数据，就像原生表单中每个表单元素
2017-07-06 15:27:48
247
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人