- 博客(73)
- 收藏
- 关注
原创 vue 全局注册
当你注册完之后,可以在任何组件中直接使用,而不需要在各个组件中引入并局部注册通常公共组件放在src文件夹下的components文件夹中,这里的组件进行全局注册。* 全局组件1、在src文件夹中新建utils文件夹,utils文件夹中一般存放通用的辅助文件(方法、数据等)2、在文件夹中新建components.js文件3、在components.js文件引入所有要注册的全...
2020-04-09 11:40:56 297
原创 Vue.js 组件 - 组件间的循环引用
例如:组件A,组件A里有一个子组件C和D,组件C的子组件又引用了组件D,这种情况会报警告循环调用组件时,组件比vue实例后创建,官方文档里写组件必须先于实例化引入,所以说组件没有正确的引入。Vue.component 全局注册组件时,组件循环引用可以解开。全局引入组件,并且在vue实例化前。import PosterTemplate from '@/components/Sma...
2020-04-09 11:11:35 1946
转载 component的参数传递
参数传递和绑定方式:bindings声明,如:bindings: {data: '<',rangeType: '@?',customClass: '@',}参数调用方式:在js的controller里通过this.data可以调用到,在模板里可以通过$ctrl.data调用到,'$ctrl'是模板里conroller默认的名称,如果在定义component的时候定义了'...
2018-10-25 17:07:49 6679
转载 momentJS日期处理类库---时间加减处理
计算最近在使用JavaScript计算时间差的时候,发现很多问题需要处理,在查看momentJS之后,发现非常容易。 console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间 console.log(moment().subtract(10, "days").format("YYYY-MM-DD"))...
2018-10-25 16:52:58 1925
转载 使用angularjs定义html中的属性ng-attr-(suffix)
html中的属性很多,同样可以使用angularjs来定义:ng-attr-(suffix)=只能使用变量定义<div title="angularjs中的title">title</div><div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题--&
2018-10-12 10:13:01 1585
转载 解决angular表达式闪一下
使用 angular JS 的时候,把 angularJS 放到文件底部,在渲染页面的时候,会出现闪一下的情况:解决办法一:使用 ng-cloak style type="text/css">[ng-cloak]{display:none;}style>body ng-app ng-init="name='张三'" ng-cloak> {{name}}body>script type=
2018-01-19 15:50:30 873
转载 AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧。Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered。什么是Promise以前了解过Ajax的都能体会到回调的痛苦,同步的代码很容易调试,但是异步回调的代码,会让开发者陷入泥潭,无法跟踪,比如:funA(arg1,arg2,function(){ funcB(arg1,arg2,
2018-01-18 17:30:59 209
转载 AngularJS 使用$sce控制代码安全检查
由于浏览器都有同源加载策略,不能加载不同域下的文件、也不能使用不合要求的协议比如file进行访问。在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因此常常会遇到一个iframe中的ng-src无法使用。什么是SCESCE,即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确,但是通过字面理解,
2018-01-18 17:13:59 308
转载 angular controller之间通信方式
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结。在 Angular 中,Controller 之间通信的方式主要有三种:1)作用域继承。利用子 Controller 控制父 Controller 上的数据。(父 Controller 中的数据要为引用类型,不能是基本类型,原因参见 AngularJS中的作用域 一文)
2018-01-17 18:23:55 230
转载 angularjs的$on、$emit、$broadcast
如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信。 2.通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。什么是事件如同浏览器响应浏览器层的事件,比如鼠标点击、获得焦点,angular应用也可以响应angular事件angular事件系统并不与浏
2018-01-17 18:02:22 185
转载 AngularJS常用服务($http、$location、$sce等)
这篇博客,只是简单地说下AngularJS中的常用的系统(自带)服务。如果逻辑不清晰,就当作是一个参考手册吧,来查查用法什么的。 另外,附上一些参考网站: AngularJS手册:http://man.hubwiz.com/manual/AngularJS(汇智网) AngularJS常用服务:https://docs.angularjs.org/api/ng/service(Angu
2018-01-05 18:27:53 446
转载 AngularJS 指令系统
指令的构造函数会返回带有属性的JavaScript 对象。这些内容在AngularJS 主页中都有清晰说明。以下是我对一些属性的理解:restrict: 说明指令在HTML中的应用形式,备选项有"A"、"E" 和 "C", "M" ,分别代表 attribute、element、class和comment(默认值为"A")。我们将更多的关注attributes-如何创建UI元素。scope
2018-01-05 18:25:30 174
转载 angularJs三种依赖注入方式与minify
依赖注入(饭来伸手,一来张口)DI,Dependency InjectioAngularJs使用module“名字/对象”注册表来作为容器,实现DI。依赖注解有三种方式,(数组标注、添加$inject属性、隐式声明)。其中前两种在代码minify时不会被破坏,推荐使用第一种方式。第二种方式可以自己手动改写(下面有例子),也可以使用工具ngAnnotate对隐式声明进
2018-01-04 17:12:11 350
原创 angular绑定初始化及bootstrap手动初始化
要启动一个angular应用,可以使用ng-app指令,也可以调用bootstrap方法手动启动。绑定初始化ng-app 通过绑定来进行angular的初始化,会把js代码侵入到html中.(缺)如果引用了angular.js脚本,而且document.readyState为“complete”状态,那么AngularJS会在DOMConten
2018-01-04 16:43:40 1078
转载 AngularJS中module的导入导出
在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的module中,然后把各个module汇总到该领域的一个文件中,再由主module调用。就是这样:以上,app.mymodule1, app.mymodule2,app.mymodule都是针对某个领域的,比如app.mymodule1中定义directive, app.mymodule2中定义contr
2018-01-04 16:08:22 2291
转载 入门Webpack,看这篇就够了
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了
2018-01-03 14:48:20 270
转载 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)
学习了AngularJS好长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分。当初看的是《AngularJS权威指南》这本书,但是感觉这本书关于这方面讲的不是很细致,另外吐槽一下,这本书中文版印刷的质量不是很好,很多地方都有错误;不过讲的还是可以的,是一本学习AngularJS的好书。下面我们就来详细分析一下指令的作用
2017-12-15 18:29:50 325
转载 CSS3 选择器
选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 元素
2017-11-30 11:40:52 175
转载 同源策略详解
同源策略在web应用的安全模型中是一个重要概念。在这个策略下,web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时。源是由URI,主机名,端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。对于普遍依赖于cookie维护授权用户session的现代浏览器来说,这种机制有特殊意义。客户端必须在不同站点提供
2017-11-17 18:15:34 1656
转载 localStorage使用总结
localStorage使用总结一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localS
2017-07-14 16:45:44 311
转载 jquery ajax超时设置
var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get', //请求方式,get或post data :{}, //请求所传参数,json格式 dataType:'json',//返回的数据格式 success:function(da
2017-07-13 16:18:05 407
转载 JavaScript执行效率小结
JavaScript执行效率小结Javascript中的作用域链、闭包、原型继承、eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下。Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易
2017-07-13 14:57:36 225
转载 angular路由 ui.router
angular路由路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分。那么,对于 angular 而言,它自然也有 内置 的路由模块:叫做 ngRoute 。不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!!于是,一个基于 ngRoute 开发的 第三方路由模块
2017-07-10 16:31:40 491
原创 angular 自定义服务
在AngularJS中,我们经常将通用的业务逻辑封装在服务里面,这样一来,不仅减少了代码量,而且使出错率也降低了,代码的易读性也提高了,所以说,我们经常用到了业务逻辑,或者是说持久化数据化操作应该放在自定义的服务里面,而不是Controller里面。下面说一下provider、service、factory的定义方式还有主要区别1 , factory服务app.factory(
2017-07-07 17:27:11 444
转载 angularJS constant和value
angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种。要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用。1,通过var 直接定义global variable,这根纯js是一样的。2,用angularjs value来设置全局变量 。3,用angularjs constant来设置全局
2017-07-06 17:34:27 299
转载 sass
sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。//文件后缀名为sass的语法body background: #eee font-size:12pxp backgro
2017-07-05 15:56:17 482
转载 动态加载JS脚本
1、直接document.write document.write(""); 2、动态改变已有script的src属性 s1.src="test.js" 3、动态创建script元素 var oHead = document.getElementsByTagN
2017-06-30 18:30:50 333
转载 多个JS文件性能优化
一个页面加载多个js,有一定影响的,加载速度会慢。js过多既延长了用户的等待时间,又大量消耗cpu。而且放在页面的前面的话,会影响页面渲染造成用户体验很差,用户会感觉东西迟迟没有出来 。最好压缩一下js或者把多个 js 文件合成一个,尽量减少客户端与服务器的交互。页面中引入的JS文件是阻塞式加载的,这样会影响页面性能。以下是JS文件性能优化方法:一:将所有的标签放到页面底部,也就是闭合
2017-06-30 18:18:05 1971
转载 关于JavaScript中apply与call的用法意义及区别(转)
对于apply和call两者在作用上是相同的,但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,va
2017-06-28 18:33:51 400
转载 link和@import的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:XML/HTML代码 XML/HTML代码 @import url("CSS文件"); 两者都是外部引用CSS的方式,但是存在一定的区别:
2017-06-13 16:33:44 212
转载 jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。单纯判断滚动条方向function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win
2017-05-18 16:15:08 1157
转载 JS控制滚动条滚动的位置
方法一:用scroll方法实现滚动条位于最底端。 方法二:用scrollBy方法实现滚动条位于最右端。方法三:用scrollTo方法实现水平滚动条和纵向滚动条均居中。虽然使用scroll、scrollBy和scrollTo方法的效果一样,但是彼此之间还是有一些区别的。经测试如果使用某一确定的位置参数时,不需要带单位,例据顶端300像素:
2017-05-18 16:02:04 2380 1
转载 手机移动端web 禁止手机返回功能
手机移动端web 禁止手机返回功能的最好方法 虽然很变态,但是很有效.var href = window.location.href; window.location.href = href + "#aaa"; window.location.href = href + "#bbb"; win
2017-05-16 17:16:49 4525 1
转载 利用js实现 禁用浏览器后退
现在很多的内部系统,一些界面,都是用户手动点击退出按钮的。但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的。容易出现误操作。 所以在有些页面上,适当的禁用浏览器的后退,是可以提高很大的用户体验。 在网上查,可以查到很多js禁用后退的材料。1、回退后,产生一个前进事件。 这种方式,不算是一个满意的解决方式。
2017-05-16 17:10:43 865
转载 angularJs 过滤器
1、uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} // 结果:tank is good2、date 格式化{{1490161945000 | date:"yyyy-MM-dd HH
2017-03-24 18:02:03 241
转载 angulaJs 表单验证相关
Angular 的表单属性 $valid, $invalid, $pristine, $dirtyAngular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和输入.属性类描述$validng-validBoolean 告诉我们这一项当前基于你设定的规则是否验证通过
2017-03-24 17:05:32 312
转载 AngularJS ng-class
有三种方法:1、通过$scope绑定(不推荐)2、通过对象数组绑定3、通过key/value键值对绑定实现方法:1、通过$scope绑定(不推荐):[javascript] view plain copy function ctrl($scope) { $scope.clas
2017-03-24 16:53:29 226
转载 three.js之性能检测插件(state)
关于性能:测试一个程序,性能上是否有瓶颈,在3D世界里,经常使用帧数的概念,首先我们来定义一下帧数的意义。帧数:图形处理器每秒钟能够刷新几次,通常用fps(Frames Per Second)来表示关于性能:测试一个程序,性能上是否有瓶颈,在3D世界里,经常使用帧数的概念,首先我们来定义一下帧数的意义。帧数:图形处理器每秒钟能够刷新几次,通常用fps(Frames
2017-03-16 17:09:45 5523
转载 replaceWith()和replaceAll() 和html()
区别在于,html()会替换指定元素内部的HTML,而replaceWith()会替换元素本身及其内部的HTML。div id="myid" />12345// Text$('#myid').html('Text'); // T
2017-03-07 17:54:20 2572
转载 jquery里面.length和.size() index()有什么区别
1.针对标签对象元素,比如数html页面有多少个段落元素 那么此时的$("p").size() == $("p").length2 .计算一个字符串的长度或者计算一个数组元素的个数那么此时只能用length而不能用size()index() 获取当前元素的索引$(document).ready(function(){ $("li").click(function(
2017-03-07 17:25:09 1111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人