front end
关注
分享
扫一扫
一朵红杏
Proper preparation solves 80 percent of life's problems.
展开
-
Mac Sublime repl 插件配置
mac 下 默认安装 python2, 自己安装 python3 之后, sublimerepl 运行 py 文件后发现 使用依旧是 2.** 版本修改 Main.sublime-menuSublime -> perferences -> Browse packages -> SublimeRepl -> config -> python配置文件更改如...原创 2018-11-13 15:51:14 · 1006 阅读 · 0 评论 -
nodejs module.export require 原理分析
大部分实现在module.js中，按照顺序来看： 首先调用require('xx')的时候内部调用了Module._load(path, parent) :Module.prototype.require = function(path) { assert(path, 'missing path'); assert(util.isString(path), 'path must be a原创 2017-01-10 14:07:26 · 3281 阅读 · 0 评论 -
用vue-cli构建了项目之后在webstorm开发，用npm run dev跑本地服务，经常修改之后在浏览器刷新没反应，偶尔才会有刷新，需要重新跑一遍npm run dev才会更新，这是怎么回事呢？
webstorm保存的时候会先保存到旧时文件中，其实并没有真正保存，要在setting->stystem settings下的“use save write”去掉原创 2016-12-29 17:49:15 · 11030 阅读 · 1 评论 -
JavaScript变量——栈内存or堆内存
原文摘自： http://www.tuicool.com/articles/m2queq堆和栈这两个字我们已经接触多很多次，那么具体是什么存在栈中什么存在堆中呢？就拿 JavaScript 中的变量来说：首先 JavaScript 中的变量分为基本类型和引用类型。基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。1 、基本类原创 2016-12-25 21:03:43 · 597 阅读 · 0 评论 -
html5调用本地摄像头
THE CURRENT STATE OF HTML5 FORMSWufooThe accept Attributeaccept="image/*"> (images only)Live DemoFirefox3.6+Safari7+Safari Mobile5+Chrome17原创 2016-12-23 13:06:52 · 5940 阅读 · 1 评论 -
requireJs 使用
原文链接: http://www.tuicool.com/articles/uYNBFjU作为命名空间；作为命名空间使用； 异步加载js，避免阻塞，提高性能；js通过require加载，不必写很多script2、require.js的加载require.js下载下载后，放在指定目录就可以加载了script src="js/require.js">script>原创 2016-12-17 18:21:57 · 1178 阅读 · 0 评论 -
angular $scope.fun | js obj method
先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> var a = {}; a.cc=function () { alert(22); a.bb(); };原创 2016-11-28 16:00:47 · 615 阅读 · 0 评论 -
解决在angular 中swiper 不能滑动问题
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。> 首先提供一种方式 ： 监听 ng-repeat 渲染事件 当组件渲染完成时候 初始化 swiper 即可 下面是从网上看到的今天在使用Swiper的时候遇到这个问题：使用angularjs动态循环生成swiper-slide类，在swiper-wrapper里生成6个以上的滑原创 2016-11-28 13:58:34 · 6542 阅读 · 1 评论 -
js this 函数详解
this 代码函数调用时,.1直接调用函数则为this则指向window对象.2类调用时候指向这个类.3 方法.apply(obg) ；此时这个方法内部的this指向 obj 不传参数 则指向window.4 function 作为构造函数时, 内部this 指向这个新创建出来的对象总结为 a类直构this是Javascript语言的一个关键字它代表函数运行时，自动生成的原创 2016-12-09 01:56:14 · 654 阅读 · 0 评论 -
js 数值计算问题
Js代码 var num1=3.3; var num2=7.17; var ret=parseFloat(num1)+parseFloat(num2); //ret的值为：10.469999999999998 这是JS对浮点型数据运算时，个别比较特殊的数字存在bug，可能是计算机对二进制处理的问题吧，具体原因有待深究。解决办原创 2016-11-23 17:08:38 · 1019 阅读 · 0 评论 -
AngularJS 报 ngModel:numfmt
AngularJS 报 ngModel:numfmtangularJS 前台报错 Error: ngModel:numfmt Model is not of type `number`错误：ngModel：numfmt模型的类型是`number`就是说你input中 model的参数可能是text 然后你在input的typ原创 2016-11-23 16:35:07 · 3005 阅读 · 0 评论 -
用html5,nodeJs开发桌面应用程序
原文摘自： http://www.webhek.com/html5-native-desktop-app/HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势，同时在智能手机和平板中也是开发利器。在手机端，有一个非常棒的工具叫做PhoneGap，原创 2016-12-06 01:59:21 · 6031 阅读 · 0 评论 -
前端上传图片oss
https://segmentfault.com/a/1190000006718963原创 2016-11-23 01:14:36 · 3341 阅读 · 0 评论 -
css 模块化实践
说起前端模块化开发，大部分人可能只会想到js模块化开发吧，网上也确实有各种各样的js模块化方法，但是鲜有谈论Css模块化开发的吧。因为JS是编程语言，比如业内的seajs、KISSY loader等，都有很成熟的模块化规则和方案了，前端工程师可以采用模块化的方法去编写页面，打包，上线，但是CSS界却没有。后来，CSS界出现了SASS、LESS之类的语言，这些语言的出现可以说是非常应景的，有一点原创 2016-12-13 01:46:49 · 798 阅读 · 0 评论 -
前端amd,cmd,commonJs,规范
首先说一下前端常用的打包工具webpack, requierJs,grunt 其中,webpack 为了方便同时支持 amd 与 cmd 规范, NodeＪs遵循cmd 规范, 而requireJs 遵循amd 规范, 而浏览器本身是不支持 cmd(同步加载js,加载过程中会造成渲染阻塞，假死现象), 当然amd 是可以得到支持的, 而在webpack 进行js,合并 压缩 隔离之后,commo原创 2017-01-16 09:46:05 · 2773 阅读 · 0 评论 -
html 5 模仿 form 提交file 文件之FormData
使用xhtr 2 可以实现前端提交 无刷新提交form表单api 参考mdn : https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/%E5%88%A0%E9%99%A4使用ajax 请求时 注意 $.ajax({ url : this.baseUrl+'updateHead',原创 2017-01-18 23:24:48 · 1669 阅读 · 0 评论 -
js copy text
document.execCommand('copy'); listenCopy() { document.addEventListener("copy", e => { let clipboardData = window.clipboardData; //for IE if (!clipboardData...原创 2018-05-22 19:50:25 · 1245 阅读 · 0 评论 -
Web css named way BEM
For developing front end , BEM is a perfect way of name your dom css name .there is simple introduce :.1 .block-warp-name :represent advance or abstract parent dom ..2 .block--wrap-name__name : the原创 2017-08-20 22:13:09 · 374 阅读 · 0 评论 -
For vue cli hot update no useful
today , when use vue cli , writing code by webstorm i have fonund a issue that vue can not compile after change code , so amazing thing , after get many infomation about this , at last , solve the issu原创 2017-05-04 12:26:56 · 600 阅读 · 0 评论 -
three way of waterfall flow
First the simple way , use css3 colum-width：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initia原创 2017-04-02 01:58:33 · 1074 阅读 · 0 评论 -
yarn
install refer : http://www.jackpu.com/yarn-facebook-kai-yuan-de-bao-guan-li-gong-ju/ yarn documention : https://yarnpkg.com/en/ yarn compare npm :https://yarnpkg.com/en/docs/migrating-from-npm:yarn原创 2017-03-25 08:23:33 · 1395 阅读 · 0 评论 -
应用栏跳转,返回首页,tab 位置显示错误问题
问题描述 : 在类似Ｙou TuBe 那种应用, Tab 切换后进行其他页面跳转,在返回上一个界面时,tab 会默认为现实Index 为 ０ 的 tab由于页面采用vue 开发,解决方案基于vue 但原理都一样, vue 在路由到页面会执行生命周期方法,可以在destroed:function(){ //remark the Tab Index}mounted:function(){原创 2017-03-01 11:17:36 · 1193 阅读 · 0 评论 -
Promise , fetch Api ,blueBird,Q,When
Promise which the solution of async programmer is the original obj presented by ecmaScript 6 , it’s better than the asynchronous callback was presented by community ;Promise is a object that can get原创 2017-03-20 01:13:33 · 1099 阅读 · 0 评论 -
Vue Lazy Loading Routes
When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route’s components into a separate c原创 2017-03-18 19:12:33 · 2589 阅读 · 0 评论 -
设置html5 的video 当前播放时间
原文: http://blog.csdn.net/renfufei/article/details/44522887上周翻译了一篇文章: 如何获取HTML5视频的持续时间。很显然这是一门简单却很实用的技术, 但我认为还有一个更重要的知识点是控制视频的时间设置。在用HTML5技术处理视频时,设置(setting)和获取(getting)时间都是很有用的,那就让我们一起来看看如何达成这个转载 2017-02-03 14:25:59 · 21680 阅读 · 0 评论 -
css模块化开发
CSS 模块化开发CSS 模块化一、文件结构常见文件结构一个项目的CSS最基本结构通常是下面这样的：- base.css- common.css- pages.css复杂一点的项目可能是这样分：- base.css- header.css- footer.css- sidebar.css- forms.css- icons.css原创 2016-12-13 01:43:01 · 788 阅读 · 0 评论 -
css样式分离合并与模块化
原文地址 http://www.zhangxinxu.com/wordpress/2010/07/css的样式合并与模块化/一、引言本文的核心观点为CSS的合并与模块化，似乎与前一篇文章“CSS样式的再分离”有矛盾，其实不然，分离可以精简CSS代码，合并也可以精简CSS代码，一切都是权衡！或是说是在恰当的情况下使用恰当的手段。正如前文所提到的，分离可以精简CSS，但是同时会带来巨大的H转载 2016-12-13 01:19:29 · 2081 阅读 · 0 评论 -
angular.element方法汇总
addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选原创 2016-11-12 18:29:17 · 637 阅读 · 0 评论 -
iconFont Access-Control-Allow-Origin
In the use of iconfont online, cross-domain problems encountered, usually cited the wrong icon caused by the wrong icon can be deleted, but the way to troubleshoot the error icon is not known, pro-effe原创 2016-11-12 15:12:58 · 466 阅读 · 0 评论 -
按钮事件生成时机
在进行完某一操作之后，开启某个按钮，实现方式 1 提前绑定事件 ， click 之后执行代码 在需要后置事件返回后的结果为true 时候执行 2 在拿到结果之后 再去绑定事件原创 2016-11-28 20:52:41 · 327 阅读 · 0 评论 -
纯css实现 页面加载动画
http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html原创 2016-11-16 02:39:39 · 4273 阅读 · 0 评论 -
jquery 自定义事件
？直接写一个函数执行逻辑，并在click 时 处理不是更好?为何要采用自定义事件的方式呢？对于jQuery自定义事件，很多JavaScript开发者都会有所疑惑：在日常开发过程中会不会用到呢？而本文将结合一个开发案例，其中的一些地方应用到了jQuery的自定义事件，而且达到了很好的效果-精简代码的同时充分利用了OO的原则。51CTO推荐专题： jQuery从入门到精通问题转载 2016-10-03 07:42:55 · 888 阅读 · 0 评论 -
300s delay solution
不管在移动端还是PC端，我们都需要处理用户点击，这个最常用的事件。但在touch端click事件响应速度会比较慢，在较老的手机设备上会更为明显（300ms的延迟）。问题由来 这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。原创 2016-10-03 07:09:14 · 491 阅读 · 0 评论 -
css伪类选择器与伪元素选择器区别
伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:acti原创 2016-10-02 12:25:40 · 1348 阅读 · 0 评论 -
TextAlign 与 margin:0 auto
margin:0 auto 与 text-align:center 的区别基本概念：1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性。支持值 justify。 Example: div { text-ali原创 2016-09-28 19:42:25 · 523 阅读 · 0 评论 -
js混淆压缩加密分析
请看原文原创 2016-10-12 17:15:09 · 2099 阅读 · 0 评论 -
webpack gulp 实现完整前端工程化
作者：陈学家链接：https://zhuanlan.zhihu.com/p/21312474来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容，本小节中将会结合二者构建一个完整的前端工作流，内容目录为：前端工程结构和目标前端工程目录结构gulp cl原创 2016-10-12 14:58:01 · 3019 阅读 · 0 评论 -
gulp for web
前端构建工具gulpjs的使用介绍及技巧gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。本文导航：gulp的安装开始使用gulpg转载 2016-10-12 14:12:58 · 814 阅读 · 0 评论 -
js to progress bar
drag .drag { margin: 0 auto; width: 300px; position: relative; border-radius: 5px; background: yellowgreen; height:原创 2016-10-11 11:19:30 · 493 阅读 · 0 评论 -
use baidu echarts draw china map
*echarts 3 has map.js no longer that request you reload two js file in your pagehtml>html lang="en">head> meta charset="UTF-8"> title>echartsMapdemotitle> script src="echarts.js">s原创 2016-10-10 11:04:30 · 691 阅读 · 0 评论