js绘制购物车抛物线动画

2016年09月12日 18 阅读

天猫将商品加入购物车会有一个抛物线动画，告诉用户操作成功以及购物车的位置，业务中需要用到类似的效果，记录一下实现过程备忘，先上demo一开始没有想到用抛物线函数去做，也已经忘记还有这么个函数了，想着抛物线本质上就是向右和向上方向各有一个速度（就上面的demo而言），向右的速度匀速，向上的速度递减，减到0后再反方向递增，元素的left和top值随时间递增而改变，元素运动轨迹就是抛物线，这个思路不具备通用性，实现也比较复杂，放弃了。之后参考了张鑫旭用抛物线函...

vue.js入门教程之绑定class和style样式

2016年09月12日 15 阅读

一、前言相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理它们：我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。二、绑定 HTML Class请注意：尽管可以用 Mustache 标签绑定 class，比如 class="{{...

纯JS实现可拖拽表单的简单实例

2016年09月12日 10 阅读

因为要用到可拖拽表单，个人要比较喜欢自己动手，不怎么喜欢在不懂实现或者原理的情况下用插件，所以查找资料实现了一个。思路：放入：用mousedown判断鼠标点击的位置是否在触发控件的位置，如果是，mousemove的时候clone一个控件，修改透明度，然后放入容器内的时候remove这个控件，并且在容器内生成一个放入的控件（放入的控件和触发的控件可以不一样）拖拽：同样的， mousedown的时候判断是哪个控件，mousemove的时候需要放一个占位div放...

js实现StringBuffer的简单实例

2016年09月12日 17 阅读

实现：function StringBuffer（） { this.__strings__ = []; }; StringBuffer.prototype.Append = function （str） { this.__strings__.push（str）; return this; }; //格式化字符串 StringBuffer.prototype.AppendFormat = function （str） { for （var i = 1; i ...

CSS3 3D 技术手把手教你玩转

2016年09月12日 12 阅读

css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视（perspective）、旋转（rotate）和移动（translate）。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。当然用理论来说明，估计你还不明白。下面是3个gif：沿着X轴旋转沿着Y轴旋转沿着Z轴旋转旋转应该没问题了，那理解平移起来就比较容易了，就是在在X轴、Y轴、z轴移动...

在Docker快速部署Node.js应用的详细步骤

2016年09月12日 15 阅读

一、前言可能还有一些同学不了解docker这个项目，docker是由go语言编写的，一个快速部署的轻量级虚拟技术项目，他允许开发人员将自己的程序和运行环境一起打包，制作成一个docker的image（镜像），这样部署到服务器上，也只需要下载这个image就可以将程序跑起来，免去每次都安装各种依赖和环境的麻烦，还能够做到应用程序之间的隔离二、实现准备我会先创建一个简单的Node.js web app，来构建一个镜像。然后基于这个Image运行一个contai...

js实现String.Fomat的实例代码

2016年09月12日 13 阅读

引言拼接字符串用习惯了C#的String.Format。今天看别人的代码在js中也封装了一个js的String.Format，用来拼接字符串和DOM。js实现和调用String.FormatString.Format = function （str） {for （var i = 1; i < arguments.length; i++） {var parent = "\{" + （i - 1） + "\}";var reg = new RegExp（...

AngularJs Dependency Injection（DI，依赖注入）

2016年09月12日 12 阅读

一、Dependency Injection（依赖注入） 依赖注入（DI）是一个软件设计模式，处理代码如何得到它所依赖的资源。 关于DI更深层次的讨论，可以参观Dependency Injection（http://en.wikipedia.org/wiki/Dependency_injection），Inversion of Control（http://martinfowler.com/articles/injection.html），也可以参观软...

浅谈js中StringBuffer类的实现方法及使用

2016年09月12日 14 阅读

如下所示：<strong>JAVA中有一个StringBuffer类，js中却没有下面来自己实现一个简单的js的StringBuffer类。</strong>//创建一个StringBuffer类 ，此类有两个方法：一个是append方法一个是toString方法function StringBuffer（） {this.__strings__ = [];};StringBuffer.prototype.append = funct...

AngularJs Understanding the Model Component

2016年09月12日 20 阅读

在angular文档讨论的上下文中，术语“model”可以适用于单一对象代表一个实体（例如，一个叫” phones”的model，它的值是一个电话数组。）或者作为应用的全部数据Model（所有实体）。 在angular中，model可以是任意数据，可以通过angular的scope对象的属性来获取model。属性的名称是model的标识，值可以是任意javascript对象（包括数组和原始数据）。 javascript想成为model的唯一的条件是对...

JS 拼凑字符串的简单实例

2016年09月12日 17 阅读

和Java一样，JS中直接用"+"号拼凑字符串是很耗费资源的，所以在大量拼凑字符串的情景中，我们也需要一个类似于StringBuffer的工具，下面利用Array.join（）方法实现StringBufferfunction StringBuffer（） { this._strs = new Array; } StringBuffer.prototype.append = function （str） { this._strs.push（str）; }; ...

AngularJs Understanding the Controller Component

2016年09月12日 15 阅读

在angular中，controller是一个javascript 函数（type/class），被用作扩展除了root scope在外的angular scope（http://www.jb51.net/article/91749.htm）的实例。当我们或者angular通过scope.$new API（http://docs.angularjs.org/api/ng.$rootScope.Scope#$new）创建新的child scope时，有一个选...

js两种拼接字符串的简单方法（必看）

2016年09月12日 13 阅读

如下所示：function（msgArr） {var len = msgArr.length;var n = 0 ;var htmlSpan = "";for （var j = 0; j < len - 1; j++） {htmlSpan += "<span>·</span>";}htmlSpan += "<span class="on">·</span>";var imgs = [];var img ...

解决node.js安装包失败的几种方法

2016年09月12日 13 阅读

镜像使用方法（三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在）:1.通过config命令npm config set registry https://registry.npm.taobao.org npm info underscore （如果上面配置正确这个命令会有字符串response）2.命令行指定npm --registry https://registry.npm.taobao.org info undersco...

AngularJsE2E Testing 详解

2016年09月12日 19 阅读

当一个应用的复杂度、大小在增加时，使得依靠人工去测试新特性的可靠性、抓Bug和回归测试是不切实际的。 为了解决这个问题，我们建立了Angular Scenario Runner，模仿用户的操作，帮助我们去验证angular应用的健壮性。一、 总括 我们可以在javascript中写情景测试（scenario test），描述我们的应用发生的行为，在某个状态下给与某些互动。一个情景包含一个或者多个”it”块（我们可以将这些当作对我们应用的要求），依次由...

浅谈JS中的三种字符串连接方式及其性能比较

2016年09月12日 14 阅读

工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题，在JS中处理这类问题一般有三种方法，这里将它们一一列出顺便也对它们的性能做个具体的比较。第一种方法 用连接符“+”把要连接的字符串连起来：str="a";str+="b";毫无疑问，这种方法是最便捷快速的，如果只连接100个以下的字符串建议用这种方法最方便。第二种方法 以数组作为中介用 join 连接字符串：var arr=new Array（）;arr.push（a）;arr.push（b）;v...

jquery 中toggle的2种用法详解（推荐）

2016年09月12日 14 阅读

一、在元素的click事件中绑定两个或两个以上的函数toggle不像bind需要在后面添加"click"来绑定click触发事件，toggle本身就是click触发的（而且只能click触发），如下实例：<input id="btntest" type="button" value="点一下我" /><div>我是动态显示的</div><script type="text/javascript">$（func...

AngularJsUnderstanding Angular Templates

2016年09月12日 23 阅读

angular template是一个声明规范，与model、controller的信息一起，渲染成用户在浏览器中所看到的视图。它是静态的DOM，包括HTML、CSS、angular特别的元素和angular指定的元素属性。angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM。 下面是我们可以在template中使用的angular元素已经元素属性的类型：Directive（http://www.jb5...

总结Javascript中的隐式类型转换

2016年09月08日 15 阅读

JavaScript的数据类型分为六种，分别为null,undefined,boolean,string,number,object。object是引用类型，其它的五种是基本类型或者是原始类型。比如像是Number（） ，还是parseInt（） 、parseFloat（）都属于显示类型转换（强制类型转换）；这一节我们来看一下隐式类型转换（自动转换）。数值自动转换为字符串var a = 123;alert（a+"456"）; // 输出 123456“+”...

Bootstrap和Angularjs配合自制弹框的实例代码

2016年09月08日 19 阅读

指令directive（"bsPopup", function （$parse） {return {require: "ngModel",restrict: "A",link: function （scope, elem, attrs, ctrl） {scope.$watch（function （） {return $parse（ctrl.$modelValue）（scope）;}, function （newValue） {if （newValue ==...