一些前端注意事项整理

最新推荐文章于 2022-11-01 18:19:05 发布

hfutsqliang

最新推荐文章于 2022-11-01 18:19:05 发布

阅读量648

点赞数

分类专栏： Web前端开发文章标签：前端 app

本文链接：https://blog.csdn.net/liangshiquan1/article/details/51555419

版权

Web前端开发专栏收录该内容

33 篇文章 0 订阅

订阅专栏

angular

angular 的service实现方法：

1，value 变量
angular.module(‘app’,[]).value(‘realname’,’sqliang’);

2，constant 常量（不可以改变）

angular.module(‘app’,[]).value(‘http’,’www.baidu.com’);

3，factory
angular.module(‘app’,[]).factory(‘Data’,function(){
return {
msg: ‘Hello’,
setMsg: function(){
this.msg = “no Hello”;
}
};
});

4，service
angular.module(‘app’,[]).service(“User”,function(){
this.firstname = “司马”;
this.lastname = “长风”;
this.getName = function(){
return this.firstname + ” ” + this.lastname;
}
});
5，provider
ng-show , ng-hide , ng-hide

文件上传解决方案

普通的文件上传实现方案：

常见异步上传方案：

1，使用第三方控件（Flash,ActiveX,浏览器插件等）
适用与专门的文件上传应用
优点：
交互与可控性好（多文件，进度展示，续传，暂停）
性能好（可使用底层协议）
缺点：
需要浏览器安装插件

2，使用隐藏的iframe模拟异步上传（伪异步上传）
优点：浏览器原生支持，不需要插件，广泛的浏览器兼容性
缺点：交互差，体验差，上传过程基本不可控；性能差

3，使用xhr level2纯ajax异步上传
优点：
（1）支持H5的浏览器原生支持，不需要插件
（2）交互性较好
缺点：受浏览器支持限制
关键过程：
1，创建FormData,放入待上传文件
2，通过xhr操作将FormData发送到服务器，实现文件上传，
3，绑定progress、load、error等事件监听传输过程并在页面显示动态交互信息

var fd = new FormData();
fd.append('myFile',element.files[0]);
// 创建xhr对象
var xhr = new XMLHttpRequest();

// 监听状态，实时响应。
// xhr 和 xhr.upload 都有progress事件,xhr.progress是下载进度，xhr.upload.progress是上传进度
xhr.upload.onprogress = function(event){
    if(event.lengthComputable){
        var percent = Math.round(event.loaded * 100 / event.total);
        console.log("%d%",percent);
    }
}；
// 传输开始
xhr.onloadstart = function (event) {
    console.log('load start');

}
// ajax过程成功完成事件
xhr.onload = function(event){
    console.log("load success");
    console.log(xhr.responseText);
}
// ajax 过程发生错误事件
xhr.onerror = function(event){
    console.log("error");
}
// ajax被取消
xhr.onabort = function (event) {
    console.log("abort");
}
// loadend传输结束，不管成功失败都会被触发
xhr.onloadend = function (event) {
    console.log("load end");
}

xhr.open('POST','/upload3',true);
xhr.send(fd);

七天学会nodejs

1，为了实现高性能web服务器，首先看重的是事件机制和异步IO模型的优越性
运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器，NodeJS就提供了fs，http等内置对象
2，写的稍微大一点的程序代码都会将代码模块化。nodejs中一般将代码合理拆分到不同的js文件中，每一个文件就是一个模块，二文件路径就是模块名

在编写每一个莫亏啊时，都有require，exports，module三个预订好的变量可供使用
var foo1 = require(‘./foo’);//可以不加 .js
var foo2 = require(‘./foo.js’)

另外，可以使用以下方式加载和使用一个JSON文件。
var data = require(‘./data.json’);

exports对象是当前模块的导出对戏那个，用于导出模块公有方法和属性。别的模块通过require函数使用当前模块时得到的就是当前模块的exports对象
exports.hello = function(){
console.log(“heelo”);
}
module,
通过module对象可以访问当前模块的一些相关信息，但最多的用途是替换当前模块的到处对象。

3，Nodejs使用CMD模块系统，主模块作为程序入口点，所有模块在执行过程中只初始化一次。另外，除非js模块不能满足需求，够足不要轻易使用二进制模块，否则用户会叫苦连天

4,包（package），js模块的基本单位是单个js文件，但复杂的模块往往由多个子模块子组成，为了便于管理和使用可以把多个子模块组成的大模块称作包，并把所有子模块凡在同一个目录里。

在组成一个包的所有子模块中，需要有一个入口模块，入口模块的到处对象被作为包的到导出对象

— /home/user/lib/
—— cat/
head.js
body.js
index.js

index.js:

var head = require(‘./head’);
var body = require(‘./body’);

exports.create = function (name) {
return {
name: name,
head: head.create(),
body: body.create()
};
}

当模块的文件名是index.js，加载模块时可以使用模块所目录的路径代替模块文件路径：
var cat = require(‘/home/user/lib/cat’);
等价于
var cat = require(‘/home/user/lib/cat/index’);

=====另外，如果想自定义入口模块的文件名和存放位置，就需要在包目录下包含一个package.json文件，并在其中指定入口模块的路径，上例中的cat模块可以重构如下：
— /home/user/lib
- cat/
+ doc/
- lib/
head.js
body.js
main.js
+ test/
package.json

package.json:

{
‘name’: ‘cat’,
‘main’: ‘./lib/mian.js’
}

这样，同样可以使用 require(‘/home/user/lib/cat’)的方式加载模块。NodeJS会根据包目录下的package.json找到入口模块所在位置

版本号：
使用npm下载和发布代码都会接触到版本号，npm使用语义版本号来管理代码：
语义版本号分为X.Y.Z三位，分别代表主版本号，次版本号和补丁版本号，当代码更新时，版本号按以下原则更新：

如果只是修改bug，需要更新Z位；如果是新增了功能，但是向下兼容，需要更新Y位；如果有大变动，向下不兼容，需要更新X位。

=======总结：
1，编写代码前先规划好目录结构，才能做到有条不紊；
2，稍大些的程序可以将代码拆分为多个模块管理，更大些的程序可以使用包来组织模块
3，合理使用node_modules和NODE_PATH来解耦包的使用方式和物理路径
4，使用NPM加入NodeJS生态圈互通有无。

====================
文件操作
让前端觉得如获神器的不是NodeJS能做网络编程，而是NodeJS能够操作文件。几乎也也只需要一些数据处理逻辑，再加上一些文件操作，就能编写出大多数前端工具。

NodeJS通过fs内置模块提供对文件的操作，fs模块提供的API基本上分为三类：

（1）文件属性读写，fs.stat,fs.chmod,fs.chown等
（2）文件内容读写，fs.readFile,fs.readdir,fs.writeFile,fs.mkdir等等
（3）底层文件操作，fs.open,fs.read,fs.write,fs.close等等

异步读取文件与同步读取的处理区别：
fs.readFile(pathname,function(err, data){
if(err){
//deal with error
}else {
//deal with data.
}
});

try {
var data = fs.readFileSync(patheName);
//deal with data.
} catch (err) {
// deal with erro.
}