前端学习+项目问题9

如果是撤销某个文件或文件夹：

git reset HEAD -filename

(3).撤消git push操作

方法:

git reset --hard <commit_id>

git push origin HEAD --force

其他:

根据–soft –mixed –hard，会对working tree和index和HEAD进行重置:

git reset –mixed：此为默认方式，不带任何参数的git reset，即时这种方式，它回退到某个版本，只保留源码，回退commit和index信息

git reset –soft：回退到某个版本，只回退了commit的信息，不会恢复到index file一级。如果还要提交，直接commit即可

git reset –hard：彻底回退到某个版本，本地的源码也会变为上一个版本的内容

HEAD 最近一个提交

HEAD^ 上一次

(4).git rebase

git rebase用于把一个分支的修改合并到当前分支

如果想要放弃当前rebase操作，用

git rebase --abort

如果冲突已经解决，先add冲突文件，之后

git rebase --continue

20、flex布局

1、Flex是Flexible Box 的缩写，意为弹性布局。用来为盒状模型提供最大的灵活性。

webkit内核的浏览器，必须要加上-webkit的前缀

.box{display: -webkit-flex;/* Safari */display: flex;}

webkit内核八大浏览器包括： chrome,safari,搜狗高速浏览器，傲游浏览器3，qq浏览器，360极速浏览器，世界之窗浏览器（极速版），阿里云浏览器

2、flex属性

flex-wrap: 定义如何换行{no-wrap（默认):不换行

wrap:换行，第一行在上方，

wrap-reverse: 换行，第一行在下方

}

justify-content： 项目在主轴上的对齐方式

{flex-start左对齐

flex-end 右对齐

center居中对齐

space-between两端对齐,项目之间间隔相等

space-around每个项目两侧的间隔相等，即左边距与右边距一样大，所以项目之间的间隔要比项目与大的外边框之间的距离大一倍。

21、在表单中不能使用元素，因为不同的浏览器会提交不同的按钮值。请使用 input 元素在 HTML 表单中创建按钮。

22、模块式引入swipper

问题：swipper.js swipper.css不能使用

原因：swipper.js swipper.js没有引入

解决办法：引入 node_modules下的swiper的css 和js

问题:引入 swipper轮播图无法正常滑动

原因：swipper版本不对 ，npm install swipper默认安装的版本是swipper 4.* beta版，应该安装swipper3.*版本的23、$(document).ready(function(){

function Func(){}

})

第一次写的时候丢了function，这段代码的意思是当页面加载完成后执行此函数里边的函数，所以function(){}不能丢

24、测试js，用return返回不执行下边的函数来观察是否有问题。

二、学习任务

1.zepto支持浏览器

ie10+

chrome 30+

firefox 24+

safiri 6+

ios 5+ safari

andriod 2.3+ browser

2.zepto 模块

* zepto —— default ——核心模块，必须引入

* event ——default —— 通过on() off()处理事件

* ajax —— default —— XMLHttpRequest 和JSONP实用功能

* form —— default —— 序列化提交web表单

* ie —— default —— 增加支持桌面的ie10和windows phone 8

* detect —— 提供$.os $.browser消息（

判断设备和浏览器，zepto.os判断查看设备，返回一个对象{ios:true ,iphoe:true,version:“6.1”}

zepto.browser查看浏览器，返回对象{version:'536.26,webkit:true}

）

* fx —— 提供 animate() 方法

* fx_methods —— 以动画形式的show,hide,toggle.fade*()方法，即可使用show() hide()方法支持动画

var div1 = $(“#fool”)

div1.animate({

“width”; “300px”,

“height”: “300px”

),

‘slow’,‘ease-in-out’,

function {

console.log(‘div animate callback’)

div2.hide(‘slow’,function() {})

div2.fadeOut(‘slow’,function)() {

console.log(‘div2 animate callback’)

})

},2000)

* assets 支持从DOM中移除Image元素并清理 ios内存

mobile safari严格的资源占用限制说起；mobile safari要比桌面版的浏览器的资源占用限制严格的多，当ios加载大文件时会停止加载，这时需要回收这些图片资源 ，因为不能保证垃圾回收机制是否有回收处理掉这些图片，所以我们采用移除image元素后清理内存，释放图片资源。

* data 对data()方法的完整支持，能够在内存中存储内存对象（读取或写入dom的data-* 属性，点像attr，但属性名要加上data-，zepto基本实现 ‘data()’方法只能存储字符串，当读取属性时，会有下列转换：

“true",“false”"null"转换为相应类型

数字值转换为实际数字类型

有效的JSON值会被解析

其他一切均作为字符串返回

）

* deferred 提供$.Deferred pormised API.依赖"callbakcs"模块

ajax请求或处理结果需要回调函数来执行完成后的操作时，使用deferred作为回调函数解决方案

$.Deferred()生成deferred对象

deferred.done()操作成功时的回调函数

deferred.fail()失败

deferred.promise() 无参时返回对象，运行状态无法改变，有参时作为在参数对象上部署deferred接口

deferre.resolve()改变 deferred对象运行状态为”已完成“触发done()方法

deferre.reject()改变 deferred对象运行状态为”已完成“触发fail()方法

$.when()为多个操作指定回调函数

deferred.then(), ex:$when($.ajax(url).then(successFunc,failureFunc)

deferred.always

ajax版本区别

ajax1.5之前

$.ajax({url:test.html’,

success(){},

error(){}

})

ajax 1.5之后 ,返回deferred对象,可链式操作

$.ajax(“test.html”)

.done({function(){})

.fail(function(){})

允许添加多个回调函数

$.ajax(“test.html”)

.done({function(){})

.fail(function(){})

.done({function(){})

.fail(function(){})

允许为多个事件指定一个回调函数

* callbacks 为"deferred"模块提供 $.Callbacks.

* selector 支持 jquery css表达式功能（$(‘div:first’)第一个div对象,el.is(‘:visible’)判断el是否为禁用的input或者button

* touch 在触摸设备上触发tap- swipe-相关事件。

基本touch事件：

touchstart 手指触发屏幕上的时候触发

touchmove 手指在屏幕移动的时候触发

touchend 手指离开屏幕的时候触发

touchcancel 系统取消touch事件的时候触发

* gesture 在触摸设备上触发 pinch（手指缩放）事件

* stack （栈）提供andSelf() &end （）链式调用方法

* ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.

3.zepto api

(1).$()

//创建元素

#$(“

hello

”)

//创建带有属性的元素

$(“

”),{ text”：’hello’,id:"greeting’,css:{color:“darkbule”} })

(2).camelCase(string)驼峰命名

(3).$contains(parent,node) 检查父节点是否包含给定的dom节点，如果两者是相同的节点 ，返回false

(4).each(collection,function(index,item){…})遍历数组或心key-value值对方式遍历对象。回调函数返回false停止遍历。

*%d带符号十进制数

%s字符串

（5）$.fn在此对象上添加的方法所有的zepto对象都能调用

（6）$.grep 获取包含回调函数中返回true的数组项

$.grep([1,2,3], function(item) {

return item > 1

})

（7）inArray 返回数组中指定元素的索引值

（8）isNumeric如何该值为有限数值或一个字符串表示则返回true

（9）isPLainObject 测试一个对象是否通过 对象常量（“{}”） 或者 new Object 创建的，如果是，则返回true。

（10) var callback = $.noop引用一个空函数

（11）$.parseJson接受一个标准格式的json并返回解析后的js对象

（12）add 添加元素到当前匹配的元素集合中

$(‘li’).add(‘p’).css(‘background-color’,‘red’)

（13）append在匹配元素末尾插入内容 after在匹配元素后面插入内容

（14）append appendTo区别

$(‘ul’).append(‘

• new list item
• ’)

  $(‘

• new list item
• ’).appendTo(‘ul’)

  （15 ) filter对象，过滤对象集合

  （16）forEach与each相似，都是遍历对象集合中的每个元素，但回调函数返回false时不停止遍历

  （17）get 从当前对象集合中获取指定的元素或所有元素

  ex: $(‘h2’).get()

  $(‘h2’).get(0)

  ( 18 )hasClass 检查对象集合中是否有元素含有指定的class

  ( 19 )获取或设置元素的html内容，不用innerHTML

  ( 20 )is判断当前元素集合中第一个元素是否符合css选择器

  ( 21）offSet获取当前元素在document的位置

  （22）offsetParent 找到第一个定位过的祖先元素

  （23）parent 获取直接父元素

  parents 获取所有祖先元素

  （24）pluck 获取对象元素的属性值，返回值是数组

  （25）prepend将内容插入到元素开头 prependTo(同appendTo）

  （26）prev 获取元素的前一个兄弟节点

  （27）prop读取或设置元素属性值，优先于attr

  （28）reduce 遍历当前对象集合，memo是上次函数的返回值，迭代进行遍历

  reduce(function(memo,item,index,array){}

  （29）removeClass 移除class名可用空格分隔

  （30）replaceWith 用给定内容替换所有匹配元素

  （31）slice（start, [end]) 提取数组的子集

  （32）text 方法不能用来获取或设置html，只能获取元素的文本内容

  （33）toggleClass 如果匹配元素有此class名就删除它，如果没有就添加它

  （34）unwrap 移除集合中每个元素的直接父节点，并把他们的子元素还保留在原来的公交车

  （35）wrap 在每个匹配的元素外层包上一个html元素 (".button a’).wrap(‘’)

  wrapAll 在所有匹配元素外层包一个单独结构 $(‘a.button’).wrapAll(‘

  ’)

  wrapInner 将每个的内容包在一个单独的结构中 （‘ol lu ‘),wrapInner(’

  ’)

  （36）Detect module

  该方法可以在不同的环境中微调你的站点或应用，可以识别手机或平板，以及不同系统和浏览器

  $.os.phone

  $.os.andriod

  4.zepto ajax

  (1). 默认情况下，ajax事件在document对象上触发。

  $(document).on(‘ajaxBeforeSend’, functio(e,xhr,options) {

  //页面上的每个ajax请求之前都会触发

  //可编辑ajax（）和xhr对象

  //通过返回false取消此操作

  }

  (2). 如果请求的context 是一个dom节点，那么在该dom节点中触发，然后在dom中冒泡。

  contenxt用于亩ajax相关回调函数的上下文（this指向）

  $.ajax({

  //请求方式

  type:'GET‘，

  //请求地址

  url:‘/projects’,

  //请求数据

  data:{ name: ‘zepto.js’},

  //期待服务器返回类型

  dataType: ‘json’,

  //请求超时时间

  timeout: 3000,

  //当前请求的this指向为body

  context: $(‘body’)

  //成功后的回调

  success: function(data) {

  {‘project’:{‘id’: 41, ‘html’: ‘

  …’}}

  //将返回的json对象（html）附加到上下文对象

  this.append(data.project.html)

  }

  //请求失败后的回调

  error: function(xhr,type) {

  alert(‘error’)

  }

  })

  //假定请求方式为post

  $.ajax({

  type:‘POST’,

  url:‘/’,

  data:JSON.Stringfy({‘name’:‘zepto.js’})

  //发送请求类型

  contentType:‘appliction/json’

  })

  (3).ajaxSettings

  包含ajax请求的默认设置对象

  (4).$.get(‘https://api.github.com/users/momo-0902’,function(response) {

  $(document.body).append(response)

  })

  !提示错误，Failed to execute ‘insertBefore’ on ‘Node’:parameter 1 is not of type ‘Node’.

  错误原因：无法在“Node”上执行“insertBefore”：参数1不是“Node”类型。

  请求回来的结果是一个json字符串，并不是一个Node类型

  * append在每个匹配的元素末尾插入内容，内容可为html字符串，dom节点，或者节点组成的数组

  将 $(document.body).append(response)改为console.log(response)可看请求成功的数据

  $(document.body).append(‘

  • hahaha
  • ’)可增加一个li节点 到body中。

    

    (5).$param 序列化一个对象

    (6).$.post(url,[data],function(data,status,xhr){},[dataType])

    $.post(‘/creat’,

    //serialize()在ajax post请求中将用作提交表单值编译成URL编码的字符串。

    $("#some_form’).serialize(),

    function(){

    })

    (7).load(url, function(data, status, xhr){ … })载入远程 html内容到当前集合中

    $("#some_element“).load(‘/foo.html #bar’) 匹配id为bar的html内容

    (8).ex

    $(“btn”).click(function() {

    $.ajax({

    url:‘user’,

    type:‘post’,

    data:("userName:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲userName").val(…(“passWord”).val()),

    async:false,

    success: functoin() {

    if(data == 0) {

    alert(‘用户名错误’)

    }else if(data == 2) {

    alert(‘密码错误’)

    }else {

    }

    }

    }）

    }）

    5.zepto 事件

    （1）.$Event(type,[properties])

    创建并初始化一个指定的dom事件，如果给定properties对象，使用它来扩展出新的事件对象。默认情况下，事件被设置为冒泡方式；这个可以通过设置bubbles为false来关闭。

    ( 2 ).$proxy

    接受一个函数，返回一个新函数‘

    并且这个新函数始终保持了特定的上下文(context)语境，新函数中this指向context参数。另外一种形式，原始的function是从上下文(context)对象的特定属性读取。

    ( 3 ) .off 移除通过on添加的事件

    ( 4 ).on为元素添加事件，事件以空格隔开

    ( 5 ).one为元素绑定一次性事件

    ( 6）.trigger 在元素集合上触发指定事件

    ( 7 ).triggerHandler 在指定元素上触发指定事件

    6.抓包工具

    抓包是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全，与数据截取等。

    chrome开发者工具－－network选项

    点击工具条上方小红点record network log，可以记录下整个访问过程中所有抓包结果，否则只记录当前页面的抓包结果。

    可查看网页相关数据信息，网址，接口请求状态，js,css,image等加载状态

    点击网址可看到有以下几个选项，Headers,Preview,Response,Cookies,Timing

    在Headers中包括请求地址，请求方式，请求头，请求方式，响应头，响应内容等

    在Response中可单独查看响应状态码的返回，返回数据等

    在Timing中可查看时间等

    2.Weinre全称WebINspector Remote(翻译过来是远程web检查器),可在PC上直接调试运行在移动端的远程页面，

    weinre工作原理

    Debug客户端（client)：本地的web检查器，远程调试客户端

    Debug服务端(agent)：本地的HTTPServer，为Debug客户端与Debug目标页面建立通信

    Debug目标页面：被调试的目标页面，页面已嵌入weinre的远程js

    客户端、目标页面与Debug服务端之间使用XMLHttpRequest (XHR)进行HTTP通信，你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境，Debug目标页面放在移动设备。

    安装方式 ：npm install-g weinre

    过程中尝试用yarn install 安装，但因为yarn的安装位置问题，导致weinre不可用，所以还是建议用npm 安装

    步骤

    (1) 在本地开启监听服务器，ipconfig查看本地ip

    weinre --boundHost [hostname | ip address |-all-]  --httpPort [port]

    weinre -boundHost 192.168.2.45

    

    

    (2)可用weinre --httpPort 8081 --boundHost 192.268.2.45

    (3)访问weinre及在页面上调用

    （4）在调式的页面中加入远程调式所需要的JS代码

    （5）点击第一个链接

    

    

    （6）进入此页面，如果连接成功，网址变成绿色，按钮显示高亮

    

    

    （7）可下载草料二维码，将浏览器地址的127.0.0.1改为192.168.2.45,端口不变，此端口与weinre服务器端口不一样，此端口是访问页面的端口

    （8）多用户调试

    改变中的id"#anonymous"为自己的id（例#product),

    

    

    然后访问网址从http://192.168.2.45:8080/client/#anonymous改为http://192.168.2.45:8080/client/#product即可

    

    注意：每次开机都有新的ip地址，这是页面中标签中的Ip地址与页面访问ip地址也要做相应更改。

    

    7.chrome开发者工具

    

    1、点击文件中相应代码的行数选择断点，在右侧Breakpoints中有所有打过的断点列表，点击对应checkout的第一行取消该断点，点击下一行，直接跳到该代码处。

    

    

    2、刷新或者点击页面开始执行断点也调试。

    3、6个按钮

    （1）

    

    

    pause script excutio 【单步执行，在断点处暂停，等待调试】暂时后变为

    

    

    Resume script excution【继续执行】快捷键 F8或者ctrl + \

    

    

    (2)Step over next function call【单步跳过】跳到下一个断点，快捷键F10或者ctrl+`

    

    

    在69行和70行分别设置两个断点，先执行69行断点，在jquery中寻找源码后继续执行下一个断点，即alert(‘123’)

    如果没有断点了就继续执行完这个click函数，执行$(“#txt”).val(txt);然后执行if-else分支，但不进入if-else函数中

    

    

    （3）Step into next function call 【单步进入】进入函数内部调试，快捷键【F11 或者 Ctrl + ;】

    

    

    继续点击

    

    执行下一步，

    

    

    直到跳出if条件语句的判断

    （4）

    

    Step out of current function 【单步跳出】，跳出当前断点的函数快捷键【Shift + F11 或者 Ctrl + Shift + ;】

    （5）

    

    使所有断点临时失效

    （6）

    

    Don’t Pause on exceptions:不要在表达式处暂停，

    pause on caught exceptions 当抛出错误的时候暂停

    (7) 在element处右击dom元素,设置此dom为断点

    *子节点变化断点 (subtree modifications)

    主要针对子节点增加、删除以及交换顺序等操作，但子节点进行属性修改和内容修改并不会触发断点。

    

    

    *节点属性断点 (attributes modifications)

    *节点移除断点 (node removal)

    ( 8 ) xhr断点 异步请求时触发断点

    （9）事件断点 在所选事件发生时触发断点

    

    （10）js source断点 执行到此断点时会一步步看到当前作用域中所有变量的值

    

    

    8.Zepto动画

    zepto动画需要引入fx模块，用css动画实现

    animiate(动画对象，花费时间，动画类型，动画完成时的回调函数）

    ex1:

    $(“#banner ul”).animate({marginLeft:“-800px”},600, function () {

    $(“#banner ul”).css(‘marginLeft’,‘0px’);

    });

    最后

    自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

    深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

    因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

    

    

    

    既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

    如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

    由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
    /400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

    [外链图片转存中…(img-tnB0Ot5O-1715882846438)]

    *节点属性断点 (attributes modifications)

    *节点移除断点 (node removal)

    ( 8 ) xhr断点 异步请求时触发断点

    （9）事件断点 在所选事件发生时触发断点

    

    （10）js source断点 执行到此断点时会一步步看到当前作用域中所有变量的值

    

    [外链图片转存中…(img-yIC102ac-1715882846439)]

    8.Zepto动画

    zepto动画需要引入fx模块，用css动画实现

    animiate(动画对象，花费时间，动画类型，动画完成时的回调函数）

    ex1:

    $(“#banner ul”).animate({marginLeft:“-800px”},600, function () {

    $(“#banner ul”).css(‘marginLeft’,‘0px’);

    });

    最后

    自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

    深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

    因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

    [外链图片转存中…(img-iKHUbZdv-1715882846439)]

    [外链图片转存中…(img-K4G3dERb-1715882846439)]

    [外链图片转存中…(img-9lsVC3f4-1715882846439)]

    既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

    如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

    由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！