Js开发在整个行业的现状主要的有两点
维护成本高
多人协作项目的困境
Js项目维护成本过高
经历过10年的ie统治时期的浏览器世界一成不变，和06年开始ajax的兴起带动垂死的javascript的复兴，浏览器市场也开始翻天覆地的快速变化，排版引擎和js脚本引擎开始得到不断的优化，js的执行效率不断的得到提高，但是………..
那么，js依然是当年的js，浏览器和对web的需求早已经不复当年。当年那个为做表单验证而生的js语言，如今承担的是复杂的界面ui和交互处理，以前只需要写十几行或者几十行的js现在需要面对几千上w行的需求。
那么带来的问题就是十年来js语言特有的随意性导致的各路js程序员的js风格各异。
Js的弱类型特性导致项目中经常会出现jser的各种奇技淫巧。
上面的两问题直接导致的是js程序交接维护上的困难。面对js风格清晰易懂的jser的代码还好，如果接手js风格怪异太个性的jser的代码，并且如果还没有注释，那么，看代码真心会看到你吐血
编写规范的随意性 ，编写风格的个性化，是js项目维护成本的很大一部分原因
多人协作项目的困境
其实看过前面的内容，我们大抵的了解到，js是应很简单的需求而生的，甚至简单到是用来做简单的表单验证的。也就是说，js代码，在很长一段时间内，都是由一个开发独立完成的，多人协作上会出现的问题
1，全局变量命名混乱冲突导致系统错误
2，代码集中少量文件导致开发效率降低
3，容易出现功能重复开发
Js开发编写方式的演进
函数 – js作为函数式语言与生带来的特性，jser们通过在window下注册一个又一个的function相互调用来完成产品们的需求（全局变量命名极为混乱和不规范）
类 ---jser为大型js项目开发的尝试, 2006年，Ajax兴起。JavaScript绝地重生，越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能，从一个函数可能会跳到第N个函数去。这时jser们前仆后继，进行各样尝试，类出现了，Prototype 率先流行开来。用它组织代码，用js的灵活性模拟类的编程，每个类都是Class.create创建的。又有YUI、Ext等重量级框架。虽然它们的 创建类方式各不同，但它们的设计终极目标却都是要满足大量JavaScript代码的开发而努力
类开发尝试的转折-------这是一个战火纷飞的年带，各路框架豪杰不断涌现，jq的诞生带来了js开发的又一次变革，jq所至，其他框架寸草不生，同时也直接导致 prototype 等“类”的尝试又化为乌有，很大一帮jser转投jq尤其是js新手直接着手jq者，在享受了jq在小型页面dom操作的遍历之后，大型js项目的多人协作和代码组织问题又暴露到了台前，甚至是制约js乃至整个web发展的一个不小的因素
那么，模块化开发——现在，未来？
Commonjs,首先要说下这个。何为commonJS？commonJs可以理解成一个组织，他们中的所有人都致力于提高javascript程序的可移植性以及可交互性。在js模块化开发上做各种的尝试，这种可移植性以及可交互性不仅仅局限于浏览器端，而且也包括了服务器端的javascript, CommonJS 提出了一种用于同步或异步动态加载JavaScript代码的API规范，非常简单却很优雅，称之为AMD（Modules/Asynchron , RequireJS和NodeJS的Nodules已经实现了这个API，而Dojo也将马上完全支持（Dojo1.6）。规范本身非常简单，甚至只包含了一个API：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
这个就是差不多的整个amd规范的定义。我们这里主要已requirejs为例做个简单的说明
定义的是一个简单的键值对数据模块
//Inside file my/shirt.js:
define({
color: "black",
size: "unisize“
});
定义的模块包装在一个function内
define(function () {
//Do setup work here
return {
color: "black",
size: "unisize“
}
});
Definition Functions with Dependencies
定义一个有模块依赖关系的模块
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
} );
那么，执行了这个模块的初始化会依次的加载顺序为
my/cart.js
my/inventory.js
my/shirt.js
定义的模块为返回一个function
define(["my/cart", "my/inventory"], function(cart, inventory) {
//return a function to define "foo/title".
//It gets or sets the window title.
return function(title) {
return title ? (window.title = title) : inventory.storeName + ' ' + cart.name;
}
} );
Define a Module with Simplified CommonJS Wrapper
定义一个简单的commonjs包装
define(function(require, exports, module) {
var a = require('a'),
b = require('b');
//Return the module value
return function () {};
} );
这个定义就可以把模块内部的任何变量暴露给exports来作为模块的属性提供。比如：
内有个定义
var name=‘nickli’;
这个就仅仅是模块的内部私有变量，但是要想作为这个模块的属性提供就可以
Exports.name=“nickli”;
然后在require这个模块的时候 就可以访问到name这个属性了
最后一点，也是比较重要的一点
Define a Module with a Name 给一个模块设置一个名字，这个在多个模块压缩成一个文件的时候是必要的，因为否则模块系统就找不到你压缩的文件里面哪个模块是哪个。而且这个name的定义 在你的开发环境中也要符合模块文件的路径，比如你的m模块在a文件夹下，那么你的name 的定义也要是 a/m
//Explicitly defines the "foo/title" module:
define("foo/title",
["my/cart", "my/inventory"],
function(cart, inventory) {
//Define foo/title object in here.
}
);模块化后的加载
<script data-main="scripts/main" src="scripts/require.js"></script>
Require.js加载完毕后会自动去 拉取scripts/main.js
//Inside scripts/main.js
require(["some/module", "a.js", "b.js"], function(someModule) { //... });
会依次加载some/module.js a.js b.js三个文件
模块化后的新问题
目前nodejs的模块系统是严格遵循的commonjs 规范实施的，但是要注意到，nodejs是运行在server端的，然而浏览器端编程和server的最大不同是server的所有模块文件都是在server和主文件是一块的。而浏览器要面对的是大量的模块文件带来的大量http请求的问题， 嗯， 这个问题在浏览器端是致命的。。。。。。。
不过我们有combo 动态文件压缩技术，这里不详述,前面已经有一随笔 讲述 require来实现combo的支持
关于js的模块化开发和amd相关资料，在http://www.cnblogs.com/snandy/里有不少更加详细的资料。
javascript and ajax
JavaScript是一门很有趣的语言，每取得一点更深入的理解，我便以为自己已经彻悟。从最初的函数使用、面向对象、原型继承、函数对象到后来作用域链、functional、预解析、表达式解析机制、动态语言特性，每在此道路上前进一步，我都曾以为自己到达了高手境界。然而，事实上是，简单的语法也能承载深刻的思想。巧妙的设计让JavaScript成为一门兼有元类（meta-class）、类（class-based）、原型（prototype-based）三种面向对象特性和functional特性的动态语言。回忆起来，对这样的语言，说我已到达高手的境界，是十分可笑的。
js模块化开发---js大项目代码组织和多人协作的解决之道
摘要: Js开发在整个行业的现状主要的有两点维护成本高多人协作项目的困境Js项目维护成本过高经历过10年的ie统治时期的浏览器世界一成不变，和06年开始ajax的兴起带动垂死的javascript的复兴，浏览器市场也开始翻天覆地的快速变化，排版引擎和js脚本引擎开始得到不断的优化，js的执行效率不断的得到提高，但是………..我们的js一直没变过. 现在所有的主流 Web 浏览器都遵守 ECMA-262 第三版，即实现的是JavaScript 1.5版 时间 2000那么，js依然是当年的js，浏览器和对web的需求早已经不复当年。当年那个为做表单验证而生的js语言，如今承担的是复杂的界面ui和交阅读全文
用canvas 来实现一个菊花
摘要: 关于canvas的save()和restore()，前面一直以为canvas的画面也会保存，然后restore后把画面恢复，那么就这样把自己给绕进去了，那么save和restore之间的操作还有何意义？？？ 摸爬滚打后理解了save 保存的是画布的坐标旋转缩放 以及fillstyle 和 其他等等的相关属性，已经画好了的图画不在之列。做了个菊花 和 前面做的图片旋转移动 的 demo 来巩固下。依然先看效果---------------------代码分割线---------------------------------------------------------------------阅读全文
canvas 使用 图片 切片的时候 在chrome 下 要注意的 一点
摘要: 像这样，你很可能切片的数据不对 导致 切片的范围 超出了 图片本身的范围，那么在chrome下，这个切片drawImage的时候 会是什么都没有，和没有drawImage一样，chrome默认你啥都没找到，这点在开发中是需要留意下的阅读全文
原型上的方法写属性的一个陷阱
摘要: 我们都知道 ， 对象的属性读写在原型链上操作方式。我们先来回顾下。值的赋予对象的命名属性可以通过为该命名属性赋值来创建，或重新赋值。即，对于：var objectRef = new Object();//创建一个普通的 JavaScript 对象。可以通过下面语句来创建名为 “testNumber” 的属性：objectRef.testNumber = 5;/* – 或- */objectRef["testNumber"] = 5;在赋值之前，对象中没有“testNumber” 属性，但在赋值后，则创建一个属性。之后的任何赋值语句都不需要再创建这个属性，而只会重新设置它的值阅读全文
requirejs实现对动态combo的支持
摘要: combo是为了减少请求数, 但是全combo成一个不好, 最佳实践还是合理拆分成几个文件, 真实环境里能减小加载总时间, 并在一定程度上提高 浏览器端缓存的利用率; 现在seajs的例子里都是用的config的preload来支持服务器端combo, 但是有个问题: seajs要等preload数组里所有项目都加载完, 才会开始处理具体的seajs.use调用, 比如: seajs.config({ preload: ['m1', 'm2+m3'] });seajs.use(['m1'], function(m1) { /*位置1*/ }); 阅读全文
关于国内html5现状吐点槽
摘要: html5，喊啊喊，喊的好久了，我们一帮jser也在后面摇旗呐喊了多年，但是事情总是很缓慢的在往前发展，但是毕竟它还是在发展的。奶奶的。从n久之前，已经不只n遍下过决心要学习要系统的学习html5了，逛各大网站，翻w3c文档，但是每次都是热火一会又放下了，因为我的工作是要兼容ie6的，国内的ie6是占了50%以上市场份额的，于是，每次给自己鼓起了百倍的信心要学htm5的先进生产力，但是不久又还是偃旗息鼓的回去捡起被我吐槽了一百遍一百遍的ie6继续过着jser的刀耕火种的日子.........前面和武汉的一同事聊html5，我一直以为我这么久的在关注html5的发展，应该对其还是有一定了解的，探阅读全文
贡献一个连jquery都觉的大的时候可以用的 js库
摘要: 在一些很小的项目里，连用jquery都还觉的大的时候，你就可以用我的这个库了。一个库或者框架，是应需求而生的，当你的项目实际上只需要简单的一个好用的选择器 一个ajax 封装 一个兼容的事件封装的时候，你当然就会觉的jquery都太臃肿了，好吧，我那jquery剥离了这几个功能出来，本来我是只剥离jquery的domready 的， 但是发现这个东西牵扯到了jquery的事件模型的封装，那我就把jquery的事件也一并的剥离了下来，然后自己写了一个ajax封装。ok，一个最简单的js开发库成型了。代码在下面： /* * 简易的开发js库 暂命名为 --- 呃没有命名 * $选择器,aj...阅读全文
ie6的absolute元素width百分比设置的问题
摘要: <div style=”700px;height:700px;background:#00CC99″><div style=”background:#330066;500px;height:500px;”><div style=”float:left;background:#FF3366;”><div style=”300px;height:300px;”></div><div style=”100%;height:100%;background:red;position:abso阅读全文
关于函数式的链式调用
摘要: jq的链式调用在n多的jq粉丝中广为赞叹，那么在原生js里是否也可以实现函数式的 链式调用呢？比如 add(1)(2)(3) 要得到6你会怎么样来设计这个add function呢，，，，，，，在"前端开发兵团" qq群(94936336) 的逍遥君武 给了这么一个 解决方案，很不错，可以看看function add(x){ x += +add || 0; add.valueOf = add.toString = function(){ return x } return add; } alert( add(1)(2)(3) )这个方法很巧妙的应用了js在 运算中的隐式类型阅读全文
window.open不被拦截
摘要: 经常有人用window.open()的时候被浏览器拦截了 比如btn.onclick=function(){ function aa (){ window.open("xxx"); } aa();}其实，如果你的window.open写在用户事件处理函数的当前作用域下，是不会的，只要用户点击页面就触发 window.open 事件，这样一般不会拦截，浏览器会认为这是用户的默认行为。btn.onclick=function(){ window.open("xxx");}其实这样的代码是可行的不会有问题也可以代码可编写如下：var $E = YAHOO.ut阅读全文
json.js + jquery 在 ie7下 的 bug
摘要: 因为jq只有个parseJSON，没有stringify，而在ie7下是没有支持原生window.JSON的，那么最好的选择是老道的json.js来和jq搭配了<script src='jquery.js'></script><script src='json.js'></script><div class='a'>nick</div><script> $(function(){ alert($(".a").html()) })</scr阅读全文
function声明函数在浏览器中这么一个问题
摘要: 先看这么一段代码(function(){ alert( myname() ); function myname(){ return "nick" }})();上面代码在各个浏览器里的运行结果是一致的，这是因为在javascript里面，用function 声明的函数是会在函数执行环境初期便构造完函数体，也可以说是一种预解析吧，于是，即便myname的声明代码在myname的执行后面，也是可以正确的执行的。但是我们这样修改下(function(){ alert( myname() ); if (true) { function myname(){ return "n阅读全文
new FunctionName() 运行机制浅析 -----转自玉伯
摘要: 测试代码：function Dog(name) { this.name = name; Dog.prototype = { shout: function() { alert("I am " + this.name); } };}var dog1 = new Dog("Dog 1");dog1.shout();上面的代码看起来很“优美”，可一运行，却报错：“Object doesn’t support this property or method”. 对于代码：Fn() {};var fn = new Fn();new Fn() 的实际构造过程可以等价阅读全文
2012我们需要什么样的前的工程师
摘要: 2011还两天就要过去了，2012都来了，如果地球依然还适合人类居住，我想，我依然还会编我的代码，依然做我的前端工程师，那么，2012，我们需要什么样的前端工程师！一直在想这么一个问题，一个前端工程师，要如果才能不断的提高自己的职业竞争力？在每一年过去，不是简单的增加了一年的工作经验。记得有这么一个段子，一个工作10年的前端工程师去面试，老板给他5k的工资，他问老板说“我有10年的工作经验为什么给这两年的工作经验级别的待遇”，老板说，“你那两年的工作经验你一直用了10年哇”。最怕的就是，在自己的世界里游刃有余，可是在现实的社会里惊心动魄，前端的世界，变化太快，不学习很快就会被淘汰，这个很悲催，阅读全文
iframe的 子页面调用父页面的相关记录
摘要: 从一个element对象如何回溯到window的scope 非ie下有 element.view ie下面没有view，只能曲线救国 用event.srcElement.document.frames 也就 是说 从event对象先引到一个element上面，而element身上有个document属性可以回溯到dom的document对象 最后通过document.frames 找到window。 这类似从北京回云南，可以选择直飞云南，也可以如果直飞走不通 ，可以选择北京--曼谷 然后 曼谷--云南。。。 当然，在非ie下面也可以有这么一条曲线救国的路线 event.target.own..阅读全文
nodejs 遍历文件夹 获取 文件夹下所有文件列表
摘要: 一直关注node.js的发展，但是没有动手写过东西，前面同事帮忙用python写了个工具，获取一个文件夹下面的所有文件名的列表，python真的是强大，俺决定用node来写一个。使用方法，把下面代码保存为一个js文件比如xxoo.js ，然后打开命令行工具，进入xxoo.js所在目录，输入：node xxoo.js '这里为你要统计的目标文件夹的目录'然后 你会 在 xxoo.js所在目录，发现一个res.lst的文件名，这个文件名 由你自己决定，见代码第三行，这个文件里面就包含了你要统计目录的所有子文件列表。 1 var fs = require('fs');阅读全文
js object 视图猜想
摘要: 某天突然想知道 Object 和 Function的关系，在网上找到了这张图，看完后思路清晰了很多，在那图的基础上，我加上了Number,Boolean,String等三个系统提供的类型构造器和Object Function的关系图如上。他们中只有 Function的prototype和__proto__是相同的。其他的构造器 不无都是 Function 构造出来的对象，也叫是Function的实例是因为Object,Number,Boolean,String 甚至自定义的Foo 的__proto__无不都指向Function.prototype 也就是function Empty .而Fun阅读全文
个人小型ui组件（未完整版,用ie看这贴肯定看不到的）
摘要: jquery.myui 插件jquery.myui ui插件库 介绍: 这是之前想写的基于jquery的一系列个人网站里面可以用到的一些ui组件的jquery插件，由于那时候刚看jquery，所以以，代码肯定还是很臃肿那是不用说的了，因为最近比较忙，所以也就没继续写，不过过断时间有点时间了还是会继续写完，过段时间自己准备和同学做个小站放点自己喜欢的东西。这些 ui组件也决定都自己写了（貌似确实有重复造轮子的嫌疑，现在网上这方面的东西已经很多了，但是，还好，我本来也就是只想享受下造轮子的乐趣，做程序的其实就这么点爱好！）。现在公布出来，希望有jquery优化高手能帮忙优化下，共同开发--共同享受阅读全文
javascript简洁高性能的tab
摘要: web2.0的世界里，保持页面的整洁干净 保持脚本样式的分离，编写无侵入式脚本渐为无数前端开发者追逐的前端设计的艺术，选项卡，目前市面上各样的实现方式有很多很多种，大部分的会有<a href="javascript:void(0);" onclick="showproject(1);" >1</a><a href="javascript:void(0);" oncli...阅读全文
JavaScript是否可实现多线程 —- 深入理解JavaScript定时机制
摘要: 此文来自互联网，具体来源，忘了容易欺骗别人感情的JavaScript定时器JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如setTimeout( function(){ alert(’你好!’); } , 0);setInterval( callb...阅读全文
xml 和 json 的区别
摘要: XML 是一种用于面向服务的体系结构 (SOA) 和数据传输的常见传输。当然，目前许多服务以 SOAP 格式存在。不过，何时将其用于数据传输在 Ajax 社区中存在分岐。[ XML ]使用XML作为传输格式的优势：1. 格式统一, 符合标准2. 容易与其他系统进行远程交互, 数据共享比较方便3.调用将 XML 用作传输的现有服务。 4.使用 XSLT 可以动态转换 XML。这是企业服务总线 (ES...阅读全文
为什么尽量用局部变量代替全局变量
摘要: 为什么尽量用局部变量代替全局变量 2009-02-2012 :08:27来源:七月佑安作者：明达 网页制作Webjx文章简介：在JavaScript中，我们应该尽可能的用局部变量来代替全局变量，这句话所有人都知道，可是这句话是谁先说的？为什么要这么做？有什么根据么？不这么做，对性能到底能带来多大的损失？本文就来探讨这些问题的答案，从根本上了解变量的读写性能都和哪些因素有关。 在JavaScript中，...阅读全文
让函数只执行一次的js
摘要: 这个是在51js上面看到的一讨论，看到月影和客服果果的方法都利用的闭包来实现，实有独到之处，拎过来瞻仰一下function once1(f) { var run; return function() { if (!run) { run = true; f.apply(this, arguments); } }}//这个来自客服果果的方法function once(fn){ return funct...阅读全文
从我丢失了;号 之后说开来去
摘要: js一直以其松散而著称，然后，很多时候，然，童鞋们，不要误解松散的字面意思，松散但是其词法结构，而不是书写习惯，如果果真误解了，会将自己领入一个自己的松散编织的咒语。上次写的那个jquery的屏蔽层的， 因为我用的(function(){})(jquery)方式我后面想， 如果想再写个插件的话就要(function(){})(jquery)(function(){})(jquery)于是，我调试了...阅读全文
忙里偷闲写的jquery的屏遮层插件
摘要: (基于考虑博友的建议，深刻反省，之前的描述较为矫情，特此干掉，我什么都不说！)希望对大家有用 小插件来的，见笑了啊各位，代码呈上，测试通过的浏览器有ie6,ie7,ie8, ff,oprea,safari等。1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xht...阅读全文
ie6下a标签的void(0)引发的诡异问题 带来的思考
摘要: 既然是诡异问题，那么就先上代码，什么都不说。[代码]上面代码保存为1.html[代码]上面 代码保存为2.html好了，你看，这代码写的多漂亮，看不到有任何的诡异之处，别纳闷了，打开你的ie6,记的，是ie6，然后运行1.html，点里面的莲接，点开等待你的诡异之门看到了么，除了在1.html里面动态加载了一个空白的iframe 之外， 什么都没有。首先，单从语法和词法角度上来看这两个简单的要命的...阅读全文
javascript操作符之new 也疯狂 （2）
摘要: JavaScript本是一种基于原形的（prototypal）语言，但它的“new”操作符看起来有点像经典语言。这迷惑了广大程序员们，并导致了很多使用上的问题。在JavaScript中，不要用到new Object()这种操作，该用{ }来代替。同理，也不要用new Array()，相应的，用[]来代替。JavaScript的Array绝不同于Java的Array，模仿Ja...阅读全文
你真的会写JavaScript吗？
摘要: 最近在msdn上看到一文你真的会写JavaScript吗？很久没有看到这样让人唇齿留香的好文了。同其他教你如何用面向对象的思想编写JavaScript的其他文章一样，该文也是着重在这么几个要素： JavaScript的对象就是一个关联数组。 JavaScript 函数也是一个对象。 原型(Prototype) 闭包(Closures) 继承/私有属性/静态方法 命名空间作者文笔很好，英文很容易看懂...阅读全文
javascript操作符之new 也疯狂(new 好久不见)
摘要: 在taobao ued 上看到一好文， 好久没见过这么爽朗的好文了。转了JavaScript是一门基于原型的语言，但它却拥有一个 new 操作符使得其看起来象一门经典的面对对象语言。那样也迷惑了程序员们，导致一些有问题的编程模式。其实你永远不需要在JavaScript使用 new Object()。用字面量的形式{}去取代吧。同理，不要使用 new Array() ，而代之以字面量[]。JavaS...阅读全文
javascript闭包漫笔
摘要: 简介 基于对象的属性名解析 值的指定 值的读取 标识符解析、执行环境和作用域链 执行环境 作用域链与 [[scope]] 标识符解析 闭包 自动垃圾收集 构成闭包 通过闭包可以做什么？ 例 1：为函数引用设置延时 例 2：通过对象实例方法关联函数 例 3：包装相关的功能 其他例子 意外的闭包 Internet Explorer 的内在泄漏问题简介Closure所谓“闭包”，...阅读全文
收集 关于js的接口和 继承实现的代码例子
摘要: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 关于js的接口和 继承实现的代码例子 </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME...阅读全文