随笔分类 - JS
涉及常见JS的经典代码段
摘要：Low-code platforms provide intuitive and visual tools for businesses to optimize their software development process. Gartner predicts that by 2024, 65
阅读全文
摘要：基础知识篇 Javascript基础知识篇(1): 初识Javascript Javascript基础知识篇(2): 面向对象之接口实现 Javascript基础知识篇(3): 面向对象之封装和信息隐藏 Javascript基础知识篇(4): 面向对象之继承 Javascript基础知识篇(5): 面向对象之链式调用Javascript基础知识篇(6): 高质量开发准则(上) Javascript基础知识篇(7): 高质量开发准则(下)高级技术篇 Javascript高级技术篇(1)：搭建JS框架类库 Javascript高级技术篇(2)：深入理解面向对象实战应用篇Javascript实战..
阅读全文
摘要：1.用匿名函数(function(){})();将脚本包裹起来，有效控制全局变量，避免冲突隐患。2.在解决JS冲突的前提下，如果需要进行多个模块(匿名函数)之间的通信，则需要采用唯一全局变量(系约定名：GLOBAL)+命名空间+属性的方式来解决，同时应该为你维护的模块添加必要的注释，以提高团队合作的效率。对于公共组件，不推荐加前缀(base.js)。对于单独由某成员负责的组件，推荐以成员缩写名添加前缀(如张三：zs_news.js)。3.CSS放在页头，JS放在页尾。即将非脚本资源文件放在head标签中，而将脚本放到body的尾部。同时，请注意限制外部脚本的数量，在发布正式环境之前，将同一页面
阅读全文
摘要：我们常说Javascript是一种面向对象的语言，那也就是说具有面向对象的一些基本特性。比如包含对象、类、属性、方法以及构造函数等基本元素，很多人在想：JS类到底是什么玩意？其实很简单，就是一个function，正所谓"简单就是美"嘛。在自定义类的同时，我们也回顾一下JS基本的类：Math，Array，Object以及String等。//定义JS类的两种方式(注意这里是大写开头)function EmailMessage() { }var EmailMessage = function() { }有类就有对象存在，同时构造函数也应运而生。常常在构造函数中使用this.**来
阅读全文
摘要：很多从事web开发的项目都离不开Javascript，我个人也在目前的公司中用到了很多，但是感觉还不是很到位，尤其是对Javascript的开发规范上。可能有些朋友要说，我实现一个简单的的功能(如两个数相加)，需要遵守什么规范吗？我回答：需要。还有的会问：我的项目进度非常紧张，我有必要按照你说的规范一步一步来吗？我还是回答：需要。为什么呢？我认为与其在项目开发完毕的维护过程中，反复的调试还不如提前遵守开发规范，养成良好的编码习惯。结合我个人一直以来的职业习惯，我总结了以下几点，作为抛砖引玉。保持一致的编码风格。具体做法：(1).函数都必须拥有函数名(匿名函数除外)，并以tab作为函数内容的..
阅读全文
摘要：var $ = function() {};$.prototype.onDomReady = function(callback) { if (document.addEventListener) { // If the browser supports the DOMContentLoaded e
阅读全文
摘要：经过了"面向对象的Javascript系列"的预热，让我们再次起航进入Javascript富客户端系列。基于链式调用关于类库的讲解，本讲将一步一步搭建一个属于自己的JS框架类库。在这里，不妨问问大家：一个类库怎样才能算有价值的类库呢？我想不妨从以下几个方面去考量：1). 避免改变JS固有的基础对象。即如对JS对象Function,String,Array等，不要试图改变这些对象的行为来适应你的场景。2). 具有良好的版本控制和文档注释。即JS类库必须有详细的文档，以备使用者能更快的应用。3). 具有规范命名空间的约定。即JS类库必须添加完整的命名空间，有利于开发者快速定位自
阅读全文
摘要：在我们平常的web开发中，已经存在各种大型的专业Javascript类库(JQuery,Prototype,ExtJS)等，它们都充分利用了Javascript面向对象的思想，使得类库更加富有灵活性和健壮性，但其中最关键的是利用了Javascript的链式调用，这也就是我们今天要谈到的话题了。那什么是链式调用呢？简单的说，就是把一系列对DOM元素的操作以某种形式关联起来，使得使用很少的代码就能完成很强大的功能(Write Less, Do More)。下面我将一个示例来比较一下非链式调用和链式调用的区别所在。//非链式调用addEvent($('test'), 'cli
阅读全文
摘要：在我们经常面对的面向对象高级语言中，继承早已是老生常谈的话题了。但对于javascript这门极富灵活性的语言来说，继承却是一门复杂的技术。那么继承到底能带来什么好处呢？如果我们希望减少更多的重复性工作，弱化对象间的耦合性，在现有类的基础上并充分利用已具备的方法进行设计，那么继承不失为一种更好的解决方案了。为了能达到我们想要的目标，可以采用类式继承，也可以采用原型式继承。可能有的人会问：我有两个类并没有所谓的"is a"的关系，但却都有个相同的方法要调用，我该怎么办？我们知道，在面向对象中可以采用接口去实现。在本篇文章中，我采用混元类的方式来解决这种问题并会探讨适合场景。
阅读全文
摘要：在"初识Javascript"章节中，提到通过作用域和闭包来隐藏内部细节，并给外部提供访问接口，就初次接触到了信息隐藏的概念了。同时，我们知道在面向对象的高级语言中，创建包含私有成员的对象是最基本的特性之一，提供属性和方法对私有成员进行访问来隐藏内部的细节。虽然JS也是面向对象的，但没有内部机制可以直接表明一个成员是公有还是私有的。还是那句话，依靠JS的语言灵活性，我们可以创建公共、私有和特权成员，信息隐藏是我们要实现的目标，而封装是我们实现这个目标的方法。我们还是从一个示例来说明：创建一个类来存储图书数据，并实现可以在网页中显示这些数据。1. 最简单的是完全暴露对象。使用
阅读全文
摘要：接口是面向对象Javascript工具箱中最有用的特性之一。我们都知道GOF在设计模式中说到：面向接口编程，而非面向实现编程。就足以说明接口在面向对象的领域中有多重要。但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制，以确定一组对象和另一组对象包含相似的的特性。所幸的是JS拥有强大的灵活性(我在上文已谈过)，这使得模仿接口特性又变得非常简单。那么到底是接口呢？ 接口，为一些具有相似行为的类之间(可能为同一种类型，也可能为不同类型)提供统一的方法定义，使这些类之间能够很好的实现通信。那使用接口到底有哪些好处呢？简单地说，可提高系统相似模块的重用性，使得不同类的通信
阅读全文
摘要：Javascript是一门极富表现力的语言，在当今大行其道的Web浪潮中扮演着非常关键的作用。合理、高效地利用这门技术，可以让我们的Web世界多姿多彩。首先，我们认识一下这门技术的几个独特的特性。1. Javascript最大的特性在于其灵活性。作为一名前端开发人员，既可以采用函数式的编程风格，也可以采用更复杂一点的面向对象的编程风格。不管你采用哪种风格，都可以完成一些非常有用的任务。因而，Javascript是一门面向过程的语言，同时也是一门面向对象的语言，进而可以模仿面向对象语言的编程模式和惯用法。我们用一个例子来说明：启动和停止动画。如果你习惯于函数式的编程风格，代码会如下：functi
阅读全文
摘要：在上一次我设计了一个带光晕的文本框，类似于QQ2011，给我们的网页增加了美感和动感。最后，我留给大家的是对文本框的继续优化，这次我增加了水印效果和提示效果。可能很多人说这些在Jquery中已经有内置插件了，为什么还需要自己去写呢？我历来的标准是：“拿来主义”分情况。对于已经满足我们要求且易于配置的的插件，我们直接拿来用就是。但是对于不能满足我们要求且本身已经很复杂的插件，则更愿意自己动手去写，以便了解整个插件的设计流程。下面就不废话了，先来看水印吧。我们设想了一个最简单的例子就是普通的文本框(<input type='text' id='txtName'
阅读全文
摘要：我们都知道默认的Asp.Net文本框很丑陋的，看到QQ2011版的登录输入文本框那种光晕效果，不免让我们很是向往，不过我查看了源码却发现是通过C++实现的，那如何在我们的Asp.Net中添加同样的功能呢？先给大家秀一下我的运行截图：默认文本框样式：鼠标移入文本框：是不是很酷呢？下面我将一一解释如何做出来的？首先我们建立一个WebSite应用程序。在开始做之前建立一个文件夹plugins/textbox并引入Jquery库，在textbox子文件夹下再添加一个images文件夹(包含一张背景图:border.png)，大概的文件夹结构应该如下：接着我们开始设计粗略版的html结构，大致如下：&l
阅读全文
摘要：对于经常设计web页面的技术人员来说，javascript和css是必备的行囊，可能很多人都会运用这门技术。但是，试想一下，对于一个大型的web应用程序，可能包含大量的javascript和css文件，我们都知道加载这些文件需要网络带宽的，而且每个页面都去手动引入很多<script>或<link>等文件，对于开发人员来说可能是件费力不讨好的事情。而且，在项目维护后期，改动一个文件可能会影响到几个页面效果，自己加的文件也许别人在master或其他地方已经加载过，造成多余的文件浪费。因此，我们需要一种机制(或接口)来控制文件的引入，以便我们更方便的维护，以后这些维护工作专门
阅读全文