Typically when I put together dynamically generated HTML markup, I've been using PHP to store the information and then looping through that to create elements on the page. One example is navigation; create an array of objects and then loop through them to echo the markup. This helps out a lot for times that I might have to make minor (or major) changes during development or maintenance.
通常，当我将动态生成的HTML标记放在一起时，我一直在使用PHP来存储信息，然后在页面上循环创建元素。一个例子是导航;创建一个对象数组，然后循环它们以响应标记。这对我在开发或维护过程中可能需要做一些小的(或大的)更改有很大帮助。
Lately I've been wondering if I should use JavaScript to do this instead. Same principle, but using addElement.
最近，我一直在考虑是否应该使用JavaScript来实现这一点。同样的原则，但使用的是addElement。
Just wanted to get some opinions on this; pros, cons, php vs js, seo considerations, etc.
我只是想听听大家的意见;优点、缺点、php vs js、seo注意事项等。
Thanks folks!
谢谢各位!
6 个解决方案
#1
40
Doing it client side means:
做it客户端意味着:
- Doing it in lots of different environments instead of a single one
- 在许多不同的环境中做，而不是在一个环境中做
- Having it break whenever a user comes along without JS (for whatever reason)
- 当没有JS的用户出现时(无论出于什么原因)
- Having it fail to work for the vast majority of bots (including search engines)
- 它对绝大多数的机器人(包括搜索引擎)不起作用
- Investing development time in converting all your logic
- 将开发时间投入到转换所有逻辑上
- Requiring the browser to make additional requests to the server, slowing down load times
- 要求浏览器向服务器发出附加请求，从而减慢加载时间
When deciding if you should do something client side instead of server side, as a rule of thumb ask yourself two questions:
当你决定是否应该做一些客户端而不是服务器端时，作为经验法则，问自己两个问题:
- Would the user benefit from getting instant feedback in response to them doing something? e.g. An error message for improper data in a form they are trying to submit. If so, then doing it client side would be beneficial.
- 用户会从即时反馈中获益吗?错误信息，错误信息;错误信息;错误信息。如果是这样，那么做it客户端将是有益的。
- Can it be done server side? If so, do it server side first as it is more reliable (and for non-cosmetic things, harder to interfere with). Build on things that work.
- 可以在服务器端完成吗?如果是这样，就先做it服务器端，因为它更可靠(对于非修饰性的东西，更难干扰)。建立在工作的基础上。
#2
4
It's not an either one or the other type of situation; generally you will need to do both.
这不是一种情况，也不是另一种情况;通常你需要同时做这两件事。
Doing it client side will probably be slower, as the server still needs to figure out all the data but the client needs to render it; this will involve multiple requests (most likely) and DOM manipulation is slow (especially on older browsers).
做it客户端可能会比较慢，因为服务器仍然需要计算所有数据，但是客户端需要呈现数据;这将涉及多个请求(很可能)，而且DOM操作很慢(特别是在旧的浏览器上)。
#3
4
Best practice would be to produce any necessary markup on the server side. Reasons for this include:
最佳实践是在服务器端生成任何必要的标记。原因包括:
SEO: Most crawler bots won't parse Javascript, so they'll skip over anything crucial that you're generating with addElement.
SEO:大多数爬虫机器人不会解析Javascript，所以他们会跳过任何你用addElement生成的关键内容。
Accessibility: Your site should basically functional without Javascript. Consider people who might be browsing your site on Kindles, older Blackberries, Nokias or other feature phones with data. They don't need all the fancy styles and effects, but they should at least be able to get around your site.
可访问性:您的站点应该基本功能没有Javascript。考虑那些可能正在kindle、老黑莓、Nokias或其他有数据功能的手机上浏览你网站的人。它们不需要所有花哨的样式和效果，但它们至少应该能够在您的站点上运行。
Consistency: JS can add yet another level of cross-browser variability. Why rely on client-side rendering of necessary markup? Do it server-side.
一致性:JS可以增加跨浏览器的可变性。为什么要依赖客户端呈现必要的标记?服务器端。
Of course, this advice can be taken in stride if you're developing an all-JS desktop app or using something like the Sencha Touch framework.
当然，如果您正在开发一个全js桌面应用程序，或者使用Sencha Touch框架之类的东西，您可以从容地接受这个建议。
#4
1
If SEO is your concern, things are simple: JS is not indexed.
如果SEO是你关心的，事情很简单:JS没有被索引。
There also are UI issues: if JS is not enabled, no JS-dependent stuff will load.
还有UI问题:如果不启用JS，就不会加载依赖于JS的内容。
#5
0
One possibility would be to detect what kind of user is viewing your site :
一种可能是检测哪种用户正在查看您的站点:
-
If it's a bot: parse on the server-side, you may just output what is needed by the bot, without graphical things,...
如果它是一个bot:在服务器端进行解析，您可以只输出这个bot需要的内容，而不需要图形化的东西……
-
If it's a mobile : show a mobile optimized version, using something like Sencha Touch, as Charlie pointed out
如果它是一款移动设备:就像查理指出的那样，展示一个移动优化版本，使用Sencha Touch之类的东西
-
If it's a standard browser, without javascript : render the page on the server side
如果是标准浏览器，没有javascript:在服务器端呈现页面。
-
If it's a standard browser, with javascript enables : just send the data from server side (or load it with Ajax) and render the data from the client-side
如果是标准浏览器，可以使用javascript:只需从服务器端发送数据(或使用Ajax加载数据)，并从客户端呈现数据
You may use something like Mustache, wich is a template engine running on many server-side languages (PHP, Ruby, Java,... but also on Javascript, enabling client-side page rendering!
您可以使用Mustache, wich是一个在许多服务器端语言上运行的模板引擎(PHP、Ruby、Java……)而且在Javascript上，支持客户端页面渲染!
And try to use a Javascript framework like jQuery, Mootools, Dojo or ExtJS, they will help you to write code that will run on every browser.
尝试使用jQuery、Mootools、Dojo或ExtJS等Javascript框架，它们将帮助您编写在每个浏览器上运行的代码。
#6
0
PHP is good for some things, including Handlebars type templating, and fast server-side content replacement. But it is also not great for some things, like single page applications and games, real-time updates to websites. Those things are where JavaScript is strong.
PHP在某些方面很有用，包括handlebar类型的模板，以及快速的服务器端内容替换。但对于一些东西来说，它也不是很好，比如单页应用程序和游戏，网站的实时更新。这些都是JavaScript的强项。
#1
40
Doing it client side means:
做it客户端意味着:
- Doing it in lots of different environments instead of a single one
- 在许多不同的环境中做，而不是在一个环境中做
- Having it break whenever a user comes along without JS (for whatever reason)
- 当没有JS的用户出现时(无论出于什么原因)
- Having it fail to work for the vast majority of bots (including search engines)
- 它对绝大多数的机器人(包括搜索引擎)不起作用
- Investing development time in converting all your logic
- 将开发时间投入到转换所有逻辑上
- Requiring the browser to make additional requests to the server, slowing down load times
- 要求浏览器向服务器发出附加请求，从而减慢加载时间
When deciding if you should do something client side instead of server side, as a rule of thumb ask yourself two questions:
当你决定是否应该做一些客户端而不是服务器端时，作为经验法则，问自己两个问题:
- Would the user benefit from getting instant feedback in response to them doing something? e.g. An error message for improper data in a form they are trying to submit. If so, then doing it client side would be beneficial.
- 用户会从即时反馈中获益吗?错误信息，错误信息;错误信息;错误信息。如果是这样，那么做it客户端将是有益的。
- Can it be done server side? If so, do it server side first as it is more reliable (and for non-cosmetic things, harder to interfere with). Build on things that work.
- 可以在服务器端完成吗?如果是这样，就先做it服务器端，因为它更可靠(对于非修饰性的东西，更难干扰)。建立在工作的基础上。
#2
4
It's not an either one or the other type of situation; generally you will need to do both.
这不是一种情况，也不是另一种情况;通常你需要同时做这两件事。
Doing it client side will probably be slower, as the server still needs to figure out all the data but the client needs to render it; this will involve multiple requests (most likely) and DOM manipulation is slow (especially on older browsers).
做it客户端可能会比较慢，因为服务器仍然需要计算所有数据，但是客户端需要呈现数据;这将涉及多个请求(很可能)，而且DOM操作很慢(特别是在旧的浏览器上)。
#3
4
Best practice would be to produce any necessary markup on the server side. Reasons for this include:
最佳实践是在服务器端生成任何必要的标记。原因包括:
SEO: Most crawler bots won't parse Javascript, so they'll skip over anything crucial that you're generating with addElement.
SEO:大多数爬虫机器人不会解析Javascript，所以他们会跳过任何你用addElement生成的关键内容。
Accessibility: Your site should basically functional without Javascript. Consider people who might be browsing your site on Kindles, older Blackberries, Nokias or other feature phones with data. They don't need all the fancy styles and effects, but they should at least be able to get around your site.
可访问性:您的站点应该基本功能没有Javascript。考虑那些可能正在kindle、老黑莓、Nokias或其他有数据功能的手机上浏览你网站的人。它们不需要所有花哨的样式和效果，但它们至少应该能够在您的站点上运行。
Consistency: JS can add yet another level of cross-browser variability. Why rely on client-side rendering of necessary markup? Do it server-side.
一致性:JS可以增加跨浏览器的可变性。为什么要依赖客户端呈现必要的标记?服务器端。
Of course, this advice can be taken in stride if you're developing an all-JS desktop app or using something like the Sencha Touch framework.
当然，如果您正在开发一个全js桌面应用程序，或者使用Sencha Touch框架之类的东西，您可以从容地接受这个建议。
#4
1
If SEO is your concern, things are simple: JS is not indexed.
如果SEO是你关心的，事情很简单:JS没有被索引。
There also are UI issues: if JS is not enabled, no JS-dependent stuff will load.
还有UI问题:如果不启用JS，就不会加载依赖于JS的内容。
#5
0
One possibility would be to detect what kind of user is viewing your site :
一种可能是检测哪种用户正在查看您的站点:
-
If it's a bot: parse on the server-side, you may just output what is needed by the bot, without graphical things,...
如果它是一个bot:在服务器端进行解析，您可以只输出这个bot需要的内容，而不需要图形化的东西……
-
If it's a mobile : show a mobile optimized version, using something like Sencha Touch, as Charlie pointed out
如果它是一款移动设备:就像查理指出的那样，展示一个移动优化版本，使用Sencha Touch之类的东西
-
If it's a standard browser, without javascript : render the page on the server side
如果是标准浏览器，没有javascript:在服务器端呈现页面。
-
If it's a standard browser, with javascript enables : just send the data from server side (or load it with Ajax) and render the data from the client-side
如果是标准浏览器，可以使用javascript:只需从服务器端发送数据(或使用Ajax加载数据)，并从客户端呈现数据
You may use something like Mustache, wich is a template engine running on many server-side languages (PHP, Ruby, Java,... but also on Javascript, enabling client-side page rendering!
您可以使用Mustache, wich是一个在许多服务器端语言上运行的模板引擎(PHP、Ruby、Java……)而且在Javascript上，支持客户端页面渲染!
And try to use a Javascript framework like jQuery, Mootools, Dojo or ExtJS, they will help you to write code that will run on every browser.
尝试使用jQuery、Mootools、Dojo或ExtJS等Javascript框架，它们将帮助您编写在每个浏览器上运行的代码。
#6
0
PHP is good for some things, including Handlebars type templating, and fast server-side content replacement. But it is also not great for some things, like single page applications and games, real-time updates to websites. Those things are where JavaScript is strong.
PHP在某些方面很有用，包括handlebar类型的模板，以及快速的服务器端内容替换。但对于一些东西来说，它也不是很好，比如单页应用程序和游戏，网站的实时更新。这些都是JavaScript的强项。