require

初识异步加载require与AMD模式

允我心安 提交于 2020-03-20 09:04:20
写过php的人对于require函数都不陌生,它的作用为文件导入,也可以把文件理解为模块、导入理解为调用,称为模块调用 随着用户体验的极致追求,前端业务所占比重逐渐增加,于是出现了前端领域的模块化编程 但是模块加载(javascript文件加载)的先后顺序却给我们带来了不小的麻烦,比如处理模块间的依赖关系 核心是通过define方法对无序的代码进行有序的模块化定义,通过require方法实现代码的模块化加载 需要载入的文件: require 主要作用是把庞大的客户端代码分割为各模块从而实现模块化管理,便于代码的编写与维护 require可以理解为一个工具库,帮助我们更好的架构前端框架,其本身并非前端框架 其次实现了异步加载解决了网页加载时的阻塞问题 客户端代码被定义为各模块后,模块之间错综复杂的依赖关系以及模块的按需加载、加载顺序就成了问题 require很好的解决了这个问题,它的模块化管理遵循AMD规范,模块加载不影响后续语句执行 不得不说的ADM规范 Asynchronous Module Definition - 异步加载模块规范 解决模块化编程带来的代码加载先后顺序问题及常规异步加载代码带来的不确定因素 载入require实现模块化编程 <script src="/static/js/require.min.js" data-main="/static/js/shop"><

ReactNative: 使用分组列表组件SectionList组件

*爱你&永不变心* 提交于 2020-03-17 06:48:45
一、简介 SectionList,分组列表,ReactNative中继提供的ListView和FlatList列表组件后的又一个很重要的分组列表组件。它的用法其实跟前面的FlatList差不多,但是SectionList组件性能更高,同时SectionList组件要比ListView组件使用简单的多。SectionList组件的功能非常强大,如下所示。现在我们来仔细研究一下这个组件的API。 完全跨平台。 可配置的可见性回调。 列表标题支持。 列出页脚支持。 项目分隔符支持。 节标题支持。 部分分隔符支持。 异构数据和项目渲染支持。 拉动以刷新。 滚动加载。 二、API SectionList组件同样地对属性是必须直接提供的,有些是可选的。如下所示: //分组基类SectionBase对象结构, 泛型为SectionItemT type SectionBase<SectionItemT> = { //数据源数组,必需属性 data: Array<SectionItemT>, //每一组数据源的标识符 ,必需属性 key: string, //每一组的每一个item组件,可选属性 renderItem?: ?(info: {item: SectionItemT, index: number}) => ?React.Element<any>, //分割线,可选属性

ReactNative: 使用列表组件ListView组件

无人久伴 提交于 2020-03-17 06:48:03
一、简介 在前面介绍过了FlatList列表组件用来展示大量的数据,ListView组件也是同样地功能。虽然ListView组件已经过时,但是作为新手还是有必要了解一下。它们的API差不太多,但是ListView组件使用起来确实要比FlatList列表组件复杂一下。ListView组件是一个垂直滚动列表组件,继承自ScrollView组件,拥有ScrollView组件的全部属性。该组件用简单的数据blob数组填充它,并使用该数据源和`renderRow`回调实例化一个`ListView`组件。 它从数据数组中获取一个Blob并返回可渲染组件。跟iOS中UITableView也非常类似。 二、API 该组件的属性如下: //数据源,必不可少,它是ListViewDataSource的实例 dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired, //要渲染的分割线,是一个函数,返回一个节点元素 //函数示例:(sectionID, rowID, adjacentRowHighlighted) => renderable renderSeparator: PropTypes.func, //要渲染的每一行视图(cell),必不可少,通过函数返回一个节点元素 //函数示例:(rowData, sectionID,

VueCli3,4中src问题

半世苍凉 提交于 2020-03-16 19:56:03
封装tabbar时发现图片显示不出来,检查了下我的图片确实放在assets文件夹下。 检查了下绑定的路径写错没 tabbar : [ { tabbarImg : "@/assets/img/tabbar/首页.svg" , tabbarText : "首页" } , { tabbarImg : "@/assets/img/tabbar/分类.svg" , tabbarText : "分类" } , { tabbarImg : "@/assets/img/tabbar/购物车.svg" , tabbarText : "购物车" } , { tabbarImg : "@/assets/img/tabbar/我的.svg" , tabbarText : "我的" } , ] 检查没问题,就去网页F12看了下图片路径: 路径还含有@,原封不动,肯定找不到图片。 查阅资料后,得知需要require或者import导入,才能获得动态路径。 import xx from ‘xxxx’ 导入时还要定一个变量来使用,不如require来的快。 tabbar : [ { tabbarImg : require ( "@/assets/img/tabbar/首页.svg" ) , tabbarText : "首页" } , { tabbarImg : require ( "@/assets/img

【天赢金创】探究Gulp的Stream

五迷三道 提交于 2020-03-16 15:04:38
某厂面试归来,发现自己落伍了!>>> 来自Gulp的难题 描述Gulp的项目构建过程的代码,并不总是简单易懂的。 比如Gulp的 这份recipe : var browserify = require ( 'browserify' ); var gulp = require ( 'gulp' ); var source = require ( 'vinyl-source-stream' ); var buffer = require ( 'vinyl-buffer' ); var uglify = require ( 'gulp-uglify' ); var sourcemaps = require ( 'gulp-sourcemaps' ); var gutil = require ( 'gulp-util' ); gulp.task( 'javascript' , function () { var b = browserify({ entries: './entry.js' , debug: true }); return b.bundle() .pipe(source( 'app.js' )) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true })) .pipe(uglify()) .on( 'error' ,

前端常见跨域解决方案(全)

≡放荡痞女 提交于 2020-03-15 11:27:44
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 同源策略限制以下几种行为: 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名,不同文件或路径 允许 http://www.domain.com/lab/c

NodeJS express框架的使用

不问归期 提交于 2020-03-15 07:59:08
首先,可以通过npm或者淘宝镜像cnpm全局安装epress框架,这里不具体说了 npm install -g express npm install -g express-generator 新建一个项目 express -e xxx 目录说明: bin:项目的启动文件,也可以放其他脚本。 node_modules:用来存放项目的依赖库。 public:用来存放静态文件(css,js,img)。 routes:路由控制器。 views:视图目录(相当于MVC中的V)。 app.js:项目入口及程序启动文件。 package.json:包描述文件及开发者信息。 -----------------------------------------------其他,自己创建使用------------------------------ actions:控制器,对请求的操作(相当于MVC中的C)。 plugs:数据库操作、邮件帮助等文件。 config:配置目录。 Dockerfile:做自动化部署的配置文件。 .gitignore:上传git的忽略文件配置。 README.md:项目说明文件。 app.js文件: 1 /** 2 * 应用程序的入口文件 3 */ 4 //加载express模块 5 const express = require('express'); 6 const

vue-cli 结构

。_饼干妹妹 提交于 2020-03-14 09:45:09
. | -- build / / 项目构建 ( webpack )相关代码 | | -- build .js / / 生产环境构建代码 | | -- check - version .js / / 检查 node、 npm等版本 | | -- dev - client .js / / 热重载相关 | | -- dev - server .js / / 构建本地服务器 | | -- utils .js / / 构建工具相关 | | -- webpack .base .conf .js / / webpack基础配置 | | -- webpack .dev .conf .js / / webpack开发环境配置 | | -- webpack .prod .conf .js / / webpack生产环境配置 | -- config / / 项目开发环境配置 | | -- dev .env .js / / 开发环境变量 | | -- index .js / / 项目一些配置变量 | | -- prod .env .js / / 生产环境变量 | | -- test .env .js / / 测试环境变量 | -- src / / 源码目录 | | -- components / / vue公共组件 | | -- store / / vuex的状态管理 | | -- App .vue /

node.js

北慕城南 提交于 2020-03-12 08:23:05
let express = require(“express”) let bodyParser = require(“body-parser”) let app = express() app.listen(3000) app.use(bodyParser()) let express = require(“express”) let bodyParser = require(“body-parser”) let bodyParser = require("./middleware/bdParser") let app = express()app.listen(3000) app.use(bodyParser.urlencoded({ })) app.use((req,res,next)=>{ }) app.post("/api/old",(req,res,next)=>{ console.log(req.body) res.end()}) 来源: CSDN 作者: jia109014 链接: https://blog.csdn.net/jia109014/article/details/104806896

前端常见跨域解决方案(全)

时间秒杀一切 提交于 2020-03-11 21:53:21
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 同源策略限制以下几种行为: 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www. domain.com/a.js http://www. domain.com/b.js 同一域名,不同文件或路径 允许 http://www. domain.com/lab