我试图为实用程序方法编写一个通用的javascript端点,这些端点将在客户端和服务器之间共享。服务器
我已经四处阅读,但我很难掌握这些概念。
我在考虑,可能将其作为字符串发送并使用eval?我不确定最佳做法是什么。
到目前为止,我已经:
需要脚本的客户端服务。
angular.module('passionForgeApp').service('Utils', function ()
{
//TODO Load these from the server side utlity module.
}
节点实用程序导出
'use strict';
var Utility = function(){};
Utility.isASCII = function (str) {
return /^[\x00-\x7F]*$/.test(str);
};
Utility.isAlphaNumeric = function(str) {
var code, i, len;
for (i = 0, len = str.length; i < len; i++) {
code = str.charCodeAt(i);
if (!(code > 47 && code < 58) && // numeric (0-9)
!(code > 64 && code < 91) && // upper alpha (A-Z)
!(code > 96 && code < 123)) { // lower alpha (a-z)
return false;
}
}
return true;
};
module.exports = Utility;
Node Express端点
这就是我迷失的地方。
//TODO Bad path.
var utility = require('./../../components/utility');
// Gets a list of Commonjss
exports.utility = function(req, res) {
//send utility????
//Stuck here, sends {} to browser.
res.json(utility);
};
修改
根据要求,发布了browserify脚本。
这是我在网络日志中看到的浏览器加载的。
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var Utility = function(){};
Utility.isASCII = function (str) {
return /^[\x00-\xFF]*$/.test(str);
};
Utility.isAlphaNumeric = function(str) {
var code, i, len;
for (i = 0, len = str.length; i < len; i++) {
code = str.charCodeAt(i);
if (!(code > 47 && code < 58) && // numeric (0-9)
!(code > 64 && code < 91) && // upper alpha (A-Z)
!(code > 96 && code < 123)) { // lower alpha (a-z)
return false;
}
}
return true;
};
module.exports = Utility;
},{}]},{},[1]);
我的问题是我不知道如何使用它。
在我的控制器中,我试过console.log(Utility);
然后我尝试了要求(&#39; Utility&#39;)。
没什么,未定义。 : - /
修改
Full implementation of bundling shared server side code to client side
答案 0 :(得分:4)
IMO不一定非常难。如果您使用browserify或捆绑器作为前端,则可以执行此操作。最初设置可能会很痛苦但值得。
项目结构
/client
main.js
/components
/utility
utility.module.js
/server
controller.js
/utilities <- put your code that is shared between server/client here
Utility.js
<强>客户端/组件/效用/ utility.module.js 强>
module.exports = angular
.module("app.utility")
.factory("Utility", require(__dirname + "/../../utilities/Utility.js");
<强>公用事业/ Utility.js 强>
module.exports = {
toASCII: function() { //do stuff in angular and express }
};
client / main.js(您需要在此处要求所有组件,这是您的browserify入口点)
require("angular")
.module("app" [
"app.utility"
]);
require( <% path to utility.module.js %>);
server / controller.js(您可以按预期使用您的模块)
var util = require( <% path to Utility.js %>);
util.toASCII(); //do something
答案 1 :(得分:1)
另一种方法是在节点中编写实用程序模块,并使用browserify使其在节点或浏览器上可运行。
Browserify将在文件的开头添加代码,以检查是否存在module.exports对象或窗口对象。然后它将确保代码运行require语句时,module.exports工作。
通过浏览器化代码,您可以在浏览器中使用实用程序功能,方法是将它们包含在html脚本标记中。
这应该比使用eval()更安全。
我做了一个例子。我添加了下划线和时刻的要求,只是为了显示require语句的工作原理。你不需要它们。
创建一个名为myUtility.js的文件并添加此
var _ = require('underscore');
var moment = require('moment');
function now (format) {
var time;
var dFormat = 'YYYY-MM-DD hh:mm:ss a';
format = format || dFormat;
try {
time = 'TIME:\t' + moment().format(format);
}catch (err) {
time = 'TIME:\t' + moment().format(dFormat);
}finally{
return time;
}
}
function isAlphaNumeric(str) {
var code, i, len;
return _.every(str, function (letter, i) {
code = str.charCodeAt(i);
console.log('code: ' + code);
if (!(code > 47 && code < 58) && // numeric (0-9)
!(code > 64 && code < 91) && // upper alpha (A-Z)
!(code > 96 && code < 123)) { // lower alpha (a-z)
return false;
}
});
}
var myutil = {
now: now,
isAlphaNumeric: isAlphaNumeric,
};
module.exports = myutil;
运行以下命令:
npm install browserify
npm install underscore
npm install moment
browserify myUtility.js --s myutil -o myutil.js
上面的browserify命令生成myutil.js。将其添加到index.html
<script src="/path/to/myutil.js"></script>
在控制器中添加它并登录到您的页面并检查控制台输出:
console.log(myutil)
var isAlphaNumeric = myutil.isAlphaNumeric;
console.log('try cat: ' + isAlphaNumeric('cat'));
console.log('try 123cat123: ' + isAlphaNumeric('123cat123'));
console.log('try ca?t: ' + isAlphaNumeric('ca?t'));
输出显示您现在在浏览器中使用您的函数,文件中包含模块导出和require语句。
ascii代码似乎也需要调整。我相信你想检查字母是否在||的任何范围内而不是&amp;&amp;。
TIME: 2015-12-18 05:13:00 pm
code: 99
try cat: false
code: 49
try 123cat123: false
code: 99
try ca?t: false
当我浏览你的函数并将其添加到index.html时,我在控制台中得到了错误的答案。更改字符逻辑会修复它,以便如果代码不在任何组中,则它不会返回true:
if (
(code > 47 && code < 58) || // numeric (0-9) false to true
(code > 64 && code < 91) || // upper alpha (A-Z) false to true
(code > 96 && code < 123) // lower alpha (a-z)
) {
return true;
}
答案 2 :(得分:1)
如果这是您的文件夹结构
/ root
/ client
- client.js
/ server
- server.js
/ shared
- utility.js
在您的服务器(node.js)中,您“需要”这样的文件
var server = require('server.js');
var utility = require('utility.js');
在浏览器中,您需要这样的文件
<script src="client.js" type="text/javascript">
Node.js具有与浏览器不同的模块系统。主要的是RequireJS和CommonJS(节点的require()
),它们彼此不兼容。
Browserify是一个实用程序,它将CommonJS或RequireJS模块转换为浏览器兼容(否则不是)。换句话说,它将“捆绑”文件(递归)所需的所有文件(),并将它们全部捆绑到一个文件中,供浏览器使用。
因此,如果您希望能够在node.js和浏览器中使用相同的文件,则可以根据需要使用require()s对其进行编码(node.js样式)。
// File utility.js
var a = require('lodash')
var b = require('myotherlib')
module.exports.a = function(a){ } //etc.
您可以在节点
中使用它var utility = require('utility.js');
然后,在其上使用browserify实用程序。
browserify utility.js -o utility-bundled.js
然后,您可以在浏览器中使用它!
<script src="utility-bundled.js" type="text/javascript"/>
<script src="angular.js" type="text/javascript"/>
<script src="controllers.js" type="text/javascript"/>
<script src="app.js" type="text/javascript">
Browserify“浏览”模块以便在浏览器中使用,否则它们不会。
- 编辑1
这将使您的实用程序库处于“全局”状态。但是,如果您希望能够使用以下语法“导入”它:
angular.module('passionForgeApp').service('Utils', function ()
{
//TODO Load these from the server side utlity module.
}
您可以设置ocLazyLoad。它是一个非常好的库,用于定义延迟加载的外部文件。
“lazy-load”它意味着它只会在您明确要求时下载该库。
如果您使用此方法,则可以删除
<script src="utility-bundled.js" type="text/javascript"/>
来自index.html。你必须设置ocLazyLoad
angular.module('app', ['oc.lazyLoad']).config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
modules : [{
name : 'Utility',
files : ['utility-bundled.js']
}]
});
}]);
然后你可以以懒惰的方式在需要它的模块中使用它
angular.module('MyController', ['$ocLazyLoad', function(ocLazyLoad){
ocLazyLoad.load('Utility');
}]