1. This point
(Write an article for the first time, ha ha ha ha, and record the summary of the first month’s internship)
This refers to whoever calls it
Define a function globally:
function a(){
console.log(this) / / this point to the window
}
a() // equivalent to window.a()
Copy the codeObject to which the function this points
case1:
var name="windowName"
var obj={
name:"objName".a:function(){
console.log(this.name) //objName
}
}
obj.a() // Function a is called by object obj, so the printed value is the value of name in obj
例2:
var name="windowName"
var obj={
name:"objName".a:function(){
console.log(this.name) //objName}}window.obj.a() // This refers to the object that did not finally call it
例3:
var name="windowName"
var obj={
name:"objName".a:function(){
console.log(this) //window
console.log(this.name) //windowNmae }}var f=obj.a // f is not called, although method a in obj is assigned to variable f
f() // this is equivalent to window.f(), so this points to window
例4:
var name="windowName"
var obj=function(){
name:"objName",
a() Call as a function (it is called as a function and is not mounted on any object, so this refers to window in non-strict mode for functions that are not mounted on any object)
function a(){
console.log(this.name) //windowName
}
}
obj() / / the window with
Copy the code2. Change the this pointer
4 methods:
1.Arrow function2.newThe operator3.call,apply,bind
Copy the code1. Arrow function (does not have this pointer itself, the this pointer inside the arrow function is the parent of this pointer)
case1:
var name = "windowsName";
var a = {
name : "objName".func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () { // Because setTimeout is called on a window, there is no func2() function under the window
this.func1()
},100); }}; a.func2()// this.func1 is not a function
例2:
var name = "windowsName";
var a = {
name : "objName".func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout(() = >{ // Use the arrow function to make this in the timer function point to object A
this.func1()
},100); }}; a.func2()//objName
Copy the code3.call,apply,bind
case1:
var name = "windowsName";
var a = {
name : "objName".func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.call(a),100); }}; a.func2()/ / output objName
例2 :
var name = "windowsName";
var a = {
name : "objName".func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.apply(a),100); }}; a.func2()/ / output objName
例3:
var name = "windowsName";
var a = {
name : "objName".func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.bind(a)(),100); }}; a.func2()/ / output objName
Copy the code4. Call the apply, bind the difference
The apply: apply() method calls a function that has a specifiedthisValue, and arguments supplied as an array (or array-like object) syntax :fun.apply(thisArg,[thisArg,[Array])
thisArg: indicates what fun specifies at run timethisvalueArray: an array or an array-like object whose array elements are passed as separate arguments to fun (optionally without arguments) Example:var a ={
name : "objName".fn : function (a,b) {
console.log( a + b)
}
}
var b=a.fn
b.apply(a,[1.2]) / / 3
callThisArg,a,b,cvar a ={
name : "objName".fn : function (a,b) {
console.log( a + b)
}
}
var b = a.fn;
b.call(a,1.2) / / 3
bindCreate a new function that needs to be called manually:var a ={
name : "objName".fn : function (a,b) {
console.log( a + b)
}
}
var b = a.fn;
b.bind(a,1.2) ()Copy the code5. Form input classes
5.1 Do not enter a space
onkeyup="this.value=this.value.replace(/[, ]/g,'')"
Copy the code5.2 Only Numbers can be entered
value=value.replace(/[^\d]/g.' ')"
Copy the code5.3 Id Card Verification
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(reg.test($scope.data.idCard)==false){
dataState = false
}
Copy the code5.4 Mailbox Verification
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if(reg.test($scope.data.mailbox)==false) {// Mailbox authentication failed
dataState = false
}
Copy the code5.5 Phone Verification
var reg =/ ^ ([1] \ d {10} | ([\ [(]? 0 [0-9] {2, 3} \] [)? [-]? ? ([2-9] [0-9] {6, 7}) + (\ [0-9] {1, 4})?) $/
if(reg.test($scope.data.telephone)==false||reg.test($scope.data.telephoneNow)==false){
dataState = false
}
Copy the code5.6 Maximum number of entries
Add: maxLength = to the form attribute"1000"(This is needed because, for example, the change event on a form will be out of range when Chinese is entered.)Copy the code6. Star selection
chooseScore:function(index,e){
var imgWidth=24 // Width of the star
var marginRight=18 // The distance between two stars
var x=null
for(var i=0; i<5; i++){// When clicking on a star, all stars show no status
$scope.aboutStar.star[i].imgUrl='.. /.. /.. /.. /images/star.png'
}
if(index==0){
x=e.clientX
if(x<=12){
$scope.aboutStar.star[index].imgUrl='.. /.. /.. /.. /images/halfStar.png'
$scope.data.fraction=0.5
}
else{
$scope.aboutStar.star[index].imgUrl='.. /.. /.. /.. /images/allStar.png'
$scope.data.fraction=1}}if(index>=1){
x=e.clientX-(index*imgWidth)// The width of the front star
-(index*marginRight) // The distance between the stars ahead
if(x<=12){
$scope.aboutStar.star[index].imgUrl='.. /.. /.. /.. /images/halfStar.png'
$scope.data.fraction=0.5* (2*index+1)
for(var i=0; i<index; i++){ $scope.aboutStar.star[i].imgUrl='.. /.. /.. /.. /images/allStar.png'}}else{
$scope.aboutStar.star[index].imgUrl='.. /.. /.. /.. /images/allStar.png'
$scope.data.fraction=0.5* (2*index+2)
for(var i=0; i<index; i++){ $scope.aboutStar.star[i].imgUrl='.. /.. /.. /.. /images/allStar.png'}}}},Copy the code7. Native implementation of paging (unlimited refresh)
var flag=true // Throttling status
var timer=null / / timer
var page=0 // The initial page count is 0
var pageSize=10 // The number of entries per page
var scroll=functin(){ // Slider scroll function
var scroll=null // The distance from the scroll bar to the top
var scrollHeight = null // The actual height of the page
var documentHeight = document.documentElement.clientHeight // Visual height
var distance = 40 // When the scrollbar is smaller than this height, load data
document.onscroll = function () {
scroll = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset // Implement compatibility
scrollHeight = document.documentElement.scrollHeight
// Trigger request data
if (scrollHeight - documentHeight - scroll <= distance) {
actionScroll(); // Execute the triggered callback}}}function actionScroll() {
if(! flag) {// If flag is false return
return
}
flag = false
timer = $timeout(function () {
page = page += 1
postData.page=page
// Request data
videoService.listWorkplaceViolations(postData).then(function (res) {
var data = res.data.data
$scope.data.detail = $scope.data.detail.concat(data.content)
flag = true})},200)}Copy the code8. Fuzzy search
<input class="weui-input" type="text" placeholder="Please enter keywords" ng-model="searchInput"
ng-change="changeSearchObj()"
/>
Copy the code// Make sure you are not shaking
$scope.antiShake={
timer:null,}// The buffeting function
function antiFn(){
if($scope.antiShake.timer! = =null) {clearTimeout( $scope.antiShake.timer);
}
$scope.antiShake.timer=$timeout(getPersonList,1000)
}
$scope.changeSearchObj = function () {
antiFn()
};
function getPersonList() {
var data = {
projectId: $scope.projectId,
page: $scope.page,
content: $scope.searchInput
};
employeeService.findLaborListByProjectId(data).then(function (res) {
console.log('Send request')})}Copy the code