Tag: JavaScript
-
悟透 JavaScript
引子 编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。 数据天生就是文静的，总想保持自己固有的本色；而代码却天生活泼，总想改变这个世界。 你看，数据代码间的关系与物质能量间的关系有着惊人的相似。数据也是有惯性的，如果没有代码来施加外力，她总保持自己原来的状态。而代码就象能量，他存在的唯一目的，就是要努力改变数据原来的状态。在代码改变数据的同时，也会因为数据的抗拒而反过来影响或改变代码原有的趋势。甚至在某些情况下，数据可以转变为代码，而代码却又有可能被转变为数据，或许还存在一个类似 E=MC2 形式的数码转换方程呢。然而，就是在数据和代码间这种即矛盾又统一的运转中，总能体现出计算机世界的规律，这些规律正是我们编写的程序逻辑。 不过，由于不同程序员有着不同的世界观，这些数据和代码看起来也就不尽相同。于是，不同世界观的程序员们运用各自的方法论，推动着编程世界的进化和发展。 众所周知，当今最流行的编程思想莫过于面向对象编程的思想。为什么面向对象的思想能迅速风靡编程世界呢？因为面向对象的思想首次把数据和代码结合成统一体，并以一个简单的对象概念呈现给编程者。这一下子就将原来那些杂乱的算法与子程序，以及纠缠不清的复杂数据结构，划分成清晰而有序的对象结构，从而理清了数据与代码在我们心中那团乱麻般的结。我们又可以有一个更清晰的思维，在另一个思想高度上去探索更加浩瀚的编程世界了。 在五祖弘忍讲授完《对象真经》之后的一天，他对众弟子们说：“经已讲完，想必尔等应该有所感悟，请各自写个偈子来看”。大弟子神秀是被大家公认为悟性最高的师兄，他的偈子写道：“身是对象树，心如类般明。朝朝勤拂拭，莫让惹尘埃！”。此偈一出，立即引起师兄弟们的轰动，大家都说写得太好了。只有火头僧慧能看后，轻轻地叹了口气，又随手在墙上写道：“对象本无根，类型亦无形。本来无一物，何处惹尘埃？”。然后摇了摇头，扬长而去。大家看了慧能的偈子都说：“写的什么乱七八糟的啊，看不懂”。师父弘忍看了神秀的诗偈也点头称赞，再看慧能的诗偈之后默然摇头。就在当天夜里，弘忍却悄悄把慧能叫到自己的禅房，将珍藏多年的软件真经传授于他，然后让他趁着月色连夜逃走… 后来，慧能果然不负师父厚望，在南方开创了禅宗另一个广阔的天空。而慧能当年带走的软件真经中就有一本是《JavaScript 真经》！ 回归简单 要理解 JavaScript，你得首先放下对象和类的概念，回到数据和代码的本原。前面说过，编程世界只有数据和代码两种基本元素，而这两种元素又有着纠缠不清的关系。JavaScript 就是把数据和代码都简化到最原始的程度。 JavaScript 中的数据很简洁的。简单数据只有 undefined, null, boolean, number 和 string 这五种，而复杂数据只有一种，即 object。这就好比中国古典的朴素唯物思想，把世界最基本的元素归为金木水火土，其他复杂的物质都是由这五种基本元素组成。 JavaScript 中的代码只体现为一种形式，就是 function。 注意：以上单词都是小写的，不要和 Number, String, Object, Function 等 JavaScript 内置函数混淆了。要知道，JavaScript 语言是区分大小写的呀！ 任何一个 JavaScript 的标识、常量、变量和参数都只是 unfined, null, bool, number, string, object 和 function…
-
click 事件触发也有失灵的时候？
今天做了个手机页面，点击某个按钮 -> 弹出菜单，再点击菜单以外的任意位置 -> 关闭菜单，在其他浏览器里面没有问题，但是在 IOS 浏览器中并不会关闭。 网上解决这个 bug 的帖子很多，这篇帖子主要是讲原理，这里写个简单的代码，大家可以复制到自己页面中去实验： 上面这段代码在其他浏览器里面没有问题，在 IOS 的浏览器中，点击链接和按钮都会有弹窗，但是点击其他区域却没有。 原因是因为 IOS 浏览器的按钮和链接才响应 click 事件，其他标签不响应，所以点击链接和按钮之外的其他地方并不会把 click 事件冒泡到 body 上。 我们做一个比喻来理解这个事件是怎么运作的： 屏幕被点击后，系统会发送一个事件公告 (click), 链接和按钮收到这个公告后会处理相应的行为（比如打开个新页面，提交表单，用户绑定的其他行为）window、document、body、div 并不会搭理这个公告，跟没看到似的，自然也就没有弹窗出现body 只接受内部的冒泡事件，点击按钮后触发了按钮的 click 事件，然后按钮会告诉自己的上级（body）：老大，我被点击了，body 会说：好的，我会处理的，这时候弹窗就出来了。body 里面的 div，span 等标签默认是不会理睬 click 事件公告的，但是我们可以开启他，开启后他们就跟按钮一样，可以接受 click 事件，并汇报给上级。开启方法：给标签绑定一个任意事件↓ 1.HTML 标签中添加事件属性 2. 用 js 或者 jquery 绑定一个事件 所以最后我们的弹出菜单可以这样写
-
JavaScript 中 JSON 对象合并的方法
JavaScript 中的 JSON 对象不能像 PHP 中的 json_decode 转换为数组去处理，下面的解决方案，虽然不够美观，但实际上确是有效的解决方案。 如果需要将下面的 json 对象合并： 想得到结果： 直接使用 js 的话，可以用一下方法：
-
JavaScript 创建对象的七种方式
JavaScript 创建对象的方式有很多，通过 Object 构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。接下来介绍七种非常经典的创建对象的方式，他们也各有优缺点。 工厂模式 可以无数次调用这个工厂函数，每次都会返回一个包含两个属性和一个方法的对象 工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象识别问题，即不能知道一个对象的类型 构造函数模式 没有显示的创建对象，使用 new 来调用这个构造函数，使用 new 后会自动执行如下操作 使用这个方式创建对象可以检测对象类型 但是使用构造函数创建对象，每个方法都要在每个实例上重新创建一次 原型模式 将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法，不必在构造函数中定义对象实例信息。 原型是一个非常重要的概念，在一篇文章看懂 proto 和 prototype 的关系及区别中讲的非常详细 更简单的写法 将 Person.prototype 设置为等于一个以对象字面量形式创建的对象，但是会导致.constructor 不在指向 Person 了。 使用这种方式，完全重写了默认的 Person.prototype 对象，因此 .constructor 也不会存在这里 如果需要这个属性的话，可以手动添加 不过这种方式还是不够好，应为 constructor 属性默认是不可枚举的，这样直接设置，它将是可枚举的。所以可以时候，Object.defineProperty 方法 缺点 使用原型，所有的属性都将被共享，这是个很大的优点，同样会带来一些缺点 原型中所有属性实例是被很多实例共享的，这种共享对于函数非常合适。对于那些包含基本值的属性也勉强可以，毕竟实例属性可以屏蔽原型属性。但是引用类型值，就会出现问题了 friends 存在与原型中，实例 person1 和 person2 指向同一个原型，person1 修改了引用的数组，也会反应到实例 person2 中 组合使用构造函数模式和原型模式 这是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点 使用此模式可以让每个实例都会有自己的一份实例属性副本，但同时又共享着对方法的引用 这样的话，即使实例属性修改引用类型的值，也不会影响其他实例的属性值了 动态原型模式 动态原型模式将所有信息都封装在了构造函数中，初始化的时候，通过检测某个应该存在的方法时候有效，来决定是否需要初始化原型 只有在 sayName 方法不存在的时候，才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。…
-
JavaScript 终止函数执行
在 PHP 中，应该也是有 return 用法的，但是 PHP 还有 exit 和 die 的用法实现功能。 1、如果终止一个函数的用 return 即可，实例如下：function testA(){ alert(‘a’); alert(‘b’); alert(‘c’);}testA (); 程序执行会依次弹出 ‘a’,’b’,’c’。 function testA(){ alert(‘a’); return; alert(‘b’); alert(‘c’);}testA (); 程序执行弹出 ‘a’ 便会终止。 2、在函数中调用别的函数，在被调用函数终止的同时也希望调用的函数终止，实例如下：function testC(){ alert(‘c’); return; alert(‘cc’);} function testD(){ testC(); alert(‘d’);}testD (); 我们看到在 testD 中调用了 testC，在 testC 中想通过 return 把 testD 也终止了，事与愿违 return 只终止了 testC，程序执行会依次弹出 ‘c’,’d’。…
-
js/base.js?v=201011301200 后面问号这样写什么意思
? 之后的字符和网址的参数道理上是一样的， 但一般在这里并没有真正的用到。只是为了在更新脚本的时候强制浏览器下载新版本 比如我以前写一个页面，用到这个脚本，路径写一个 js/base.js?v=201011301200 在有些浏览器浏览网页的时候，第一次把脚本下载下来运行了，它会把脚本存在缓存里， 下次打开的时候，如果你的路径没有改，有时候它不再去服务器请求这个文件，而直接使用缓存里的文件。这在一定程序减轻了服务器压力。 但当你对脚本有改动时，没有最新版本可能会导致错误，这样就把 js/base.js? 后的字符串改一下，当浏览器加载到这里时，发现路径有差异，就会重新从服务器下载文件了. – 那字符串的命名规则是什么呢！是自己随便取的还是？ – 随便取都可以，不过一般用 js 的版本号转化或用日期转化 这样写更容易理解
-
JavaScript 函数默认值
今天用 JavaScript 的时候，因为函数需要一个参数，所以就按照 PHP 的书写习惯，这样写了一个函数 function func(param = 0){ to do …} IE 浏览器中 JavaScript 是不支持这种写法的，如果需要给函数的参数设置默认值，我们可以这样写 functionfunc(){var param = arguments[0] ? arguments[0]:0;} arguments 是一个数组，下标为 0 的自然是传进来的第一个参数，以此类推。