//2016-08-01 至 2016-08-31 前端工作知识点总结
目标:
1、angularJs的api以及慕课视频学习,用angular写出日期选择的插件
2、nodeJS: www.runoob.com中相关内容的阅读练习
3、前端页面加载速度提升,性能提升研究。
知识点:
1、AngularJs
(1)基础指令:
ng-if
ng-disable
ng-init
ng-bind
ng-repeat
(2)注意点:指令的值不能用大写,html标签也不能用大写,均为小写
(3)循环:
ng-repeat="x in arr" //x为数组的各个值
ng-repeat="(key,value) in arr track by key" //value为值;key 为index指引值
2、
1)桌面任务栏消失解决方案:
(1)打开任务管理器
(2)文件-新建任务
(3)输入explorer.exe,回车
2)cmd-path 可输出环境变量的配置情况
3、NodeJs
1)两种模式:脚本模式、交互模式
2)两种回调:阻塞式和非阻塞式
(1)阻塞式:先读取文件再执行“程序执行结束!”的输出
var fs = require("fs");
var data = fs.readFileSync('input.txt');
console.log(data.toString());
console.log("程序执行结束!");
(2)非阻塞式:读取文件和输出同时进行,挺高了程序性能
var fs = require("fs");
fs.readFile('input.txt',function (err,data) {
if (err) return console.error(err);
console.log(data.toString());
});
console.log("程序执行结束!");
3)EventEmitter类:事件触发与事件监听器功能的封装
1)访问方式:require(event)
2)属性:on(绑定)、emi(触发)
4)stream的四种流类型:Readable(可读操作)、writable(可写操作)、Duplex(可读可写操作)、Transform(操作被写入数据,然后读出结果)
4、页面一加载就调用$(window).resize();的方法,应该写在resize方法的后面。
比如:
$(function(){
$(window).bind("resize",function(){
console.log("test");
});
$(window).resize();//写在后面才会执行,输出:test
});
5、input 监听键盘enter键:
$(input).keyup(function(e) {
var keycode = e.keyCode || event.keyCode;
if (keycode === 13) { //执行方法 }
});
6、优化前端页面加载速度的方式:
1)减小大小、减少请求数
(1)图片压缩、雪碧图处理
(2)js、css压缩、文件合并
2)接口处理
(1)异步请求
(2)接口合并
7、transform的属性分开来写,后面的会覆盖前面的。必须要合并写才能够同时使用:
比如:
(1)分开写:只翻转,不偏移
transform: translateX(200px);
transform: scale(45deg);
(2)合并写:翻转,偏移
transform: translateX(200px) scale(45deg) ;
8、小图片合并为雪碧图,控制单个背景图片的大小的方式是使用css3的缩放功能:transform:scale(0.8)。
不能用background-size,因为雪碧图为一张合并了小图的大图。
体会:
1、通过一段时间对angularJs的了解,终于知道什么是angularJs的指令了。学习的顺序是,先看了一下w3c(菜鸟)网的基础知识,按顺序看完,然后具体看了一下慕课的入门视频,然后看着例子写了几个简单的demo。然后使用知道的一些指令来开始写一个日期选择器的控件。显示去渲染出页面,然后才是用angularJs的指令来简化页面代码。
2、有必要更多的研究下,前端的优化技巧,感觉看一些别人的总结总是不容易理解。还是应该自己动手去优化自己的项目。文字上的优化说明还是比不上动手改一下,然后看看优化后的效果,应该是更加流畅的。通过对本项目中推广页请求数和图片太多导致页面加载速度被拖慢的问题的改造。知道去看控制台哪些文件请求有问题,可以进行针对性的优化了。