<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/#div1 {height: 200px;width: 200px;background: red;position: absolute;}
#div2 {height: 500px;width: 700px;background: gray;position:relative;}/
</style>
</head>
<body>
<!--<div id='div2'>1
<div id='div1'>2</div>
</div>-->
<canvas id='can' width="500" height="500" style="border:1px solid lightblue;"></canvas>
<!-- span实际宽高 0 ，0 -->
<!--<div style="width: 400px;height:100%;">
<span style="float:left;width:auto;height:100%;">
<i style="position:absolute;float:left;width:100px;height: 50px;">1212121</i>
</span>
</div>-->
<script>
// for(var i=0;i<5;i++){
// setTimeout(function(){
// console.log(i+'') //答案 ：55555
// },100)
// }
// alert(undefined ==null ) //答案：true
// console.log(1+"2"+"2"); // 答案： 122
// console.log(1+ +"2"+"2"); // 32
// console.log("A"-"B"+"2"); // NaN2
// console.log("A"-"B"+2); // NaN
// console.log(typeof(1)) // number
// console.log(typeof(1.2)) // number
// console.log(typeof(undefined)) // undefined
// console.log(typeof({})) // object
// console.log(typeof('4299'-0)) // number
// console.log(typeof(null)) // object
// var obj = [name:'zhangsan',show:function(){alert(name)}]
// var obj = {name:'zhangsan',show:'alert(this.name)'}
// var obj = {name:'zhangsan',show:function(){alert(name)}}
// var obj = {name:'zhangsan',show:function(){alert(this.name)}} //正确为最后一个
// var a = new Array(2,3,4,5,6)
// var b = 0
// for(var i=0;i<a.length;i++)
// b += a[i]
// document.write(b) // 答案：20
// var a = parseInt('101和问起')
// document.write(a) // 答案：101
// 添加、移除、移动、复制、创建、查找节点:
// （1）创建新节点
// createDocumentFragment() //创建一个DOM片段
// createElement() //创建一个具体的元素
// createTextNode() //创建一个文本节点
// （2）添加、移除、替换、插入
// appendChild()
// removeChild()
// replaceChild()
// insertBefore()
// （3）查找
// getElementsByTagName() //通过标签名称
// getElementsByName() //通过元素的Name属性的值
// getElementById() //通过元素Id，唯一性
// 如何让div居中，如何让一个浮动元素居中，如何让绝对定位的元素居中
// 1. text-alin:center;
// 2. margin:0 auto
// 3. position:relative|absolute; left:50%;
// 你有哪些性能优化的方法？
// （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
// （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
// （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
// （4） 当需要设置的样式很多时设置className而不是直接操作style。
// （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
// （6） 避免使用CSS Expression（css表达式)又称Dynamicproperties(动态属性)。
// （7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
// 前端工程师理解:
// 首先，你必须是一个合格的“页面仔”，所有的页面可以用css+html来实现。
// js和jquery也是必须会的，因为纯静态的页面是没办法完全吸引一个用户的。
// 你的各种特效就需要使用js或者jquery啦。
//
// jquery是一个框架它能实现js的一些效果，但是它的使用学习就更加简单。
//
// 其次，前端主要负责实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。
// 懂一些设计方面的技能和基本素养，比如PS的一些基本操作，切图，和颜色值。
// 而且后端的服务器知识和语言基础还是要有的，这样在工作对接的时候
// 理解了才能更加利于团队合作。
//
// 前端开发工程师，会熟练使用时下非常流行的HTML5、CSS3技术，架构炫酷的页面；
// 3D、旋转、粒子效果，页面变得越来越炫，对人才的要求也越来越高。
// 前端开发工程师，会全面掌握PC、手机、iPad等多种设备的网页呈递解决方案，
// 响应式技术那可是看家本领，不仅仅是使用，我们会更多的探讨使用领域。
//
// 前端开发工程师，会掌握Ajax技术，页面不刷新，就能获得后台或是数据库中的数据，
// 更好地呈递给用户！多么棒的用户体验！
//
// 前端开发工程师，会掌握高级面向对象、设计模式、MVC、Angular等高级程序书写技术。
// 做大项目的时候，这些技术，能够让你的项目结构清晰，易于维护！
//
// 前端开发工程师，还会大数据的前端可视化、借助Node.js完成全栈开发、集成测试、
// 自动化工作流、版本控制系统、团队协同、自动化部署等等
// function test(){
// var n = 666;
// function add(){
// n++;
// console.log(n)
// }
// return {n:n,add:add}
// }
// var a = test()
// var b = test()
// a.add(); // 答案： 667
// a.add(); // 668
// console.log(b.n); // 666
// b.add(); // 667
// 写一个求和函数sum，达到求和：
// function sum(){
// var arr = Array.prototype.slice.call(arguments);
// var sum = 0;
// for(var i = 0; i < arr.length; i++){
// if(typeof(arr[i]) == "string" || typeof(arr[i]) == "number"){
// if(isNaN(Number(arr[i])) == false){
// sum += Number(arr[i]) * 100;
// }
// }
// }
// return sum/100;
// }
//
// console.log(sum(1, 2, 3, 4, 5));
// console.log(sum(5, null, -5));
// console.log(sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
//'E', 1, 'F', 1, 'G', 1));
// console.log(sum(0.1, 0.2));
// 拖拽：
// window.onclick = function(){
// var oDiv = document.getElementById("div1");
// var oDiv2 = document.getElementById("div2");
//
// oDiv.onmousedown = function(ev){
// var oEvent = ev || event;
//
// var disX = oEvent.clientX - oDiv.offsetLeft;
// var disY= oEvent.clientY - oDiv.offsetTop;
//
// //这里不能用oDiv，因为宽度小，当鼠标移出时就会失去效果
// document.onmousemove = function(ev){
// var oEvent = ev || event;
// var x = oEvent.clientX - disX;
// var y = oEvent.clientY - disY;
//
// //解决div跑出界面的情况
// if(x < 50){ //吸附原理
// x = 0;
// }
// else if(x > oDiv2.offsetWidth - oDiv.offsetWidth - 50){
// x = oDiv2.offsetWidth - oDiv.offsetWidth;
// }
//
// if(y < 50){
// y = 0;
// }
// else if(y > oDiv2.offsetHeight - oDiv.offsetHeight - 50){
// y = oDiv2.offsetHeight - oDiv.offsetHeight;
// }
//
// oDiv.style.left = x + 'px';
// oDiv.style.top = y + 'px';
// }
//
//
// document.onmouseup = function(){
// document.onmousemove = null;
// document.onmouseup = null;
// }
//
// //解决FF问题
// return false;
// }
// }
// 用canvas画矩形,点击时改变矩形颜色
// var canvas = document.getElementById('can');
// var context = canvas.getContext('2d');
// context.beginPath();
// context.rect(100, 50, 100, 100);
// context.fillStyle = 'white';
// context.fill();
// context.lineWidth = 1;
// context.strokeStyle = 'red';
// context.stroke();
// 问:什么情况下使用vuex？
// 如果ajax请求的数据只是在当前组件中使用，可以直接ajax请求，
// 不需要vuex，如果他的父组件或者其他组件需要使用这个ajax返回的数据，
// 可以使用vuex，在其他组件里面的computed监听这个state，
// 数据返回后会自动刷新其他组件的。store是个容器，所有的共享数据挂在state下面。
// 生命周期：它可以总共分为8个阶段：
// beforeCreate（创建前）,
// created（创建后）,
// beforeMount(载入前),
// mounted（载入后）,
// beforeUpdate（更新前）,
// updated（更新后）,
// beforeDestroy（销毁前）,
// destroyed（销毁后）
// beforecreated：el 和 data 并未初始化
// created:完成了 data 数据的初始化，el没有
// beforeMount：完成了 el 和 data 初始化
// mounted ：完成挂载
// beforecreate : 举个栗子：可以在这加个loading事件
// created ：在这结束loading，还做一些初始化，实现函数自执行
// mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
// beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
// axios也是基于XMLHttpRequest对象的一种请求数据的方式,
// 从浏览器中创建 XMLHttpRequest
// 从 node.js 发出 http 请求
// 支持 Promise API
// 拦截请求和响应
// 转换请求和响应数据
// 取消请求
// 自动转换JSON数据
// 客户端支持防止 CSRF/XSRF
// javaScript链式调用原理以及加法实现
// function add (num) {
// var count = num;
// var _b = function(l){
// count += l;
// return _b
// }
// _b.valueOf = function(){
// return count
// }
// return _b
// }
// var c = add(1)(2)(3);
// console.log(c) //6
// 异步加载js文件
// 1. 使用回到函数在加载完成资源后调用该资源的方法 onload
// 2. require.js模块化工具
</script>
</body>
</html>
网友评论