代码改变世界

随笔分类 - javascript

h5 喜帖

2017-08-29 15:33 by stoneniqiu, 958 阅读, 收藏, 编辑
摘要:地址:http://139.196.27.185:8088/ 因为国庆结婚,需要邀请亲朋好友,网上找了些电子请帖,但大都要收费,贵的还有好几百,有的效果还不太好。于是花了些时间自己写了一个。 就是swiper+css3动画。 https://files.cnblogs.com/files/stone 阅读全文

h5 录音

2017-08-10 20:33 by stoneniqiu, 8540 阅读, 收藏, 编辑
摘要:得益于前辈的分享,做了一个h5录音的demo。效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中。点击即可播放。点击获取录音即可下载最后一次的音频: 播放下载都是围绕blob文件。播放就是让隐藏的au 阅读全文

自动生成proto Js语句

2017-07-28 20:02 by stoneniqiu, 1926 阅读, 收藏, 编辑
摘要:在与后端的WebSocket通信时,前端要带一个proto文件是一个累赘的事情。首先是明显的曝光了协议实体对象,再一个浏览器客户端很容易会缓存该文件,新的协议更新可能导致客户端不能使用,另外在cdn服务器上还需要配置.proto类型客户端才能下载过去。真是遗毒不浅,自己使用的时候会注意这些,但给别人 阅读全文

UglifyJS-- 对你的js做了什么

2017-07-27 08:38 by stoneniqiu, 2689 阅读, 收藏, 编辑
摘要:也不是闲着没事去看压缩代码,但今天调试自己代码的时候发现有点意思。因为是自己写的,虽然压缩了,格式化之后还是很好辨认。当然作为min的首要准则不是可读性,而是精简。那么它会尽量的缩短代码,尽量的保持一行,最大化的减少的空白。我们常用的分号都会被替换成了逗号,短句变成了连贯的长句。 1.立即执行函数 阅读全文

【原码笔记】-- protobuf.js 与 Long.js

2017-07-10 18:19 by stoneniqiu, 3175 阅读, 收藏, 编辑
摘要:protobuf.js的结构和webpack的加载之后的结构很相似。这样的模块化组合是个不错的结构方式。1个是适应了不同的加载方式,2个模块直接很独立。webpack的功能更全一点。但如果自己封装js库这样够用了。而且模块对外统一接口 module.exports。这和node很像。 在处理超过16 阅读全文

微信上传图片

2017-05-26 20:40 by stoneniqiu, 2536 阅读, 收藏, 编辑
摘要:低版本的安卓上传图片是个问题,能出现选择图片,但点击图片后没有反应,转成base64也无解。于是改为用微信的接口上传。和之前的微信分享功能都是基于微信的jssdk。 步骤比我们平时上传到服务器多一步,他是先调用chooseeImage方法获得用户要上传的图片id。然后上传到微信的服务器,微信的服务器 阅读全文

vue2入坑随记(一)-- 初始全家桶

2017-05-17 08:52 by stoneniqiu, 13412 阅读, 收藏, 编辑
摘要:都说Vue2简单,上手容易,但小马过河,自己试了才晓得,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前随便拿全局变量和修改dom的锤子不能用了,变换到关注数据本身。vue的官方文档还是不错的,由浅到深,但是当你用vue-cli构建一个工程的时候,发现官方文档还是不够用,得 阅读全文

【JavaScript】让事件支持先发布后订阅

2017-05-06 09:04 by stoneniqiu, 1270 阅读, 收藏, 编辑
摘要:之前写过一个的事件管理器,就是普通的先订阅后发布模式。但实际场景中我们需要做到后订阅的也能收到发布的消息。比如我们关注微信公众号,还是能看到历史消息的。类似于qq离线消息,我先发给你,你登录了就能收到了。就是确保订阅该事件的方法都能被执行。 其实就是增加了几行代码。缓存下最后一次触发的时的参数。 然 阅读全文

websoket使用Protocol Buffers3.0传输

2017-04-26 20:26 by stoneniqiu, 1773 阅读, 收藏, 编辑
摘要:Protocol Buffers是Google推出的一个数据交换格式,相对于xml它的体积更小,更快,因为它是二进制传输的。3.0相对于2.0变动比较大。这些变动可以去看官方说明。 在前端使用ProtoBuf.js解析.proto文件,先需要再界面上引入protobuf.js。 定义一个.proto 阅读全文

【读书笔记】-- 你不知道的JavaScript

2017-03-24 08:37 by stoneniqiu, 1787 阅读, 收藏, 编辑
摘要:《你不知道的JavaScript》是一个不错的JavaScript系列书,书名可能有些标题党的意思,但实符其名,很多地方会让你有耳目一新的感觉。 1.typeof null "object"// true ES6中JavaScript的类型有:null、undefined、string、number 阅读全文

【webpack】-- 样式加载

2017-03-12 09:08 by stoneniqiu, 11494 阅读, 收藏, 编辑
摘要:加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css-loader会跳过,而只会对内部资源做处理。css-loader处理之后,style-loader会 阅读全文

【webpack】-- 模块热替换

2017-03-09 11:31 by stoneniqiu, 6381 阅读, 收藏, 编辑
摘要:全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新。这个功能主要是用于开发过程中,对生产环境没有任何帮助(这一点区别.net热插拔)。效果上就是界面的无刷新更新。 HMR基于WDS,st 阅读全文

H5缓存-Manifest

2017-03-02 08:47 by stoneniqiu, 5127 阅读, 收藏, 编辑
摘要:在app中更新h5页面一直有缓存问题。默认什么都不做的情况下,app有一定的空间缓存页面。一开始更新之后会马上加载,等到app缓存空间上来之后更新就无法下载了。安卓能够清理缓存空间,ios就只能卸载重装(are u kidding me?)。这是最坏的情况,你可以更换下地址。 no-cache 注意 阅读全文

【webpack】-- 自动刷新与解析

2017-02-26 23:53 by stoneniqiu, 17697 阅读, 收藏, 编辑
摘要:前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整;而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下;另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去)。所以如果要用手工刷新 阅读全文

【webpack】-- 入门与解析

2017-02-20 23:31 by stoneniqiu, 1373 阅读, 收藏, 编辑
摘要:每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档。 webpack是基于node的。先安装最新的node。 1.初始化 安装node后,新建一个目录,比如html5。cmd中切到当前文件夹。 安装node后,新建一个目录,比如html5。cmd中切到当前文件 阅读全文

【读书笔记】-- JavaScript模块

2017-02-14 23:36 by stoneniqiu, 713 阅读, 收藏, 编辑
摘要:在JavaScript编程中我们用的很多的一个场景就是写模块。可以看成一个简单的封装或者是一个类库的开始,有哪些形式呢,先来一个简单的模块。 简单模块 用IIFE创建一个闭包,隔离作用域,避免变量相互干扰。得到foo对象可以直接用了。这种适合小的模块,比如在ag中的写Service。 (functi 阅读全文

【JavaScript吉光片羽】--- 滑动条

2016-12-24 23:03 by stoneniqiu, 449 阅读, 收藏, 编辑
摘要:灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条dom节点id min: 1, // 刻度最小值 stepCount: 5, // 刻度步数 step: 1, // 刻度 阅读全文

【JavaScript吉光片羽】遭遇IE8

2016-11-27 10:28 by stoneniqiu, 614 阅读, 收藏, 编辑
摘要:最初对做兼容性的认知只停留在UI层面,但其实UI层面都还好,因为毕竟你可以直接看得见现象,更为重要的是在JavaScript层面,因为这个部分涉及到功能性,前者最多是体验性的问题。下面扯一下这几天遇到的IE8相关的兼容性问题。 1.所有$.ajax失效 刚开始看到的现象是IE8/9页面切到了留言页面 阅读全文

H5嵌入原生开发小结----兼容安卓与ios的填坑之路

2016-11-19 08:29 by stoneniqiu, 20058 阅读, 收藏, 编辑
摘要:一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也。到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂。接下来数一下踩过的坑。主要分UI展示,键盘,输入框等等。解决bug最苦恼的问题不是没有解决方案,而是你没有找到真正的原 阅读全文

H5图片压缩与上传

2016-10-14 08:40 by stoneniqiu, 28707 阅读, 收藏, 编辑
摘要:接到需求,问前端是否可以压缩图片?因为有的图片太大,传到服务器上再压缩太慢了。意识里没有这么玩过,早上老大丢来一个知乎链接,一看,原来前辈们已经用canvas实现了(为自己的见识羞愧3秒钟,再马上开干)!。 canvas压缩 使用了github上的一个现成库:https://github.com/s 阅读全文

H5图片上传插件

2016-09-28 17:27 by stoneniqiu, 7212 阅读, 收藏, 编辑
摘要:基于zepto,支持多文件上传,进度和图片预览,用于手机端。 $self.css('position', 'relative'); $self.append('<input id="fileImage" style="opacity:0;position:absolute;top: 0;left: 阅读全文

轻量级的日期插件--datebox

2016-09-18 09:04 by stoneniqiu, 2247 阅读, 收藏, 编辑
摘要:jquery的日期插件有好几款,H5中的input也可以自带日期选择。但为什么要再写一个,有两个理由,一个是引用的文件太大,而有时候只需要很简单的功能,二个是想加一些自定义的效果不好改。 我写的这个功能比较简单,可以换月,有预约效果,可以设定预约日期范围,压缩后1.4kb,先上个图,再慢慢解释: j 阅读全文

微信硬件H5面板开发(二) ---- 实现一个灯的控制

2016-09-06 08:53 by stoneniqiu, 5347 阅读, 收藏, 编辑
摘要:在第一节中讲解了openApi的调用,这一篇讲一下如何实现一个灯的控制。就用微信提供的lamp例子来做,将代码扒下来(实在是没办法,没有示例),整合到自己的项目中。lamp源码:http://files.cnblogs.com/files/stoneniqiu/lamp.zip。 你可以自己扒,带参 阅读全文

video.js--很赞的H5视频播放库

2016-08-27 09:18 by stoneniqiu, 30790 阅读, 收藏, 编辑
摘要:video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8。官网:http://videojs.com/ git&demo :http://files.cnblogs.com/files/stoneniqiu/video 阅读全文

深入理解jQuery、Angular、node中的Promise

2016-08-26 08:33 by stoneniqiu, 2217 阅读, 收藏, 编辑
摘要:最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦。为ajax模块、队列模块、ready事件提供基础功能。在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Ang 阅读全文

Nodejs之MEAN栈开发(七)---- 用Angular创建单页应用(下)

2016-07-16 08:44 by stoneniqiu, 1497 阅读, 收藏, 编辑
摘要:上一节我们走通了基本的SPA基础结构,这一节会更彻底的将后端的视图、路由、控制器全部移到前端。篇幅比较长,主要分页面改造、使用AngularUI两大部分以及一些优化路由、使用Angular的其他指令的学习。篇幅虽然长,但熟悉了就是这个套路,特别是第一部分。重点是理解Angular这种操作数据而不是操 阅读全文

Nodejs之MEAN栈开发(六)---- 用Angular创建单页应用(上)

2016-07-12 08:23 by stoneniqiu, 1586 阅读, 收藏, 编辑
摘要:在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA)。这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方式(jade、路由都需要在服务端编译),我们将用Angular在客户端浏览器上跑起来。PS:在正常的 阅读全文

Nodejs之MEAN栈开发(五)---- Angular入门与页面改造

2016-07-08 08:21 by stoneniqiu, 2386 阅读, 收藏, 编辑
摘要:这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端。和Express一样,Angular分离内容,处理视图、数据和逻辑。和MVC模式很相似,但其实Angular定义是MVW框架,W代表(what ever works for you)。意 阅读全文

Nodejs之MEAN栈开发(四)---- form验证及图片上传

2016-06-27 08:27 by stoneniqiu, 2874 阅读, 收藏, 编辑
摘要:这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/ReadingClub 一、form验证 MVC的form验证有三个地方可以做,第一道关就是前端提交之 阅读全文

Nodejs之MEAN栈开发(三)---- 使用Mongoose创建模型及API

2016-06-06 01:23 by stoneniqiu, 4431 阅读, 收藏, 编辑
摘要:继续开扒我们的MEAN栈开发之路,前面两节我们学习了Express、Jade引擎并创建了几个静态页面,最后通过Heroku部署了应用。 Nodejs之MEAN栈开发(一) 路由与控制器 Nodejs之MEAN栈开发(二) 视图与模型 这一节将重点介绍MongoDB以及它的ODM(Object-Doc 阅读全文

Nodejs之MEAN栈开发(二)----视图与模型

2016-06-02 08:30 by stoneniqiu, 2046 阅读, 收藏, 编辑
摘要:上一节做了对Express做了简单的介绍,提出了controller,介绍了路由。这一节将重点放到视图和模型上,完成几个静态页面并部署到heroku上。 导航 前端布局使用bootstrap,从官网下载后置于public文件夹下。打开layout.jade 先做一个导航. block content 阅读全文

Nodejs之MEAN栈开发(一)---- 路由与控制器

2016-05-31 08:17 by stoneniqiu, 5923 阅读, 收藏, 编辑
摘要:因为工作需要,最近再次学习了node,上一次学习node是2014年,纯粹是个人兴趣,学了入门之后没有运用,加上赶别的项目又不了了之。这次正好捡起来。废话不多说,这里的MEAN指的是Mongodb、Express、Angular和Node。 通过整个项目逐步整合在一起。MEAN栈最大的特色不是运用了 阅读全文

JavaScript 事件管理

2016-05-11 08:19 by stoneniqiu, 1428 阅读, 收藏, 编辑
摘要:在设计JavaScript xxsdk的时候考虑到能让调用者参与到工作流程中来,开始用了回调函数。如下: 或者在初始化的传入config。 但问题来了,随着函数越多,第一种方式就显得很烦,每个方法的参数后面要跟一个或者多个回调函数,代码显得不干净,而且只有用户调用的时候才会执行回调,对于没有暴露给用 阅读全文

【读书笔记】-- JavaScript数组

2016-05-03 19:41 by stoneniqiu, 396 阅读, 收藏, 编辑
摘要:数组是一段线性分配的内存,它通过整数计算偏移并访问其中的元素。大多数的语言都会要求一个数组的元素是相同类型,但JavaScript数组可以包含任意类型。 长度 数组的length没有上界,如果用大于等于当前length的数字作为下标保存一个元素,那么length会增大来容纳新的元素,而不会发生边界冲 阅读全文

var与this,{}与function 小记

2016-04-27 23:09 by stoneniqiu, 661 阅读, 收藏, 编辑
摘要:JavaScript var是用来定义一个变量,this常用来定义或调用一个属性或方法。但是在全局范围内,this和var定义变量是等价的。 window window对象有name属性,初始值为空,但第一个console的时候怎么获取值了呢。 发现这个window记录的是上次的值。重新打开页面,只 阅读全文

WebSocket 学习(三)--用nodejs搭建服务器

2016-04-18 08:19 by stoneniqiu, 62406 阅读, 收藏, 编辑
摘要:前面已经学习了WebSocket API,包括事件、方法和属性。详情:WebSocket(二)--API WebSocket是基于事件驱动,支持全双工通信。下面通过三个简单例子体验一下。 简单开始 1.安装node。https://nodejs.org/en/ 2.安装ws模块 ws:是nodejs 阅读全文

WebSocket 介绍(二)-WebSocket API

2016-04-10 13:48 by stoneniqiu, 12113 阅读, 收藏, 编辑
摘要:这一章介绍如何用WebSocket API来控制协议和创建应用,运用http://websocket.org 提供的现有WebSocket服务器,我们可以收发消息、创建一些简单的WebSocket应用。一步一步的学习使用WebSocket API,最后我们会讨论浏览器的支持度和连通性。这一章的重点是 阅读全文

【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

2015-06-29 00:48 by stoneniqiu, 2764 阅读, 收藏, 编辑
摘要:Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用。什么是单页应用?Single-Page Application最常用的定义:一个最初内容只包含html和JavaScript,后续操作通过Restful风格的web服务传输... 阅读全文

【读书笔记】javascript 继承

2015-02-02 20:55 by stoneniqiu, 484 阅读, 收藏, 编辑
摘要:在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行。 让Brid 继承 Animal,并扩展自己fly的方法。 function Animal(name) { this.name... 阅读全文

Html5 舞动的雨伞

2015-01-03 11:15 by stoneniqiu, 1839 阅读, 收藏, 编辑
摘要:HMTL5的学习断断续续,方法不用又生疏了,昨天做的一个雨伞的Demo,先看看效果主要是运用了中心点变换和旋转两个方法。不同的动画用定时器控制,下面是全部代码: 自己觉得蛮有意思,这些小而美的东西是不是给你有所启发呢。如果不是建立对象,则画出来的雨伞不容易控制。下面的代码就是静态的... 阅读全文

【吉光片羽】js横向滚动与浮动导航

2014-12-25 10:41 by stoneniqiu, 194 阅读, 收藏, 编辑
摘要:1.横向滚动,这个方法是见过最简洁的了。#demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 1170px;border: 1px solid red; margin-left: 10px;}#d... 阅读全文

【读书笔记】Html5游戏开发

2014-08-07 00:13 by stoneniqiu, 1119 阅读, 收藏, 编辑
摘要:一直对HMTL5做游戏饶有兴趣,而这本书刚好就是HTML5 2游戏初级入门的书。Demo简单注释详细,可以拿来练练手,一个星期左右就可以读完。若要追求酷炫高大上效果,这本书恐怕要让你失望了。但作为上手书还是不错的。 http://pan.baidu.com/s/1dD29Nhf 一共十章,... 阅读全文