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()
浏览器引擎前缀
- 谷歌浏览器 : -webkit-
- 火狐浏览器: -moz-
- IE浏览器: -ms-
在 HTML5里用 Scoped 属性限定CSS的作用范围 --浏览器的兼容不是很好
rem and em
clipboard.pngVUE
搭建环境(安装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
- 脏检查
- JSX语法
-钩子函数
clipboard.pngCanvas 在浏览器里的渲染原理
(1)为什么Canvas在浏览器里表现和原生差的太远?
1.手机设备碎片化严重,早期手机硬件配置低内置的浏览器对html5支持不好,导致一个应用开打出来在各个设备上表现不一致
eg: iPhone4 只支持 elementAudio iPhone6可以使用webAudio
2.有时在原生浏览器能流畅运行,但是嵌入到app中就卡,有可能是app本身占用了大量系统资源,分配给浏览器的资源就不够用了。
愿你递交辞职信的那一刻,都有着战士收刀入鞘的骄傲,而不是落荒而逃。
相信只要从现在开始努力,最坏不过是大器晚成
utf8 和 UTF-8 的区别:
![ ![clipboard.png](https://img.haomeiwen.com/i6023034/a74b6495c10f0194.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](https://img.haomeiwen.com/i6023034/0e722f9130dbe69d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) clipboard.png ![ ![clipboard.png](https://img.haomeiwen.com/i6023034/0f47cab8cbf0ff3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](https://img.haomeiwen.com/i6023034/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
网友评论