Liu jinfang's Nodes

Quick notes


  • 首页

  • 分类

  • 归档

  • 标签

angularjs常用的指令归纳

发表于 2017-08-02 | 分类于 技术积累

参数传递的形式

考虑到最终的项目的运行的时候,都会采用压缩,然而,在angularjs在执行的过程,它会根据传递的形参来接收实参的值,因此,为了避免在压缩过程中,传递的形参被代替,因此控制器中,传递的参数需要写成以下模式。
模块对象.controller(‘控制器名’,[‘参数’,function(参数){}])

作用域

它也存在着作用域链,现在当前的控制器中去找,如果没有则会到父控制器找,如果没有,则会找到全局作用域下。页面一上来的时候 首先会执行 run方法 并且只会执行一次,项目初始化。
模块对象.run([‘$rootScope’,function($rootScope){}]) 此方式可以设置全局作用域。

阅读全文 »

词法作用域和块级作用域的介绍

发表于 2017-07-28 | 分类于 javascript

块级作用域

定义: 使用代码块来限定标志的使用范围。
块级作用域的访问范围 : 从变量的声明开始到变量所在的 最近的 花括号( { } ) 结束.
注意:ES5 以前是不支持 块级作用域的, 只支持词法作用域.

词法作用域

定义: 代码在编写过程中出来的作用范围。js执行过程分两个阶段:预解析, 解释执行。
块级作用域的访问范围 : 词法作用域与块级作用域不同, 在 js 中词法作用域的变量在当前作用域中具有全局可访问性.

阅读全文 »

清除浮动的方式

发表于 2017-07-25 | 分类于 技术积累

方法一:如果高度是固定的,给父级加height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用

阅读全文 »

angularjs自定义指令及过滤器介绍

发表于 2017-07-22 | 分类于 Rendering Engine

操作DOM的方式(代码的执行顺序run -> 控制器 -> 自定义指令)

语法:模块对象.directive(‘指令名称’,[function(){ return{}}])
备注:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
return {
// angularjs提供给我们的写DOM操作的地方
link:function(scope,element,attributes){
// 注意传入的参数的顺序,必须是scope,element,attributes
// element 指令所在的元素 jqLite对象
//scope 指令所在作用域中的$scope
//attributes 指令所在的元素身上的属性集合
element.css('background','red')}
template:<div>333333</div>,
templateUrl:'./tpl/tpl-1.html' //必须在服务器中打开
transclude:true
//告诉angularjs保留指令所在元素内部的原有内容:template:'<div><span ng-transclude></span>333333 </div>'
replace:true
//在HTML页面中 指令所在的元素不想要了, 我只要保留指令内部定义的模板内容
注意:
-> 1.当我们把指令所在的元素删除之后 指令的模板必须有一个根元素
-> 2.link函数对应的element参数 会变成 指令模板中的根元素
-> 3.使用replace的时候,"template:<div>333333</div><span></span>"会报错,是因为当删除该元素的标签后,在template的内容中,span和div标签是平级的,因此无法判断出谁作为根元素。
restrict:ECMA
+ 属性指令 A attributes
+ 元素指令 E element
+ 类名指令 C class
+ 注释指令 M comment 注释指令需要配合replace一起使用
**scope**:true 指令本身拥有自己的作用域 但是会继承父级作用域
scope:false 指令本身没有自己的作用域 使用的是当前指令所在作用域的 $scope
scope:{} 指令本身拥有自己的作用域 不会继承父级的作用域
**@ 取当前指令所在元素身上的同名属性对应的值 并且将 值 赋值给当前属性**
**= 取当前指令所在元素身上的同名属性对应的值 并且将 值 赋值给当前属性**
区别:
1. @ 需要加大括号通过@取到的数据都是字符串
2. = 不需要大括号通过=取到的数据 是 真实的数据类型
+ ng-repeat-after 可以理解为循环遍历完成后,自定义的指令。
建立指令的四种形式。注意注释标签的填写形式。
注意:在定义块级作用域的时候,获取外部控制器的数据的时候,方式,通过双大括号获取的全部是字符串,通过""获取的是数据的本身。
### 过滤器
**{ 数据 | 过滤器的名字:参数1:参数2 }**
**currency** 货币过滤器
**date** 日期过滤器
**filter**过滤器 根据过滤条件 过滤出符合条件的数据(注意:模糊匹配:filter过滤器会去数据中的[每一条数据中的每一个字段中]去查找 有没有 [包含]过滤条件的数据 如果有 留下,精确匹配:filter过滤器会去数据中的[指定的字段中]去查找 有没有 [包含]过滤条件的数据 如果有 留下)
**limitTo** 限制过滤器
**orderBy** 可以根据某一个字段进行排序 默认 是升序(例如:orderBy:'age' 根据age字段进行升序排列
-> orderBy:'-age' 根据age字段进行降序排列
**json**过滤器 可以将数据以良好的格式 展现到页面中
#### 自定义过滤器
``` js
模块对象.filter('名字',[function(){
return function(value){
// value 就是我们需要处理的数据
// 最后 我们需要将处理的数据return出去
}
}])

流行框架angularjs

发表于 2017-05-05 | 分类于 技术积累

1.angularjs优势

  • 帮助我们快速构建当页面应用
  • Angular自身有很多颠覆性的特性 改变了前端的编码方式 简化了我们的操作

2.angularjs是什么?

  • 一款非常优秀的前端高级JS框架
  • 由谷歌团队负责开发维护

3.框架与库

1
<input type="text" id="inp">
1
2
3
4
5
document.getElementById('inp').value;
$('#inp').val();
<input type="text" ng-model="val">
阅读全文 »

gulp的介绍及使用

发表于 2017-03-05 | 分类于 技术积累

gulp的基本介绍

-> gulp 是一个项目构建工具,其核心内容是提供一个处理项目文件与机构的平台. 相当于一个 处理容器, 处理管道。

gulp具体的作用

  1. 代码的压缩
  2. 代码的合并
  3. less 转 css
  4. 代码的混淆
  5. 引用的替换
    阅读全文 »

关于js执行属于单线程案例---demo

发表于 2017-01-22 | 分类于 技术积累

在 js 中是单线程的, 所谓的异步是假的.

1
以下代码可以证明:但是如何来模拟多任务的执行呢? 在 js 中引入了事件队列的概念.所谓的事件对象就是事件数组. 这个数组的特点就是每次都调用 shift 方法获得数组中的事件处理函数每次都调用 push 方法将函数存储到数组中. 每次在执行类似于事件, 计时器 ajax 等操作时, 并不是立即调用该函数. 每次都是将对应的函数投递到 "数组" 中. 例如:
1
2
3
4
5
6
7
8
9
10
11
12
while(1) {
console.log(5);
}//加入此条命令后,定时器里面的命令将永远无法执行。
console.log( 'console1' );
setTimeout(function () {
console.log( 1 );
}, 2000 );
console.log( 'console2' );
setTimeout(function () {
console.log( 2 );
}, 1000 );
console.log( 'console3' );
阅读全文 »

WEB前端性能优化

发表于 2016-11-20 | 分类于 技术积累

WEB前端性能优化总结

1.减少http请求,合理设置HTTP缓存

原因

1
2
3
4
5
6
7
a. http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,减少http请求的数目可有效提高访问性能。
b. 减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。
c. 缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据,而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body,可以节省带宽 )
d. 怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了。
阅读全文 »

jquery.validate 插件的使用说明

发表于 2016-09-09 | 分类于 技术积累(转载总结)

https://github.com/DiegoLopesLima/validate

使用语法

1
$( '#form' ).validate();

可以使用自定义属性设置验证

data-conditional Accepts one or more indexes separated by spaces
from the conditional object that should
contain a the boolean return function.
接收 一个或多个 由空格分隔的标记, 该标记定义在 conditional
对象中. 每一个标记都应该是一个返回 boolean 值的函数.

阅读全文 »

逗号运算符简单的理解和运用

发表于 2016-08-30 | 分类于 技术积累

逗号运算符是指,多个表达式可以用逗号分开,其中用逗号分开的表达式的值分别结算,但整个表达式的值是最后一个表达式的值。

1.在函数当中的使用

1
2
3
4
5
6
7
8
var a = 15,
b = 20;
function CommaTest() {
return b++ , 10, a++;
}
var c = CommaTest();
console.log(c); // 返回15
// 函数调用的时候,返回值以逗号运算符最后一位参数为基准,返回值。
阅读全文 »
12
刘金芳

刘金芳

未来不迎,当时不杂,过往不恋。

20 日志
6 分类
23 标签
RSS
GitHub 微博 微信