Qianduan on DoDoRo的梦想空间-码农,数学,算法,哲学,园艺

[转]React官网力荐Next.js：为何它取代了Create-React-App？

Mon, 09 Sep 2024 00:00:00 +0000

随着前端技术的快速发展，React作为一款领先的JavaScript库，不断推动着前端开发的变革。近期，React官网的一个显著变化引起了广大开发者的关注：它不再推荐使用Create-React-App作为构建React应用的默认工具，而是转向了Next.js。

那么，Next.js究竟有何魔力，让React官网做出如此决策？本文将为你详细解析。

一、Next.js：React应用的“升级版”

Next.js并不是一个全新的框架，而是基于React的服务器端渲染框架。它提供了许多开箱即用的功能，使得开发者能够更高效地构建复杂、高性能的React应用。与Create-React-App相比，Next.js更像是一个“升级版”，它为React应用带来了以下显著的优势：

性能优化：Next.js支持自动静态优化(Automatic Static Optimization)和服务器端渲染(Server-Side Rendering)，使得页面加载速度更快，用户体验更流畅。此外，Next.js还支持预渲染(Pre-rendering)和动态导入(Dynamic Imports)，进一步提升了应用的性能。数据获取简化：Next.js内置了数据获取功能，使得开发者能够更方便地从API或其他数据源获取数据，并将其注入到组件中。这种无缝的数据获取流程大大简化了开发过程，提高了开发效率。强大的路由功能：Next.js提供了基于文件系统的路由功能，使得页面之间的导航变得简单直观。开发者只需创建相应的页面文件，Next.js就能自动为其生成路由。这种方式不仅易于理解，还能减少错误和提高可维护性。更好的SEO支持：由于Next.js支持服务器端渲染和预渲染，因此它能够更好地处理页面渲染和加载问题，从而提高网站的搜索引擎优化(SEO)效果。

二、Create-React-App的局限性

虽然Create-React-App为React开发者提供了一个快速搭建项目的脚手架，但随着项目规模的扩大和复杂度的增加，其局限性也逐渐显现：

配置不灵活：Create-React-App为开发者提供了一套固定的配置，虽然这降低了入门门槛，但对于有特定需求的开发者来说，这种固定配置可能会成为束缚。性能优化有限：Create-React-App主要关注于项目的快速搭建和开发体验，对于性能优化方面的支持相对有限。对于需要高性能的应用来说，开发者可能需要花费更多的时间和精力进行手动优化。扩展性不足：随着项目的发展，开发者可能需要集成更多的功能和工具。然而，Create-React-App的扩展性相对有限，可能无法满足一些高级需求。

三、React官网推荐的背后

React官网之所以推荐Next.js而非Create-React-App，背后有多重原因。

首先，Next.js作为React的“升级版”，在性能、数据获取、路由等方面提供了更强大的支持，能够更好地满足现代Web应用的需求。其次，随着前端技术的不断发展，开发者对于高性能、易扩展的应用框架的需求也在不断增加。Next.js正好符合这一趋势，能够为开发者提供更高效、更灵活的开发体验。最后，React官网的推荐也反映了社区对于Next.js的广泛认可和支持。越来越多的企业和项目采用Next.js构建应用，证明了其在实际应用中的价值和优势。

四、结语

React官网推荐使用Next.js而非Create-React-App，是基于对现代Web应用需求的深入理解和对前端技术发展趋势的敏锐洞察。对于广大React开发者来说，了解和掌握Next.js将是一个值得投入时间和精力的选择。它将帮助你更高效地构建高性能、易扩展的React应用，提升你的开发能力和竞争力。

https://segmentfault.com/a/1190000044806695

[转]React团队回应用Vite替换Create React App的建议

Thu, 25 Jul 2024 00:00:00 +0000

Create React App 的演变

在 2016 年发布 Create React App 时，工具的环境是分散的。如果想要将 React 添加到现有应用，需要添加一个 script 标签或从 npm 中导入，然后调整现有的构建工具配置。但是，如果要从头开始创建一个仅使用 React 构建的新应用，则没有明确的方法可以做到这一点。在 Create React App 之前，必须安装一堆工具并将它们连接在一起，提供正确的预设以使用 JSX，为开发和生产环境进行不同的配置，为资源缓存提供正确的设置，配置 linter 等，想要正确完成这一系列工作非常困难。人们通过创建和共享可以克隆的“样板”存储库来解决了这个问题。然而，这产生了另外一个问题：一旦在项目中调整了克隆的样板文件，就很难再拉取样板的更新。这样，项目的设置会变得旧，要么放弃更新，要么花费大量精力让所有工具再次协同工作。在快速发展的生态系统中，这非常困难。 Create React App 通过将多个工具组合在一个包中解决了这个问题。现在，如果想用 React 开始一个新项目，有一个明确的推荐方法（Create React App）可以做到这一点！然后，每隔一段时间，可以更新这个包，以获得所有底层工具的更新。这种模型变得很流行，以至于今天有很多工具都以这种方式工作。Vite 确实是拥有相似愿景的最佳工具之一，并且在在某些方面更进一步。 Create React App 的目标是为大多数 React 用户提供启动新 React Web 应用的最佳方式，它支持一组协同工作的精选功能。随着时间的推移，它提供的开箱即用的“baseline”会随着我们找到正确的权衡而扩大。例如，为运行时错误添加了一个遮罩层，添加了对不同样式选项的支持，默认添加了快速刷新，它允许保存组件的代码并查看更改而不会丢失状态。对于默认的 React 开发体验来说，这是一个巨大的里程碑。总的来说，由于 Create React App 完全控制了编译管道，因此添加编译相关的功能是很容易的。有这样一个精心策划的设置对生态系统仍然很有价值。当 React Hooks 出现时，React 团队将 React Hooks lint 规则添加到默认设置中。除此之外，Create React App 还允许 React 团队向尽可能广泛的受众部署重要的工具更改（快速刷新支持、React Hooks lint 规则）。如果没有 React 团队策划的流行模板，将很难如此广泛地推出这些工具更改。

[转]Create React App 入门及 webpack 配置

Tue, 09 Jul 2024 00:00:00 +0000

Create React App（以下简称 CRA）是一个官方支持的创建 React 单页应用的脚手架，它提供了一个零配置的现代构建设置，将一些复杂工具（比如 webpack， Babel）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。

创建方法

npx: npx 来自 npm 5.2+ 或更高版本

npx create-react-app my-app npm: npm init 在 npm 6+ 中可用

npm init react-app my-app Yarn: yarn create 在 Yarn 0.25+ 中可用

yarn create react-app my-app Scripts 在新创建的项目中，你可以运行一些内置命令：

npm start 或 yarn start 在开发模式下运行应用程序, 默认在浏览器打开http://localhost:3000。如果更改代码，页面将自动重新加载。

npm test 或 yarn test 以交互模式运行测试程序。默认情况下，运行与上次提交后更改的文件相关的测试。

npm run build 或 yarn build 将生产环境的应用程序构建到 build 目录。它能将 React 正确地打包为生产模式中并优化构建以获得最佳性能。构建将被压缩，文件名中将包含哈希。

npm run eject 注意：这是单向操作。一旦 eject ，就回不去了！执行完这个命令后会将封装在 CRA 中的配置全部反编译到当前项目，这样开发者完全取得 webpack 文件的控制权，可以自定义修改webpack打包配置。

解决ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称及ng : 无法加载文件npm g.ps1问题

Mon, 03 Jun 2024 00:00:00 +0000

解决ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称及 ng : 无法加载文件 C:\Users\15762\AppData\Roaming\npm\ng.ps1问题 ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称解决在命令行执行npm install -g @angular/cli ng : 无法加载文件 C:\Users\15762\AppData\Roaming\npm\ng.ps1 解决以管理员身份运行Windows PowerShell，输入set-ExecutionPolicy RemoteSigned 选择是选择 A

ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

解决在命令行执行npm install -g @angular/cli

ng : 无法加载文件 C:\Users\15762\AppData\Roaming\npm\ng.ps1

解决以管理员身份运行Windows PowerShell，输入set-ExecutionPolicy RemoteSigned 选择是选择 A

https请求报错block:mixed-content

Fri, 03 Dec 2021 00:00:00 +0000

我的wordpress域名都换成了https，今天发现用的一个插件加载css和js的时候报错了，原来是因为https页面去发送http请求报错，因为浏览器阻止https发送http请求。我一开始打算改插件的源码，折腾好一两个小时都不成功，最后用了最简单、最粗暴的办法，一行代码解决了。

浏览器不允许在https页面里嵌入http的请求，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。

解决办法： 在主页面的head中加入下面代码（将调用的http请求升级成https请求并调用）：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

wordpress的话，就改admin-head.php

如何用codesmith连接mysql

Sun, 28 Nov 2021 00:00:00 +0000

之前用的codesmith一直都是链接sql server，最近写新的模板需要用到mysql，居然发现无法使用，于是找了下原因，发现是没有添加mysql.data.dll的支持。

网上提供这个办法（我没有成功，我甚至专门在nuget上下载了对应版本的MySql.Data.dll，依然不成功）：

１、下载MySql.Data.dll：https://dev.mysql.com/downloads/windows/visualstudio/ 下载zip格式的即可，解压后将MySql.Data.dll复制到codesmith的bin文件夹下。

２、修改DbProviderFactories：找到C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config\machine.config 注意64位的，因为权限问题可能无法修改，将其复制到桌面做如下修改后替换回来。

在DbProviderFactories节点下添加

<add name="MySQL Data Provider" invariant="MySql.Data.MySqlClient" description=".Net Framework Data Provider for MySQL" type="MySql.Data.MySqlClient.MySqlClientFactory, MySql.Data, Version=6.10.7.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" />

此处的版本号要与下载的dll版本一致，可以右键查看dll的详细信息获取。

3、重新打开codesmith配置数据源即可。

我最终是新装了更高版本的codesmith，然后装了mysqlconnect之后，顺利链接上了，这里有各种版本的下载：https://downloads.mysql.com/archives/c-net/

Angular项目部署和跨域问题

Mon, 01 Jul 2019 00:00:00 +0000

采用Angular开发，部署的时候有两种方式：第一种是把打包后的文件直接发布到站点根目录下面，这种情况Angular的项目将作为一个独立的网站，那么必然会面对跨域的问题；第二种是把Angular打包后的文件放到站点根目录下的某个文件夹，这种情况不需要跨域，但是需要对路径做相关的配置。这里先讨论第一种情况。

一、开发环境

可以通过代理跨域，在angular项目中

1）在项目根目录新建proxy.config.json；

2）跟上面的proxyTable 一样配置好；

3）执行命令ng serve –proxy-config proxy.config.json即可

4）可以在package.json里配置下

“scripts”: { “start”: “ng serve –proxy-config proxy.config.json” }, 然后执行npm run start

二、生产环境

上面的方式可以解决我们在Angualr项目中开发环境的跨域问题，但是无法解决生产环境上的跨域问题，有的时候生产环境上也需要处理跨域问题，这个时候proxyTable是不行的，需要通过Nginx或者IIS反向代理（你没有看错，IIS反向代理，而且效率也很高，下一篇我会讨论）。

反向代理作用

1） http服务器，可以独立提供http服务；

2）虚拟主机：多个域名指向同一个服务器，服务器根据不同的域名把请求转发到不同的应用服务器；

3）反向代理：负载均衡，将请求转发至不同的服务器

nginx的相关配置

location / { root D:\cross-demo\dist #直接指向打包后的文件 index index.html index.htm; }

location /api/ { proxy_pass http://localhost:8888/; # 将地址代理到api上 }

[转]Facebook：“把宝压在HTML5上是一个错误”—技术原因及其反响

Fri, 02 Nov 2012 00:00:00 +0000

Facebook决定不再使用这两三年所规划的HTML5，回到原生应用的道路上。本文讲述了FB转变背后的技术细节，以及Xamarin和Mozilla对这一转变的反应。

Facebook的CEO 马克·扎克伯格最近在TechCrunch的一次采访中宣称：“作为一个公司，我们最大的错误是在HTML5上下注太多了，我们没有选原生应用，因为HTML5没有达到我们的预期”，而且，“自从发布了iOS应用后，我们发现人们订阅feed的数量增加了一倍。”

扎克伯格没有谈及他们在使用HTML5时遇到的问题，但他认为这些产品的质量不够好：“外界已经有非常好的移动体验了……我们追求最高品质，唯一的办法就是使用原生应用。”

Tobie Langel是Facebook软件工程师和W3C咨询委员会代表，他在一篇帖子中详细描述了Facebook基于HTML5做移动网页时遇到的性能问题。Langel提到的第一个问题是缺少调试工具：

移动浏览器缺少工具，从而很难深入进去，发现真正的问题是什么……我们遇到的最大的问题是内存相关的。对于给定内容大小，我们的应用很容易耗尽设备硬件能力，引起系统崩溃。不幸的是，我们很难理解到底是什么引起了这些问题。GPU缓存耗尽？达到资源限制？或是其他原因？很难说。

Langel希望知道堆栈、对象、GPU缓存的内存使用情况，以及GC（垃圾回收）周期、FPS和其他资源限制信息。

Langel谈到的HTML5的另一问题是其页面滚动性能，大部分页面滚动通过JavaScript实现，因为“其他选择不够快”。他提道：

不连贯的帧率，UI线程滞后（断断续续）。由于内容大小和图片数量导致的GPU缓存耗尽。

在不同操作系统中，原生的滚动有着不同的体验。针对一种操作系统优化过的JS实现，在其他系统上的体验却很差（机器人学中的“神秘波谷”）。

安卓设备上触摸事件相关的性能问题（延时，事件不足）使JS实现的页面滚动更加脆弱。

Langel提到的其他问题有：以“黑盒”出现的GPU、安卓系统中更好的触摸跟踪支持的需求、平滑动画以及更好的缓存。其中一些问题已经提交给W3C Web性能工作组。

Nat Friedman是Xamarin的CEO，Xamarin是构建跨平台本机应用的工具提供商。在一次InfoQ评论中，他表示欢迎Facebook的改变：“对包括设备提供商，应用发布商以及最重要的消费者在内的整个移动生态系统而言，这一支持原生体验的转变是非常重要的事件”。他还指出，移动标准现在还为时尚早：

移动创新仍在飞速发展，远超“标准”方式能达到的速度。历史上，当新的操作系统出现时，它的能力非常新，使用它们的唯一方式就是在操作系统层次使用。这一阶段，最好的应用和最具突破性的创新都在靠近操作系统层面出现。对于当前移动设备平台，这种状态非常准确。市场份额的竞赛驱动了设备操作系统层面上巨大的变革和创新。在接下来的几年里，这些操作系统将会稳定下来，这一层次的创新将会变缓，使得标准化方式更加可行。但这种转变需要几年时间。

Mozilla（Mozilla是致力于Web技术的组织）的CTO Brendan Eich在ZDNet对Brendan Eich的采访中，他对Facebook在HTML5上的失败表达了不同的看法：

如果你品一品言外之意，他（马克·扎克伯格）说的应该是将原生应用和HTML糅合起来。当这样糅合时，两个系统间总会有差距。Joe Hewitt是我的一个朋友，他曾在Facebook工作，做了第一个糅合应用，将两者很好地集成起来。但他离开了Facebook，后续版本中，将两者无缝集成的技能（可能还有苹果公司的一些支持）不见了。

Eich坚信Web将最终胜出：

我从不相信Web会失败。这只是个语用学的问题，而你却被这些给绕进去了。像Facebook这样的公司搞得起开发原生应用，尤其是iOS上的原生应用。但根据长尾理论，开发者将主要集中于开发Web应用，并且以此为乐。

如果Web发展到提供缺失的API，并具有更好的性能，开发者就没必要开发其他应用了。

我有一种感觉，Web将变得非常好（十年之后），那时将不会有现今这样地在原生应用对Web应用之间无休止的论战了。

Matt Asay是The Register的编辑，他在“本机应用vs.HTML5应用的争论”中，引用了一位匿名Facebook工程经理的话说：

现在，Fackbook通过写原生代码是行动最快的。这并不是说HTML5将一直无法达到宣称的效果，而是在当前情况下，摩尔定律和Web引擎仍然有效。因此我们做了一个务实的决定。最终，如果HTML5使得我们发展更快，你将看到我们会回归到HTML5。我们将使用任何让我们高效高质量工作的技术栈。

马克·扎克伯格也看好HTML5的长远前景：

并不是说HTML5不好。长期来看，事实上HTML5真的让我非常兴奋。有趣的是，实际上每天使用移动Web Facebook的人比使用iOS应用或Android应用加起来的更多。因此移动Web对我们来说非常重要。

Facebook八月份发布了iOS本机应用，他们正在开发Android上的类似应用，应该很快会在Google Play应用商店上架。

查看英文原文：Facebook: “Betting on HTML5 Was a Mistake” – Technical Reasons and Reactions

via:http://www.infoq.com/cn/news/2012/10/Facebook-HTML5-Native

推荐一个javascript类库:jsonpath

Mon, 29 Oct 2012 00:00:00 +0000

在我们的研发过程中，有时会遇到这样的情况：程序很简单，数据是固定的，不想使用服务端语言(php、java、.net)，但是要实现一些分页和检索功能。这种情况下我们应该选择javascript+xml+div就ok，不过javascript解析xml的数据比较慢。json是现在非常流行的一种数据格式，所以有另外一种解决方案：javascript+json+div。

json是目前web的通用数据格式，在轻量级的web服务中占据主导地位，这里推荐一个非常轻巧的类库：jsonpath(下载地址：http://code.google.com/p/jsonpath/)。作为一个轻量级类库，你可以使用它来对json数据进行精确查找、条件查找和模糊查找，这样就能满足简单网站的功能了。下面是一个简单例子： JSONPath - Example (js) var json = { “store”: { “book”: [ { “category”: “reference”, “author”: “Nigel Rees”, “title”: “Sayings of the Century”, “price”: 8.95 }, { “category”: “fiction”, “author”: “Evelyn Waugh”, “title”: “Sword of Honour”, “price”: 12.99 }, { “category”: “fiction”, “author”: “Herman Melville”, “title”: “Moby Dick”, “isbn”: “0-553-21311-3”, “price”: 8.99 }, { “category”: “fiction”, “author”: “J. R. R. Tolkien”, “title”: “The Lord of the Rings”, “isbn”: “0-395-19395-8”, “price”: 22.99 } ], “bicycle”: { “color”: “red”, “price”: 19.95 } } }, var test1 = jsonPath(json, “$.store.book[*].author”).toJSONString() + “\n>”;//精确检索 var test2 = jsonPath(json, “$..author”).toJSONString() + “\n”; var test3 = jsonPath(json, “$.store.*”).toJSONString() + “\n”; var test4 = jsonPath(json, “$.store..price”).toJSONString() + “\n”; var test5 = jsonPath(json, “$..book[(@.length-1)]”).toJSONString() + “\n”; var test6 = jsonPath(json, “$..book[-1:]”).toJSONString() + “\n”; var test7 = jsonPath(json, “$..book[0,1]”).toJSONString() + “\n”; var test8 = jsonPath(json, “$..book[:2]”).toJSONString() + “\n”; var test9 = jsonPath(json, “$..book[?(@.isbn)]”).toJSONString() + “\n”; var test10 = jsonPath(json, “$..book[?(@.price<10)]”).toJSONString() + “\n”;//条件建设 var test11 = jsonPath(json, “$..*”).toJSONString() + “\n”;//所有 var test12 = jsonPath(json, “$..book[?(@.title.indexOf(’the’) > -1)]”).toJSONString() + “\n”; //模糊检索

Js实现Cookie操作,JavaScript的Cookie操作,源代码

Sat, 21 May 2011 00:00:00 +0000

Js实现Cookie操作,JavaScript的Cookie操作,源代码 在JavaScript中如何实现Cookie操作呢，下面给出源代码实现：

function SetCookie(name,value,days)
{
if(days == null) days = 30;
var exp = new Date;
exp.setTime(exp.getTime() + days*24*60*60*1000);
document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString() + "; path=/";
}
function GetCookie(name)
{
var arr = document.cookie.match(new RegExp("(^ )"+name+"=([^;]*)(;$)"));
if(arr != null) return unescape(arr[2]); return null;
}

js弹出层,效果代码,鼠标移动消失

Sat, 21 May 2011 00:00:00 +0000

这两天要做一个JavaScript的弹出层效果，就是鼠标移动上面的时候弹出一个效果层，移开的时候就消失，网上搜索了一下，得到下面的一段实现代码： 1、JavaScript部分

function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("BigBearLoading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("BigBearLoading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_dh){changew=math.ceil((_dw-10)/((_dh-10)/50))} top="(document.documentElement.clientHeight-10)/2+" left="(document.documentElement.clientWidth-10)/2+" nw="10,Nh=">OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
if(OverW>NwOverH>Nh) {
if(OverW>Nw) {
$("BigBearLoading").style.width=Nw+"px";
$("BigBearLoading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("BigBearLoading").style.height=Nh+"px";
$("BigBearLoading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("BigBearLoading").innerHTML=ChangeDesc;
}
}
function CloseDiv()
{
$("BigBearLoading").style.display="none";
}

2、css部分

body {margin:0px}
#BigBearLoading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}

3、div部分创建一个span，包含下面的内容： onmouseover=“javascript:OpenDiv(500,300,‘有时间请经常来看看大熊工作室噢’)” onmouseout=“javascript:CloseDiv()” 请用鼠标移动到这里创建一个div，设置为： id=“BigBearLoading” ondblclick=“this.style.display=‘none’” style=“DISPLAY: none”

css样式控制标字数并且跟随省略号,css控制字数,省略号

Fri, 21 May 2010 00:00:00 +0000

相信很多人都遇到这样的问题：如何利用css样式来控制，网站查了资料，发现都是给出下面这样的解释： .txt {width:120px; overflow:hidden; text-overflow:ellipsis;} “overflow:hidden;”是隐藏显示不下的部分； “text-overflow:ellipsis;”是尾部跟随省略号。这里一定要记住，必须设置宽度和行高，否则无法实现这样的效果。上面这样的做法没有考虑浏览器直接的兼容，应该做成这样： *html ul.aboutnews li { width:46%;height:22px;float:left;line-height:180%;word-break:break-all;overflow:hidden;} *+html ul.aboutnews li { width:46%;height:22px;float:left; line-height:180%;word-break:break-all;overflow:hidden;}

IE下页面只有一个text回车将自动submit提交

Thu, 21 May 2009 00:00:00 +0000

IE下页面只有一个text回车将自动submit提交

这是IE的一个缺陷，不过还是有解决的办法的：

1、解决办法一：再增加一个text，然后隐藏这个text；

2、解决办法二：可以在这个页面的form里面加上onsubmit=“return false;” 。

JavaScript框架Jquery介绍

Thu, 21 May 2009 00:00:00 +0000

想必很多人都知道JQuery框架了，现在有很多JavaScript的框架，但是真正非常优秀的框架还属JQuery，从微软在VS2008中专门为其提供只能提示这一侧面可以看得出来它的分量。 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。　　jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。下面是最为简单的JQuery的应用：告别代码重复的时代还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：var someElement = $("#myId"). jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

JQuery下载,最新版本持续更新

Thu, 21 May 2009 00:00:00 +0000

JQuery是一个非常酷的JavaScript框架，极大地简化了JavaScript的操作，本人这段时间开始学习它，并且用它，现在把它当成了一个类似.NET框架的开发类库了，每一个项目我都需要引用到这个框架。这篇日志我提供JQuery下载地址，并且持续更新，希望给各位带来方便： 1、JQuery下载地址（1.3.2版本——最新发布版本）精简版本： http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js 完全版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js VS2008职能提示版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js 2、JQuery下载地址（1.3版本）精简版本： http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.min.js 完全版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.js VS2008职能提示版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3-vsdoc.js 3、JQuery下载地址（1.2.6版本——这是现在用得最多的版本）精简版本： http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js 打包版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js 完全版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js VS2008职能提示版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6-vsdoc.js

JQuery页面加载顺序

Thu, 21 May 2009 00:00:00 +0000

JQuery页面加载顺序 JQuery在页面加载顺序方面提供了更好更合理的操作，在JavaScript中，window.onload事件下的代码是必须在所有页面元素都加载完成之后才执行（注意：包括了图片和文件等），可是有的时候我们希望hmtl代码加载完成之后（即DOM加载完成之后）就执行某些代码，在JQuery里有这样的函数： $(document).ready(function(){ alert(“hello”); }); 上面的代码在Dom结构被浏览器解析之后就可以执行了。当然也有其他人使用JavaScript来编写一些函数可以实现这样的功能，只不过JQuery更好。另外，使用这样的函数还有一个好处，就是可以基于同一个页面在加载结束之后执行多个脚本函数。

Web前端开发技术会议的心得体会

Thu, 21 May 2009 00:00:00 +0000

去年参加了雅虎（Yahoo）举办的第二届D2网站Web前端技术会议，这是我第一次参加这样的技术会议，很多东西听得似懂非懂，周爱民讲web前端基本设计模式，还推荐了他自己写的一本书关于Javascript核心编程的书籍，其他几个都是雅虎的大牛在讲ajax应用，很可惜没有听到实质性的知识。这里顺便介绍一下什么是D2，D2(Designer & Developer Frontend Technology Forum)号称是中国所有前端开发者的节日，包括前端设计师，前端开发工程师，和所有对前端技术感兴趣的人，D2目的是推动国内前端技术的发展，为国内前端从业者提供一个自由交流，学习探讨技术的平台，促进国内行业标准跟国际的融合，发掘前端技术可以创造的更大价值。第一届是淘宝网举办，也是他们发起的，第二届是由雅虎举办，第三届是土豆网举办，只参加过第二届，不知道后来举办得怎么样，不过通过这次的会议，至少明白了Web前端优化的重要性，也明白了像JavaScript、div、css这样的技术是很有讲究的。