h5研究笔记

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5研究笔记相关的知识，希望对你有一定的参考价值。

1、
position:absolute
top:50%;
left:50%;
transform:translate(-50%,-50%)
 
2、
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
3、
margin: auto;
width: 200px;
height: 100px;
position: absolute;
top:0;left:0;bottom:0;right:0;
 
 
子节点overflow:auto滚动到底部会带动父节点滚动
滚动不流畅:解决方案
overflow: scroll;
-webkit-overflow-scrolling: touch;
 
1、父节点：display:none这样父节点隐藏掉就不会滚动了
2、父节点是overflow: auto;，子节点超过了100%也没事儿
 
row-reverse wrapflex-start | flex-end | center | space-between | space-aroundorder 项目的排列顺序
  • flex-grow 项目的放大比例 flex-shrink 项目的缩小比例 flex-basis widthheightflex 属性是,  和 的简写，默认值为。后两个属性可选。
  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖属性
 
 
.test(123893)
 
export default {
//0-9内的数字密码
CheckPassword:/^[0-9]{6}$/,
//验证银行卡号
CheckBankCard:/^\\d{16}|\\d{19}$/,
//验证身份证号码
CheckID:/^(\\d{15}$|^\\d{18}$|^\\d{17}(\\d|X|x))$/,
//验证手机号码
CheckPhone:/^1[3|4|5|7|8][0-9]\\d{8}$/,
//验证邮箱
CheckEmail:/(\\w+\\.)*\\[email protected](\\w+\\.)+[A-Za-z]+/,
//验证护照
CheckPassport:/^(1[45]\\d{7})|([GE]\\d{8})|(P\\d{7})|(S\\d{7,8})|(D\\d+)$/,
//验证用户登录密码/^[0-9a-zA-Z_`~\\\\[email protected]#\\\\$\\\\%\\\\^&\\\\*()\\\\-\\\\+=]{6,20}$/
CheckUserPw:/^(?![A-Z]+$)(?![a-z]+$)(?!\\d+$)(?![\\W_]+$)\\S+$/,
//验证用户名字母数字下滑线
CheckUserName:/[^A-Za-z0-9_]/g,
//验证中文
CheckChinese:/^[\\u4E00-\\u9FFF]+$/,
//验证URL
CheckUrl:/^([http|https]\\:\\/\\/)?([a-z0-9][a-z0-9\\-]+\\.)?[a-z0-9][a-z0-9\\-]+[a-z0-9](\\.[a-z]{2,4})+(\\/[a-z0-9\\.\\,\\-\\_\\%\\?\\=\\&]?)?$/i,
//判断是否是纯字母
CheckLetters:/[^a-zA-Z]/g,
//时间判断 2014/02/04
CheckDate:/^\\d{4}(\\-|\\/|\\.)(0?[1-9]|1[0-2])(\\-|\\/|\\.)((0?[1-9])|((1|2)[0-9])|30|31)$/,
//时分秒判断 23:45:07
CheckDateTime:/^((20|21|22|23|[0-1]\\d)\\:[0-5][0-9])(\\:[0-5][0-9])?$/,
//长时间判断 2014/02/04 23:45:07
CheckLongDate:/^(\\d{1,4})(-|\\/)(0?[1-9]|1[0-2])(\\-|\\/|\\.)((0?[1-9])|((1|2)[0-9])|30|31) ((20|21|22|23|[0-1]\\d)\\:[0-5][0-9])(\\:[0-5][0-9])$/,
// 验证输入金额
pat :/^(([0-9]+\\d*)|([0-9]+\\d*\\.\\d{1,2}))$/
}
格式访问
axios.post(‘/bmac_h5/transDetail‘, sourceObj,{
headers: {
‘Content-Type‘: ‘multipart/form-data‘
}
})
.then(function (response) {
console.log(response);
data = JSON.parse(response);
_this.jsonData = data.data;
})
.catch(function (error) {
console.log(error);
});
 
 
var sourceObj =
{mobileNo:this.$route.query.mobileNo,//就是卡号
recordId:this.$route.query.recordId,
}
console.log("qstest"+qs.stringify(sourceObj));
addBaseParams(sourceObj);
axios.post(‘/bmac_h5/transDetail‘,qs.stringify(sourceObj) ,{
headers:
{
‘Content-Type‘: ‘application/x-www-form-urlencoded; charset=UTF-8‘
}
})
.then(function (response) {
console.log(response);
data = JSON.parse(response);
_this.jsonData = data.data;
})
.catch(function (error) {
console.log(error);
});
 
 
canvas =canvas.getContext(‘2d‘)
canvas.fillStyle="#FF0000";
canvas.moveTo(0,0)
canvas.lineTo(100,100)
canvas.lineTo(0,0)
canvas.closePath()
canvas.fill();
 
background: orange;
width: 00px;
height: 00px;
border-width: 100px 100px 100px 100px;
border-color: red transparent transparent transparent;
border-style: solid;
transform: translate(0%,0%) rotate(27deg);
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke-width:1" />
</svg>
画圆
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>
画方
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
 
多继承
  1. function Class2()    
  2.     Class10.call(this);    
  3. this}  
apply和call
，
bind和call的区别
//都是将obj作为上下文的this
func(name,id) { console.log(); } obj = "Look here";
 
//使用bind是 返回改变上下文this后的函数
var a = func.bind(obj);
a();
//使用call是 改变上下文this并执行函数
var b = func.call(obj);
结果：look here ,look here
 
浅拷贝深拷贝
 
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
 
在 JS 中有一些基本类型像是Number、String、Boolean，a=b 这样写可以深拷贝的，a和b值互不影响。而对象就是像这样的东西{ name: ‘Larry‘, skill: ‘Node.js‘ }，a=b 修改了b，a也会跟这变化。写 obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };这样以最基本参数书写就是深度copy
 
 
把 animal 的方法放到cat上执行
 
 
 
想换行：
1.设置宽度
2.设置word-wrap：。、、就是指换行方式为单词内换行断句
技术分享
3.word-break:
 
VUE文档中v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"
有错误！ 第一个active该加个‘’单引号！！！
 
 
 
 
事件传播，冒泡和捕获
1.冒泡事件流
当事件在某一DOM元素被触发时，事件从触发事件的目标元素开始，向父节点冒泡穿过整个DOM层。直到DOM层次的根
2.捕获事件流
事件的处理将从DOM层次的根开始，事件被从DOM层次的根依次往下传递
 
obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添 加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则 在冒泡阶段执行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法
 
 
 
 
 
 
 
 
 
 
对象不是一个  。它类似于，但除了长度之外没有任何属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的：
 
arguments的属性
指向当前执行的函数。
指向调用当前函数的函数。
指向传递给当前函数的参数数量。
返回一个新的Array迭代器对象，该对象包含参数中每个索引的值。
 
当我们使用javascript来修改我们的页面，浏览器已经做了一些工作，以找到DOM节点进行更改在现代的应用中，会有成千上万数量个DOM节点。所以因更新的时候产生的计算非常昂贵琐碎且频繁的更新会使页面缓慢，同时这也是不可避免的。.getElementById这个方法慢
 
引入虚拟DOM实际上有优点也缺点。其实就是减少重绘制重排。
  1. react会在内存中维护一个虚拟DOM树，当我们对这个树进行读或者写的时候实际上是对虚拟DOM进行的，当数据变化时候，然后react会自动更新虚拟DOM，然后拿新的虚拟DOM和旧的虚拟DOM进行对比，找到有变更的部分，得出一个Patch，然后将这个Patch放到一个队列里面，最终批量更新这些Patch到DOM中。
这样的机制可以保证即便是根节点数据的变化，最终表现在DOM上的修改也只是收这个数据影响的部分，这样可以保证非常高效地渲染。
。
但是也会有一定的缺陷--首次渲染大量DOM时因为多了一层虚拟DOM的计算，会比innerhtml插入方式慢
 
 
 
 
1、解析html源码
2、浏览器解析css源码
3.构建dom树，构建render树
4、绘制d
 
 
 
 
rem 根节点font-size的大小乘N rem 。如果html标签有font-size，就用html的，如果body有那就用body的字体大小覆盖html的。
em 是该标签父节点的fontsize
 
 
 
ES5
myArray.forEach(function (value) { console.log(value); });
  • 缺点：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。
    那么，你一定想尝试一下for-in循环：
    for (var index in myArray) { // 千万别这样做 console.log(myArray[index]); }
    • 这绝对是一个糟糕的选择，为什么呢？
      在这段代码中，赋给index的值不是实际的数字，而是字符串“0”、“1”、“2”，此时很可能在无意之间进行字符串算数计算，例如：“2” + 1 == “21”，这给编码过程带来极大的不便。 作用于数组的for-in循环体除了遍历数组元素外，还会遍历自定义属性。举个例子，如果你的数组中有一个可枚举属性myArray.name，循环将额外执行一次，遍历到名为“name”的索引。就连数组原型链上的属性都能被访问到。 最让人震惊的是，在某些情况下，这段代码可能按照随机顺序遍历数组元素。 简而言之，for-in是为普通对象设计的，你可以遍历得到字符串类型的键，因此不适用于数组遍历。
      • ES6 
        强大的for-of循环
        for (var value of myArray) { 
        console.log(value); 
        }
        是的，与之前的内建方法相比，这种循环方式看起来是否有些眼熟？那好，我们将要探究一下for-of循环的外表下隐藏着哪些强大的功能。现在，只需记住：
         
         
        输入下面的命令( 需要替换路径中的yourname )
         
        open -a --args --disable-web-security --user-data-dir open -a --args --disable-web-security --user-data-dir
         
         
        技术分享
         
        background: linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */css渐变色
         
         
        定义：观察者模式定义对象间一种一对多的依赖关系，使得当每一个对象改变状态，则所有依赖于它的对象都会得到通知并自动更新，属于行为类模式。
        注意：观察者模式和发布订阅模式是有区别的，区别在于观察者模式是由目标进行调度，而发布订阅模式是由独立的调度中心进行调度，可以说发布订阅模式是观察者模式进一步解耦，在实际中被大量运用的一种模式。
        UML：
         
        子类向父类传值
        <!-- Parent.vue --> <template> <child :foo.sync="bar"></child> <!-- sync只是语法糖，实际上拓展为： <child :foo="bar" @update:foo="val => bar = val"></child> --> </template> <!-- Child.vue --> <script> export default { methods: { onChange () { this.$emit(‘update:foo‘, newValue) } } } </script>
         
         

以上是关于h5研究笔记的主要内容，如果未能解决你的问题，请参考以下文章

阅读笔记：做研究与写论文-周志华

2022年研究生科研素养提升讲座--笔记

《怎样编写研究报告》读书笔记0-0

ntu ERIC 课程笔记

ANT自动打包U3D安卓项目研究笔记

NTU 课程笔记：ERIC 开展研究