首页
Search
1
解决visual studio code (vscode)安装时没有选择安装路径问题
320 阅读
2
如何在 Clash for Windows 上配置服务
215 阅读
3
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
150 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
149 阅读
5
uniapp打包app提示通讯录权限问题,如何取消通讯录权限
113 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
1,190
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
1190
篇与
的结果
2024-10-21
js中的内部属性与delete操作符
在讲解Configurable之前,我们首先来看一道面试题:a = 1; console.log( window.a ); // 1 console.log( delete window.a ); // true console.log( window.a ); // undefined var b = 2; console.log( window.b ); // 2 console.log( delete window.b ); // false console.log( window.b ); // 2 从上面的这道题可以看出两个的区别:在没有使用var声明变量时,使用delete关键词是可以进行删除的,再次获取时值就是undefined了;在使用var声明的变量,使用delete是不能删除的,再获取时值依然是2。 1. delete操作符 # 使用delete删除变量或属性时,删除成功返回true,否则返回false。如上面的例子中,delete无法删除变量a时,则返回false;而delete能成功删除变量b,则返回true。除了上述的两种情况,还有其他的各种常用变量也有能被delete删除的,也有不能被删除的。我们先不管delete这些变量时,为什么会产生这样的结果,这里只看他的返回值:删除delete数组中其中的一个元素:// 使用for~in是循环不到的,直接忽略到该元素 // 使用for()可以得到该元素,但是值是undefined var arr = [1, 2, 3, 4]; console.log( arr ); // [1, 2, 3, 4] console.log( delete arr[2] ); // true,删除成功 console.log( arr ); // [1, 2, undefined, 4] 删除function类型的变量:// chrome 不能删除;火狐可以删除 function func(){ } console.log( func ); console.log( delete func ); console.log( func ); 删除function.length,该length是获取形参的个数:function func1(a, b){ } console.log( func1.length ); // 2 console.log( delete func1.length ); // true,删除成功 console.log( func1.length ); // 0 删除常用变量:console.log( delete NaN ); // false,删除失败 console.log( delete undefined );// false console.log( delete Infinity ); // false console.log( delete null ); // true,删除成功 删除prototype,而不是删除prototype上的属性:function Person(){ } Person.prototype.name = "蚊子"; console.log( delete Person.prototype ); // false,无法删除 console.log( delete Object.prototype ); // false 删除数组和字符串的length时:var arr = [1, 2, 3, 4]; console.log( arr.length ); // 4 console.log( delete arr.length ); // false,删除失败 console.log( arr.length ); // 4 var str = 'abcdefg'; console.log( str.length ); // 7 console.log( delete str.length ); // false,删除失败 console.log( str.length ); // 7 删除obj中的属性时:var obj = {name:'wenzi', age:25}; console.log( obj.name ); // wenzi console.log( delete obj.name ); // true,删除成功 console.log( obj.name ); // undefined console.log( obj ); // { age:25 } 删除实例对象中的属性时,从以下的输出结果可以看出,使用delete删除属性时,删除的仅仅是实例对象本身的属性,而不能删除prototype上的属性,即使再删一次也是删除掉不的;若要删除prototype上的属性的属性或方法,只能是:delete Person.prototype.name:function Person(){ this.name = 'wenzi'; } Person.prototype.name = '蚊子'; var student = new Person(); console.log( student.name ); // wenzi console.log( delete student.name ); // true,删除成功 console.log( student.name ); // 蚊子 console.log( delete student.name ); // true console.log( student.name ); // 蚊子 console.log( delete Person.prototype.name );// true,删除成功 console.log( student.name ); // undefined 2. js的内部属性 # 在上面的例子中,有的变量或属性能够删除成功,而有的变量或属性则无法进行删除,那是什么决定这个变量或属性能不能被删除呢。ECMA-262第5版定义了JS对象属性中特征(用于JS引擎,外部无法直接访问)。ECMAScript中有两种属性:数据属性和访问器属性。 2.1 数据属性 # 数据属性指包含一个数据值的位置,可在该位置读取或写入值,该属性有4个供述其行为的特性: configurable:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true; Enumberable:表示是否可通过for-in循环返回属性。默认true; Writable:表示是否可修改属性的值。默认true; Value:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象Person中定义了name属性,其值为’wenzi’,对该值的修改都反正在这个位置 要修改对象属性的默认特征(默认都为true),可调用Object.defineProperty()方法,它接收三个参数:属性所在对象,属性名和一个描述符对象(必须是:configurable、enumberable、writable和value,可设置一个或多个值)。如下:var person = {}; Object.defineProperty(person, 'name', { configurable: false, // 不可删除,且不能修改为访问器属性 writable: false, // 不可修改 value: 'wenzi' // name的值为wenzi }); console.log( person.name); // wenzi console.log( delete person.name ); // false,无法删除 person.name = 'lily'; console.log( person.name ); // wenzi 可以看出,delete及重置person.name的值都没有生效,这就是因为调用defineProperty函数修改了对象属性的特征;值得注意的是一旦将configurable设置为false,则无法再使用defineProperty将其修改为true(执行会报错:Uncaught TypeError: Cannot redefine property: name); 2.2 访问器属性 # 它主要包括一对getter和setter函数,在读取访问器属性时,会调用getter返回有效值;写入访问器属性时,调用setter,写入新值;该属性有以下4个特征: [[Configurable]]:是否可通过delete操作符删除重新定义属性; [[Numberable]]:是否可通过for-in循环查找该属性; [[Get]]:读取属性时自动调用,默认:undefined; [[Set]]:写入属性时自动调用,默认:undefined; 访问器属性不能直接定义,必须使用defineProperty()来定义,如下:var person = { _age: 18 }; Object.defineProperty(person, 'isAdult', { Configurable : false, get: function () { if (this._age >= 18) { return true; } else { return false; } } }); console.log( person.isAdult ); // true 不过还是有一点需要额外注意一下,Object.defineProperty()方法设置属性时,不能同时声明访问器属性(set和get)和数据属性(writable或者value)。意思就是,某个属性设置了writable或者value属性,那么这个属性就不能声明get和set了,反之亦然。如若像下面的方式进行定义,访问器属性和数据属性同时存在:var o = {}; Object.defineProperty(o, 'name', { value: 'wenzi', set: function(name) { myName = name; }, get: function() { return myName; } }); 上面的代码看起来貌似是没有什么问题,但是真正执行时会报错,报错如下: Uncaught TypeError: Invalid property. A property cannot both have accessors and be writable or have a value 对于数据属性,可以取得:configurable,enumberable,writable和value;对于访问器属性,可以取得:configurable,enumberable,get和set。由此我们可知:一个变量或属性是否可以被删除,是由其内部属性Configurable进行控制的,若Configurable为true,则该变量或属性可以被删除,否则不能被删除。可是我们应该怎么获取这个Configurable值呢,总不能用delete试试能不能删除吧。有办法滴!! 2.3 获取内部属性 # ES5为我们提供了Object.getOwnPropertyDescriptor(object, property)来获取内部属性。如:var person = {name:'wenzi'}; var desp = Object.getOwnPropertyDescriptor(person, 'name'); // person中的name属性 console.log( desp ); // {value: "wenzi", writable: true, enumerable: true, configurable: true} 通过Object.getOwnPropertyDescriptor(object, property)我们能够获取到4个内部属性,configurable控制着变量或属性是否可被删除。这个例子中,person.name的configurable是true,则说明是可以被删除的:console.log( person.name ); // wenzi console.log( delete person.name ); // true,删除成功 console.log( person.name ); // undefined 我们再回到最开始的那个面试题:a = 1; var desp = Object.getOwnPropertyDescriptor(window, 'a'); console.log( desp.configurable ); // true,可以删除 var b = 2; var desp = Object.getOwnPropertyDescriptor(window, 'b'); console.log( desp.configurable ); // false,不能删除 跟我们使用delete操作删除变量时产生的结果是一样的。 3. 总结 # 别看一个简简单单的delete操作,里面其实包含了很多的原理!
2024年10月21日
7 阅读
0 评论
0 点赞
2024-10-21
angular初探
AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。跟着教程学习了几天,给我的感觉就是:不用自己再显式的用 js 给 DOM 元素绑定事件,只需添加一个 angular 特有的字段即可;像是使用后端语言那样对 DOM 进行操作,比如循环输出数组中的元素;自己写一个控制器,就能对页面进行操作。AngularJS 使用了不同的方法,它尝试去补足 HTML 本身在构建应用方面的缺陷。AngularJS 通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如: 使用双大括号语法进行数据绑定; 使用 DOM 控制结构来实现迭代或者隐藏 DOM 片段; 支持表单和表单的验证; 能将逻辑代码关联到相关的 DOM 元素上; 能将 HTML 分组成可重用的组件。 1. AngularJS 简介 # AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。ng-app 指令标记了 AngularJS 脚本的作用域,在中添加 ng-app 属性即说明整个都是 AngularJS 脚本作用域。开发者也可以在局部使用 ng-app 指令,如,则 AngularJS 脚本仅在该 div 中运行。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 1.1 一个简单的数据绑定 # 实时的实现输入框的值 angular 在上面的程序中,实现了在输入框中输入一个值,能马上在 p 标签中显式出来。ng-mdel指令把输入域的值绑定到应用程序变量 username,ng-bind指令把应用程序变量 username 绑定到某个段落(上面的 p 标签)的 innerHTML 上。如果去掉 html 标签上的ng-app,则功能失效 1.2 一个简单的循环输出 # 在我们使用后端语言模板的时候,通常会使用循环输出一些类似的数据。angular 也有这样的功能: angular name:{{ item.name }} age:{{ item.age }} 首先我们使用ng-init初始化一组数据 data,然后使用ng-repeat对 data 进行循环输出。ng-repeat放在哪个标签上,就是对这个标签进行循环,这里循环的是 li 标签;其中的每一项就是item,然后可以通过item.name,item.age输出 name 和 age 的值。当然,还可以不使用ng-init初始化数据,直接对数组进行循环: angular name:{{ item.name }} age:{{ item.age }} 1.3 AngularJS 过滤器 # 过滤器可以使用一个管道字符(|)添加到表达式和指令中。AngularJS 过滤器可用于转换数据: currency:格式化数字为货币格式; filter:从数组项中选择一个子集; lowercase:格式化字符串为小写; orderBy:根据某个表达式排列数组; uppercase:格式化字符串为大写 过滤器的简单使用: 大写:{{ 'wenzi'|uppercase }} 小写:{{ 'Country'|lowercase }} name:{{ item.name }} age:{{ item.age }} 1.4 控制器 # AngularJS 控制器 控制 AngularJS 应用程序的数据。ng-controller指令定义了应用程序控制器: angular {{ name }} {{ age }} {{ male }} var app = angular.module('myApp', []); // 定义Person控制器 app.controller('Person', function($scope){ $scope.name = 'wenzi'; $scope.age = 24; $scope.male = 'male'; }) angular 使用$scope对象来调用控制器,控制器的$scope 用来保存 angularJS model(模型)的对象。控制在作用域中创建了三个属性:name, age, male。控制器中还可以添加方法:app.controller("Person", function ($scope) { $scope.name = "wenzi"; $scope.age = 24; $scope.male = "male"; // 获取当前时间 $scope.getTime = function () { return new Date().getTime(); }; }); 1.5 HTTP # angular 中的$http是一个用于读取 web 服务器上数据的服务。$http.get(url)获取链接 url 中返回的数据: name:{{item.name}} age:{{item.age}} sex:{{item.sex}} var app = angular.module("myApp", []); // $http的用法跟$.ajax用法很相似 app.controller("getJson", function ($scope, $http) { $http.get("./interface.php").success(function (data) { $scope.result = data; }); }); 2. 为 DOM 添加属性 # angular 能通过ng-*为 DOM 添加属性,如: 指令值说明 ng-disabledboolean添加disabled属性 ng-showboolean显示HTML元素 ng-hideboolean隐藏HTML元素 ng-click定义angular点击事件 如下面的代码简单的介绍了这些指令的使用:点击 要隐藏的元素 现在我们来写个稍微有点复杂的程序: {{ count }} 点击+1 隐藏|显示 {{ count }} var app = angular.module("myApp", []); app.controller("toggleController", function ($scope) { $scope.myVar = false; $scope.toggle = function () { $scope.myVar = !$scope.myVar; }; }); 3. 一个 angular 应用 # 学了一些东西,让我们来写一个小的 web 应用,能记录输入框的剩余字数,能获取和删除输入框的内容【查看演示】: angular 我的笔记 保存 清除 剩余字数:100 var app = angular.module('myApp', []); app.controller('textController', function($scope){ $scope.message = ''; $scope.save = function(){ alert( $scope.message ); } $scope.left = function(){ return 100 - $scope.message.length; } $scope.reset = function(){ $scope.message = ''; } })
2024年10月21日
6 阅读
0 评论
0 点赞
2024-10-21
javascript如何添加前置0
JavaScript 中的数字是没有前置 0 的,因此需要我们自己进行操作来添加前置 0,而且还得转换成字符串。假如生成一个是一共是 4 位的有前置 0 的数据,通常我们能想到的方法是这样子的:function addPreZero(num) { if (num < 10) { return '000' + num; } if (num < 100) { return '00' + num; } if (num < 1000) { return '0' + num; } return num; } 这种方式的思路比较简单,根据当前数据的位数来补充相应个数的前置 0;不过这样的算法写起来比较麻烦,如果需要的前置 0 非常多的话,那么得写很多的if...else。还是基于这种思路,我们可以先算出这个数字有多少位,然后直接补上相应的 0 就行了:function addPreZero(num) { var t = (num + '').length, s = ''; for (var i = 0; i < 4 - t; i++) { s += '0'; } return s + num; } 这种方式的实现,是根据当前 num 的位数,来计算出所有的前置 0,然后再拼接上 num。在这个基础上,我们还可以这样考虑:比如需要一共是 10 位的有前置 0 的数据,那么首先不管当前数字是多少位的,都先补上 9 个前置 0,然后再截取这个字符串最后的 10 位,那么获取到的就是需要的数据:function addPreZero(num) { return ('000000000' + num).slice(-10); } 2022 年 6 月更新:在 ECMAScript 2017 中,字符串中新增了padStart和padEnd 两个方法,用来给字符串添加前置字符串和后置字符串。const num = 123; num.toString().padStart(10, '0'); // '0000000123' 第 1 个参数表示目标字符串的长度,若设定的长度小于当前字符串的长度,则原样返回;否则,就用第 2 个参数里的字符串进行重复填充,直到满足设定长度。实现想要的结果很多的方法,我们应该尽可能的想出更多的方法,一方面能够拓展我们的思维,另一方面也能让我们选择出更好的方式。
2024年10月21日
10 阅读
0 评论
0 点赞
2024-10-21
jquery如何禁止外层滚动条的滚动
通常情况下,当内部滚动条滚动到两端时,再接着滚动时外层的滚动条就会跟着滚动;可是有时我们希望用户只能滚动当前区域,而不触发外层(window)的滚动条,离开当前区域后,才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了,导致当前区域离开可视区域。在jquery中,滚动事件是scroll,而这个事件是不能阻止冒泡和阻止默认事件的。假如我们设定要禁止window的滚动条,我采取的策略是:当鼠标进入到当前区域后,则window的滚动条的高度始终是鼠标进入前的高度,如下的代码:.main{ overflow: auto; width: 400px; height: 400px; border: 1px solid #aaa; } .main p{ height: 800px; } $(function () { var scrollTop = -1; // 鼠标进入到区域后,则存储当前window滚动条的高度 $('#main').hover(function(){ scrollTop = $(window).scrollTop(); }, function(){ scrollTop = -1; }); // 鼠标进入到区域后,则强制window滚动条的高度 $(window).scroll(function(){ scrollTop!==-1 && $(this).scrollTop(scrollTop); }) }) 从上面的代码可以看到,我并没有阻止window滚动条的事件,而是用户每次滚动时,都会重新进行赋值。当然,或许还有更好的方法,欢迎大家提供,谢谢!
2024年10月21日
8 阅读
0 评论
0 点赞
2024-10-21
img图片与容器下边界的缝隙的解决方式
今天在给图片弄hover遮罩时,发现遮罩的下方与图片的下边界没有对齐,而是多了4px左右,这里就记录下几个解决方案。通常在img图片的父级容器是块级元素时,就会造成如下的现象:.css_img_main{border: 1px solid #f00; width: 475px;} 我们看到图片的下边界与div中间有个小的缝隙,那么我们就得需要解决这个问题。如果不解决这个问题的话,那底部有个遮罩的话,那也就不能跟图片的下边界对齐了。 这里简单的介绍3个解决方案: 1. 给图片添加vertical-align属性 # .main img{ vertical-align : bottom; // top, middle } 只要vertical-align的值是以上三个中任意的一个,就能解决缝隙的问题。 2. 定义容器里的字体大小为0 # .main{ font-size : 0; } 这样也可以解决缝隙的问题。 3. 把图片设置为块级元素 # .main img{ display : block; } 据说,图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。
2024年10月21日
13 阅读
0 评论
0 点赞
1
...
41
42
43
...
238