杂项笔记

node.js

  • Node.js是一个基于Chrome V8引擎的JavaScript运行环境。
  • Node.js 使用了一个事件驱动、非阻塞式I/O 的模型, 使其轻量又高效。
  • Node.js的包管理器npm ,是全球最大的开源库生态系统。

布局

1. Responsive 响应式
所谓响应式布局就是流式布局+媒体查询
优点:通吃pc和移动端,做到精细处。两者效果都很好
缺点:媒体查询是有限的,可以枚举出来,只能适应主流的宽高
2. rem+js
优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。
缺点:碰到重视高度的设计,或者重视元素间间距的设计,那就玩不开了
3. 流式布局
web app 的开发上 流式布局不是最理想的实现方式,通过大量的百分比布局,会经常出现许多的bug,还有就是对设计师有很多的限制,因为他们在设计之初,就需要考虑流式布局,只能设计横向拉伸的元素布局,设计的时候存在很多局限性。

在路上成长就是不断的否定自己

javsScript profiler : 报告你的Javascript 函数执行所花时间
针对某个函数:其前部加上console.profile([title]),其后部加上console.porfileEnd()

浏览器引擎前缀

  1. 谷歌浏览器 : -webkit-
  2. 火狐浏览器: -moz-
  3. IE浏览器: -ms-

在 HTML5里用 Scoped 属性限定CSS的作用范围 --浏览器的兼容不是很好

rem and em

杂项笔记_第1张图片
clipboard.png

VUE

搭建环境(安装node和npm)

命令:
(1)$ npm install -g vue-cli ————安装vue环境
(2)$ vue init webpack myProject ————初始化操作
(3)$ npm install ——————安装依赖
(4)$ npm run dev ——————启动项目

浏览器tab————http://localhost:8080/#/

(5)$ nom run build ——————编译源码 在dist 目录下

目录:
(1)build————webpack初始化陪着
(2)config————项目初始化配置
(3)src————关键代码
(4)index.html————项目首页
(5)package.json————依赖信息

Vue.js与其他框架的区别

1.与AngularJS

相同点:
都支持指令:内置指令和自定义过滤器
都支持过滤器:内置过滤器和自定义过滤器
都支持双向数据绑定
都不支持低端浏览器
不同点:
1.AugularJS的学习成本高,而Vue.js 本身提供的API都比较简单、直观。
2.在性能上,Angular依赖对数据做【脏检查】,所以Watcher 越多越慢,Vue.js使用基于依赖追踪的观察并且使用异步列队更新。所有数据都是独立触发的。

2.与React

相同点:
React采用特殊的【JSX语法】,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用
中心思想相同:一切都是组件,组件实例之间可以嵌套
都提供了合理的【钩子函数】,可以让开发者定制化地去处理需求
都不内置列数AJAX,Route等功能到核心包,而是以插件地方式加载
在嘴贱开发中都支持mixins的特性
不同点:
React依赖 Virtual DOM,而Vue.js使用的是DOM模板。React采用的是Virtual DOM会对渲染出来的结果做脏检查
Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM

  • 脏检查
杂项笔记_第2张图片
clipboard.png
  • JSX语法
杂项笔记_第3张图片
clipboard.png

-钩子函数

clipboard.png

Canvas 在浏览器里的渲染原理
(1)为什么Canvas在浏览器里表现和原生差的太远?

1.手机设备碎片化严重,早期手机硬件配置低内置的浏览器对html5支持不好,导致一个应用开打出来在各个设备上表现不一致

eg: iPhone4 只支持 elementAudio iPhone6可以使用webAudio

2.有时在原生浏览器能流畅运行,但是嵌入到app中就卡,有可能是app本身占用了大量系统资源,分配给浏览器的资源就不够用了。

愿你递交辞职信的那一刻,都有着战士收刀入鞘的骄傲,而不是落荒而逃。
相信只要从现在开始努力,最坏不过是大器晚成

utf8 和 UTF-8 的区别:

杂项笔记_第4张图片
![ ![clipboard.png](http://upload-images.jianshu.io/upload_images/6023034-a74b6495c10f0194.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](http://upload-images.jianshu.io/upload_images/6023034-0e722f9130dbe69d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
杂项笔记_第5张图片
clipboard.png
杂项笔记_第6张图片
![ ![clipboard.png](http://upload-images.jianshu.io/upload_images/6023034-0f47cab8cbf0ff3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](http://upload-images.jianshu.io/upload_images/6023034-0977ea73d5c481d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

You are the owner of your career 【你是你职业生涯的所有者】

Book

《数据结构》、《算法导论》、《计算机原理基础》、《汇编语言》、《Linux操作系统命令行》、《计算机网络通信协议》、《HTML 权威指南》、《CSS 权威指南》、《JavaScript 高级程序设计》

框架式前端的快捷方式,但没有一个框架会是一个程序员安身立命之本

对于知识,尤其是那些看起来不是那么好学的知识,我们应当心存敬畏之心,你若热爱计算机,那就请尊重他们,你若只是想进来捞一笔钱,没有关系,但也请不要用无知和狂妄去肆意践踏它们,因为这些知识不是因为你而存在的==

不得不做 or 头脑一热 ==== 勇敢

养成习惯,让工作变得更有挑战

无论资本处在狂热还是寒冬,无法成长的人注定是竞争中的牺牲品

程序写出来是给人看的,附带能在机器上运行,写代码其实是书面沟通的另一种表现形式

一个人的成功,约有15%取决于知识和技能,85%取决于沟通————发表自己意见的能力和激发他人热忱的能力。

其一:腰有十文钱,必振衣作响

其二:每与人言,必谈及贵戚

其三:遇美人则急索登床

其四:见问路之人必作傲睨之态

其五:与友人相聚便高吟其酸腐诗文

其六:头已花白却喜唱艳曲

其七:施人一小惠便广布与众

其八:与人言谈便刁言以逞其才

其九:借钱时其脸如丐,被人索债时其态如王

其十:人前常多蜜语,人后必揭其短

只有成长才是永恒的主题,过程中的成功仅仅是你成长路上的里程碑而已

如果人人喜欢你,那说明没人真正喜欢你

js 控制台调试

  • 显示信息命令:console.log()
  • 占位符:字符(%s)、整数(%d或%i)、浮点数(%f)、对象(%o)
  • 信息分组 :console.group()
  • 查看对象信息:console.dir()
  • 显示某个节点的内容:console.dirxml();
  • 判断变量是否是真:console.assert()
  • 追踪函数的调用轨迹:console.trace()
  • 计时器:console.time() 、console.timeEnd()
  • 性能分析:console.profile()
clip:rect 矩形剪裁 --只能作用于position:absolute 的元素上

window 自带录像功能———— windows+R psr.exe
window 虚拟键盘 ——————windows+R osk
【查看文件属性 】———— Alt+回车/Alt+双击文件

ISP————互联网服务提供商

HTML5 标签兼容IE9 以下版本 可以尝试 shiv 解决方案

程序是写给人读的,只是偶尔让计算机执行一下。——高德纳

回调函数 - 给某一个方法传递一个函数,这个方法在有相应事件发生时调用这个函数来进行 回调
Buffer对象--是一个包含零个或者任意人字节的数组(和Array不同)

    或  ||       与  &&        非  |

npm run dev 运行程序
npm run build 发布程序

// js获取宽高一览

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth

获取小数点后两位函数:toFixed(2)

// 边框渐变

border-image:-webkit-linear-gradient(red,blue) 30 30;
border-image:-moz-linear-gradient(red,blue) 30 30;
border-image:-webkit-linear-gradient(red,blue) 30 30;

// 映射虚拟盘

如果没有E盘的,发布文件可以设置开机自动启动一串脚本。
1.在目前的盘里面新建一个文件夹 比如 E:\test
2.在命令提示符里面输入 SUBST G: E:\test
3.回车。

// 删除虚拟盘
subst G: /d

你可能感兴趣的:(杂项笔记)