标签搜索
搜索到
142
篇与
的结果
-
去除右键菜单opendlg 未知文件类型，右键会多出一个opendlg的选项！下面是移除的方法：将下面的内容复制到记事本，并另存为XXX .reg,导入注册表即可！Windows Registry Editor Version 5.00 [-HKEY_CLASSES_ROOT\Unknown\shell\opendlg] [-HKEY_CLASSES_ROOT\Unknown\shell\opendlg\command] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\pintostartscreen] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\pintostartscreen\command] -
那些年忘掉的React 在长期使用Vue开发项目的我,渐渐忘记如何使用React!!React 是一个 Facebook 和 Instagram 用来创建用户界面（UI）的 JavaScript 库。很人多认为 React 是 MVC 中的V（图）。1.React项目的搭建!使用yeoman脚手架搭建npm install -g yeomannpm install -g genreator-react-webpack新建一个文件夹yo react-webpack启动项目 npm start项目到处搭建完成!React的使用state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。 2.PropsTypeReact组件创建的时候，需要传入属性，我们可以使用使用PropTypes进行类型检查，您可以使用React.PropTypes在组件的道具上运行。React.PropTypes.array React.PropTypes.bool React.PropTypes.func React.PropTypes.number React.PropTypes.object React.PropTypes.string React.PropTypes.symbol React.PropTypes.node React.PropTypes.element React.PropTypes.instanceOf() React.PropTypes.oneOf() React.PropTypes.oneOfType() React.PropTypes.arrayOf() React.PropTypes.objectOf() React.PropTypes.shape() React.PropTypes.any 默认情况下，验证器将props视为可选属性。您可以使用isRequired确保在未提供道具时显示警告。 React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本类型。默认 // 情况下，这些 prop 都是可传可不传的。 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 所有可以被渲染的对象：数字， // 字符串，DOM 元素或包含这些类型的数组。 optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定形状参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 以后任意类型加上 `isRequired` 来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接 // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } }, /* ... */ });或者（ES6） MyComponent.propTypes = { name:React.PropTypes.string };静态方法（属性）属于类级别的特征，所有实例都自动获取类级别的静态特征。React生命周期//用代码说明 class LifeCycle extends React.Component { constructor(props) { //React初始化 super(props); //调用父主件(constructor)构造器,就是继承constructor this.state = {str: "hello"};//定义初始状态 } componentWillMount() { //主件即将挂载阶段 alert("componentWillMount"); } componentDidMount() { //主件渲染完成 alert("componentDidMount"); } componentWillReceiveProps(nextProps) { //props发生变化时触发 alert("componentWillReceiveProps"); } shouldComponentUpdate() { //props和state变化后是否重新渲染主件 alert("shouldComponentUpdate"); return true; // 记得要返回true } componentWillUpdate() { //主件即将更新 alert("componentWillUpdate"); } componentDidUpdate() { //主件更新完成 alert("componentDidUpdate"); } componentWillUnmount() { //主件销毁阶段 alert("componentWillUnmount"); } setTheState() { let s = "hello"; if (this.state.str === s) { s = "HELLO"; } this.setState({ str: s }); } forceItUpdate() { this.forceUpdate(); } render() { //主件渲染阶段 alert("render"); return( <div> <span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span> <br /> <span>{"State:"}<h2>{this.state.str}</h2></span> </div> ); } } class Container extends React.Component { constructor(props) { super(props); this.state = { num: Math.random() * 100 }; } propsChange() { this.setState({ num: Math.random() * 100 }); } setLifeCycleState() { this.refs.rLifeCycle.setTheState(); } forceLifeCycleUpdate() { this.refs.rLifeCycle.forceItUpdate(); } unmountLifeCycle() { // 这里卸载父组件也会导致卸载子组件 React.unmountComponentAtNode(document.getElementById("container")); } parentForceUpdate() { this.forceUpdate(); } render() { return ( <div> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.propsChange.bind(this)}>propsChange</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.setLifeCycleState.bind(this)}>setState</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.unmountLifeCycle.bind(this)}>unmount</a> <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a> <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle> </div> ); } } ReactDom.render( <Container></Container>, document.getElementById('container') );
-
Webpack dev服务器代理 Webpack dev服务器利用http-proxy-middleware可选地将请求代理到单独的，可能是外部的后端服务器。示例配置如下。proxy: { '/api': { target: 'https://other-server.example.com', secure: false } } // In webpack.config.js { devServer: { proxy: { '/api': { target: 'https://other-server.example.com', secure: false } } } } // Multiple entry proxy: [ { context: ['/api-v1/**', '/api-v2/**'], target: 'https://other-server.example.com', secure: false } ]有关可用配置，请参阅http-proxy-middleware选项文档。代理一些URL可用于各种配置。一个例子是从本地开发服务器提供JavaScript文件和其他静态资源，但仍然向外部后端开发服务器发送API请求。另一个例子是在两个独立的后端服务器之间拆分请求，例如认证后端和应用程序后端。绕过代理（在v1.13.0中增加）代理可以根据函数的返回来选择性的绕过。该函数可以检查HTTP请求，响应和任何给定的代理选项。它必须返回一个false或者一个将被服务的URL路径，而不是继续代理请求。例如，下面的配置不会代理源自浏览器的HTTP请求。这与historyApiFallback选项类似：浏览器请求将正常接收HTML文件，但API请求将代理到后端服务器。proxy: { '/some/path': { target: 'https://other-server.example.com', secure: false, bypass: function(req, res, proxyOptions) { if (req.headers.accept.indexOf('html') !== -1) { console.log('Skipping proxy for browser request.'); return '/index.html'; } } } }重写代理请求的URL（在v1.15.0中增加）对代理的请求可以通过提供一个函数来选择性的重写。该功能可以检查和更改HTTP请求。例如，下面的配置将重写HTTP请求以删除/apiURL开头的部分。proxy: { '/api': { target: 'https://other-server.example.com', pathRewrite: {'^/api' : ''} } }请注意，这pathRewrite是来自http-proxy-middleware的一项功能，因此请查看他们的文档以获取更多配置。代理本地虚拟主机看起来，http-proxy-middleware预解析本地主机名localhost，你需要以下配置来修复代理请求：var server = new webpackDevServer(compiler, { quiet: false, stats: { colors: true }, proxy: { "/api": { "target": { "host": "action-js.dev", "protocol": 'http:', "port": 80 }, ignorePath: true, changeOrigin: true, secure: false } } }); server.listen(8080);
-
new Date() 兼容性问题 一. 无参//无参 var dateTime = new Date();所有浏览器都兼容，GOOD二. 日期参数//日期参数 格式1 var dateTime = new Date("2016-05-20");a. IE > IE9-（不兼容） > IE9+（兼容，包含IE9） b. 火狐（兼容）c. 谷歌 （兼容）//日期参数 格式2 var dateTime = new Date("2016/05/20");所有浏览器都兼容，GOOD三. 日期时间参数//日期时间参数 格式1 var dateTime = new Date("2016-05-20 23:41:00");a. IE （不兼容，不管哪个版本）b. 火狐 （不兼容）c. 谷歌 （兼容）//日期时间参数 格式2 var dateTime = new Date("2016/05/20 23:42:00");所有浏览器都兼容，GOOD//日期时间参数 格式3 var dateTime = new Date("2016-05-20T23:42:00");a. IE > IE9- （不兼容） > IE9+（兼容） > IE9（半兼容） 半兼容是个什么鬼？哈哈。 半兼容就是可以得到日期时间，但是时间是错误的。比如上面我们的时间是 23:42:00 。那么它会自动在此基础上加上8个小时，因此我们得到的 dateTime 的值将会是： 2016-05-21 07:42:00b. 火狐 （兼容）c. 谷歌 （半兼容）同IE9 时间多加了8小时//日期时间参数 格式4 var dateTime = new Date("2016/05/20T23:42:00");a. IE （半兼容） 所有版本时间都多加了 1 个小时，即得到的 dateTime 的值为： 2016-05-21 00:42:00b. 火狐 （不兼容）c. 谷歌 （不兼容）根据上面测试的结果，所有浏览器都支持的格式为： var dateTime = new Date("2016/05/20 23:42:00");
-
webpack开发和生产两个环境的配置 webpack.base.conf.jswebpack基本配置var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname, '../') var env = process.env.NODE_ENV // check env & config/index.js to decide whether to enable CSS source maps for the // various preprocessor loaders added to vue-loader at the end of this file var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) var useCssSourceMap = cssSourceMapDev || cssSourceMapProd // 配置文件的内容需要通过module.exports暴露 module.exports = { // 配置需要打包的入口文件，值可以是字符串、数组、对象。 // 1. 字符串： entry： './entry' // 2. 字符串： entry：[ './entry1','entry2'] (多入口) // 3. 对象： entry： {alert/index': path.resolve(pagesDir, `./alert/index/page`)} // 多入口书写的形式应为object，因为object,的key在webpack里相当于此入口的name, entry: { app: './src/main.js' }, output: { // 输出文件配置，output 输出有自己的一套规则，常用的参数基本就是这三个 // path: 表示生成文件的根目录 需要一个**绝对路径** path仅仅告诉Webpack结果存储在哪里 path: config.build.assetsRoot, // publicPath 参数表示的是一个URL 路径（指向生成文件的跟目录），用于生成css/js/图片/字体文件 // 等资源的路径以确保网页能正确地加载到这些资源. // “publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值. // 例如，在localhost（即本地开发模式）里的css文件中边你可能用“./test.png”这样的url来加载图片， // 但是在生产模式下“test.png”文件可能会定位到CDN上并且你的Node.js服务器可能是运行在HeroKu上边的。 // 这就意味着在生产环境你必须手动更新所有文件里的url为CDN的路径。 //开发环境：Server和图片都是在localhost（域名）下 //.image { // background-image: url('./test.png'); //} // 生产环境：Server部署下HeroKu但是图片在CDN上 //.image { // background-image: url('https://someCDN/test.png'); //} publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // filename 属性表示的是如何命名出来的入口文件，规则是一下三种： // [name] 指代入口文件的name，也就是上面提到的entry参数的key，因此，我们可以在name里利用/，即可达到控制文件目录结构的效果。 // [hash]，指代本次编译的一个hash版本，值得注意的是，只要是在同一次编译过程中生成的文件，这个[hash].js //的值就是一样的；在缓存的层面来说，相当于一次全量的替换。 filename: '[name].js' }, // 用来配置依赖文件的匹配，如依赖文件的别名配置、模块的查找目录、默认查找的 // 文件后缀名 // resolve.root 该选型用来制定模块查找的根路径，必须为**绝对路径**，值可以 // 是路径字符串或者路径数组若是数组，则会依次查找 resolve: { extensions: ['', '.js', '.vue', '.json'], fallback: [path.join(__dirname, '../node_modules')], // 用来配置依赖文件的别名，值是一个对，该对象的键是别名，值是实际路径 alias: { 'vue$': 'vue/dist/vue.common.js', 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components') } }, resolveLoader: { fallback: [path.join(__dirname, '../node_modules')] }, // 用来进行模块加载相关的配置 module: { preLoaders: [ { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ } ], loaders: [ // webpack拥有一个类似于插件的机制，名为Loader，通过Loader，webpack能够针对每一种特定的资源做出相应的处理 // 1.test参数用来指示当前配置项针对哪些资源，该值应是一个条件值(condition)。 // 2.exclude参数用来剔除掉需要忽略的资源，该值应是一个条件值(condition)。 // 3.include参数用来表示本loader配置仅针对哪些目录/文件，该值应是一个条件值(condition)。 // 而include参数则用来指示目录；注意同时使用这两者的时候，实际上是and的关系。 // 4.loader/loaders参数，用来指示用哪个或哪些loader来处理目标资源，这俩货 // 表达的其实是一个意思，只是写法不一样，我个人推荐用loader写成一行，多个 // loader间使用!分割，这种形式类似于管道的概念，又或者说是函数式编程。形 // 如loader: 'css?!postcss!less'，可以很明显地看出，目标资源先经less-loader // 处理过后将结果交给postcss-loader作进一步处理，然后最后再交给css-loader。 { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ }, { test: /\.json$/, loader: 'json' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }, // expose-loader，这个loader的作用是，将指定js模块export的变量声明为全局变量 { test: require.resolve('jquery'), // 此loader配置项的目标是NPM中的jquery loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$` }, ] }, eslint: { formatter: require('eslint-friendly-formatter') }, vue: { loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), // 解决.vue中文件style的部分一些特性解析，比如scoped postcss: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] } }webpack.dev.conf.jsvar config = require('../config') var webpack = require('webpack') var merge = require('webpack-merge') var utils = require('./utils') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') // add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) module.exports = merge(baseWebpackConfig, { module: { loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // eval-source-map is faster for development devtool: '#eval-source-map', plugins: [ // DefinePlugin 是webpack 的内置插件，该插件可以在打包时候替换制定的变量 // new webpack.DefinePlugin({ 'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // 可以自动加载当前模块依赖的其他模块并已制定别名注入到当前的模块中，引入jq // 在网上看到的文章，救了我的命 ProvidePlugin + expose-loader 引入jq // // 如果你把jQuery看做是一个普通的js模块来加载（要用到jQuery的模块统统先require // 后再使用），那么，当你加载老式jQuery插件时，往往会提示找不到jQuery实例 // 有时候是提示找不到$），这是为啥呢？ // 要解释这个问题，就必须先稍微解释一下jQuery插件的机制：jQuery插件是通过 // jQuery提供的jQuery.fn.extend(object)和jQuery.extend(object)这俩方法，来 // 把插件本身实现的方法挂载到jQuery（也即$）这个对象上的。传统引用jQuery及 // 其插件的方式是先用<script>加载jQuery本身，然后再用同样的方法来加载其插件； // jQuery会把jQuery对象设置为全局变量（当然也包括了$），既然是全局变量，那么 // 插件们很容易就能找到jQuery对象并挂载自身的方法了。 // // 而webpack作为一个遵从模块化原则的构建工具，自然是要把各模块的上下文环境给 // 分隔开以减少相互间的影响；而jQuery也早已适配了AMD/CMD等加载方式，换句话说， // 我们在require jQuery的时候，实际上并不会把jQuery对象设置为全局变量。说到 // 这里，问题也很明显了，jQuery插件们找不到jQuery对象了，因为在它们各自的上下 // 文环境里，既没有局部变量jQuery（因为没有适配AMD/CMD，所以就没有相应的requi // re语句了），也没有全局变量jQuery。 // // A: ProvidePlugin的机制是：当webpack加载到某个js模块里，出现了未定义且名称符合 // （字符串完全匹配）配置中key的变量时，会自动require配置中value所指定的js模块 // expose-loader，这个loader的作用是，将指定js模块export的变量声明为全局变量。 // // B:externals 调用jq // externals是webpack配置中的一项，用来将某个全局变量“伪装”成某个js模块的exports， // 如下面这个配置： // externals: {'jquery': 'window.jQuery',}, // 那么，当某个js模块显式地调用var $ = require('jquery')的时候，就会把window, // jQuery返回给它,与上述ProvidePlugin + expose-loader的方案相反，此方案是先用 // <script>加载的jQuery满足老式jQuery插件的需要，再通过externals将其转换成符合 // 模块化要求的exports。 new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", 'window.$': 'jquery', }) ] })webpack.prod.conf.jsvar path = require('path') var config = require('../config') var utils = require('./utils') var webpack = require('webpack') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var ExtractTextPlugin = require('extract-text-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var env = config.build.env var webpackConfig = merge(baseWebpackConfig, { module: { loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, vue: { loaders: utils.cssLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, // webpack插件位置，有固定的用法 // 1. 利用Plugin的初始方法并传入Plugin预设的参数进行初始化，生成一个实例。 // 2. 将此实例插入到webpack配置文件中的plugins参数（数组类型）里即可。 // // 1. plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurrenceOrderPlugin(), // extract css into its own file new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ // filename 生成网页的HTML名字，可以使用/来控制文件文件的目录结构，最 // 终生成的路径是基于webpac配置的output.path的 filename: config.build.index, template: 'index.html', inject: true, // inject，指示把加载js文件用的<script>插入到哪里，默认是插到<body> // 的末端，如果设置为'head'，则把<script>插入到<head>里。 minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // 如果文件是多入口的文件，可能存在，重复代码，把公共代码提取出来，又不会重复下载公共代码了 // （多个页面间会共享此文件的缓存） // CommonsChunkPlugin的初始化常用参数有解析？ // name: 这个给公共代码的chunk唯一的标识 // filename，如何命名打包后生产的js文件，也是可以用上[name]、[hash]、[chunkhash] // minChunks，公共代码的判断标准：某个js模块被多少个chunk加载了才算是公共代码 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) ] }) if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) } module.exports = webpackConfig
-
本地模糊搜素数据处理 /** * * 拼音检索 * * query @param {String} 用户输入 * dataSource @param {Array} 数据源 * options @param {Array} 修改数据源 * @returns 修改数据源 */ var py = require('../util/pinyin.js'); const searchQuery =function(query,dataSource){ if(query && query.constructor !== String) return; if(query==null){ query = ""; } let options = dataSource; if (query !== "") { let PinYin = py.convertPYs(query)[0]; let simplePY = py.convertPYs(query)[1]; let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g"); if (reg.test(query)) {//判断是汉字录入 let Arr = options.filter((option) => { if (option.label.indexOf(query) > -1) {//返回匹配的汉字 return option; } }) return Arr.length > 0 ? [...Arr] : []; } else {//输入的是拼音 let Arr = options.filter((option) => { if (PinYin.toUpperCase() === option.pinyin.toUpperCase() ||//判断全拼音相等 simplePY.toUpperCase() === option.py.toUpperCase() || //判断简拼相等 option.py.toUpperCase().indexOf(simplePY.toUpperCase()) > -1 ||//全拼音包含 option.pinyin.toUpperCase().indexOf(PinYin.toUpperCase()) > -1) {//简拼包含 return option; } else { return "" } }) return Arr.length > 0 ? [...Arr] : []; } } else { return dataSource; } } export {searchQuery}
-
解决Vue开发环境跨域问题 当将这个样板与现有后端集成时，通常需要在使用开发服务器时访问后端API。为此，我们可以并行（或远程）运行开发服务器和API后端，并让开发服务器将所有API请求代理到实际的后端。要配置代理规则，请在中编辑dev.proxyTable选项config/index.js。开发服务器正在使用http-proxy-middleware进行代理，因此您应该参阅其文档以获取详细的用法。但是这里有一个简单的例子：// config/index.js module.exports = { // ... dev: { proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }上面的示例将代理请求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1。网址匹配除了静态URL之外，您还可以使用glob模式来匹配URL，例如/api/**。请参阅上下文匹配以获取更多详细信 另外，您可以提供一个filter可以是自定义函数的选项，以确定是否应该代理请求：proxyTable: { '**': { target: 'http://jsonplaceholder.typicode.com', filter: function (pathname, req) { return pathname.match('^/api') && req.method === 'GET' } } }详情访问var remote = {target: 'http://umeqy.com:1700',changeOrigin: true} proxyTable: { '/Home': remote, '/Account': remote, '/Sys': remote, '/Basis': remote, '/Plan': remote, '/PriceSystem': remote, '/Receipt': remote, '/Quota': remote, '/Common': remote, '/Contract': remote, '/Waybill': remote, '/Device': remote, '/Permit': remote, '/Other': remote, '/Freight': remote },
-
14 个你可能不知道的 JavaScript 调试技巧 协作翻译原文：The 14 JavaScript debugging tips you probably didn't know链接：https://raygun.com/javascript-debugging-tips译者：暖冰, 边城, 无若, 王练了解你的工具可以极大的帮助你完成任务。尽管 JavaScript 的调试非常麻烦，但在掌握了技巧 (tricks) 的情况下，你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bugs) 。我们会列出14个你可能不知道的调试技巧, 但是一旦知道了，你就会迫不及待的想在下次需要调试 JavaScript 代码的时候使用它们！现在开始。虽然许多技巧也可以用在别的检查工具上，但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。‘debugger;’‘debugger’ 是 console.log 之外我最喜欢的调试工具，简单暴力。只要把它写到代码里，Chrome 运行的时候就会自动自动停在那。你甚至可以用条件语句把它包裹起来，这样就可以在需要的时候才执行它。把 objects 输出成表格有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出出来，你也可以用 console.table 语句把它们直接输出为一个表格！输出结果:试遍所有的尺寸虽然把各种各样的手机都摆在桌子上看起来很酷，但这却很不现实。为什么不选择直接调整界面大小呢? Chrome 浏览器提供了你所需要的一切。 进入检查面板点击 ‘切换设备模式’ 按钮，这样你就可以调整视窗的大小了！如何快速定位 DOM 元素在元素面板上标记一个 DOM 元素并在 concole 中使用它。Chrome Inspector 的历史记录保存最近的五个元素，最后被标记的元素记为 $0，倒数第二个被标记的记为 $1，以此类推。如果你像下面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中获取到 DOM 节点:用 console.time() 和 console.timeEnd() 测试循环耗时当你想知道某些代码的执行时间的时候这个工具将会非常有用，特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。demo 如下:运行结果:6.获取函数的堆栈轨迹信息你可能知道 JavaScript 框架会产生很多的代码--迅速的。它创建视图触发事件而且你最终会想知道函数调用是怎么发生的。因为 JavaScript 不是一个很结构化的语言，有时候很难完整的了解到底发生了什么以及什么时候发生的。 这个时候就轮到 console.trace（在终端的话就只有 trace ）出场来调试 JavaScript了 。假设你现在想看 car 实例在第33行调用 funcZ 函数的完整堆栈轨迹信息:第33行会输出:你可以看到func1调用了func2, func2又调用了func4。Func4 创建了Car的实例，然后调用了方法car.funcX，等等。尽管你感觉你对自己的脚本代码非常了解，这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的，你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。格式化代码使调试 JavaScript 变得容易有时候你发现产品有一个问题，而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。快速找到调试函数来看看怎么在函数中设置断点。通常情况下有两种方法：在查看器中找到某行代码并在此添加断点在脚本中添加 debugger这两种方法都必须在文件中找到需要调试的那一行。使用控制台是不太常见的方法。在控制台中使用 debug(funcName)，代码会在停止在进入这里指定的函数时。这个操作很快，但它不能用于局部函数或匿名函数。不过如果不是这两种情况下，这可能是调试函数最快的方法。（注意：这里并不是在调用 console.debug 函数）。在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候停止运行：屏蔽不相关代码如今，经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此阅读更多关于调试不相关代码（http://raygun.com/blog/javascript-debugging-with-black-box/）。在复杂的调试过程中寻找重点在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制台中快速浏览。但有时候，某些JavaScrip调试信息并不是你需要的。现在，可以自己美化调试信息了。在调试JavaScript时，可以使用CSS并自定义控制台信息：console.todo = function(msg) {console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);}console.important = function(msg) {console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);}console.todo(“This is something that’ s need to be fixed”);console.important(‘This is an important message’);输出：例如：在console.log()中， 可以用%s设置字符串，%i设置数字，%c设置自定义样式等等，还有很多更好的console.log()使用方法。 如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥你的想象力！查看具体的函数调用和它的参数在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。然后输出：这是查看将哪些参数传递到函数的一种很好的方法。但我必须说，如果控制台能够告诉我们需要多少参数，那就好了。在上面的例子中，函数1期望3个参数，但是只有2个参数被传入。如果代码没有在代码中处理，它可能会导致一个 bug 。在控制台中快速访问元素在控制台中执行 querySelector 一种更快的方法是使用美元符。$(‘css-selector’) 将会返回第一个匹配的 CSS 选择器。$$(‘css-selector’) 将会返回所有。如果你使用一个元素超过一次，它就值得被作为一个变量。Postman 很棒（但 Firefox 更快）很多开发人员都使用 Postman 来处理 Ajax 请求。Postman 真不错，但每次都需要打开新的浏览器窗口，新写一个请求对象来测试。这确实有点儿烦人。有时候直接使用在用的浏览器会更容易。这样的话，如果你想请求一个通过密码保证安全的页面时，就不再需要担心验证 Cookie 的问题。这就是 Firefox 中编辑并重新发送请求的方式。打开探查器并进入网络页面，右键单击要处理的请求，选择编辑并重新发送。现在你想怎么改就怎么改。可以修改头信息，也可以编辑参数，然后点击重新发送即可。现在我发送了两次同一个请求，但使用了不同的参数：节点变化时中断DOM 是个有趣的东西。有时候它发生了变化，但你却并不知道为什么会这样。不过，如果你需要调试 JavaScript，Chrome 可以在 DOM 元素发生变化的时候暂停处理。你甚至可以监控它的属性。在 Chrome 探查器上，右键点击某个元素，并选择中断（Break on）选项来使用：
-
HTML5语义化标签 简短、描述性、唯一（提升搜索引擎排名）。搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。 ：h1~h6分级标题，用于创建页面信息的层级关系。 对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1。页眉通常包括网站标志、主导航、全站链接以及搜索框。 也适合对页面内部一组介绍性或导航性内容进行标记。标记导航，仅对文档中重要的链接群使用。 html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。 article可以嵌套article，只要里面的article与外面的是部分与整体的关系。具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。 如果只是为了添加样式，请用div！指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。 如果放在main内，应该与所在内容密切相关。页脚，只有当父级是body时，才是整个页面的页脚。指定细则，输入免责声明、注解、署名、版权。 只适用于短语，不要用来标记“使用条款”、“隐私政策”等长的法律声明。表示内容重要性。标记内容着重点（大量用于提升段落文本语义）。突出显示文本（yellow），提醒读者。 在HTML5中em是表示强调的唯一元素，而strong则表示重要程度。出于实用目的提醒读者的一块文字，不传达任何额外的重要性不同于其他文字的文字= =|||这个翻译真的是······创建图（默认有40px左右margin）。：figure的标题，必须是figure内嵌的第一个或者最后一个元素。指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。只用于参考源本身，而不是从中引述。：引述文本，默认新的一行显示。：短的引述（跨浏览器问题，尽量避免使用）。可以对blockquoto和q元素使用cite属性（不是cite元素！），对搜索引擎自动化工具有用。cite=“URL”引述来源地址。标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。 不再相关的时间用s标签。解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。abbr[title]{ border-bottom:1px dotted #000; }定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。 如果提供整个页面的作者联系信息，一般放在页面级footer里。不能包含文档或者文档等其他内容。移除的内容。 添加的内容。 少有的既可以包围块级，又可以包围短语内容的元素。 标记代码。包含示例代码或者文件名 pre预格式化文本。保留文本固有的换行和空格。 表示分数的值或者已知范围的测量结果。如投票结果。 例如：20%completed 完成进度。可通过js动态更新value。
-
时间格式化 const newDate = str => { if (str === null) return null; if (str === undefined) return new Date(); if (str.constructor != String) return new Date(str); let $ = str.match(/^\s*(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)\s*$/); return $ && new Date($[1], $[2] - 1, $[3], $[4], $[5], $[6]) || new Date(str); } /** * * 格式化时间 * * @param {String} str * @param {String} fmt "yyyy-MM-dd hh:mm:ss" "yyyy-MM-dd" * @returns 格式化后的时间 */ const formatDate = (str, fmt) => { if (!Boolean(str)) { return "" } const now = newDate(str); let o = { "M+": now.getMonth() + 1, //月份 "d+": now.getDate(), //日 "h+": now.getHours(), //小时 "m+": now.getMinutes(), //分 "s+": now.getSeconds(), //秒 "q+": Math.floor((now.getMonth() + 3) / 3), //季度 "S": now.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (now.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (let k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } export { formatDate, newDate }
