首页
Search
1
解决visual studio code (vscode)安装时没有选择安装路径问题
320 阅读
2
如何在 Clash for Windows 上配置服务
215 阅读
3
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
150 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
149 阅读
5
uniapp打包app提示通讯录权限问题,如何取消通讯录权限
113 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
1,195
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
758
篇与
的结果
2024-10-21
参加腾讯深圳 IMWebConf 2017 前端开发者大会是什么体验?
作为前端开发的蚊子,前天有幸参加了IMWebConf2017的大会。从一名来自北京的路人的角度来将,深圳的空气是潮湿的,这次大会的组织是井然有序的。IMWebConf2017的官网: http://2017.imweb.io/index.html在大会开始前的签到,使用二维码扫描签到,快速准确!签到、领取物品、进入会场,顺畅一条龙。第一场的大佬是来自W3C的技术副总监Philippe,可惜自己的英文不好,除了盯着翻译器,一句话也没跟上!不过Philippe讲确实非常好,从一个大方向上讲解下了前端的现在和未来的发展!PWA与AMP-移动web的现在和未来,能大大加快移动端页面呈现速度,提高整体体验。TypeScript是经常听到的概念,不过我确实没有用过TypeScript,这次的大会也是认识了一下TypeScript,TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript,我们平时写的js其实也是TypeScript的一种!TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。只是typescript有着强制类型的限制,TypeScript不是新的语言,而是始于JavaScript,归于JavaScript。下午的会议是有3个分会场:node会场,框架性能会场,综合会场。蚊子是选择了node会场,node会场中分享的专题都是实打实的、经过项目验证的经验,让我们大家了解到node在实际项目中的应用,node的框架等等!幸运的是,同学中了一本书,不过他已经有了,然后送给我了;然后本人中了一个充电宝了!大会还发了一件T恤。有一个小小的插曲,来深圳参加会议,北京这边的项目出了点小问题,感谢深圳总部的同事能提供电脑,让我远程解决线上的问题!下午场里有部分的内容没有听到。
2024年10月21日
7 阅读
0 评论
0 点赞
2024-10-21
webpack的入门教程
webpack 在官方网站中是这么定义的。webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。在 webpack 中,一切皆资源,CSS、JS、图片等都可以作为资源处理。webpack 在配置大型项目时,可能会很大很复杂的配置,这里我们就从简单的 2-3 个页面的配置开始说起。 1. 简单的配置 # 如果之前用过 gulp 处理过前端资源,那么使用 webpack 就相对来说比较简单一些。要使用 webpack 的话,首先要在项目目录中安装 webpack,其他的我们稍后再安装:npm install webpack --save-dev webpack 的配置要在根目录的 webpack.config.js 里,我们先来看下简单基本的配置:var webpack = require("webpack"); module.exports = { // 入口文件,可写多个 entry: { entry: "./src/entry.js", }, // 输出出口 output: { path: __dirname + "/out/", // 输出目录 filename: "[name].js", // 输出的文件名称规则, [name]表示上面entry中的key值(main) }, module: { // loader操作各种资源 loaders: [ { test: /\.css$/, // 匹配到.css文件 // 用css-loader与style-loader处理匹配到的文件,从右向左执行 loader: "style-loader!css-loader", }, ], }, }; 用上面的配置的话,还需要安装css-loader和style-loader:npm install css-loader style-loader --save-dev 安装后,我们再配置一个简单的目录: `-out `-src `---css `---img `---js `-entry.js `-package.json `-webpack.config.js `-index.html 好了,我们编写 css 和 js 了。在 css 目录中,我们创建一个 index.css:.main { background: #ccc; width: 400px; height: 400px; } 在 js 目录中,我们创建一个 index.js:function getTime() { console.log(Date.now()); } exports.getTime = getTime; 在 entry.js 中:require("./css/index.css"); import o from "./js/index.js"; console.log(o.getTime()); 执行命令:$webpack -p 在 index.html 中引入./out/entry.js: 打开 index.html 就能看到效果了。 2. webpack 讲解 # 在 webpack.config.js 中:entry 可以有多个入口,来对应多个页面,比如我还有一个分享页面:entry : { entry : './src/entry.js', share : './src/share.js' } 在新页面中,引入./out/share.js即可。loader 是从右往左开始执行的,先执行 css-loader,再执行 style-loader。 css-loader 用来解析 css; style-loader 是将 css 样式用 style 标签插入页面的 head 里。而且在引入 loader 时,可以直接省略-loader:module: { loaders: [ { test: /\.css$/, loader: "style!css", }, ]; } 在满足基本的配置后,我们需要满足更多的需求,比如我要用 SASS 编写 css,我要用 ES6 写 js,处理 CSS 中的图片等等。那么我们就得对 webpack.config.js 扩充配置:$npm install sass-loader url-loader file-loader babel-loader --save-dev 配置文件 webpack.config.js:output : { path : __dirname+'/out/', // 输出目录 filename : '[name].js', publicPath : __dirname+'/out/' // 图片路径 } module : { loaders : [ { test : /\.css$/, loader : 'style!css' }, { test: /\.(jpg|png)$/, loader: "url?limit=8192" }, { test: /\.scss$/, loader: "style!css!sass" }, { test: /\.js$/, loader: "babel" } ] } 好了,现在可以使用 sass, es6 了! 2.1 使用 ES6 # 在./js/index.js 中:// ./src/js/index.js class Student { constructor(name = "") { this.name = name; } sayHello() { console.log(`hello, ${this.name}!`); } } var wenzi = new Student("wenzi"); wenzi.sayHello(); 2.2 独立的 CSS 文件 # 目前页面中的样式,是从 js 里加载的。如果我们想要把 css 独立到一个单独的文件中,就需要一个extract-text-webpack-plugin插件了:npm install extract-text-webpack-plugin --save-dev webpack.config.js 中:// webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin"); plugins: [new webpack.BannerPlugin("created at " + new Date().toLocaleString()), new ExtractTextPlugin("[name].css")]; name 就是 entry 中的 key 值。 3. 命令行 # 刚才上面我们用的webpack -p来编译的,这里还有几个命令也可以使用:#webpack 命令行的几种基本命令 $webpack --config XXX.js # 使用另一份配置文件(比如webpack.config2.js)来打包 $webpack -w # 提供watch方法,实时进行打包更新 $webpack -p # 对打包后的文件进行压缩,提供production $webpack -d # 提供source map,方便调试。 使用webpack --watch可以监控文件变化,实时编译;在要发布到线上时,使用webpack -p编译为压缩版本的文件。 4. 总结 # 关于 webpack 的内容依然还有很多,这里我们仅仅是做了一些入门的讲解。更多的内容可以查看官网。后续我们也会讲解 webpack 的高级应用等
2024年10月21日
7 阅读
0 评论
0 点赞
2024-10-21
支付宝推出租房平台的一点看法
相信您已经知道2017年10月10日时,支付宝推出了一个重要的功能:“租房平台”,在支付宝中搜索租房,即可进入到租房平台。租房平台中,目前已经支持8个城市了:上海、北京、深圳、杭州、南京、成都、西安、郑州,后续可能也会增加更多的城市。在使用的过程中,我们会发现房屋图片的水印都是“蘑菇租房”,这说明里面的房源都是来自蘑菇租房。支付宝的租房平台也不是完全自己运营的,而是与多个租房平台合作的,目前进驻的是--蘑菇租房,后续魔方、蛋壳等品牌也将接入到支付宝中,据说房源总量可能会超过百万套。支付宝的租房平台是依托其芝麻信用体系,对出租房和租户都纳入到体系中,进行信用评估!在个人信用达到650分以后上可以免押金,并且可以月付。在一些文章的评论下,蚊子发现不少网友对支付宝推出这一功能持有非常乐观的态度,“干死黑中介”,“整肃出租市场”,“中介市场更加规范了”等等。从好的一面讲: 消灭重复虚假房源:在支付宝租房服务中,房东录入完整房源信息后,将实现“房源出租后自动下架、空出后自动上线”,保证房源真实性。 消灭中介费:租客将与公寓管理方直接沟通对接,不再经过任何中介,从而省去高昂的中介费。 消灭押金:传统的“押一付三”将彻底改变,接入信用分后,芝麻分650分以上的用户租房将再也无需押金,还可以一月一付,大幅度降低资金压力 但蚊子本人还是持保留态度,毕竟租房跟其他的不一样。租房,租户总是要去看房的,真房东总是要带人看房的,很多房东把房子给中介出租,最主要的原因就是自己没有时间一直带租户看房子,只能让委托给中介;再一个原因就是中介给的钱会比租户给的钱高一些。那么,房源还是被中介控制着,租户能如果怎么办呢?如果支付宝没有实体店的话,谁带用户去看房有的中介在支付宝上面发布房源后,租户也是私下联系,签约流程完全私下完成,不走支付宝的线上流程。所以,你要么接受,要么放弃这个房源。同时,之前也出过比如丁丁租房、爱屋及乌等互联网中介,好像对传统的房屋中介也没有产生多大的影响。不过,毕竟支付宝的影响力更大,说不定支付宝真的能整租租房市场呢,让我们拭目以待
2024年10月21日
9 阅读
0 评论
0 点赞
2024-10-21
第12页
Front-end Engineer,前端开发工程师目前是一名前端开发工程师,主要负责前端规划、框架与架构、前端性能优化。专注前端技术,关注交互体验,擅长web ajax开发。坚信前端工程师的价值是最终能把技术和设计完美结合在一起。用最新的技术方案巧妙地帮助这些设计得以实现。
2024年10月21日
6 阅读
0 评论
0 点赞
2024-10-21
基于webpack搭建前端工程的思考
前端工程化的概念和思想早就已讨论过,并且之前也用 requireJS 和 seaJS 实现过,同时,在 2015 年,ECMAscript 也发布了 js 的正式版 ES6。在 ES6(ES2015)中,实现了标准上的统一,从底层上实现了模块化的支持。不过由于浏览器发展的滞后性,尤其是 IE,ES6 中很多的属性依然是不支持的,因此也就出现了第三方工具babel,将 ES6 语法转换为浏览器统一支持的 ES5。在上一篇文章中,我们对 webpack 也有个简单的了解了,在 webpack 中,一切皆资源,CSS,JS,图片等都可以作为资源处理。将资源进行分类,模块化的管理,适配到不同的页面。 1. 资源管理 # 项目的工程化,最主要的就是对资源的管理,对整个项目进行思考后,如何拆分资源。对于业务上的组件,我们可以放到components的目录中,然后对外暴露接口。webpack 对 CommonJS,AMD 和 ES6 的模块化都有非常好的支持,不过我们最好还是安装 ES6 的标准来写代码。webpack 编译打包后,都会打包到一个文件中。同时,webpack 让我们更加专注逻辑代码的编写,而不用关心代码是如何被引用的。关于export和import具体如何使用,可以参考阮一峰的文章 Module 的语法 。 2. 本地开发环境 # 一个项目的目录结构可以是这样的:`-out # 编译后 `-src # 原文件 `---css `---img `---js `---components # 组件 `-entry.js `-package.json `-webpack.config.js # 配置文件 `-index.html 为了方便本地的开发和调试,我们使用webpack-dev-server搭建一个本地服务:npm install webpack-dev-server --save-dev 下载安装完成后,我这里对应的版本号是:{ "webpack": "^2.7.0", "webpack-dev-server": "^2.9.1" } 本来安装网上的教程配置 server 时,各种出错,后来就一点点注释,看看是哪里配置错了,结果只能把整个devServer的配置全部注释掉。启动服务:webpack-dev-server --open -hot 程序会自动打开浏览器http://localhost:8080。但是,这里有个问题,页面该怎么引入静态资源呢,其实静态资源的路径就是在 webpack.config.js 中的output中配置的:output : { publicPath: '/dist/', filename: '[name].js' } 那么 src 中的静态资源就会编译到 /dist/ 的路径中了,页面中直接引用就行了。不过,当我们查看项目目录时,却没有 dist 目录,其实在使用webpack-dev-server启动本地服务后,编译的 /dist/ 目录是只存在在内存中的,服务关闭后,dist 目录就不存在了。 3. webpack 的配置 # 在之前的文章中,我们把 webpack 的配置写到了webpack.config.js中。编译时,默认就是调用该文件中的配置。但是,从代码开发到部署到线上,要经历 3 个环境: 本地开发环境、测试环境与正式环境。不过我们这里,只配置本地开发环境和测试环境,正式环境与测试环境的代码已经一样了,只是正式环境是另一套发布流程了: webpack.base.config.js 基础配置 webpack.dev.config.js 本地开发环境 webpack.pro.config.js 测试环境 webpack.base.config.js :var webpack = require('webpack'), path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: function () { return { index: './src/index.js', }; }, output: { publicPath: '/dist/', filename: '[name].js', }, // 新添加的module属性 module: { rules: [ { test: /\.js?$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/, options: { presets: ['es2015'], }, }, { test: /\.css$/, // loader: "style!css" use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', }), }, { test: /\.(jpg|png)$/, loader: 'url?limit=8192', }, { test: /\.scss$/, // loader: "style!css!sass" use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader', }), }, ], }, plugins: [], }; webpack.dev.config.js :const base = require('./webpack.base.config'), ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = Object.assign({}, base, { output: { publicPath: '/dist/', filename: '[name].js', }, plugins: [new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true })], }); module.exports = config; webpack.pro.config.js :const base = require('./webpack.base.config'), ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = Object.assign({}, base, { output: { publicPath: './build/', filename: '[name]-[chunkhash:8].js', }, plugins: [ new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }), new webpack.BannerPlugin('created at ' + new Date().toLocaleString()), ], }); module.exports = config; webpack.base.config.js 是基础文件,不直接调用,我们在 package.json 中把命令简化一下:"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config config/webpack.dev.config.js", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config config/webpack.pro.config.js" } 运行npm run dev命令时,调用的是 webpack.dev.config.js,进行本地开发;运行npm run build,调用 webpack.pro.config.js,进行预发布编译。 4. 总结 # 因为项目的难易程度,部署代码、测试发布的流程都不一样,在 webpack 的开发过程中,也依然需要遵循公司的标准进行自动化的整合。
2024年10月21日
7 阅读
0 评论
0 点赞
1
...
53
54
55
...
152