随笔分类 - JavaScript
摘要：此方案用于设置代理和修改镜像地址都不能解决问题使用1.npm root 确认node模块的根文件夹，全局要加-g。 osx同样是此命令,先清除缓存。npm cache clean C:\Users\Administrator>npm root -gC:\Users\Administrator\AppData\Roaming\npm\node_modules2.去npmjs.org找到对应模块如：https://www.npmjs.org/package/fis-plus3.打开该模块Repository地址： 如https://github.com/xiangshouding/fis-p
阅读全文
摘要：最近在做一个个人项目，数据库尝试使用了mongodb、sqlite和mysql。分享一下关于mysql的连接池用法。项目部署于appfog，项目中我使用连接池链接数据库，本地测试一切正常。上线以后，经过几次请求两个数据接口总是报503。一直不明就里，今天经过一番排查终于顺利解决了。1.mysql 链接普通模式mysql的普通用法如下所示： var mysql = require('mysql'), env = { host : 'localhost', user : 'root', password :...
阅读全文
摘要：使用npm安装node模块时经常有卡住安装失败的情况，如图所示。原因在于npm服务器在美国，还有就是某强大的防火墙作用。这样的问题导致很多新手放弃使用node，几乎每天都有新手再问这个问题。现在分享一下解决这个问题的解决方案1.可以通过一劳永逸的方式修改代理地址2.更换npm源拼rp（谢谢供图的低胸）环境确认 1.确定一下你的npm config情况npm config ls 2.详解 1.npm默认源地址 2.用户配置文件所在地址 3.代理服务器 4.用户配置的源地址修改方案1.土鳖式修改npm用户配置文件.npmrc，路径在上图的2，如果没有就自贱一个。用纯文本编辑器打开编辑选一...
阅读全文
摘要：css产出sourcemap有什么用呢，可能大家要问这个问题了。请移步这里https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN在chrome中我们通过sourcemap可以直接调试less源文件文件，这是一个非常强大的功能。下面由我为大家道来1.在chrome中开启dev工具，开启容许CSS source maps设置2.webstorm中只要创建了less扩展名的文件，就会有提示只要你同意就会创建一个firewatchers任务，但是这个默认的任务只能编译出css。我们需要对这
阅读全文
摘要：大家都有过用-min.js开发的经历，但这样的脚本调试非常头疼。如果使用为压缩版的，上线前又要去压缩，sourcemap的出现完美解决了这一问题。即便是chrome提供了格式化代码但阅读压缩后的代码环视很吃力的。以angularjs为例，谈谈sourcemap的使用。我的文件夹结构如下：由于google经常被墙所以建议把angular.jsangular.min.jsangular.min.js.map都下载到本地。并且修改angular.min.js中sourcemap的配置，指向本地map文件。//# sourceMappingURL=angular.min.js.maphtml代码如下：
阅读全文
摘要：思考： 1.grunt以工程为单位安装插件？ 如果有新工程就要重新安装插件或者把安装好的插件拷贝过去。这样很麻烦，解决方案是需要用grunt的项目统一放在grunt项目中。 2.每次需要针对项目编写gruntfile.js？ a.我们可以把文件夹，路径用变量代替。传入xx.json或者用命令行传参的方式。 还记得initConfig中的grunt.file.readJSON('package.json')这个方法么？我们可以写一个config.json,用这个方法读入就可以获取变量。 config.json如下 { "concat": { "dis
阅读全文
摘要：以下例子来自真实项目，有所删减grunt-test project目录结构如下一我的目的：1.在src-dev目录中开发最终产出于src目录2.src-dev中的index目录相当于一个widget二准备工作完成这项工作我需要那些步骤才能做到呢。1.需要先准备好合并压缩好的css（common/reset.css+index/c.css）合并压缩放置与一个零时文件夹中待用。2.其次压缩index/j.js放置于零时文件夹中。3.再者把css、js、tpl（index/t.html）inline到layout（index.html）中三编写gruntfile开始编写gruntfile.js/gr
阅读全文
摘要：摆脱混乱的html文件中开发，拥有development与product模式是我们梦寐以求的。我买的需求是：1.产出一定格式的目录结构，以供日常开发使用，脚手架功能。2.在开发模式环境中我们按照文件类型不同分开开发，甚至html也分成小的区块widget化利于协作开发和维护，产出时合并成一个html，外联资源inline化。3.在编码过程中实时保存并自动刷新浏览器，可以查看结果。4.编码过程中进行代码检查，单元测试。5.产出环境我们把这些碎片文件按照逻辑顺序压缩合并打包到一起组合成html，减少请求和代码体积。6.上线后生成开发文档。grunt 有没有这样的能力呢，接下来我们一起探索。1.脚手
阅读全文
摘要：在mobile上使用iscroll的话，默认启用touch事件绑定，由于touch事件非常灵敏。如果手指触摸到连接的话，滑动换没完成浏览器就会默认打开连接操作。这样就不能完成正常滚动。 iscroll的设计思想是在一个页面完成操作，没有新开标签打开页面的方式，那么既要用iscroll又要实现新页面打开的功能怎么办能？ time.qq.com的处理方式是，整个页面都没有使用a标签，完全用脚本操作界面的转换。 http://h5.m.sohu.com/ 的处理方式是使用了a 和href，href值是hash形式的也不会造成新页面打开 http://ipad.hao123.com/#index...
阅读全文
摘要：web App基本信息先介绍一些基本信息，后面我会对架构设计进行剖析，敬请关注（不定期更新）。在线演示地址：http://www.sinreweb.com/im/源码github地址：https://github.com/Neverland/imageMagic 该项目是一个真正意义上的web 应用软件，为国内某大型互联网图库的在线编辑工具。项目的初衷为了使编辑日常处理图片的需求可以在浏览器中完成，避免小改动也使用笨重的ps。一方面ps的学习成本也很高，有一个简单使用的在浏览器中运行纪图像处理工具，降低新编辑的学习成本。 开发这个项目公司一方面也可以做技术储备，对新浏览器新技术有一定认知和..
阅读全文
摘要：大家也需对windows 8上可以用javascript开发Metro 界面的netive app有所了解。其实osx上也提供了类似的功能，OS X v10.4 Tiger发布时提供了一个Dashboard应用程序，用户可以自定义添加widget应用小程序。用户可以通过f4热键，方便的启用Dashboard。不得不说一下，Dashboard也是大名鼎鼎的canvas技术的发源地。 运行在Dashboard中的小程序，完全使用HTML，DOM，CSS，javaScript技术，因此可以说这些对前端工程师完全没有难度。APPLE也提供了开发IDE，Dashcode。 Part1 IDE简介...
阅读全文
摘要：又重复造了个轮子，重复造轮子当然要有优点要不就没有存在价值。使用简单，方便。只要5行代码就可生成年历。input date已经是一个原生控件opera和chrome已经支持，日历控件逻辑比较复杂，要做到尽善尽美也是不容易的，也是比较锻炼编码的，所以学习意义大于实际意义。而且这个控件也是多年心愿，最近有时间写写停停，终于坚持下来就拿来和大家分享了。传送门特点1.此日历插件特点在于简单易用，要保证功能实现最低要求一个参数。2.个性化配置有强大的自定义事件和多个个性化参数可选。3.采用原型继承，扩展派生非常方便。4.跨浏览器，保证可用性。5.采用表格做载体，无样式也可以正常使用功能。6.缓存，已生成
阅读全文
摘要：传送门时间练利用两个时间之间的差别与整个时间轴的长度运算得来locateHandler = function () { var referTime = (that[that.length] - that[0]) / 86400000, i = 0, len = that.handler.length, temp = 0; for (; i < len;) { temp = ((that[i] - that[0]) / (referTime * 86400000)) * that.parent.offsetWidth; that.fx(that.handler[i], 'left&
阅读全文
摘要：支持es5.1的新浏览器function上增加了一个name属性，这样调试的时候就很容易追踪到具体调用当前方法的函数。function a(){ console.log(arguments.callee.caller.name );//b}function b(){ a();}b();chrome 21,firefox 13,opera 11.64本人亲测可用
阅读全文
摘要：如果要做交换两个变量的值，有不想使用中间量。我采用了处理函数arguments属性的方法function exchange(a,b){ var args=arguments; args=[].slice.call(args).reverse(); a=args[0],b=args[1]; console.log(a+' '+b);//10,1};exchange(1,10);如果是firefox这样支持ECMA6语法的浏览器还可以变的更短，使用结构赋值可以大大减少代码量；function exchange(a,b){ [a,b]=[].slice.call(arg...
阅读全文
摘要：可能有人看到这个标题就嘿嘿一笑，JSON我还不知道么！虽然我们经常使用JSON，但是很多人还是容易混淆Javascript Object和JSONJSON，是一种是一种轻量级的数据交换格式，他的全名是JavaScript Object Notation（JavaScript对象表示法），属于ES3标准的一个子集。由于JSON的易用性，现在流行与各个领域出现了各种变体。在我们熟知的AJAX中，X所代表的XML基本已经被JSON代替。由于跨浏览器获取跨域数据JSONP也是非常好的一种解决方案。WEB开发中基本免不了要与JSON打交道。现实中很多人分不清楚什么是javascript object 什
阅读全文
摘要：html5改进最大的是form表单控件拾色器作为其中一种已经被opera 和chrome21支持了，但是UI非常不尽人意。而且比较多的旧浏览器还是需要这个功能的。所以自己就做了这样一个控件，控件原型主要来自著名的web开发软件dreamweaver的web安全色拾色器。html的拾色器<input type="color" />色彩生成算法来自【蜃楼寻梦】特别感谢。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
阅读全文
摘要：目前有很多css属性都是私有方式实现的，想用就要加一堆破前缀，-moz-,-ms-,-o-,-webkit-;如果在样式表里改一个值就需要从新把所由的都改一遍非常麻烦。或者用dom style去设置一个元素的style也非常麻烦，大部分都是驼峰式的，firefox是个另类，MozTransition要处理成这样的，不管用正则还是别的方式都不是很好处理。小的简单封装了一个方法，用起来还不错。用dom style的cssText直接注入或者，调用后拷贝到样式表都比较方便。fixCSS('transition','all .8s ease-in 1s');functi
阅读全文
摘要：还在终端敲命令，定位到文件夹然后node xxx.js? 你out了。现在我们有更好的调试nodejs方式为什么不去使用呢，只需要一个快捷键而已。ws本身对nodejs有良好的支持，利用ws开发调试nodejs生活将变得很轻松。1.安装nodejs，nodejs已经提供了各平台的编译过的文件不用辛苦编译了，下载安装对应自己平台的版本。http://nodejs.org/2.安装javascript神器webstorm，webstorm也是一个好软件，支持多平台。特别提醒ws是是一个商业收费软件，可以试用30天。http://www.jetbrains.com/webstorm/3.打开ws..
阅读全文
摘要：1.跨浏览器，主流浏览器都可以运行2.纯javascript开发。3.配置实用方便。4.二次开发简单，易用。传送门 在线试玩成品预览 用一张图片用坐标的方式生成拼图单元格，类似css sprite。大致思路是，每个单元格有对应的两个索引，由数据驱动显示。创建实例时吧0-9乱序排列，每个单元格对应两个索引，一个是真实所在位置的索引，一个是记录现在位置的索引。拖动图片的时调整记录现在位置的索引，去对比原始数组如果值相等，那么就可以确定拼图完成。1.乱序排列[0-9]的数组生成一个新数组，来产生拼图单元格的排序。为了避免生成不符合需求的数组，比较然后递归。indicator.fn.unordere.
阅读全文
